This project is not covered by Drupal’s security advisory policy.
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
- [Dev only] Red Hat Patternfly
- [Needs JSON Schema] Forum One Gesso
- [Needs JSON Schema] Phase2 Particle 11
- [Needs JSON Schema] Shila Starter
- [Needs JSON Schema] Acquia Cog Theme
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!
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!
- Download and install this module
- Add a "patterns" section to any installed theme's libraries.yml
- Add a .json file in schema format with the same directory and filename as a twig template you want to use
- 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:
Final result:
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:
- Image Upload Support: media_entity_browser for Core Media and media_library_theme_reset
- Settings Tray Default Size: Either a patch from #2951547 or layout_builder_modal
- Memcache Support: A patch from #2951547
- Restrict which blocks are listed: layout_builder_restrictions
Tutorials, Training, & Presentations
Project information
- Module categories: Content Editing Experience, Content Display, Integrations
- Ecosystem: Layout Builder
- 93 sites report using this module
- Created by cyb_tachyon on , updated
- This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
Releases
9.1.0-beta8
Development version: 9.1.x-dev updated 21 Feb 2024 at 20:31 UTC