THE FULL SITE EDITING EXPERIENCE

There are several good page building frameworks in the WordPress ecosphere and each of them have a following of devoted users. In general, these frameworks provided expanded functionality in the editing experience in three major areas:

  1. Advanced editing tools for the header, footer, and sidebar (widget) regions.
  2. Replacing the tinyMCE editor with a more modular “block based” interface.
  3. A library of editable page and page section templates.

With the introduction of Gutenberg, the default editing experience became modular and block based and in time this approach was also adopted for widget regions. Full site editing (FSE) allows for the creation and editing of templates, template parts and two types of block patterns meaning that just with using core WordPress code any site can have all the advantages of any page builder framework without the additional learning curve and resource strain.

FSE works within a structure that is both logical and a natural extension of the way WordPress themes have worked behind the scenes since the very beginning of the project. Site components are broken down into the following areas:

TEMPLATES

WordPress themes have always contained templates for pages, posts, archives, and landing pages where each template is applied based on the nature of the content being shown. To the standard site editor using a standard theme template use and assignment may seem invisible since in most cases the editor does not have a choice of which template will be applied. However, WordPress has always allowed for a user to select from alternative templates when they have been provided for in the theme.

In traditional PHP based themes any changes to a template requires a change in the coding of the relevant file in that theme.  In a FSE theme templates are HTML expressions of Gutenberg blocks, a structural change that makes it possible for the template configurations to be manipulated in the editor, for those changes to be saved in the database as JSON snippets and allow for the creation of entirely new templates.

TEMPLATE PARTS

Virtually every template contains template parts. A template part generally consists of information which is constant across site locations such as the site header, footer, or sidebar and keeping this information in a separate location from the template itself makes the editing process more modular and efficient. Like templates, these components are expressed as Gutenberg blocks and can be modified, saved, and created via the site editor. Recently template parts have been moved to be found under the patterns section of the editor.

PATTERNS

Patterns can be seen as a sort of sub-template which can be inserted into a page or post as a preconfigured layout section. Patterns come in two types: unsynced and synced.

An unsynced pattern is a collection of blocks (usually nested) which constitute a desired layout and is designed to be used as a section model. Once an unsynced pattern has been inserted it exists as a stand-alone collection of blocks that can be freely edited and changed without making any changes to the model itself.

A synced pattern is like a symbol (in Illustrator) where each instance of the pattern is an exact duplicate of the “parent” and when the “parent” is modified each instance of that pattern will reflect that modification. A typical use of a synced pattern could be a call to action, a mailing list signup form – or even a header or footer.

NAVIGATION

Just as there is a “menus” section in the traditional editor, FSE has its’ own navigation section where navigation blocks can be created and edited. As of this writing using this section remains a bit kluge, but already much improved.

STYLES

Every Gutenberg block starts with default settings which can be overwritten individually via the block controls, the default settings for blocks can be changed via this section as well as the default settings for typography, colors, and general layout.