Full site editing for theme developers
View lessons
Access and download the course material on https://github.com/carolinan/fullsiteediting
This full site editing quick start guide has 3 simple steps. All you need is WordPress, Gutenberg, and a full site editing theme.
Step 1: Installing WordPress
Any test-install with at least WordPress 5.4 will do. I recommend always using the latest version of WordPress. -But do not try this on a live website, because this is still an experimental feature.
If you already have a local setup that you are familiar with, you can use that.
If you need to set up a new local install, I recommend the WordPress development environment.
The setup process may vary depending on your system, you will find the details and instructions on this page: https://github.com/WordPress/wordpress-develop.
For this, you will need Docker, Node JS, NPM, and Python.
Step 2: Installing Gutenberg
For the full site editing features to work you need to install and activate the latest version of the Gutenberg plugin.
You can install it directly from the plugin directory from within your WordPress installation, or download it from the plugin directory.
Using the development version of Gutenberg
This step is optional. If you want to try the absolute latest features for full site editing, you can do a git clone from the GitHub repository.
Using the terminal, inside your plugin folder:
git clone https://github.com/WordPress/gutenberg
Next, inside the new Gutenberg plugin folder, install the dependencies. This step will take some time.
npm install
Finally, you need to build the files:
npm run build
If you forgot any of these steps, there will be a notice with instructions inside the WordPress admin area when you activate the plugin.
Step 3: Installing a full site editing theme
From Gutenberg version 9.3.0, we no longer need to enable full site editing manually. It is enabled when we install a theme that has support for full site editing.
You will find example themes in the course material and on the themes page.
You can also download TT1 Blocks.
Once the theme is active you should see the following notice in the WordPress admin area:
Course files
Access and download the course material on https://github.com/carolinan/fullsiteediting
Inside the zip file, you will find folders that are named after each lesson. Here, you will find the demo themes that we will be working on, and any other relevant files.
So if you are viewing Block based themes lesson 1, you would open the folder named Block based themes, then the folder named lesson 1,
and follow the instructions on the lesson page and the video.
When a lesson includes exercises for writing code there will be two versions of the theme: One that you will be editing, and a complete version for reference.