While the block editor absolutely leveled-up the WordPress publishing experience, building beautiful web pages is still quite a challenge. It’s like we’re handing folks the International Space Station LEGO set — without any sort of help to build it. Sure, the cleverest master builders will likely figure it out, but what about everyone else — the other 99%?

Now if that set came with four or five assembled “chunks” of the ISS, completing the build would be much simpler. Maybe even simple enough for that 99%.

Enter Gutenberg block patterns: thoughtful arrangements of blocks that deliver entire sections of a page, with just a click.

Why block patterns?

The concept of using predefined sections of page content in web design is not new by any means. Most website builders — Wix, SquareSpace, and Weebly included — have long provided patterns of some sort to help people design websites. Below is a screenshot of how “patterns” are perceived at SquareSpace, although they’re referenced as “sections.”

A number of WordPress plugins have already implemented pattern libraries of their own as well, i.e. Design Library, Atomic Blocks, and Stackable. While these plugins are solving a real problem, the varying mechanisms and underlining architectural differences make for a fragmented experience. Thankfully, the Gutenberg contributors are actively discussing how to unify the implementation, interface, and overall experience of block patterns.

The idea around patterns is that themes and plugins may easily add beautiful pre-built block “sections” to the editor. So instead of having to add each block of a complex layout one-by-one, you’ll have direct access to any available patterns within the Block Library. 

On top of that, we’re exploring the interaction of bringing up patterns first, when the sibling Block Inserter is clicked (the little “+” icon between blocks). I think this will be particularly huge for improving the editing experience.

Adding patterns to theme or plugins

While the API is yet to be officially defined, there have been discussions (WordPress Slack link) around what the Block Patterns API could look like. In short, it may look very much like the new Block Variations API. 

This means that theme and plugin developers will likely be able to configure a collection of patterns with only a name, description, array of blocks using the Block Template API, and example content (pre-defined structured data for the pattern preview). So do you need to know Javascript to build these patterns?

Nope. While I do encourage developers to learn Javascript — as the programming language is becoming ever so important to WordPress — adding patterns will likely be accessible in PHP, as registering Block Styles and Block Variations are today.

For example, it is entirely possible that block patterns may be added just like how the register_block_style() function works: 

if ( function_exists( 'register_block_style' ) ) {
	function prefix_register_block_styles() {
		/**
		 * Register stylesheet
		 */
		wp_register_style(
			'prefix-stylesheet',
			plugins_url( 'style.css', __FILE__ ),
			array(),
			'1.0.0'
		);

		/**
		 * Register block style
		 */
		register_block_style(
			'core/image',
			array(
				'name'         => 'glitch',
				'label'        => '__( 'Glitch Filter', 'coblocks' )',
				'style_handle' => 'prefix-stylesheet',
			)
		);
	}

	add_action( 'init', 'prefix_register_block_styles' );
}

Theoretically, patterns could be added programmatically, with Javascript or PHP, using a very similar approach. Cool, eh?

A future of patterns

I’m stoked about what patterns bring to the block editor: simplicity. We’re tackling one of the more difficult parts of site building — actually starting — and making it more manageable. And in the very near future, folks will be able to install patterns from WordPress.org, right within the block editor.

We may even have a separate area on WordPress.org just to showcase beautiful patterns for everyone to use. Now that’d be awesome.

And on a totally different front, agencies and freelancers will be able to flesh out commonly used patterns throughout their websites — making hi-fidelity mockups a breeze.

I’m confident that forming this singular experience around the implementation of block patterns will only further improve the publishing flow within Gutenberg. And I’m particularly excited for a possible open source pattern library on WordPress.org, bringing creativity and site building with the block editor to the next level.

Patterns will also be great for theme developers to capitalize on; creating a beautiful collection of possible layouts for a particular theme. Patterns may become a catalyst for folks who’ve put off optimizing a theme for Gutenberg, creating an on-ramp of sorts.

2020 is going to be a huge year for WordPress, partly because of the fantastic work going into block pattern — but also global styles and full site editing. I can hardly wait for all this to land!

Anyhow, check out the issue on GitHub to catch up on patterns and jump into the details. Real-time discussions for design take place in the #design channel within the Make WordPress Slack channel (registration required) and the weekly Gutenberg design triage meeting occurs on Wednesdays at 17:30 UTC. I’d love to see you there to chat patterns!