Core Editor Improvement: Contextual patterns for easier creation

We’ve all been there. Staring at a blank page sometimes with an idea of what you want to create and sometimes with a mind as blank as the page. To make the creation process easier and to leap into the pattern filled future, work is underway to suggest 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. patterns based on the block one is working with. Tied to this, when using the block inserter, block patterns will be suggested where possible. In the long run as this work continues and spreads to more blocks, it will be easier to create content and get inspired without leaving the editor. 

Exploring integrated patterns

For now with 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/ 10.6.2, you can see how this flow works with a few blocks including the Heading Block, Query Block, Social Icon Block, Buttons Block, and Paragraph Block. In particular, lots of work has been done around the Query Block to make it easier to create beautiful layouts in a few clicks with this powerful block. Here’s a quick visual showing this experience with the Quote Block: 

Video showing how the block patterns can be found in the transforms options

You can begin to explore these patterns in three ways:

  • Browse through them in the Patterns tab of the Block Inserter.
  • Select directly from the Quick Inserter. 
  • Navigate to them in the transform menu of individual blocks. 

Integrate your custom block patterns

On the flip side, if you’re creating your own custom block patterns, there’s a new experimental blockTypes property being worked on that will allow your patterns to show up in the transform menu. Here’s an example of how this works currently. This is still in the early stages though as it’s utilizing experimental components and might need changes down the road so stay tuned! If you do try this out and run into any bugs/feature requests, feel free to share them in the Gutenberg repo

Help with these efforts

Expect this work to continue expanding both in terms of integrating patterns in intuitive places and in terms of the number of unique patterns. To get a sense of where this work is headed in the future, check out this early PR. If you’re interested in helping in this area, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC. Finally, if you’re wanting to dive into custom block patterns, check out the Learn WordPress course along with the documentation to get started. 

#core-editor, #core-editor-improvement, #gutenberg