Preparations -Quick start guide

Access and download the course material on https://github.com/carolinan/fullsiteediting


This full site editing quick start guide has 3 simple steps, all you need is WordPress, Gutenberg, and a full site editing theme.

Step 1: Installing WordPress

Any test install with at least WordPress 5.4 will do. I recommend always using the latest version of WordPress. -But do not try this on a live website, because this is still an experimental feature.

If you already have a local setup that you are familiar with, you can use that.

If you need to setup 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: Installing Gutenberg

For the full site editing features to work you need to install and activate the latest version of the Gutenberg plugin.

You can install it directly from the plugin directory from within your WordPress installation, or download it from the plugin directory.

Using the development version of Gutenberg

This step is optional. If you want to try the absolute latest features for full site editing, you can do a git clone from the Github repository.

Using the terminal, inside your plugin folder:

git clone https://github.com/WordPress/gutenberg

Next, inside the new gutenberg 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 will be a notice with instructions inside the WordPress admin area when you activate the plugin.

Step 3: Installing a full site editing theme

From Gutenberg version 9.3.0, we no longer need to enable full site editing manually. It is enabled when we install a theme that has support for full site editing.

You will find example themes in the course material.

You can also download Twenty Twenty-One Blocks

Once the theme is active you should see the following notice in the WordPress admin area:

Full site editing activation notice.

Course files

Access and download the course material on https://github.com/carolinan/fullsiteediting

Inside the zip file, you will find folders that are named after each lesson. Here, you will find the demo themes that we will be working on, and any other relevant files.

So if you are viewing Block based themes lesson 1, you would open the folder named Block based themes, then the folder named lesson 1,
and follow the instructions on the lesson page and the video.

When a lesson includes exercises for writing code there will be two version of the theme: One that you will be editing, and a complete version for reference.