A screenshot of the Patternkit pattern block editor.

This project is not covered by Drupal’s security advisory policy.

 The Drupal pattern module.

Patternkit loads your templates, patterns, and components into Drupal as blocks where you can then add them to your pages and layouts. You can configure them with a JSON file with an identical filename in the same directory as the Twig template.

This allows Layout Builder, Page Manager, Drupal blocks layout, or anything that uses blocks, to function as a custom page-builder app.

Site builders can add Drupal tokens to Pattern blocks instead of trying to pick through Drupal variables in a template. These are displayed from assigned Context such as node, user, and language.

composer require 'drupal/patternkit'
View all releases

Recommended Themes

Patternkit includes the patternkit_example module that provides some examples of patterns that are usable out of the box with Patternkit. Just enable the module to try it out!

 Technical description.
This module will parse pattern libraries (local filesystem or through REST endpoints) to generate a list of blocks that can be drag/dropped into layouts. It currently supports directories full of Twig templates and adds support for namespaces ('@my_library/my_component'), however support for additional pattern types such as React, Vue, and Web Components are planned.

Getting Started

All you need to do is add a "patterns" section to your {theme-or-module}.libraries.yml pointing to where your templates are located, and a .json file for each template written with JSON Schema (Draft 4+) to power the editor. Patterns can be located wherever relative to the theme or module root - even use the existing theme templates!

  1. Download and install this module
  2. Add a "patterns" section to any installed theme's libraries.yml
  3. Add a .json file in schema format with the same directory and filename as a twig template you want to use
  4. Clear caches and you'll see the block in the Block list and Layout Builder

Theme or module named 'example' example.libraries.yml

# This is standard Drupal library stuff.
my_library:
  version: VERSION
  css:
    theme:
      dist/css/example.css: {}
  js:
    dist/js/example.min.js: {}
  # We add this line to enable Patternkit and Twig namespaces.
  patterns:
    src/patterns: {plugin: twig}

Here's an example that includes no additional CSS or JS (note the use of DrupalSettings to specify no additional settings should be loaded):
Theme or module named 'example' example.libraries.yml

mysvglibrary:
  version: VERSION
  # You need this to prevent Drupal from erring-out on load.
  drupalSettings: {}
  patterns:
    dist/images/svg: {plugin: file.svg}
  • src/patterns/mypattern/mypattern.twig
  • src/patterns/mypattern/mypattern.json
  • dist/images/svg/myimage.svg

Clear caches, and assuming you have created them, you should then see the 'mypattern' and 'myimage' blocks appear in block lists across the Drupal site. CSS and JS are handled by Drupal as you normally would when building a theme.

When Patternkit block configurations are saved, the template is cached in the site database (to mitigate origin failures and lock in version at time of configuration). You can update each block to your latest schema or template by editing it and clicking 'Update'. You can also update the entire library at once in the Patternkit admin library settings.

See the step-by-step Blog post

Using the Pattern Editor

The main point of Patternkit is using its schema editor to provide Drupal content to your front-end patterns. While you can load your theme templates and manually configure them, it is time-consuming and error-prone (like writing Drupal templates). To enable the schema editor, you need to define the JSON Schema per template.

Schema Editor Configuration Reference: https://github.com/json-editor/json-editor

Example:
Assuming a lib/patterns/quote/quote.twig exists and is loaded via patternkit_example.libraries.yml as specified above.
lib/patterns/quote/quote.json

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "title": "Quote Pattern",
  "description": "A quote.",
  "category": "molecules",
  "type": "object",
  "properties": {
    "body": {
      "title": "Quote Body",
      "type": "string",
      "format": "textarea",
      "options": {
        "wysiwyg": true
      }
    },
    "title": {
      "title": "Optional Attribution Name/Title",
      "type": "string"
    },
    "subtitle": {
      "title": "Optional Attribution Title/Subtitle",
      "type": "string"
    }
  }
}

Then clear caches and you should see the schema editor when adding the block:
An image of a pattern for a quote demonstrating the schema file in-use.
Final result:
An image of a web page quote demonstrating the schema file in-use.

Adding to a Block or Controller

Use inline templates to add patterns to blocks or controllers.

$build['string'] = [
  '#type' => 'inline_template',
  '#template' => '{% embed '@my_library/patterns/quote/quote.twig' with _context %}{% endembed %}',
  '#context' => [
    'var' => $possible_unsafe_var,
  ],
];

Development and Debug Settings

To ease local development, the following configuration may be added to a development.services.yml file, but they should not be enabled on Production environments.

parameters:
  # Configuration options to influence behavior of the Patternkit modules.
  patternkit.config:

    # This may be enabled to toggle debug features in the module.
    debug: true

    # Various operational features of the module may be toggled here.
    features:

      # Disable caching of pattern definitions for each request.
      bypass_pattern_cache: true

      # Ignore caching of patterns in database entities for blocks.
      bypass_database_cache: true

Additional detail on what these settings do may be found here.

Dependencies

Drupal 9/10
Core's Content Block module, but we also recommend enabling core's Layout Builder :)

Optional Enhancements:

Tutorials, Training, & Presentations

Supporting organizations: 
Sponsoring development

Project information

Releases