Block Patterns

Register WordPress block patterns in Pollora: configuration, how to organize pattern files, writing patterns, and how they are loaded automatically.

Patterns are reusable block templates that can be inserted into the Gutenberg editor. Pollora provides flexible pattern organization through a customizable folder structure.

Configuration

Pattern categories are defined in your theme’s configuration file:

return [
    'patterns' => [
        'theme/patterns' => [
            'label' => 'Theme',
        ],
    ],
];

A pattern that needs no Laravel can also be a native WordPress pattern, patterns/*.php at the theme root, which WordPress registers itself — the usual choice in a block theme. See Block Themes.

Pattern Organization

Basic Structure

Pollora registers the Blade patterns in your theme’s resources/views/patterns directory:

themes/default/
└── resources/views/
    └── patterns/
        ├── example.blade.php
        └── banners/
            └── hero.blade.php

Subdirectory Organization

You can organize your patterns into subdirectories for better maintenance:

themes/default/resources/views/patterns/
├── banners/
│   ├── hero.blade.php
│   └── cta.blade.php
├── headers/
│   ├── simple.blade.php
│   └── complex.blade.php
└── footers/
    └── default.blade.php

This structure allows you to:

Group patterns by type or function
Maintain organized codebase
Facilitate navigation and maintenance

Creating Patterns

Each pattern requires a header with metadata:

{{--
  Title: Hero Banner
  Slug: theme/hero-banner
  Categories: theme/patterns
--}}

Complete Example

{{--
  Title: Example Pattern
  Slug: theme/example
  Categories: theme/patterns
--}}

<!-- wp:group {"className":"pattern-example"} -->
<div class="wp-block-group pattern-example">
    <!-- wp:heading {"textAlign":"center","textColor":"tertiary"} -->
    <h2 class="has-text-align-center has-tertiary-color has-text-color">
        {{ get_bloginfo('title') }}
    </h2>
    <!-- /wp:heading -->

    <!-- wp:paragraph {"align":"center","textColor":"primary"} -->
    <p class="has-text-align-center has-primary-color has-text-color">
        {{ get_bloginfo('description') }}
    </p>
    <!-- /wp:paragraph -->

    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
        <!-- wp:button {"backgroundColor":"tertiary","style":{"border":{"radius":"100px"}}} -->
        <div class="wp-block-button">
            <a class="wp-block-button__link has-tertiary-background-color has-background">
                Read more...
            </a>
        </div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
</div>
<!-- /wp:group -->

Automatic Loading

Patterns are automatically loaded from their directory, regardless of their depth in the folder structure. Simply:

Create the pattern file in the desired folder
Ensure the header contains required metadata
The pattern will be available in the Gutenberg editor

Best Practices

Use descriptive folder names
Maintain consistent structure
Document your patterns with comments
Use explicit slugs in metadata
Group similar patterns in the same directory