Full-Site Editing 4-in-1 sporting events website

After not long considering using Twenty-Twenty-Two for our last project, the follow-up order for another project was not long in coming.

We hadn’t counted on a quick start date for that new project, but then we had to act. This also coincided with the announcement of the planned WordPress 5.9 release, with which the default theme Twenty-Twenty-Two should be published.

So some big innovations should flow into our new projects and we want to present these innovations here.

Will the Global Styles Interface replace the styles.css?

Don’t write too much CSS, let it generate from your project, which means Blocks, Themes, added WordPress default styles, and lastly the Full-Site Editing (FSE).

To answer the question of whether the well-known styles.css will no longer play a role in the future, the new engine: theme.json must be examined more closely.

Global Styles
The user interface for theme.json

The theme.json defines entirely all that you can find in the Global Styles admin UI. As the file extension already reveals, it is a JSON file and not a CSS file. Nevertheless, styles are defined here. Conversely, this means that CSS selectors are generated and no longer written yourself.

The concept is: With the Global Styles Interface overwrites definitions in the theme.json!

That means there are already a lot of predefined designs that are created on a different level than the well-known styles.css. Anyone who wants to make changes directly to the CSS writes their own “component”, which are then used and reused. What we mean by “components”, is more on that later.

The styles.css is still retained but loses its importance.

Choosing the Full-Site Editing theme “Twenty Twenty-Two”

Sponsor areas can be maintained as Reusable Blocks

To explain what FSE is, you only need new, unfamiliar terms. This is a quick way to explain what a block theme is without mentioning what it replaces or what the big additions are that make it something entirely new. It seems like there are a lot of new terms that build on existing concepts but, as expected, make big strides.

The block theme is now at the top:

Block Theme
A Theme composed entirely out of Blocks in use of Templates and Template Parts, with the help of the Styles interface and Blocks.

This creates many new “parts” that can be easily adapted via the WordPress admin Global Styles UI. Already existing is that “parts” can be reused in WordPress. Based on this, “individual parts” from a Block Theme can be used in such a way that changes only have to be made in one place.

Why you benefit from Full-Site Editing

How is the whole concept supposed to become lighter and more flexible with so many additional terms and concepts, and new enhancements? The question has just been answered above: With the visual Site Editor – Global Styles interface. It has now found its way into all parts, being able to make changes everywhere even without coding knowledge.

The entire website is overdrawn from customizable templates and template parts, which specify basic structures for certain areas (Single Post, Page, Home, Search, Archive, …). Templates are assigned to pages or posts like ‘Templates’ already used earlier. Only, now everything is changeable and customizable via the Global Styles interface.

And now finally, let’s get to how the Global Styles interface works.

Block Styles are designed to alter the look of a Block. It’s a fancy way of adding a custom CSS class to a block using the Block options in the post editor.

Block Styles

Block Variations allow developers to define instances of existing blocks and customize their attributes, which means the API for Block Variations is quite big.

Block Patterns are the biggest concept using Blocks. There is a newly created Block Pattern Directory of a variety of pre-designed patterns. Block Patterns are a whole pre-grouped collection of Blocks, which can insert into posts and pages.

Block Pattern

Provided filters and hooks can be used to go into the last detail. Good for extending just existing blocks, on the one hand, the markup, and on the other hand Inspector Controls, which forms the Global Styles interface.

With our Gallery-Styles Block, we add Styles to the WordPress core/gallery Block and hook with Filters to the WordPress core Block.

import { addFilter } from '@wordpress/hooks';

const editInspectorControls = createHigherOrderComponent(
    (BlockEdit) => (props) => {
        const { name } = props;
        if (name !== 'core/gallery') {
            return <BlockEdit key="edit" {...props} />;
        }

        return (
            <>
                <InspectorControls>
                    <AdditionalColorPicker {...props} />
                </InspectorControls>
                <div style={{ '--line-color': props.attributes.color }}>
                    <BlockEdit key="edit" {...props} />
                </div>
            </>
        );
    },
    'withInspectorControls'
);

addFilter(
    'editor.BlockEdit',
    'core/gallery',
    editInspectorControls
);

Conclusion of the terms:

Block Styles
CSS classes are added to change the design.
Block Variations
A variant and specification of the default attributes of a single block and/or addition of inner blocks.
Block Pattern (Block Templates)
Consists of a combination of several blocks.
Filtering
Change a block’s markup if the three above aren’t enough and creating a new Block from scratch isn’t a good option.