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.3 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.
I recommend the WordPress development environment if you need to set up a new local install. 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.
You will need Docker, Node JS, NPM, and Python for this.
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 latest features for full site editing, you can do a git clone from the GitHub repository.
The node and npm versions needed for Gutenberg were updated on August 9, 2023; you will now need node 16 and npm version 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 forget 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
WordPress enables different features depending on what your active theme supports.
You can use the default theme Twenty Twenty-Three. You can also find example themes on the themes page or use the block theme generator to create your own starter theme.
Optional course files
Some lessons include code examples and references that are hosted on GitHub.
You can download the course material from 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.