Hey visitors! If you're a beginner in WordPress and WP-CLI development, then you should check out my dear friend Bhargav's Youtube channel! @BuntyWP

All about panels in Gutenberg Editor

by Siddharth Thevaril

Default panels in WordPress

…and the few ways to interact with them.

Gutenberg, through the core/edit-post data store provides few API methods to interact with default panels.

There’s one more panel called “Page Attributes” missing in the image above, because it is only available under the Page post type.

Ways to interact

You can interact with the panels in the following ways:

  1. Check if a panel is open – isEditorPanelOpened()
  2. Check if a panel is enabled – isEditorPanelEnabled()
  3. Check if a panel is removed – isEditorPanelRemoved()

  1. Open/Close a panel – toggleEditorPanelOpened()
  2. Enable/Disable a panel – toggleEditorPanelEnabled()
  3. Remove a panel – removeEditorPanel()

Each API method requires an argument to identify a panel. Following is a table of identifiers for each panel.

Featured imagefeatured-image
Gutenberg’s Panel/Identifier table.

Difference between removing and disabling a panel

When you remove a panel using removeEditorPanel(), it is only removed from the UI. Reloading the page will bring the panel back.

Remove the featured image panel by running the following in developer console:

wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'featured-image' );Code language: JavaScript (javascript)

and observe that the featured image panel is removed from the sidebar. Now, reload the page and observe that the panel is back.

When you disable a panel, it gets persisted into the user meta table for that particular user under the meta key wp_persisted_preferences.

Open up the console again and run:

wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled( 'featured-image' );Code language: JavaScript (javascript)

Reload the page again and observe that the featured image panel does not render again. Run the command again to render (enable) the panel again.


wp.data.select( 'core/edit-post' ).isEditorPanelOpened( 'featured-image' );

wp.data.select( 'core/edit-post' ).isEditorPanelEnabled( 'featured-image' );

wp.data.select( 'core/edit-post' ).isEditorPanelRemoved( 'featured-image' );

wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled( 'featured-image' );

wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'featured-image' );

wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'featured-image' );
Code language: JavaScript (javascript)
Subscribe to the Newsletter
Subscribe to get my latest content by email.

Leave a Reply