Gutenberg: Sidebar for specific post type

by

I’m trying to figure out a way, to create a Gutenberg sidebar that is only visible on a custom post type.

For instance, I’d like my sidebar with settings, like a custom checkbox, only related to pages, to be inaccessible on my custom post types.

Instead of creating a sidebar for a specific post type, it would also be great to remove a sidebar from a specific post type.

I couldn’t yet find any way to accomplish that, any ideas?

3 Answers
3

I know this question is a few months old by now, but I got around this issue using the following code and thought it might be helpful for others. There might be a better way, but this works:

import ColorSchemeSelect from "./components/color-scheme-select";
import includes from "lodash/includes";

const { select } = wp.data;
const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;

registerPlugin('ahr-sidebar-post-options', {
  render() {
    const postType = select("core/editor").getCurrentPostType();
    if ( !includes(["post", "page"], postType) ) {
      return null;
    }

    return (
      <PluginSidebar name="ahr-sidebar-post-options" icon="admin-customizer" title="Color settings">
        <div style={{ padding: 16 }}>
          <ColorSchemeSelect />
        </div>
      </PluginSidebar>
    );
  },
});

In my example I only wanted to show a certain sidebar for posts and pages, so I’m using !includes(["post", "page"], postType) to test wheter or not the sidebar should be shown. If you only want it for one specific post type you’d just go postType === "my-post-type" instead.

Leave a Comment