Last Tuesday, and after a 20 month Corona break, the Antwerp WordPress Meetup team organised a new meetup event. 🥳 With 21 attendees it was a nice group of WordPress enthusiasts gathering to be inspired by 2 speakers and exchange ideas. The subject was the current state of the Gutenberg block editor and what’s new, compared to the last meetup in real life … 20 months ago.
Dave gave us an update of what’s possible with the most recent version of the Gutenberg block editor, while Koen showed us the some important new features and improvements that are on the roadmap.

In this post, we bring our 3 take-aways of both talks.

The duotone effect

WordPress 5,8 comes with a new style effect for images. Now, using the block editor you can apply the duotone effect. It will create an overlay using two selected colors. This is another way to add a personal touch or apply a company style guide.

A plus about this feature is that you can upload the picture in grayscale, resulting in a smaller file size.

Patterns library

WordPress houses a Patterns library on https://wordpress.org/patterns/.

A pattern consists of multiple core blocks that are pre-configured with content and styles. You can copy - paste them in the block editor to create a post or page. There is no need to install a plugin, just a simple copy - paste will do.

Collecting these patterns might bring a significant value to WordPress, next to themes and plugins.

Theme.json

The theme.json file is a file that resides in your current theme’s directory. It can be used to configure the block editor. Some use cases are: ‘define a styleguide’ or ‘disable editor features per block’. We’ll discuss one feature in detail: ‘defining a color palette’. Before the theme.json was introduced, defining a color pallet would be done like this:

functions.php
add_theme_support(
   'editor-color-palette',
   array(
        array(
            'name' => __( 'flashy green', 'text-domain' ),
            'slug' => 'flashy-green',
            'color' => '#1de041,
        ),
   )
);

style.css
.has-flashy-green-color {
        color: #1de041;
    }
.has-flashy-green-background-color {
        background-color: #1de041;
    }

Since the theme.json file there is no need to edit the functions.php or style.css file. it suffices to define this in the theme.json file:

theme.json
...
"color": {
    "palette": [
        {
            "name": "flashy green",
            "slug": "flashy-green",
            "color": "#1de041"
        }
    ]
}
...

Wrap up

Gutenberg was a nice tool but lacked some important features for use in a professional environment. Some things could be handled with plugins or workarounds. The most recent version of Gutenberg is a nice step forward and the roadmap looks promising for companies like ours, working on the technical side of websites.

You can always join the Meetup group, so you can join the next meetup