Cutting Edge Pattern Management and Creation

Those that master block patterns will be strongly positioned to lead in the new paradigm of designing, building, and scaling WordPress.

Watch this session to learn how you can leverage the latest pattern features, as well as an exciting new tool that elevates the pattern management experience for freelancers and agencies.

Speakers: 

• Michael Day, React Engineer at WP Engine
• Phil Johnston, Sr. Staff Software Engineer at WP Engine

Session Slides: 

Transcript: 

PHIL JOHNSTON: Hi there. My name is Phil Johnston, and I’m a Senior Staff Software Engineer at WP Engine. And myself along with my teammate Mike Day are going to be talking about cutting edge pattern management and creation in WordPress.

So there’s a lot of new and interesting things that are being added to WordPress lately. And one of those is patterns. And I’m going to be talking about that. Patterns are made out of blocks. So let’s dive right into it.

You would use blocks in the block editor which is the WordPress dashboard. This is where you would go to make something like a blog post or a page and where you can start to write or create. And it’s the place where you would use blocks.

So I was able to borrow some LEGO blocks from my kids for this talk. So to help illustrate this, when you look at the page here where it says I am a heading block, you can think of that as one as a LEGO block. And then underneath that where it says I’m a paragraph block, you can think of that as another block that you’ve clipped down underneath that and then so on and so forth.

You’ve got another heading block underneath there. So you can click that in. And then you can start to build out your page as you want. And you can rearrange those blocks just by clicking, dragging, or reordering. And then you can reassemble your page very easily that way because they’re all blockized.

While this is very simple for something like a blog post, and you can kind of just dive right into the editor and start doing this without even knowing that these are blocks, but you can also build a much more complex block layout like what you’re seeing here. So here you have a three column layout with three images. And above that, you’ve actually got a full width column. And it stretches across all three of those columns. And then so three image blocks, three sample heading blocks, three paragraph blocks, and then three button blocks underneath that.

So again, WordPress blocks are like LEGO. You can snap them together to make either a simple layout like the first one that I showed or a more complex layout like the one you’re looking at right here. And so I’ve highlighted the blocks that you might expect to see on a page like this in red. So you can see the first one has a red box around it. [CLEARS THROAT] Excuse me. And that represents a block. And then underneath that, you’ve got another block with some Lorem ipsum text in it and then three image blocks like I mentioned, three heading blocks, three paragraph blocks underneath that, and three button blocks.

You might think that’s all it takes to make a page layout like this, but it’s actually quite a bit more complex than that. So here on this slide, I’ve highlighted the invisible blocks, the blocks that you can’t see. These are blocks that need to be on the page to define where things should sit like the fact that there’s three columns instead of one column.

And so invisible blocks, while powerful, they’re also really hard for an average user to dive in and just start using. As you move your mouse around inside the block editor, you’re not going to know that there’s invisible blocks there because they are invisible. And all of those blocks also have complex controls that come along with them. For example, here’s one of the column blocks.

And if you look on the right hand side, you can see all of the complex controls that come along with that that are not super easy or intuitive to understand. Things like inner blocks use content width or padding or block spacing. The average user is not going to know or understand what these settings do. And this is a little bit like me if I were to walk into a kitchen and see a whole bunch of spices.

I’m not a great cook. And so I would have a bunch of spices on the rack like this. And I would not know how to combine them or use them because I haven’t taken the time to become a chef. And just like it takes time to become a five star chef and cook a great and delicious meal, it takes time and there’s a difficult learning curve with the block editor and understanding which blocks to use at which time to make something that looks good or tastes good.

And so it is a specialty. It’s a craft that you have to develop. So the average user is going to get dumped into the block editor with an empty slate like what you see here. And they’re not going to know that they need to use a columns block, or how to use that block, or what to put inside that block, basically the spices that they need to combine to make something that truly looks great.

