Shaded path in forest, Pulau Peucang, Indonesia

How to Easily Add a Block Pattern from WordPress Repository

The WordPress Repository now has Block Patterns, right next to where you find plugins and themes. You can very easily Add that Block Pattern from the Repository, for use in your WordPress sites. Then, you can change the images, colors, fonts, etc; everything that is appropriate for the pattern, using the Block Editor controls you are using for changing the appearance of a paragraph or columns.

In the Repository, each pattern has a page demonstrating it. Notice the “handles” at each side of the pattern? Those are so you can see how the pattern looks at different browser window sizes.

Here’s one example, a “large background image with title and description”. This pattern is on https://wordpress.org/patterns/pattern/large-background-image-with-title-and-description/

Insert A Block Pattern

Find a block pattern you like in the Repository, and on the page that shows an example of the pattern, there is a “Copy Pattern” button. Then you paste into your WordPress page or post, where you want it to appear. (Click on the block before where you want it, in the hover Options (three vertical dots) menu, select Insert After, then press Ctrl-V to paste the pattern.)

FISHING BOATS

Winslow Homer, 1903

Winslow Homer was an American landscape painter best known for his marine subjects. He is considered one of the foremost painters in 19th-century America.

Learn More →

I changed the background color of the text, to one that fits more with the colors of the site. Specifically, I took a background color from the Palette. To do that, open List View (3 stacked lines icon at the top of the Editor near the left), select the Group that contains the two columns with paragraphs. Now, you can change the background color, for the entire group at once. In the Block Options panel, in Color, set the default text and background colors for the group. Do the same for the Group that contains the heading “Fishing Boats”.

How did I move what part of the picture is shown? That is with the “Focal point picker”. When you select the correct block (in this example, the Cover block), you will see the focal point picker. Since the focal point picker is built into WordPress, most blocks that contain images have this. Drag the small circle around, to see the portion of the picture you prefer.

How to Change the Image in This Pattern

You probably want to change the image, to one that is in your Media Library. When you select the correct block (in this case the Cover block), it has a “Replace” button on the hover menu. You then have options to open the Media Library to pick a better cover photo, or to upload a new photo into the Media Library and use it here.

Here’s how the same pattern looks with new photo and text:

Block Patterns vs Reusable Blocks

When you edit a reusable block, the change will be reflected in all the places where that reusable block was used.

If you wish to update a reusable block on a specific page or post only, you can use the Convert to Regular Blocks option

https://wordpress.com/support/wordpress-editor/blocks/reusable-block/

So, Reusable blocks are best for something that should look the same on every page, and have the same text. For example your “Author Tagline” or the company contact info.

Block Patterns are for when the layout stays the same, but the content will be different each time you use it. They are for when you want to reuse a pattern, not for when you want to reuse the contents.

Saving Your Customized Pattern As A Block Pattern

Block Patterns are easy to copy, including from the public WordPress Repository. Block patterns have no tie back to the original, so when you edit the pattern it is only in that one place.

You might want to insert some dummy text “Put Text Here” so you remember to edit it every place you put the pattern. And use a default image, to remind you to replace it; don’t use some gorgeous image that you might forget to customize to the specific page it is placed on.

To copy a Block Pattern, simply select the correct block, in this example the Cover block that contains the forest picture; then you can paste it into any programmer text editor (I like Atom and Visual Studio Code) to save it. You can, of course, copy it from any other page that has it (select the block, options (3 vertical dots), Copy.

You can then simply paste it wherever you want to, just like you did pasting a pattern from the Repository.

Saving Your Customized Pattern As A Reusable Block

When I save a Reusable Block, I preface the name with my initials or the company initials, so I can find it easily.

If you want to change a reusable block so all the places where you used the block will be affected, that is the perfect use of a Reusable Block.

https://wordpress.com/support/wordpress-editor/blocks/reusable-block/ says “If you’d like to edit a reusable block in all the places on your site, add the reusable block and edit it by adding more paragraphs or other types of blocks. When you’re done with the changes, click the Publish button and then the Save button.”


Posted

in

,

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.