Full Site Editing
With WordPress

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.

Written by:

Carolina Nymark

Level: Beginner, Developer

Estimated reading time: 3 minutes

Last updated

May 25, 2024

Step 1: Install WordPress

Any test install with at least WordPress 6.5 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: 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.

Using the terminal inside the plugin folder of your WordPress installation:

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 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-Four. 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.