Creating a Gutenberg Sidebar – Introduction

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

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:

1. A toggle switch will enable or disable landing page mode (not sure what to call it yet).
2. A color control which will allow us to set the background color.

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.

What’s going to be covered in this series

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.

Pre-requisites

1. You have a local environment alive and running (I prefer MAMP Pro if you’re on a Mac or Windows).
2. You have node installed.
3. You have some basic knowledge of the command line. You’ll need this in the long-run if you do any kind of Gutenberg development.

Let’s get started

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.