Level: Beginner, developer
Estimated reading time: 2 minutes
Last updated
This full site editing quick start guide has three simple steps. All you need is WordPress, Gutenberg (optional), and a block theme with support for the Site Editor.
Step 1: Installing WordPress
Any test-install with at least WordPress 6.1 will do. I recommend always using the latest version of WordPress. 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, Optional: Installing Gutenberg
If you like, you can test site editing with Gutenberg installed.
Because new features are first developed in Gutenberg and then ported from Gutenberg to WordPress core gradually, you can expect to see different blocks and changes to the user interfaces.
You can install it directly from the plugin directory within your WordPress installation or download it from the plugin directory.
Using the development version of Gutenberg
If you want to try the absolute latest features for full site editing, you can do a git clone from the GitHub repository. Note that you will need NPM version 6. Gutenberg is not compatible with versions 7 or 8.
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 would be a notice with instructions inside the WordPress admin area when you activate the plugin.
Step 3: Installing a full site editing theme
WordPress enables different features depending on what your active theme supports.
You can use the default themes Twenty Twenty-Three or Twenty Twenty-Two. You can also find example themes on the themes page or use the block theme generator to create your own starter theme.
Course files
Access and download the course material on https://github.com/carolinan/fullsiteediting
Inside the zip file, you will find folders that I have named after the lessons. Here you will find the demo themes you will be working on and other relevant example files.