Attributes

Custom JavaScript components designed to store and manage Gutenberg block attributes. You can use components in the:

1. InspectorControls

index.js

import { __ } from '@wordpress/i18n';

import {
	InspectorControls,
} from '@wordpress/block-editor';

import {
	PanelBody,
} from '@wordpress/components';

Settings Tab

index.js | edit()

<InspectorControls>
	<PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	</PanelBody>
</InspectorControls>

Styles Tab

index.js | edit()

<InspectorControls group="styles">
	<PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	</PanelBody>
</InspectorControls>

Controls:

• Checkbox

• Color

• ColorGradient

• Icon

• Media

• PostType

• PostTypeMultiple

• Radio

• Range

• Select

• Taxonomy

• TaxonomyMultiple

• Text

• Textarea

• Toggle

2. BlockControls

index.js

import { __ } from '@wordpress/i18n';

import {
	BlockControls,
} from '@wordpress/block-editor';

index.js | edit()

<BlockControls>
...
</BlockControls>

Controls:

• ToolbarButton

• ToolbarGroup