WordPress full site editing: First impression

Photo by Markus Winkler on Unsplash

WordPress recently received an update to the gutenberg editor that allows users to edit their entire website using blocks. While it is currently in beta, this is an exciting update and I wanted to try it out to see what it can offer.

The wordpress developer handbook gives the following explanation of full site editing:

At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible.

https://developer.wordpress.org/block-editor/getting-started/full-site-editing/

Why full site editing?

Allowing users to edit their entire website directly in the WordPress administration panel makes it more accessible to everyone. No coding skills are needed to get started due to the large number of blocks available to install. Most users can easily design and create their website by adding blocks to the template.

Getting started

To enable the full site editing experience a block theme is required, i.e. a theme that supports full site editing. To enable full site editing for a theme a theme.json file is required. The theme.json file contains global settings and styles for the theme. For a complete overview of how it is configured see the documentation.

The easiest way to get started creating a new theme is by copying the Twenty Twenty-Two theme in the themes folder and give it a new name (e.g. my-awesome-block-theme) – remember to update the name in styles.css to differentiate the themes in the theme picker.

After copying the Twenty Twenty-Two theme you should have two themes with the same image but different names if you remembered to change the name in styles.css

Activate the copied theme and you can start playing around. The Twenty Twenty-Two theme should be installed by default, but if you removed it you can install it again.

Using the site editor

A part of the full site editing experience is the site editor which can be found under the Appearance menu option. Please note that at the time of writing the site editor is still in beta, so some things might change.

When opening the site editor for the first time, you should see something similar to this.

Using the site editor should be familiar if you have ever created a post or page using the gutenberg editor.

Clicking on the wordpress icon in the upper left corner reveals a menu with more options.

The naming convention in the site editor should be familiar to anyone that has created a theme before, the website still consists of templates and template parts. Templates follow the same hierarchy as regular themes, this means that the site editor can create templates for archives, posts, pages, custom post types, etc.

Exporting the changes

All changes made in the site editor are saved in the database, so the theme files are not updated automatically. To update the theme files it is necessary to export the theme. This allows a theme to provide a default design while still allowing users to expand on the templates without risking that an update replaces the templates that where created or edited by the user.

Select the three dots in the upper right corner and choose the export option. This will download the theme as a zip file, that is ready for uploading to another website or distribution via wordpress.org

If you found a block theme that you would like to use instead of creating a new one, just install and activate it and start using the site editor.

Limitations

At the time of writing I have found a couple of things that I think is a little limited when using the site editor.

Media Queries: The current core layout blocks are limited in customization and while e.g. the columns block collapses on mobile it is not easy to have full control over mobile and tablet designs. The only way I can see this can be solved at the moment is by:

  • styling the core blocks from the theme
  • creating custom classes in the theme and apply to the blocks that need special styling for some devices
  • creating a custom block in the theme or use an existing one that supports the layout you are trying to achieve for the devices you are targeting

Custom templates: Some custom templates cannot be created from the site editor. An example is a custom page or post template. To create it you have to go to a page or post and edit it, then add a new template in the template section of the page or post settings. Also some templates requires that a file has been created in the proper place in the theme to edit it in the site editor, for example if you require a custom archive page for a custom post type.

See also the documentation on templates and template parts that include full examples of how to create templates from scratch using code (although it is a bit cumbersome to use this approach in my opinion)

Customization of query loops: The current core block for creating a query loop is rather limited in my opinion. There are a limited number of options regarding which fields can be displayed in a loop, e.g. meta fields are not available.

Conclusion

This was a short post on my first impressions of the full site editing capabilities in WordPress. I think this is an exciting way to build wordpress themes going forward as it will make it easier for a lot of users to customize their website design and I think also for developers and designers. I am excited to see what will happen when the full site editing experience matures.

The core blocks in wordpress are varied and enables users to easily make a lot of different designs without coding and a lot of blocks are available for installation which expands on what is possible to create in a purely block based design.

Does this mean it is no longer necessary to know how to code to create a new theme? Not entirely – since some features or designs might not be possible to create using available blocks in which case some development is required. Also customization of theme.json may be necessary which requires some knowledge of CSS. But the barrier of entry to create a new theme is a lot lower than before.

I can still learn a lot about full site editing as it is fairly new to me and I am trying to figure out how to best utilize it for the websites I have created and will create in the future. I might pick this up again at a later point in time when I have had more experience using and developing block themes.

If you know of a good way to handle some of the limitations I touched upon feel free to reach out and let me know.

One comment

  1. Det lyder godt ven. Der er mangler måske lidt versions nr og så måske lidt pross and cons fra dit syn af 😉 men ellers godt.

Comments are closed.