Gutenberg 7.8 Adds Patterns API and Continues Interface Cleanup

Version 7.8 of the Gutenberg plugin landed yesterday. The team continues to improve the editor with the refreshed interface work that began in version 7.7. The most useful feature with this update of the plugin is the inclusion of the Patterns API for plugin and theme developers.

This release is not the massive feature release that we experienced with some earlier versions. It is the culmination of many smaller improvements, particularly with improving the user interface and experience. The update includes over 20 bug fixes, some continued work on experimental features like the site editor, and several improvements in code quality.

Editing a post permalink without requiring a save should work correctly, which has been an outstanding issue for over a year. Users can now select multiple categories for the latest posts block as opposed to a single category. And, the experimental full-site editing feature now supports fullscreen mode.

UI Continues Improving

Screenshot of the editor UI in version 7.8 of the Gutenberg plugin.
Gutenberg 7.8 editor with updated preview button.

The team began a massive refresh of the user interface in Gutenberg 7.7. With this release, they continued building upon that initial work. Designers have fine-tuned several of the icons for the editor toolbar, which includes the bold, italic, strikethrough, indent, outdent, and spacer icons.

One of the most notable differences is an update to the user-facing text for the post preview button. In the previous version, there was a button that simply read “Desktop.” Once clicked, it would open a drop-down list to preview the post in desktop, tablet, or mobile mode. I had initially thought the team had removed the post preview option until I clicked on it. In version 7.8, that button’s text now reads “Preview,” which is a much-needed change that is no longer confusing.

Overall, the polishing work done on the editor looks good. At this point, I have become so accustomed to it that I have no desire to go back to a regular WordPress install without the Gutenberg plugin installed.

Building Custom Block Patterns

Screenshot of a custom block pattern in the Gutenberg block editor.
Custom block pattern registered and in use.

I have said it before, but it bears repeating: I am excited about block patterns. I am even more excited about the ability for plugin and theme authors to begin testing this feature by building custom patterns of their own. I foresee an explosion of creativity over the next several months and beyond.

Patterns are a registration of the HTML for one or more blocks. Plugin and theme authors can further define the settings for those blocks. The Gutenberg team included a simple PHP function for developers to register custom patterns called register_pattern().

I have tinkered with numerous pattern ideas since I updated yesterday evening. The simplest way to build a pattern is to do so visually. Open the editor and create a unique group of blocks that you like. Then, switch to the code editor and copy the code. From that point, you can register the pattern via PHP and paste the copied code. There is not really much actual coding involved in the process. Even advanced users with enough DIY grit could register them within their theme’s functions.php file.

The following is a simple “hero” pattern as shown in the above screenshot that uses the cover block, a heading, a paragraph, and a buttons group (I formatted the code a little after copying and pasting for readability):

add_action( 'init', function() {

	register_pattern( 'tavern/hero-1', [
		'title'   => __( 'Hero 1' ),
		'content' =>
			'<!-- wp:cover {"customOverlayColor":"#273f60","align":"full"} -->
			<div class="wp-block-cover alignfull has-background-dim" style="background-color:#273f60">
				<div class="wp-block-cover__inner-container">
					<!-- wp:heading {"align":"center"} -->
					<h2 class="has-text-align-center">Heading Title Here</h2>
					<!-- /wp:heading -->

					<!-- wp:paragraph {"align":"center"} -->
					<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<!-- /wp:paragraph -->

					<!-- wp:buttons {"align":"center"} -->
					<div class="wp-block-buttons aligncenter">
						<!-- wp:button {"className":"is-style-outline"} -->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button A</a></div>
						<!-- /wp:button -->
						<!-- wp:button {"className":"is-style-outline"} -->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button B</a></div>
						<!-- /wp:button -->
					</div>
					<!-- /wp:buttons -->
				</div>
			</div>
			<!-- /wp:cover -->'
	] );
} );

Disclaimer: The preceding code is for an experimental feature and could change in later versions of the Gutenberg plugin or before the API is officially added to core WordPress.

15

