Core Editor Improvement: Advancing the power of Patterns

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

The following covers a few new features, big and small, coming to WordPress 6.3 that impact the experience of creating and using patterns. You can explore these features if you’re using Gutenberg 16.2 with the exception of the ability to rename and duplicate custom patterns coming to 16.3.

Create your own patterns (synced or unsynced)

Since GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 16.1, users can create patterns within the Editor. This includes a “Patterns” section where you can create and manage Patterns and Template Parts. As a result, you can now use your theme’s patterns, patterns from the Pattern Directory, and your patterns (and any combination you can think of) as you build your site.

With the ability to set the sync status of patterns as well, Reusable blocks have a new name: Synced Patterns. This is a step forward in reducing the concepts you need to learn, and unlocking functionality for folks to create their own patterns:

• A Synced Pattern means that any change made to one Pattern gets deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. to all instances of that Pattern across your site.
• Unsynced Patterns are included in the Inserter alongside other patterns. Changes to these patterns will not be reflected throughout your site and you can customize each instance to your liking.
• You can edit, rename, duplicate, and delete patterns all from within the Patterns section with the launch of Gutenberg 16.3.
• Once you’ve set the sync status, you cannot change it after the fact. You will need to duplicate the pattern and create it again to change the sync status.
• For blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes, all patterns are listed alongside template parts in the Site Editor > Patterns section, where you can enter an isolated editing mode to make changes.
• For classic themes, the prior reusable block management page has been reused to house patterns in a list, similar to the Posts > All Posts view. 
• Custom pattern categories will likely arrive in a future release. You can read more here. 

Nudges have been added throughout the interface to help with this shift, including in the pattern creation process itself:

Keep design integrity with aspect ratio added to Image blocks

Aspect ratio controls have been added to Image blocks, unlocking the ability to set the design you want for an image, knowing that it’ll be preserved when that image is replaced. While it’s a small change, this has a big impact on the capabilities and experience of using patterns. Now you can worry less about skewing carefully curated layouts and more about your content.

In the future, imagine being able to set height/width and aspect ratio with just the Image block placeholder so patterns don’t have to include images at all, and you can begin setting the structure of content without needing images. 

Explore new bundled Core patterns

To continue offering unique and beautiful designs, the Pattern Directory includes a variety of new patterns with a focus on adding banner, text, and image-related options:

• Fullscreen fixed cover within another cover
• Cover Poster on Left, Paragraph on Right
• Centered image with two-tone background color
• Fullwidth Dark Banner with Heading Top Left
• Fullwidth cover with repeating gradient text
• Fullwidth, vertically aligned headline on right with description on left
• Fullwidth headline with links and gradient offset background
• Heading, Paragraph, Button with Two Images
• Bold sale banner with geometric background
• Offset bold paragraph text with varying opacity
• Offset text with a brutalist design vibe
• Fullscreen image with right content area
• Cover Image with Bold Heading and Button, Left
• Cover Image with Bold Heading and Button
• Fullscreen cover image gallery

A new Pattern Directory filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. makes it easy to search for Curated patterns provided by Core or Community patterns created by WordPress contributors.

Add starter patterns to ease the template creation process

Building on changes made to the Patterns API in WordPres 6.2, you can also register custom patterns meant for specific template types (e.g., single post, 404, etc.) and they will appear in the start modal to ease the creation process. This is especially helpful for theme authors and site owners as it expands the power of patterns as starter content for template and post types alike.

Thank you to @richtabor @eidolonnight @dansoschin for helping review and edit this post.  

#6-3, #core-editor-improvement