How to add custom settings in the side panel that shows when a block is active? For example Paragraph block has "Text Settings" and "Custom Size" options, how can I add options to my custom block?
This tutorial: /, says to use InspectorControls however that appears to be deprecated and does not work.
Here's what I have so far:
( function( blocks, i18n, element ) {
var el = element.createElement;
var __ = i18n.__;
var ServerSideRender = window.wpponents.ServerSideRender;
blocks.registerBlockType( 'my-block/block', {
title: __( 'My Block', 'my-block' ),
icon: 'welcome-widgets-menus',
category: 'widgets',
attributes : {},
edit: function( props ) {
return [
el( ServerSideRender, {
block: "my-block/block",
attributes: props.attributes
} )
];
},
save: function() {
return null;
},
} );
}(
window.wp.blocks,
window.wp.i18n,
window.wp.element
) );
Thank you!
How to add custom settings in the side panel that shows when a block is active? For example Paragraph block has "Text Settings" and "Custom Size" options, how can I add options to my custom block?
This tutorial: https://wordpress/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector/, says to use InspectorControls however that appears to be deprecated and does not work.
Here's what I have so far:
( function( blocks, i18n, element ) {
var el = element.createElement;
var __ = i18n.__;
var ServerSideRender = window.wpponents.ServerSideRender;
blocks.registerBlockType( 'my-block/block', {
title: __( 'My Block', 'my-block' ),
icon: 'welcome-widgets-menus',
category: 'widgets',
attributes : {},
edit: function( props ) {
return [
el( ServerSideRender, {
block: "my-block/block",
attributes: props.attributes
} )
];
},
save: function() {
return null;
},
} );
}(
window.wp.blocks,
window.wp.i18n,
window.wp.element
) );
Thank you!
Share Improve this question asked Jan 26, 2019 at 22:42 user382738user382738 1631 gold badge1 silver badge4 bronze badges2 Answers
Reset to default 8Actually InspectorControls is not deprecated. It's been moved to another namespace or under a different object, which is wp.editor. So the latest way of adding controls in side panel is the following (in JSX) -
// Destruct components
// Place at the top of the block file
const { InspectorControls } = wp.editor;
const { PanelBody } = wpponents;
// in edit() method
<InspectorControls>
<PanelBody
title={__('Panel Title')}
initialOpen={true}
>
{/* Panel items goes here */}
</PanelBody>
</InspectorControls>
Update (example in pure JS):
var InspectorControls = wp.editor.InspectorControls;
var PanelBody = wpponents.PanelBody;
// in edit() method
wp.element.createElement(
InspectorControls,
null,
wp.element.createElement(PanelBody, {
title: __('Panel Title'),
initialOpen: true
})
);
First you need to import the components
const { InspectorControls } = wp.editor;
const { PanelBody } = wpponents;
and then inside the edit function you need to place the InspectorControls like this -
<InspectorControls>
<PanelBody title={ __( 'Settings One' ) }>
</PanelBody>
<PanelBody title={ __( 'Settings Two' ) }>
</PanelBody>
<PanelBody title={ __( 'Settings Three' ) >
</PanelBody>
</InspectorControls>
And you have three setting panel. Here's another example -
isSelected && (
<InspectorControls key= { 'inspector' } >
<PanelBody>
<RangeControl
label= { __('Title Size', 'tar') }
value= { textSize }
min= '25'
max= '50'
onChange={ (set) => setAttributes({ textSize : set }) }
/>
<PanelColorSettings
title={ __('Title Color', 'tar') }
colorSettings= { [
{
value: textColor,
onChange: (colorValue) => setAttributes ( { textColor: colorValue } ),
label: __('Color', 'tar'),
},
] }
/>
<PanelColorSettings
title={ __('Background Color', 'tar') }
colorSettings= { [
{
value: bgColor,
onChange: (colorValue) => setAttributes ( { bgColor: colorValue } ),
label: __('Color', 'tar'),
},
] }
/>
</PanelBody>
</InspectorControls>
),
Noticed the isSelected props? This means the block sidebar settings will shown ONLY when you click on the block. I hope this helps.