They might find it frustrating. They might find it to be tedious and difficult to get what they want. And even if they do learn all of those complexities of blocks, they might just not have design skills. And so, while powerful, blocks can be difficult to use. And this is why the concept of a pattern was invented.

So at WP Engine, we built a plugin called Atomic Blocks. And in Atomic Blocks, we basically came up with the concept of a pattern but we called them sections and layouts. And it’s the exact same concept. And WordPress Core actually took inspiration from Atomic Blocks for the concept of what are now in WordPress Core and are called patterns.

So patterns are prebuilt groups of blocks that users can browse, like you see here. There’s a bunch of patterns here for them to choose from. And by clicking on one, they get all of that inserted into their page with a single click. So instead of needing to assemble blocks like this, LEGO blocks, they get something like this, a preassembled group of a bunch of blocks that was made by, hopefully, somebody who’s very good at design already and has put hours into that craft of making blocks.

And so once you insert it onto the page, it looks a little bit like this. And just like that, boom, you’ve got a pattern, a whole bunch of blocks preassembled that look good, that taste good, and that work, and that you can then just go in and type the text in that you need to change. So you would change something like sample heading to the unique text for your page.

So patterns are like a huge head start for the average user. They don’t need to learn all the complexities of the block editor, all of those complex things. They don’t need to be a professional designer but they can get great looking design just by inserting a pattern onto the page.

So if you’re an agency, somebody who builds websites for another person or a client, you can use block patterns to help your clients help themselves. By delivering a whole bunch of predesigned patterns to your client, they can build their own pages.

So say they have an event coming up that they need a special page for. They can grab a block pattern that you’ve created for them that matches their brand. It matches their color scheme and all of that kind of stuff, and they can just click and insert it onto the page and reverse engineer– just start typing into those blocks instead of needing to know all of the complexities of which block to use in which scenario, and what not to do as well, and how to build a layout that works great across devices and all those kinds of things.

However, while block patterns are easy to use for the average user, they are not easy to create. And they’re even harder to manage over time. And for developers and agencies, there’s no workflow or tooling built into WordPress to help you make patterns.

So I’ve broken the steps for building a pattern currently in what I’ll call the hard way here into 10 steps. And if this looks overwhelming, it’s because it kind of is. The first thing you have to do is create a PHP file in a code editor like VS Code. You have to put a specific file header at the top of that file.

Then you need somewhere to build. So you have to have a WordPress, probably on your local, which is great. But then you need to create a temporary page inside of that WordPress just so that you can put blocks somewhere and work on them. And then you need to build it out. You need to use those skills, that craft that you’ve developed, and make it look pretty. And then when you’re done, you have to switch to a code view and copy all of that code into that file that you made in step one.

And then you have to save that file to a specific location in your theme. If you’re building a theme and delivering it to your client, you have to put it into the patterns directory. And then if your pattern contains images like in that three column layout I showed, you have to make sure that those images are actually going to work when you deliver it to your client. So because you’ve built it on your local computer, that image is also going to be referenced in the code as though it was on your local computer’s hard drive.

Obviously, this is a problem. Once it’s not on your computer anymore, that image isn’t going to work. So then you need to go through the code with a fine tooth comb, look for any of your local computers’ URLs, and replace those with a specific PHP tag. And then you need to make sure that you actually move those image files into your theme as well. You can’t just change it in the code. You also have to move that file.

And then to make it even harder, this is where it gets really I think the most frustrating, at least for me when I was building a lot of patterns, was if I made a spelling mistake inside of a pattern, I would need to start at step three again and go all the way to step nine again every single time just to fix a spelling mistake. You also have to– because you have to regenerate all of the block code every time– you have to then research for all of those image URLs and replace them, put it back in the file.

It’s a whole repetitive, tedious set of steps, especially for managing over time. Like say you need to tweak a pattern months from now. It’s very tedious. And this is something we ran into while building patterns for our Genesis Pro collection. We’ve delivered a lot of sections and layouts or patterns with that and became very frustrated with the process of doing these tedious things over and over and over again.

