Actually 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 } = wp.components;
// 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 = wp.components.PanelBody;
// in edit() method
wp.element.createElement(
InspectorControls,
null,
wp.element.createElement(PanelBody, {
title: __('Panel Title'),
initialOpen: true
})
);
Related Posts:
- How to trigger JS in gutenberg page load
- Gutenberg: Block validation failed
- Change order/position of Gutenberg inspector control panel
- Gutenberg Inspector Controls
- serialize_blocks breaking html tags in content
- How to use getBlockIndex
- How to disallow a certain custom gutenberg block outside of an InnerBlocks block?
- Gutenberg withInstanceId. When to use it?
- Wrapping Gutenberg Blocks with a div/section/article
- How to access parent block’s attributes in nested block’s save function?
- Gutenberg Default attributes are empty
- Group block without inner wrapper
- WordPress Gutenberg Columns block
- How to stop Gutenberg injecting inline font styles
- How to get Gutenberg Gallery Block to output thumbnail images?
- Change list of allowed headline levels in Gutenberg
- srcset attribute in Gutenberg gallery blocks
- How can I add arbitrary `data-` attributes to a block’s `edit()` container?
- Gutenburg InnerBlock single child
- WordPress-gutenberg – Block validation: Expected text
- Does `viewScript` in `block.json` actually enqueue a js file?
- 404 in gutenberg autosave of a Custom Post Type with custom rest_namespace
- Notices in the Block Editor with multiple lines
- Replication of core column block produces different markup
- How to change the Default block in the block-editor away from the paragraph block?
- Create RangeControl in gutenberg Block
- Where are the layout defaults in Twenty Twenty Two coming from?
- How to Disable auto id attributes in Heading tag?
- Gutenberg: how to hide server side render output in the editor but keep it in frontend?
- How to Get a List of Formats of a Block?
- Remove a plugin from the Gutenberg sidebar
- Gutenberg how to save to post meta?
- How to get current post id in Gutenberg Block save function?
- Gutenberg: dynamic block ToggleControl error in saving
- How to limit the selection of the first level block in Gutenberg editor
- disable gutemberg welcome message
- Gutenberg TextareaControl escapes html
- props.setAttributes results in “Maximum update depth exceeded.”
- How can I programmatically select a Gutenberg block?
- Clipboard processing in Gutenburg
- Gutenberg: Dynamic rendering of RichText
- Block Controls not showing
- Gutenberg and FSE: How to exclude a block from full site editing
- Disable only one Gutenberg block programatically / coblock/maps not listed in blocks
- How to select block variation from BlockVariationPicker
- WordPress Full Site Editing: How can I access my posts listing page?
- Editable button with RichText for Gutenberg custom block
- How Do I Prevent An Image From Automatically Adjusting In Guttenberg Block Gallery?
- How to reload data stored for a sever side gutenberg block in the editor
- Using wp_set_script_translations without manually registering the script
- How to remove the old “Custom CSS” from customizer after the theme has been migrated to Gutenberg FSE
- Why am I getting the error: Cannot update a component (`Unknown`) while rendering a different component (`Edit`)?
- Update number of posts when attribute changed
- Connect WordPress and react front-end
- Gutenberg editor auto remove wrapping tags like
- Setting fontSize within core/heading
- Unable to edit server side rendered block
- WordPress Dynamic Block with multiple checkboxes
- Embedded block editor in block editor
- useSelect in block Edit always returns default store value
- Count Gutenberg blocks on the front-end?
- How to call a react hook on edit of registerBlockType?
- Upgraded to wordpress 5.7 and now I can’t select myself as a post author
- Why does the paragraph block automatically add class?
- How can I block embeds and show an individual preview image per block?
- add arrow icon next to read more link on latest posts gutenberg block
- Create a trailing block with programatically generated Gutenberg columns
- How to make attributes unique to Gutenberg blocks
- How to check title is being entered in Title Case?
- Gutenberg link of internal page not showing
- How do I trigger the sidebar reveal for my sidebar plugin in the Gutenberg editor?
- Create Gutenburg Block to render inline SVG
- How to open WordPress media create/edit Gallery Dialog
- Gutenberg blocks not full width
- How to extend the URLPopover render settings for the paragraph Gutenberg block?
- Custom Image Gutenberg Block With Caption
- How to make a block similar to another block
- Gutenberg: How to enqueue scripts conditionally in render_callback by checking for an attribute?
- How can I reintroduce autocompletion of Gutenberg components in Visual Code?
- Blocks – any way to have editor honor width percentages on child blocks?
- Using `esc_attr( get_block_wrapper_attributes() )`, results in `class=””wp-block-foo””`
- How to register multiple blocks
- How to edit post meta by post ID in Gutenberg
- How to generate WordPress core blocks markup programmatically?
- How do I change bullet on categories block?
- Add a class to img of core/cover block
- Hide title block on edit screen in Gutenberg
- How can I disable fontSizes of the Paragraph block inside the Quote block with theme.json?
- Categories, tags and thumbnails panels are not visible in the Block editor’s post menu
- How to translate multiple blocks within one plugin
- How to disable the Code Editor in Gutenberg?
- How to self host fonts and have them show up in all the Full Site Block Editor Typography options, including global styling
- Enable Gutenberg Editor when editing tags
- How to position more than one item over an image in a Gutenberg WordPress block theme
- Some CSS classes missing when rendering the page with get_the_content()
- Error with RichText Component
- Rem font size is different in the frontend and block editor
- Add to Media Inserter Categories
- Get attributes from last block created
- How do I make the block editor use https by default?