Synced Patterns in WordPress with Overrides and Unsupported Blocks

One of the exciting features of WordPress is the ability to create synced patterns, allowing you to reuse design blocks across your site while maintaining consistency. However, not all blocks in the Gutenberg editor work smoothly with synced patterns—one notable example is the Cover block.

The Cover block is excellent for hero sections and other large visual elements, but when you attempt to make it a synced pattern, you might notice a limitation: the cover block doesn’t support overrides. This can be frustrating if you’re using the Cover block in multiple places, like for hero sections with custom images on different pages and want to keep the overall look and feel consistent. If your site has dozens or hundreds of pages keeping these in sync would be hard. Although you could build your own block to achieve this I am always trying to do as much as I can with native blocks.

The Challenge

Take this scenario: you have several hero sections across your site, each using a Cover block with a nested structure of rows, columns, and other blocks. You want to sync the structure and styles across all of them but still have the flexibility to change the background image. Unfortunately, with the current Gutenberg functionality, the Cover block’s can be made a synced pattern; but all the text in every instance across your pages would be the same, meaning any changes to it will apply across all instances of that pattern.

This limitation can lead to a lot of manual updates, especially if your site has dozens or even hundreds of Cover blocks. And if you’re like me, you may have added a lot of custom Bootstrap classes (like pt-5, pb-3, etc.) to get everything looking perfect, which can become tedious to manage across multiple pages.

A Workaround

Here’s a solution I’ve found: instead of syncing the entire Cover block, you can create a synced pattern for the inner content (text, buttons, etc.), and then use an unsynced Cover block around it. This allows you to reuse the pattern for the content while keeping the Cover block and its background image unique to each instance.

But what about all those custom classes for padding, margins, and spacing? Manually adding and updating those classes for each block instance can be time-consuming and error-prone, especially for non-developers.

Simplifying with SCSS

A great way to streamline this process is by creating a custom class in SCSS that bundles all your common spacing and layout styles. For example, instead of applying individual classes like pt-3, pb-4, ps-2, etc., you can define a single class that encapsulates all these styles.

So the equivalent to doing this:

<div class=”pt-3 pt-md-6 pb-4 pb-md-5 ps-2 ps-lg-0 pe-2 ps-md-0”>My Cool Cover Hero</div>

Can now be done using a single class

<div class=”my_cool_cover”>My Cool Cover Hero</div>

If you create this using scss:

// Define the custom class
.hp-cover-block-half-right {
  padding-top: map-get($spacers, 3); // pt-3 equivalent
  padding-bottom: map-get($spacers, 4); // pb-4 equivalent
  padding-left: map-get($spacers, 2); // ps-2 equivalent
  padding-right: map-get($spacers, 2); // pe-2 equivalent

  @media (min-width: map-get($grid-breakpoints, md)) {
    padding-top: map-get($spacers, 6); // pt-md-6 equivalent
    padding-bottom: map-get($spacers, 5); // pb-md-5 equivalent
    padding-left: 0; // ps-md-0 equivalent
    padding-right: 0; // pe-md-0 equivalent
  }

  @media (min-width: map-get($grid-breakpoints, lg)) {
    padding-left: 0; // ps-lg-0 equivalent
  }
}