And that’s what led us to build a tool to help us not have to do these things, to take that tediousness away, and to make it really just as quick as possible. You can just work on it, save it, and, boom, it’ll go straight to the file for you. It’ll put the file in the right spot. It writes all the code for you. And so we decided to build a tool for ourselves internally that would take all of this pain away. And we never actually quite intended for it to become something that we would let other people use but it became so useful to us that we wanted to make it available to other people to use as well.

So again, as you can see the current hard way of building a pattern is not ideal, and it’s not a great way to do things. So that’s why we built Pattern Manager, a UI for creating and maintaining pattern collections inside WordPress. So I’m going to pass it over to my colleague, Mike Day, to walk us through pattern manager and show us all of the awesome features inside it. So over to you, Mike.

MIKE DAY: Hi. I’m Mike. I’m a software engineer at WP Engine. Patterns are a powerful layout creation tool that have the potential to change the game for WordPress builders. But as Phil just demonstrated, the experience of actually using these patterns in terms of creating and managing them, it’s lacking to say the least. Pattern Manager aims to bring the management of pattern files to the forefront of WordPress design in a frictionless way via a plugin that can slide into your workflow. Let’s jump in.

For the initial purposes of this demo, I’m going to leave my code editor window open here on the right. This is an actual pattern file saved directly to my disk. And I really want to drive home the point that when you work with Pattern Manager, you’re actually manipulating and creating physical files saved to your disk. Specifically, they’re saved to your current theme directory. So you can see right here these two PHP files or pattern files, they represent the patterns that are currently active over in this Patterns view.

Additionally, note this images directory. Phil brought up a really interesting point that right now when working with patterns, let’s say you have a bunch of images saved to a pattern. All of those URLs for those particular images are going to point to your local installation. That’s a big problem whenever it comes time to actually share your work.

All of those images will be broken. So we approach that a little differently. We actually save copies of these images directly to the theme folder itself. This is a game changer for version control, for example. Let’s say you and your collaborators are using Git. Now you can be sure you all have access to the same images as you work.

OK. So let’s actually jump into the interface. This is the patterns view. And immediately here, you can see both of the patterns that are registered for my theme. When you hover over a pattern preview, notice the action buttons that pop up. We have options for editing, duplicating, or deleting a given pattern. There are also some filtering options here on the left but I’m going to come back to that here in just a little bit. For now, let’s actually jump in and edit a pattern.

So right away, I’m sure you will recognize a very familiar UI. This is the WordPress block editor, in this case repurposed to provide a specific space for working with patterns. And over here on the right, you’ll see these various header properties. Now before I jump into these, I want to give a little more context and actually use some text borrowed from WordPress developer documentation.

The title property is pretty self-explanatory. This is a human readable front facing ID, if you will, that users will see when they interact with your pattern on a site. Categories are really used for grouping patterns together. This is going to be an array of registered categories where you can add one, or many, or really none at all if you want. But there is a problem here with the current way that this works in WordPress Core.

There’s really not a great way to tell what categories are actually available. There’s not an obvious spot to actually find these registered block pattern categories anywhere on your site, at least that I know of. Now keywords you can think of as being kind of like search terms. Essentially, you can enter in these descriptive aliases to describe your pattern so whatever users are searching for in the inserter, they can easily find what they need. And the description is kind of an extension of that idea except it’s visually hidden text. This is really useful for visually impaired users that might be using a screen reader.

Now jumping back into Pattern Manager, let’s modify these meta properties. The pattern title is a simple text input. Simply start typing to rename your pattern. But notice a hidden feature here. Pattern manager is telling me that a pattern with this title already exists in the theme. I don’t want to accidentally destruct that file so I’m just going to leave the title alone.

OK. Let’s pick some categories. So straightaway, notice we have rendered this list of categories just in a dropdown. Otherwise, it’s hard to know where to actually find this data. But this list is dynamically populated via an API call. That means not only all of the registered block pattern categories for your theme but any category you might have registered we’ll show here. Let’s just pick featured for now.

