Gutenberg Sidebar – Setting Up the Sidebar

Setting up the Gutenberg Sidebar

Believe it or not, there are multiple ways to set up a Gutenberg sidebar. You can have it in the regular Document panel, or even create a sidebar option if you feel it doesn’t deserve that much visibility.

First, I’ll show you how to set up the a sidebar that goes into the Document panel with a simple text placeholder.

For the sake of this post, here is the condensed folder structure we’ll be working with (yes, this means you’ll have to start doing some more command line stuff):

. └── landing-page-gutenberg-template/ ├── dist/ │ ├── sidebar.js (compiled JS) │ └── template.css (compiled SCSS) └── src/ └── js/ └── index.js
Code language: AsciiDoc (asciidoc)

Let’s Create a Document Panel Sidebar

Let’s crack open index.js and start with the dependencies we’ll need to initialize.

const { __ } = wp.i18n; const { registerPlugin } = wp.plugins; const { PluginDocumentSettingPanel } = wp.editPost; const { Fragment } = wp.element;
Code language: JavaScript (javascript)

Holy, what?! Don’t worry, we’ll be using all of these constants and if you’ve been doing Gutenberg stuff for a bit, you’ll mostly understand out of the gate what each of these do.

First, we pull out the __ functionality from wp.i18n (which we enqueued as a dependency). You may recognize __ as a translation function. It behaves the same way in JavaScript.

Next, we pull in registerPlugin from wp.plugins. This will help us register a plugin for the Block Editor.

Up next is pulling PluginDocumentSettingPanel from wp.editPost. This will tell the Block Editor that our “sidebar” is going into the document panel.

And finally, we pull out Fragment from wp.element. Fragments are useful here if you’re well-versed in React. It’s a way to wrap JSX without having to go overboard on div’s.

Registering the Plugin/Sidebar

Let’s jump straight into the code and I’ll share a screenshot of what the code does when compiled.

registerPlugin("landing-page-gutenberg-template", { icon: ( <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" > <path d="M0 0h24v24H0z" fill="none" /> <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /> </svg> ), render: () => { return ( <Fragment> <PluginDocumentSettingPanel title={__('Landing Page', 'landing-page-gutenberg-template')} > Hello World </PluginDocumentSettingPanel> </Fragment> ); }, });
Code language: JavaScript (javascript)
Hello World Sidebar
Hello World Sidebar

When we register our sidebar, we pass it a slug for the sidebar. In our case, it is: landing-page-gutenberg-template.

Next we can assign it an icon. I just grabbed some SVG code from the Google Material Library icon page.

Finally, we render out our JSX/React code.

And that’s it for Sidebar technique number one. We’ll worry about how to get actual sidebar content in the next post in this series. Let’s move on to Sidebar technique number two.

Sidebar Technique Number Two

An alternate approach, and less obtrusive than coding an actual Document panel is essentially a Block plugin that can be hidden and toggled on and off. A lot of plugins do this such as Kadence Blocks, Yoast, and Jetpack.

Here’s an example screenshot:

Block Sidebar Plugins
Block Sidebar Plugins

As you can see, there are toggle options that can be opened and closed and don’t clog up the Document pane. The great thing is, you can decide to go either route and still use the internal logic (sidebar) to display your options.

Here’s a screenshot of the first sidebar moved into a plugin area of the Block Editor.

Alternate Sidebar Example
Alternate Sidebar Example

And finally, here is the code to achieve it.

const { __ } = wp.i18n; // Import __() from wp.i18n const { registerPlugin } = wp.plugins; const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost; const { Fragment } = wp.element; registerPlugin("landing-page-gutenberg-sidebar", { icon: ( <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" > <path d="M0 0h24v24H0z" fill="none" /> <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /> </svg> ), render: () => { return ( <Fragment> <PluginSidebarMoreMenuItem target="landing-page-sidebar"> {__("Landing Page", "anding-page-gutenberg-template")} </PluginSidebarMoreMenuItem> <PluginSidebar name="landing-page-sidebar" title={__("Configure", "anding-page-gutenberg-template")} > Hello World </PluginSidebar> </Fragment> ); }, });
Code language: JavaScript (javascript)

It’s definitely a different technique.

Instead of using the <PluginDocumentSettingPanel> component, we’ll be using <PluginSidebarMoreMenuItem> and <PluginSidebar>.

The PluginDocumentSettingPanel needs a target prop to be able to tell which sidebar to open. so we use PluginSidebar and set a name that matches the target. We can set a title and the internals for the sidebar.

I’ve placed “Hello World” where we’d place the sidebar logic and interface.

Conclusion

Within this post I demonstrated two different ways to create a Gutenberg sidebar. In the next post, we’ll go over the internal logic for the actual sidebar content and how to show the sidebar using the plugin option approach (technique number two).