Patterns

WARNING

WordPress 6.3 renamed Reusable Blocks to Patterns.

WordPress block patterns are a collection of pre-made design elements that you can use for creating custom content layouts faster. These patterns include items like pre-built multi-column layouts, media and text patterns, call-to-action patterns, headers, buttons, and more.

Patterns may also be synced. Editing a synced pattern will update it anywhere it is used within the site. After creating a synced pattern, it can be detached back to a regular block. Doing this allows you to make changes to that one block. Updates to the synced pattern will have no impact on the detached pattern.

To use block patterns, you need to edit the WordPress post or page where you want to use the block pattern. On the page/post edit screen, click on the Add Block button to open the block inserter. From there, switch to the Patterns tab to view available block patterns.

You can also view BCGov specific block patterns in different categories like general, headers, footers, pages, and more including any site specific patterns developed specifically for sites such as CleanBC.

Understanding Patterns

• Patterns are combinations of core block components and custom classes set up in very specific configurations.
• Patterns are typically designed to be discreet page specific sections and are not meant to be combined within other patterns.
• Patterns are usually contained in a Group block at its top most level when using the List View.
• Pre-defined styling can be changed by moving or altering pattern structure while others may cause design failures.
• Be very cautious moving patterns into other patterns.

Page Layout Patterns

There are pre-installed patterns available to get you started with page layout. The categories of patterns available are,

• All Patterns
• General
• Page Header/Footer
• Page Layouts
• Post Query

TIP

There are two optional pattern groups available. To enable them you must go to the WP Admin panel > Appearance > Theme Options. Toggle 'Enable all styles' in the Styles and Patterns section.

• Optional Banners
• Optional General

BCGov Block Patterns

Patterns are separated into different categories such as General, Banners, Header/Footer, Page Layout, Post Queries, etc. These categories are used to separate intended purpose and also keep the list of patterns from getting too large and inhibit browsing. Should you know the name of a pattern you can use the search tool in the Block Inserter to filter and find the one you need.

Many patterns are available for use as part of the default BCGov base theme. They offer layouts such as Alternating Cards, Card with Image Overlay, Card with Under Image Portrait 2-Up, Cards Portrait 3-up, Detail Card with Icons, Hero Banner, Long Card, Quote, Small Quote with Image, and many more.

Creating Custom Patterns

In the site admin click on "Patterns", this will bring up the list of custom patterns currently in your site, or it will be empty if starting new.

Use the "Add new" button to begin building a custom pattern. Enter a name for the pattern and then build it as you would any other layout using the blocks or elements you want to include in your custom pattern.

Once you've arranged the blocks to your liking, click on the "Publish" button to save your pattern.

Adding custom patterns to the pattern chooser

To add your custom pattern to the Pattern chooser, you need to add a new or existing "Pattern Group" located on the Custom Pattern tab of the block inspector area. Click on the "Add New Pattern Group" link or choose from any of the options listed.

If creating a new group enter a "New Pattern Group Name" for your new pattern group and select the group option you just created.

Click on the "Publish" button to save your new pattern category.

Your custom pattern will now be available in the Pattern Chooser under the category you just added. It will come prefixed with the "Custom: " label, so if your group was called My Great Patterns, in the pattern chooser it will be labelled "Custom: My Great Patterns."

Making custom patterns searchable

You may have noticed at the top of the block and pattern chooser the ability to search for existing blocks and patterns. To make your pattern easily findable without browsing to it you can add keywords to aid in finding your pattern.

Add any keywords you feel make for better searchability to the "Add Related Search Term" under the "Search Related Terms" section found directly below the Pattern Groups.

Site Specific Patterns

Site specific patterns developed specifically for sites can also be inserted from their patterns. Look for categories that identify the site by name. These patterns can be modified once applied to the page and can either be set up as a Reusable Block or alternatively can be copy/pasted between pages or sections once altered.