In this series, I’ll be covering how to create a Gutenberg sidebar plugin from scratch. Building sidebars is hard and not very straightforward. In this series, I’ll walk you through how to get webpack set up so you can create a sidebar without the use of any boiler-plate-type scripts.
The goal of this series is to make a WordPress Gutenberg sidebar plugin that’ll work with Twenty Twenty One.
We’ll have a sidebar with a few options:
That’s pretty much it, but it still involves a lot of moving parts and there are a few ways to show this sidebar and have it front-and-center or as a semi-hidden sidebar option.
First thing’s first… we’ll set up webpack and the file structure first. We’ll pause there and add dependencies as we go along.
The plugin base and autoloader will be set up, along with enqueuing the scripts we expect to be there.
I’ll then demonstrate one way of adding a sidebar. I’ll then show an alternate way. Both will work the same. They’ll just be in two separate places.
Finally, we’ll code some functionality that’ll turn any post/page or anything Gutenberg into a landing page template where only blocks are rendered for the final result.
Let’s move onto the next post in the series to go over how to get your project started with starting our project in node via the command line.