OK. And let’s add some searchable terms. For the purposes of this demo, I’m just going to use sample pattern. But remember here’s where you might add terms that would describe this pattern for users that are searching in the inserter. And notice I used a multiword term here. Those are supported in pattern manager.

OK. And let’s add a description. Recall that this is visually hidden text. So really the main intent here in my opinion is to assist screen readers. So let’s just describe this as three columns with inverted colors. OK. Perfect. I feel like we’re at a good spot now. We can actually save our work. But before I do that, I want you to pay close attention to the header in this file on the right. Now as soon as I hit Update Pattern, all of a sudden there’s a lot more data here. The description, categories, and keywords we were just modifying all have appeared here without me having to touch this file.

OK. Let’s look at the remaining meta properties. So first off, we have a pretty interesting property in viewport width. This is intended to be an integer that represents the scaled width for previewing this pattern. So by default, whenever you create a pattern– let’s say that you make something that’s full width or maybe even really narrow. The default settings for this in a WordPress Core might make the scaling look a little bit odd in previews.

So post types. This is simply an array of post type slugs that the pattern is intended to be used with. Note that adding values here will actually restrict the pattern so it only works with those post types. Also note that leaving this blank will cause the pattern to work with all post types.

Next we have block types. This is another array but this time of block types the pattern is intended to be used with. Now I must admit whenever I first started using these block types, I found it a bit confusing. It seems like the usage is really intended to be multipurpose but the intent behind it is not super clear in my opinion.

And lastly, we have the inserter property. Now by default, all patterns will appear in the inserter but let’s say you want to change that. You would simply add a Boolean value of false for this property and it will be hidden from usage in the inserter.

So jumping back into Pattern Manager, let’s see how we handle these remaining meta properties. First off, I’m going to close these other panels. And let’s take a look at viewport width. Now recall this is an integer value that simply controls scaled previews for your pattern in the inserter. One thing that’s a pain with the current implementation of this is actually seeing the results of your work.

So let’s say that I modify the header in my pattern file and I change the viewport width. The only way to actually see what that looks like is by say creating a new post. That gets a little bit convoluted. It’s just a little overly complicated to jump back and forth. It’s a bit of a pain. So the way we’ve approached that is simply hover over the slider and immediately a preview is shown. And as I drag around and try different sizes, I can see how this pattern scales. This is really useful and a huge timesaver. Let’s pick 1,200 for now. And let’s move on to post types.

First thing to note about this panel are the presence of these tooltips. These are just simply little tidbits of information to try and help guide you on your way as you use the app. So first off, this is just reiterating something I’ve already discussed. If there are no selections, if there are no post types added to the header of your pattern file, your pattern will work for all posts types. But notice down below there’s this setting called Modal Visibility.

This is a really cool hidden feature. Essentially, if you have the correct type of block type in the header of your pattern file, whenever users create a new post of the targeted type, they will see a modal appear. And they can pick your pattern directly from that modal. And I’ll show you exactly what I mean in a moment. But I want you to notice how this toggle is actually disabled. And that’s because modal visibility settings will not work unless there is a post type populated.

So the way we approach that is by simply disabling the toggle until there’s a post type present. OK. Now I can toggle this on. And the display and inserter toggle, it does what you might guess. If you were to toggle this off, this would assign a value of false in the header of your file. And this pattern would no longer appear in the inserter. OK. Let’s go ahead and update this.

Now let’s see how all of this actually works in a post. So I’m going to switch over and actually create a new post. Now right away this is that modal I was talking about in action. Because the correct block type and post type are both added to the file, I now see this straight away when I create a new post. And I can simply click on the pattern preview and, boom, my pattern is right there.

That’s pretty cool, but let’s see how the tagging is actually working otherwise. So here’s the category I picked, the feature. And the other pattern in my theme has the categories of columns and text, so that’s working great. What about my search terms? My search term with sample pattern. That’s working great. And my hidden text started with three columns, also working exactly as intended. That’s great.

