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.
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:
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.
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.
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)
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:
Code language: Bash (bash)npm init
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.
Assuming you have Node installed, you can install Webpack in your project by running:
Code language: Bash (bash)npm install --save-dev webpack
After Webpack is installed, we need to install Webpack CLI.
Code language: AsciiDoc (asciidoc)npm install --save-dev webpack-cli
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.
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.
In this series post, we:
Up next is setting up the main plugin file. We’ll worry about .babelrc when it makes sense.