Gutenberg Sidebar – Setting Up the Plugin Structure

To summarize from the project overview, we’ll be creating a WordPress plugin that adds a sidebar and allows you to have a blank canvas in regards to Gutenberg that’ll work with the theme Twenty Twenty One.

Introduction to Twenty Twenty One

Twenty Twenty One has yet to be released, but it promises to be a block-ready theme. I, however, was unable to find a full-page template that disables the:

• Site header
• Site navigation
• Sidebars
• Footer

In other words, with Twenty Twenty One, you don’t have a full-site experience per-se.

Let’s change that by creating a WordPress plugin which will have a toggle-switch and allow you to use a post or a page to create a nice landing page using Gutenberg and the theme.

First thing’s first… we need a local development environment

Some people just swear by Local by Flywheel. It’s easy to set up, easy to launch sites, and can definitely be used for what we’re going to go through in this series.

However, I swear by MAMP Pro, which is available in both Mac and Windows versions. What you use is up to you.

I’m on a Mac, so most of the terminal-type commands are from the Mac app Terminal. However, you can use whatever command-line tool you are comfortable with.

First, let’s come up with a structure for the plugin.

Plugin Folder Structure

We’ll start off with this basic folder structure for our plugin.

└── landing-page-gutenberg-template
    ├── landing-page-gutenberg-template.php
    ├── autoloader.php
    ├── languages
    ├── src
    │   ├── js
    │   │   └── index.js
    │   ├── scss
    │   │   ├── style.scss
    │   │   └── common.scss
    │   ├── languages
    │   └── includes
    │       └── Include files go here.
    ├── webpack.config.js
    └── .babel
Code language: AsciiDoc (asciidoc)

I’ve already thrown a bunch of WTFs with the folder structure. What the heck is webpack.config.js, package.json, and .babelrc?

Let’s get started with the beginning of our project.

Find a WordPress install you can do development and command line on and let’s get started.

For the sake of this series, please name the plugin folder: landing-page-gutenberg-template.

.
└── wp-content
    └── plugins
        └── landing-page-gutenberg-template
            └── landing-page-gutenberg-template.php
Code language: AsciiDoc (asciidoc)

Initializing the Package.json File

Let’s navigate to the plugin folder using good ol’ command line. In my case, I type in the command:

cd ~/sites/localhost/wordpress/wp-content/plugins/landing-page-gutenberg-template
Code language: Bash (bash)

Once you are in the folder, just type in:

npm init
Code language: Bash (bash)

You’ll then be presented with several options. Here’s a quick grab of what my package.json file looks like after we’re all done.

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (landing-page-gutenberg-template) 
Code language: Bash (bash)

And what the command line shows when all is done:

package name: (landing-page-gutenberg-template) 
version: (1.0.0) 
description: A landing page template for Gutenberg
entry point: (webpack.config.js) 
test command: npm run start
git repository: (https://github.com/wpajax/landing-page-gutenberg-template.git) 
keywords: 
author: Ronald Huereca
license: (GPL) 
{
  "name": "landing-page-gutenberg-template",
  "version": "1.0.0",
  "description": "A landing page template for Gutenberg",
  "main": "webpack.config.js",
  "scripts": {
    "test": "npm run start"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wpajax/landing-page-gutenberg-template.git"
  },
  "author": "Ronald Huereca",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wpajax/landing-page-gutenberg-template/issues"
  },
  "homepage": "https://github.com/wpajax/landing-page-gutenberg-template#readme"
}
Code language: Bash (bash)

You should now have a package.json file in your folder structure:

.
└── wp-content
    └── plugins
        └── landing-page-gutenberg-template
            ├── landing-page-gutenberg-template.php
            └── package.json
Code language: AsciiDoc (asciidoc)

You may have noticed that the starting point in our package.json is webpack.config.js. Let’s go ahead and create that empty file.

.
└── wp-content
    └── plugins
        └── landing-page-gutenberg-template
            ├── landing-page-gutenberg-template.php
            ├── package.json
            └── webpack.config.js
Code language: AsciiDoc (asciidoc)

For now, we’ll leave this file empty.

Installing Webpack

Assuming you have Node installed, you can install Webpack in your project by running:

npm install --save-dev webpack
Code language: Bash (bash)

After Webpack is installed, we need to install Webpack CLI.

npm install --save-dev webpack-cli
Code language: AsciiDoc (asciidoc)

Our package.json file should now look like the following:

{
  "name": "landing-page-gutenberg-template",
  "version": "1.0.0",
  "description": "A landing page template for Gutenberg",
  "main": "webpack.config.js",
  "scripts": {
    "test": "npm run start"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wpajax/landing-page-gutenberg-template.git"
  },
  "author": "Ronald Huereca",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wpajax/landing-page-gutenberg-template/issues"
  },
  "homepage": "https://github.com/wpajax/landing-page-gutenberg-template#readme",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0"
  }
}
Code language: JSON / JSON with Comments (json)

We’re now done with webpack for now. Let’s move onto the rest of the folder structure.

Giving the Plugin Structure

Here’s the initial structure for the time-being.

└── landing-page-gutenberg-template
    ├── landing-page-gutenberg-template.php
    ├── autoloader.php
    ├── languages
    ├── src
    │   ├── js
    │   │   └── index.js
    │   ├── scss
    │   │   ├── style.scss
    │   │   └── common.scss
    │   ├── languages
    │   └── includes
    │       └── Include files go here.
    ├── webpack.config.js
    └── .babel
Code language: AsciiDoc (asciidoc)

Now you may be wondering, why are we not using a Gutenberg boilerplate? The goal here is to show you how to setup Gutenberg-type projects from scratch. After you are comfortable with the basics, then it would be appropriate to use a boilerplate that you are comfortable with.

Conclusion

In this series post, we:

1. Initialized our project’s package.json file.
2. Installed Webpack as a dependency of our project.
3. Created a skeleton of a folder structure.

Up next is setting up the main plugin file. We’ll worry about .babelrc when it makes sense.