This full site editing quick start guide has four simple steps. All you need is WordPress, the Gutenberg plugin (optional), and a block theme with support for the Site Editor.
Step 1: Install WordPress
Any test install with at least WordPress 6.7 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.
If this sounds overwhelming, know that something like Studio or Local will work just as well, all you need is the WordPress installation.
Step 2, Optional: Enable development mode
By enabling the theme development mode in wp-config.php, you prevent caching of the theme.json configuration file and pattern files. Read more about the development mode.
Locate and open wp-config.php in the root folder of your WordPress installation. Above the comment that says “That’s all, stop editing!”, set the WP_DEVELOPMENT_MODE constant to theme:
define( 'WP_DEVELOPMENT_MODE', 'theme' );Now is also a good time to double-check if you need to enable WP_DEBUG and error logging.
Step 3, Optional: Install 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, new and improved features, 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 site editing features, you can do a git clone from the GitHub repository. You will need node greater than or equal to 20.10.0, and npm version 10.2.3 or higher.
Using the terminal inside the plugin folder of your WordPress installation:
git clone https://github.com/WordPress/gutenbergNext, inside the new Gutenberg plugin folder, install the dependencies. This step will take some time.
npm installFinally, you need to build the files:
npm run buildIf you forget any of these steps, there will be a notice with instructions inside the WordPress admin area when you activate the plugin.
Step 4: Install a block theme
WordPress enables different features depending on what your active theme supports. The last step of the quick start guide is to install a block theme. A block theme is required to enable the new Site Editor. You can use the default theme Twenty Twenty-Five. 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.
When prompted, you can download or view course material from https://github.com/carolinan/fullsiteediting.
In this repository, 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.