Introducing the pattern editor
Before we talk about the pattern editor, let’s talk about patterns.
Patterns are a core feature of Gutenberg. They are pre-designed layouts that you can add into the block editor. This gives you a consistent newsletter structure to write with every time and saves you time because you don’t have to build it from scratch anymore.
The difference between patterns and reusable blocks: Once you’ve added a pattern to a post or newsletter, you can edit them freely without changing the actual pattern. In contrast, when you add a reusable block, editing or making changes to them changes the actual reusable block, and this change is reflected in every instance where you’ve added the reusable block.
Currently, in WordPress, there’s no way to create patterns yourself unless you’re a developer.
Which is why we created the pattern editor.
The pattern editor lets you create your own patterns without coding. Each pattern is then saved and can be used across your site.
Where to find the pattern editor?
In your WordPress dashboard, click or hover over Newsletters, then look for Templates & Styles.
From there, switch to the Patterns tab and click on Add New to create a new pattern.
How to create a pattern in the pattern editor?
When you click on Add New inside Templates & Styles, you’ll be taken to the pattern editor.
The pattern editor makes use of the WordPress block editor, so you should be familiar with the general features and functions.
The pattern and newsletter editors are all using the block editor. Hence they all look the same. If you forget whether you’re editing a pattern or a newsletter, simply look in the right-hand corner. The pattern editor says Pattern and the newsletter editor says Newsletter. Simple!
Some useful tips for building patterns
Start with a real newsletter
Rather than build a newsletter pattern from scratch, the best way to build a newsletter is by recreating an existing newsletter from scratch.
Add the actual headings, text, images, links, buttons and everything else from a newsletter you’ve recently sent.
Then, keep all the default content that goes into every newsletter (e.g. footers), and delete all variable content but don’t delete the block itself. Instead, leave it as a styled placeholder.
This is the best way to give yourself a realistic pattern that is already battle-tested. If you build a pattern from scratch, you might find you miss a lot of basic things (like buttons, signatures) and have to manually create them when writing your newsletters. Save yourself the extra steps by adding this stuff into your pattern from the start.
Add title = Pattern name
The title of the pattern is the name of the pattern. This title/name will not show up in the pattern.
Use this to give your pattern a name instead. For example, if this pattern is for your daily deals newsletter, you can name this Daily Deals.
Pattern editor displays your newsletter theme
The pattern editor displays the styles you have set in the Global styles.
In contrast, the blog post editor displays the styles set by your blog theme.
In this example, you can see that we’ve set the Heading 1 colour to green in the Global styles (which you can find under the Templates & Styles > Global styles).
And because we set it to green in the Global styles, when we build patterns, you can see that the headers appear as green by default.
Add patterns to your pattern
This is a little meta but you can add patterns to your pattern. This is useful if you want to take smaller patterns like heading and footer patterns to build one full layout pattern.
Add text placeholders
I mentioned this above, but I’d like to elaborate:
All newsletters have a combination of text that never changes. For example, introductions or footers. For sections that never change, type it all out in the pattern so that you don’t have to type it out from scratch for every newsletter.
For sections that change with each issue (like the core content), just add text placeholders so that you don’t have to fiddle around with adding blocks every newsletter.
Organise your patterns into categories
Organise your patterns into categories.
You can then search for your patterns by category when you want to add them to your newsletter.
Previewing and testing patterns
If you would like to preview your pattern to see how it will look on your blog, you can click the Preview link.
For additional view options, you can head to Web view, where you can choose what your site visitors will see.
Note that if you select blog theme, the pattern preview will show your content using your blog theme styling, not the newsletter theme designer styling.
This option won’t be carried over to the newsletter editor and just gives you an idea of what you can expect to see.
If you scroll to the bottom, you’ll find some options to send this pattern as a test email or to preview the email in a new tab. Be sure to test your patterns before publishing them.
Publishing patterns
Once you’re happy with your pattern, it’s time to Publish it. You can do that simply by pressing the Publish button, just like publishing a blog post.
You’ll then find your new pattern under Newsletters > Templates & Styles. You can edit, view or trash it from here as well.
Using patterns
Once you’ve published your pattern, it’s time to use it!
Create a new newsletter by heading to Newsletters > Emails > Add Campaign.
Learn more about the newsletter editor.
In the newsletter editor, click on the blue square with plus icon Add block button. From there, navigate to the Patterns tab and select the relevant category.
Then click on the pattern you want to add.
Your pattern should automatically be added to the newsletter editor and you can start writing immediately.
You can use these patterns in the blog post editor and more. But please note that these patterns were built for email newsletters so use them with caution and be sure to test them before publishing.
Once a pattern is added to the newsletter editor, it becomes like regular blocks.
So even if you edit the original pattern in the pattern editor, those changes will not be reflected in your newsletter. You’ll have to delete the old pattern and add the new one if you want to see the new changes.
If you’d like to change the pattern, you’ll have to navigate back to Templates & Styles and edit the relevant pattern.
Have more questions? Feel free to get in touch by filling out the form on the contact page.