Preparations -Quick start guide

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.