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.
styles.cssActivate 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.
Using the site editor should be familiar if you have ever created a post or page using the gutenberg editor.
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.
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.