15 responses to “Gutenberg 7.8 Adds Patterns API and Continues Interface Cleanup”

  1. Justin, I love your continued coverage on Gutenberg’s evolution. It’s quite incredible how quickly the experience is evolving.

    I’ve frequently wondered why it’s so hard for us as a community to extrapolate Gutenberg’s trajectory and imagine how it’ll change WordPress, but the COIV-19 outbreak has given me some insight.

    If you’ve been around WordPress for any length of time, you have your go-to theme, plugins and page builder. And it’s likely that your toolbox has probably been consistent for quite a long time. Why? Because WordPress moves pretty slowly and not much changes. We haven’t evolved to think about WordPress as a fast changing, innovative system. But now, the assumptions that our workflows are predicated on are changing more quickly and more dramatically than they ever have before.

    This is just like humans. We didn’t evolve to understand things like exponential growth because nothing our ancestors encountered grew exponentially. In fact, for most of human history nothing changed at all–you could live your whole life with nothing new discovered or invented. This is how our life has been for our ancestors for most of humankinds ~200,000 year history up until the last thousand years or so.

    Fast growth, and especially exponential growth, are hard for the human brain tom imagine. For instance, a common example: If a species of lily pad reproduces every day, how many days before the pond is covered with lily pads was half the pond covered? The day before. And a few days before that the lily pads would probably go largely unnoticed.

    That’s why COVID-19 caught so many by surprise. And though the Gutenberg improvement isn’t quite exponential, that’s why so many are consistently surprised (and will continue to be) by the rate of improvement of Gutenberg.

    This is especially true once we grok that Gutenberg is so much more than an editor. For example, I just saw this post today: https://www.codeinwp.com/blog/plugin-options-page-gutenberg/ In it they talk about making plugin options pages with Gutenberg components.

    The farther along it gets, the less sense it makes to use anything but Gutenberg for more and more. The efficiency and performance from consolidating foundational components is hard to beat. It’s really not a question of “if” Gutenberg will replace X, but when.

  2. Your example code (above) works like a charm. Until now, I was using the EditorsKit block(s) json export function, which in return, once a person gets a hold of the export file, all they have to do is drag and drop the file on the editor, that’s it… With this solution though, people would have to download the json files from my website manually…

    With the Native Patterns though, all I have to do is include them in a plugin or theme, so it’s a big time saver for the end users, and at the same time making the solution more professional.

    Thanks again Justin !

    • Quick Update: The block patterns also work with dynamic blocks, so we can use them with ACF Blocks.

  3. Ive been splitting my time between 3x page builders:
    1. Elementor
    2. Gutenberg
    3. WP Bakery (shudders)

    I am blown away by how good Gutenberg now works, and when im using elementor I find myself at times wishing the site was in Gberg!

  4. Pattern API is a welcome update. After adding few patterns, the pattern section looks crowded. Hope in upcoming version there would be some category to organize the paterns.
    If it’s already there and I have missed it them please guide me.
    Thanks a lot for quick update and follow-up on Gutenberg API. These updates are very helpful.

    • For right now, the UI is a little crowded. The team is working toward creating a better experience, but it may be a version or a few down the road before we see that. At the moment, the important thing is making sure the idea works, which is seems to do so well.

      What I imagine we’ll see soon is something like the block inserter for patterns or that patterns will be integrated into the existing block inserter UI. Currently, patterns are held in a sidebar, but that is temporary.

  5. As an alternative to placing in the functions.php file, I trust you could load these from a custom plugin that you could make yourself so that your chosen patterns would be independent of the theme.

    I tried out the sample code you posted and while it rendered, the styling as a bit off. The buttons were not correct. Perhaps WordPress 5.4 is required?

    • WordPress 5.4 is not required, but Gutenberg 7.8+ is for the pattern to work. This is still very early and experimental at this stage.

      As for styling, it’s going to come down to whether your theme has the styles built in. The buttons group is a fairly recent addition, so it may not be in all themes yet.

  6. Block patterns seem to be indeed the next big thing within Gutenberg. It is great to see how fast the block editor evolves and what else it will bring in the near future for people working with WordPress.
    From a non-technical perspective, it will be interesting to see, how fast this will be adopted and in which ways by site owners.

    • It should not affect Schema. As for speed, that will depend on whether your theme supports custom styles for blocks on the front end. If not, an extra stylesheet will be loaded.

  7. Thanks for the article Justin. I am excited to use the WP Block Patterns, but I do not see the icon come up in the editor in 5.4.2. Has it been removed or relocated?

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: