Hacking and modifying Gutenberg Editor

Panel, Sidebar, Complementary Areas and Slots

I tried to disabled sidebar in Greenshift plugin, but I didn’t succeed :(

My use case was me trying to remove additional panels from sidebar, in Plugin subgroup, for plugin GreenShift. I couldn’t do that using CSS as there were no specific classes to target exactly those entities.

First I needed to discover the names of panels and sidebars:

Discover list of all panels:

wp.data.select(‘core/edit-post’).getPreferences().panels;

Sidebar names I’ve discovered by openin a panel and executing:

wp.data.select(‘core/edit-post’).getActiveGeneralSidebarName()

So, I’ve got:

1. greenshift-customsidebarpost/greenShift-custom-settings
2. greenshift-sidebarposttemplates/greenShift-custom-settings

What are: Complementary Areas

@wordpress/interface | Block Editor Handbook | WordPress Developer Resources

Woow:

https://css-tricks.com/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin/

wp.data.dispatch(‘core/editor’).editPost({title: ‘My new title’})

dobar izvor: https://javascriptforwp.com/wordpress-plugin-sidebar-api-tutorial/

otvoris i dobiješ:

wp.data.dispatch(‘core/edit-post’).openGeneralSidebar( ‘greenshift-customsidebarpost/greenShift-custom-settings’ ); wp.data.dispatch(‘core/edit-post’).openGeneralSidebar( ‘greenshift-sidebarposttemplates/greenShift-custom-settings’ );

https://wholesomecode.ltd/create-a-custom-sidebar-with-pluginsidebar Solidan primer: https://gist.github.com/seb86/2e2c45c644df41fd2b09a07e5169c177

A tu je i

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interface/#pinned-items

Also works: wp.data.dispatch( ‘core/interface’ ).unpinItem( ‘core/edit-post’, ‘greenshift-sidebarposttemplates/greenShift-custom-settings’ );

wp.data.dispatch( ‘core/interface’ ).disableComplementaryArea( ‘core/edit-post’ );

wp.data.select(‘core/interface’).getActiveComplementaryArea(‘core/edit-post’); “greenshift-customsidebarpost/greenShift-custom-settings”

wp.data.dispatch( ‘core/interface’ ).disableComplementaryArea( ‘greenshift-customsidebarpost/greenShift-custom-settings’ );

And then

wp.data.dispatch( ‘core/edit-post’).removeEditorPanel( ‘greenshift-sidebarposttemplates’ ) ali to ništa ne radi

a ima i wp.data.select( ‘core/preferences’ )

Everything is in local storage.

wp.data.select(“core/interface”).getActiveComplementaryArea(“core/edit-post”);

wp.data.select(“core/interface”).getActiveComplementaryArea(“core/edit-post”); wp.data.dispatch(“core/interface”).disableComplementaryArea(“core/edit-post”);

wp.data.select(“core/interface”).getActiveComplementaryArea(“core/edit-post”);

https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-more-menu-item/ “core/edit-post/plugin-more-menu”

ali ništa od toga

wp.data.dispatch(“core/edit-post”).disableComplementaryArea(“plugin-more-menu”);

Možeš nešto ovako posle loadovanja, ali nema veze sa ovim:

const isSidebarOpened = wp.data.select( ‘core/edit-post’ ).isEditorSidebarOpened();

if ( !isSidebarOpened ) { wp.data.dispatch( ‘core/edit-post’ ).openGeneralSidebar(); }

isListViewOpened setIsListViewOpened

Some examples of customization:

Gutenberg Archives - Sal Ferrarello

Enable, Read, and Write Post Meta in WordPress Gutenberg - Sal Ferrarello WordPress Gutenberg Notice in JavaScript - Sal Ferrarello WordPress View Block Attributes Gutenberg JS - Sal Ferrarello WordPress Gutenberg import versus Destructuring Global wp - Sal Ferrarello WordPress Gutenberg Functional Component useState - Sal Ferrarello WordPress Gutenberg Trigger Autosave Manually Trigger WordPress Heartbeat from Browser - Sal Ferrarello Display Keyboard Shortcut in WordPress Gutenberg - Sal Ferrarello Add Gutenberg JavaScript Filter How to Close and Re-Open WordPress Gutenberg Sidebar Change Render Size of Featured Image in WordPress Gutenberg Block Editor Featured Image Label for WordPress