Submitting Block Patterns to the Directory


Description

Every WordPress user benefits when you share your block patterns and help democratise design. This lesson aims to equip users to help expand the pattern Directory and share their designs with the rest of the WordPress community.

Objectives

After completing this lesson, participants will be able to:

  • Define what block patterns are and how they can benefit users.
  • Access patterns and add them to a post or page.
  • Use the Pattern Creator to create and submit a pattern to the Directory.
  • Follow tips and guidelines provided to design patterns.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Can you insert and modify a block pattern?
  • Are you able to nest or group blocks together?

Materials Needed

  • A local install of WordPress.
  • A WordPress.org user account.

Notes for the Presenter

  • It will be helpful to explore all the different types of patterns currently available in the Pattern Directory and discuss the future benefit if more and more patterns are added.
  • Create a page using only patterns to show how quickly you can create structure on your site.
  • Create your own pattern with the Pattern Creator following the suggested guidelines.

Lesson Outline

  • Explain what block patterns are and discuss the advantages of using them.
  • Demonstrate the ways how to insert a block pattern into a post or page.
  • Show how to use the Pattern Creator to submit a new pattern.
  • Highlight the tips and guidelines provided to design patterns.

Exercises

Create a new block pattern with the Pattern Creator

  • Ask participants to create their own pattern that would benefit other WordPress users. Remind attendees to follow the suggested guidelines.

Assessment

You can modify block patterns to meet your requirements.

  1. True
  2. False

Answer: 1. True

Choose all the correct statements.

  1. Block patterns will save you a ton of time.
  2. Block patterns give you greater freedom when you’re building your site.
  3. Block patterns are difficult to modify.
  4. Block Patterns allow you to make or replicate complex layouts with just a few clicks.

Answer: 1. (It will save you a ton of time), 2. (It gives you greater freedom when you’re building your site), 3. (Patterns allow you to make or replicate complex layouts with just a few clicks)

You can create and submit your own block pattern with the…

  1. Pattern Editor
  2. Site Editor
  3. Pattern Creator
  4. Template Creator

Answer: 3. Pattern Creator

Good block patterns should adhere to the following guidelines. Choose all that apply.

  1. A good block pattern combines multiple blocks together.
  2. A good block pattern has a well-defined purpose.
  3. A good block pattern keeps placeholder text to a minimum.
  4. A good block pattern contains a single block.

Answer: 1. (A good block pattern combines multiple blocks together), 2. (A good block pattern has a well-defined purpose), 3. (A good block pattern keeps placeholder text to a minimum)

Additional Resources

Example Lesson

Welcome to Learn WordPress. We really hope that you will be part of expanding the Pattern Directory. Every WordPress user benefits when you share your patterns and help democratise design. And today, we will quickly show you how easy it is to share your designs with the rest of the WordPress community.

Display of different types patterns available in the Pattern Directory.

As a reminder, the WordPress Pattern Directory includes beautiful and functional patterns that can make your experience building an appealing site much easier. Patterns can save you a significant amount of time, and also give you greater freedom when you’re building your site. With patterns you can make or replicate complex layouts with just a few clicks and using them is as simple as copy and paste. If you visit the patterns page, you can search through all the available patterns by category, and once you find the pattern you’re looking for, you can merely copy go to your website and paste it into your post or page. And then you can modify the pattern as you please.

A red box highlighting the list of pattern categories.
A red box highlighting the pattern selected and a red arrow pointing to how to copy a pattern.
A pattern pasted into a page.

If you’re in a post or page, you can click on the Inserter, Browse All and make your way to Patterns, next to Blocks. Select one of the categories and find a suitable pattern, and then Select. And of course you can modify this pattern to meet your requirements. You can replace the images, change the colour, change the text, etc.

The list of pattern categories available when clicking on the Inserter and then selecting Patterns.
A pattern titled Three columns with images and text.

So how can you add your designs to the Directory? Well, you can use the Pattern Creator and just press Submit when you’re done. If you go to the patterns page, click on Create a new pattern and once you do this, it will take you directly to the Pattern Creator. Now you can go ahead and give your pattern an appropriate Title, Description and choose the correct Category. And now you can use the Inserter to start creating your pattern.

A red box highlighting where to click to create a new pattern.

If you want to add media, patterns are required to use our collection of licenced free images provided by Openverse. You won’t be able to upload or link to any other media in your patterns.

As the name implies, the Pattern Creator allows anyone, from designers to content creators to make custom patterns. And like most things in WordPress, these are available for public use once it’s submitted to the WordPress Pattern Directory.

Follow this link as it will provide you with a quick guide for building WordPress patterns. In a nutshell, to submit a pattern you must have the copyright or legal right for anything you submit and all patterns will be moderated. So something to also take note of; patterns should be submitted in English as they will be translated through translate.wordpress.org. Also remember to use a descriptive name for your pattern, names like Test or My Pattern will be declined. And lastly, let’s look at a few quick tips. Use the group block to control spacing in colour for more than one block at a time, use the cover block to control your pattern’s height, and if your pattern contains numerous root-level blocks, it can be helpful to group them all together. It is also important to remember good patterns combine multiple blocks together, it has a well-defined purpose and it keeps placeholder text to a minimum.

Check out all the patterns already available, or better yet, make your own.


Lesson Wrap Up

💡 Follow with the Exercises and Assessment outlined above.