Gutenberg: How to display an unpinned plugin sidebar?

[erikjoling]

I registered a plugin sidebar following the tutorial.

Now I unpinned it in the user interface using the star symbol. How do I get the sidebar back?

[Martins-Cudars]

Same issue here. If the sidebar name is changed, then it appears, but that's a brand new sidebar. Where in database this setting is stored ?

[preventdefault]

Hi,
you can register a menu-item for each sidebar plugin with the following code:

<Fragment>
<PluginSidebarMoreMenuItem
        target="your-sidebar-plugin"
        icon="your-icon">
        Your Sidebar Plugin
</PluginSidebarMoreMenuItem>
<PluginSidebar ...>
...
</PluginSidebar>
</Fragment>

After that, you can access this sidebar through the "More Menu".

Hope it helps.

[erikjoling]

Thank you. Unfortunately this way of coding is different from the tutorial.

Could you give a full code example? With dependancies and the call to registerPlugin?

[preventdefault]

Hi,
here is an almost complete example (written in ES6):

const { Fragment } = wp.element;
const { registerPlugin } = wp.plugins;
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
const { PanelRow, PanelBody, ToggleControl } = wp.components;
const { withSelect, withDispatch } = wp.data;
const { compose } = wp.compose;

function MySidebarPlugin( props ) {
  const {
    myPostMetaKey,
    updateMyPostMetaKey
  } = props;

  return (
    <Fragment>
      <PluginSidebarMoreMenuItem
        target="my-sidebar-plugin"
        icon="hammer">
        mySidebarPlugin
      </PluginSidebarMoreMenuItem>
      <PluginSidebar
        name="my-sidebar-plugin"
        icon="hammer"
        title="My sidebar plugin"
      >
        <PanelBody opened={true} className="opened-panel-body" title="My postmeta panel">
          <PanelRow>
            <ToggleControl
              label="My post meta key toggle"
              checked={ myPostMetaKey }
              onChange={ updateMyPostMetaKey }
            />
          </PanelRow>
        </PanelBody>
      </PluginSidebar>
    </Fragment>
  );
}

const applyWithSelect = withSelect( select => {
  const { getEditedPostAttribute } = select( 'core/editor' );
  const {
    my_post_meta_key: myPostMetaKey
  } = getEditedPostAttribute( 'meta' );

  return {
    myPostMetaKey
  }
} );

const applyWithDispatch = withDispatch( dispatch => {
  const { editPost } = dispatch( 'core/editor' );

  return {
    updateMyPostMetaKey( value ) {
      editPost( { meta: { my_post_meta_key: value } } );
    }
  };
} );

registerPlugin( 'my-sidebar-plugin', {
  render: compose(
    applyWithSelect,
    applyWithDispatch
  )( MySidebarPlugin )
} );

I didn´t have tested this code, but it should work assuming a post-meta property "my_post_meta_key" is (as a boolean) properly registered.

You can find more information here:
https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-plugins/

Regards
Mario

[erikjoling]

I just confirmed this worked for me. Thank you!