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