Pattern Development How-to Guide

Owned by Kristina Kaminski
Last updated: Oct 10, 2024Version comment
3 min read

Where to Build Patterns

  • Patterns should be built by adding a pattern file under the /patterns folder in your theme or by using the “Pattern Manager” Plugin locally.

  • Below is an example of what the top of a pattern file should look like:

    <?php /** * Title: Hero, Background Image * Slug: kalapress/hero-background-image * Description: Displays a Hero with a fixed background image. * Categories: kalapress-hero, kalapress * Keywords: hero, kalapress, title * Viewport Width: 1280 * Block Types: * Post Types: * Inserter: true */ ?>

  • Necessary stylesheets should be added in the /sass/theme/02-patterns folder, naming them to match the block they apply to.

Do not build patterns on the live site, because they will only get saved to the database.

Best Practices & Tips

  • Minimize custom styling and make the most of the default options available in our KalaPress theme. However, custom styles can be added when necessary.

  • Avoid over-engineering patterns. Build them semantically, and keep nested blocks to a minimum unless absolutely required.

  • Ensure there is appropriate spacing around patterns so that editors can easily drop a pattern into a page and have it look visually pleasing with minimal adjustments.

  • To build a pattern with a smaller container, insert a Group block within your pattern and select the “Small Container” Style variation from the Block Styles settings.

    image-20241008-155003.png

    • You can align the container (left, center, right) by changing the Justification settings under the Block Layout settings.

      image-20241008-155431.png

  • I like to make patterns versatile and adaptable to different widths. To do this, I add a container around the content within the pattern. This way, the outer container can be any width and hold the background color, while the text content stays constrained within the inner container.

  • Test the pattern for responsiveness. For instance, if you've added large padding around an element that looks good on desktop, make sure it also displays well on smaller screens.

Editorial Experience

Block Locking

Block locking is primarily used to prevent the accidental movement and removal of important blocks. Block locking should be applied to our Patterns to prevent unintended changes by editors.

Blocks where locking should be considered:

  • Headings - since a proper heading structure is important for accessibility, headings should be locked to prevent accidental removal.

  • Any blocks that may affect the layout if removed.

Content Only Locking

To provide editors with a simplified, content-focused editing experience, you can set your Pattern templates to Content Only mode. This approach hides block settings, allowing editors to interact directly with the content in a cleaner, more streamlined interface.

If editors need to adjust the blocks within the pattern, they can still do so by clicking the pattern options in “List View” and clicking the "Modify" button.

Note: Even when a pattern is locked as Content Only, ensure that critical blocks, such as headings and structural elements, are still locked. This precaution prevents unintended changes if an editor decides to modify a block.

Template locking is only possible for a subset of container-type blocks in Core:

  • Group

  • Cover

  • Columns

  • Column

  • Navigation

To set a pattern as content only, insert the following code within the beginning of the pattern:

<!-- wp:group {"templateLock":"contentOnly"}} -->