OK. So let’s jump back in and cover one more remaining meta property. This one is a little weird to explain. I feel like it’s easier if I just show you instead. So let’s go ahead and create a new pattern. All you have to do for that is hit this Create New Pattern button. And here I am back in the editor. In this case, I’m going to choose the code block. And in this code block, I’m going to paste some sample code.

Now this is actually taken from WordPress documentation. This is the way that you would register a block transformation using PHP. So you would take this code and maybe paste in a functions file, whatever you might prefer. Let me show you how we approach this. In this transformed block type section, there’s a dropdown. This dropdown is dynamically populated just like post types and categories via an API call.

So I can simply search for my targeted type– there it is, core/code– and pick it. Now just to illustrate one more time, the difference is in how you might do this now versus using pattern manager. To do this now, I have to hunt down this block of code, figure out exactly what content I might need, figure out my block type, and paste this somewhere, versus in Pattern Manager, I just chose this field. I chose this value from a dropdown. OK. Let’s update this. And I’m going to create a new post. And let’s exit out of our modal.

Now this time, I’m going to also choose the code block. But instead of actually populating this with content, I can simply choose this option from the toolbar. And notice this pattern selection. When I pick patterns, there is my pattern. And by clicking on it, immediately this block was transformed into my target pattern.

One other thing to cover with transformation types are the idea of what’s called semantic block patterns. These are akin to a block transformation but targeted at template parts. For example, headers and footers. But there is a gotcha in there. One thing to know about selecting that target template part block type is you must have the correct type of post type also assigned or it just won’t work. So the way we’ve approached that is by simply assigning this templates type for you. And it’s locked. And it will remain locked until this block type is actually removed.

So that’s it for the initial demo of this editor view, but I do need to switch themes in the background here. And now I’ll switch back to the Patterns View. The point here is to show you how Pattern Manager behaves with a lot of patterns. This particular theme has over 50 patterns registered.

Now notice as I click around these various categories how immediately these patterns are filtered. This is really useful when I’m trying to find what I need among a bunch of patterns. But let’s say you want more granular control. Simply start typing. This filtering works very similarly to the Inserter. It’s really useful and really snappy. And speaking of snappy, one more thing to point out is just how quick this UI feels.

Notice how these previews don’t load until I actually scroll to them. This is a custom implementation that really is great at saving browser resources. And it makes this app feel fast and very snappy no matter how many patterns you use. All right. We’ve covered a lot of ground in this presentation so let’s just quickly recap. Patterns represent an interesting intersection between the curation of individual content elements and full page design.

As a WordPress builder, the ability to create larger layout elements and reuse them across a theme is a compelling idea. Headers, footers, testimonials, feature boxes. These are all hallmarks of every website. And now you can easily design your entire site with patterns.

Now despite the emergence of patterns as a key component of block themes, WordPress itself has no official interface for actually creating or managing these patterns, nor is there anything on the roadmap. Instead, builders have to create patterns manually in their code editor, copying and pasting code back and forth dozens of times, leaving a lot of room for error.

Our product, Pattern Manager, is designed to slide into your workflow. Simply install and activate the plugin and you’ll get a modern UI for filtering patterns, creating, duplicating, editing, deleting, and all of this along with the experience of editing content in the familiar experience of using the core WordPress editor. Additionally, many harder to understand intricacies of properly tagging a pattern file, for example, adding categories, keywords, or maybe even restricting to only work with certain custom post types, are all abstracted away in our UI. Builders have complete control over these settings via easy to use sidebar controls.

Pattern Manager has been released and is available for download now at the URL below. Give it a spin and let us know your thoughts. And please feel free to reach out to me personally and let me know what you think. We hope you give Pattern Manager a try. And we hope it helps you in the same way it has helped our team of WordPress builders. Thank you.