The rationale
With Full Site Editing on the horizon for WordPress, Theme creators need to start to learn how to make themes in a different way. Full Site Editing is sea change in the way that themes work.
When Themes were first added to WordPress, they were simple; just a few template files and some CSS. Over time, as users demanded more from WordPress, themes have grown to contain much of the visual functionality of the site. This has enabled WordPress to be extended as far as your dreams allow, and has contributed to the popularity of WordPress today.
This approach for themes has brought some challenges with it. With so much functionality baked into a theme, changing themes becomes a difficult thing to do. Not only will you lose some of the functionality of your site, you probably have to learn a new UI, since every theme works differently.
The Full Site Editing project aims to address these concerns by moving a lot of this functionality into the Block Editor. This will simplify Themes again so that they will become more like the initial implementation; a presentation layer over the top of the content.
One major benefit of this approach is that users will be able to edit parts of their site that before were only editable with code.
Full Site Editing is several projects combining to create fundamental changes to the way WordPress works.
The Block Editor
Fundamental to Block Themes is the Block Editor. Allowing users to express all their content as a Block brings us several benefits:
- A consistent UI for creating/editing content
- A reliable API for manipulating content
- A transferable way to move content around
With this foundation Themes can lean much more heavily on the user’s content than they have before. For example, themes can provide a ready-made collection of blocks that users can insert (Block Patterns).
The Site Editor
The Site Editor allows users to edit templates in the same way that they already edit content blocks. Templates are blocks, so all the things that users are comfortable and familiar with in the Block Editor work the same way in the Site Editor. This allows users to manipulate their site content and layout in the same way as the Post and Page content. No longer will users have to learn different interfaces for different themes.
Global Styles
Global Styles lets Themes express their design in a way which can be edited via the Block Editor and Site Editor. Rather than the design living in a CSS file, the most common settings will be defined in the editor itself, which gives the user the power to change them. This will enable users to modify the presentation of their site without writing any custom CSS.
Creating a Block Theme
The easiest way to start creating a new Block Theme is to use the empty theme template:
- Clone the theme-experiments repo:
git clone https://github.com/WordPress/theme-experiments.git - Run this php script to create a new Block Theme:
php new-empty-theme.php
This provides the bare minimum needed to get started – in time, the amount of boilerplate code needed will shrink.
Next, install and activate the Gutenberg plugin – this will give you access to the features you’ll need for Full Site Editing.
Now when you enable your newly created Block Theme, the Side Editor will appear in the Dashboard sidebar, and the Customizer, Widgets and Menus will disappear.
Next Steps
To create your theme there are three areas to focus on:
We’ll be expanding on each of these in our upcoming posts. Stay tuned!