Full Site Editing

What is full site editing?

The full site editing feature was introduced in WordPress 5.9. It lets the users customize every aspect of the website. Previously, the WordPress core files were responsible for the design and layout of the pages. With full site editing, the user can change the layout, typography and colors and add custom content anywhere on the website. Full site editing themes use blocks. We can create the theme for our school website as a block theme which supports full site editing. This approach supports some exciting features.

Block templates make editing the website very easy. With a traditional theme, if we wanted to tweak the design of a page, we would have to go to its PHP template file and adjust the design or if we wanted to change the content, from the admin dashboard go to Pages and then edit the contents of the page. These changes can now be made directly from the WordPress editor.

Editing template files

Full site editing makes editing very easy. The changes that were previously made in a theme file are now made directly from the WordPress editor. The "Editor" can be found in the "Appearance" menu in the admin sidebar. It is only available for block themes. By default, it opens the homepage template of the website. We can change the text from right within the editor or the design like the color or size of buttons and their placement etc. Similarly, if we want to switch the placement of a block like moving the slideshow up, it is as easy as clicking an arrow to move it to the desired spot. If we save the changes and view the website in the browser, the website reflects the changes.

We can also revert to the old template if we do not like the changes we made by clicking on templates and clearing the customizations made for a template. This will take it back to its default setting.

We can make changes without having to edit the PHP code. So for example, we want to add the upcoming events block to a single blog post or a post of a custom post type. In the traditional approach, we would have to edit the PHP file single.php or single-{post-type}.php. When using a block theme, we can simply go to the "Templates" screen which shows all the template files. Then we can choose the template file and add a block. The changes we make to the website are consistent with the design of our theme.

Block themes also make it easy for the end user who has limited or no programming experience to extend our theme and create new templates. For example if the user wants to create a landing page for the website, it can be done by creating a new template that uses blocks from our theme. This will create a customized page consistent with our theme.

Create a Block Theme

We will create a new theme for our website. Navigate to the themes folder of the School of Excellence website on the hard drive. This folder can be found by going to the website’s directory on the machine: public → wp-content → themes. Now create a new folder named excellence-block-theme.

Mandatory theme files

In a block theme, three files are mandatory.

1. style.css in the root of the theme folder.

2. index.php in the root of the theme folder.

3. index.html in the templates folder inside the theme folder.