[ADR-0019] Use block templates to build block patterns
Use Block Templates for patterns. Gradually start converting existing patterns.
Status: accepted
Deciders: Development team
Technical Story: Switch on using Wordpress block templates for building block patterns.
Context and Problem Statement
Block patterns are a great way to create and share patterns over various pages and sites: some fiddling in the Visual Editor, a copy/paste and that’s it ! However, a more complex usage of it like using patterns to compose other patterns, creating some variations of those patterns, and maintaining this whole system, has some caveats. Block templates might be better suited for this multifaceted use case.
Our needs:
Reusable arrangement of blocks for Editors to insert and edit, shared across all NROs
Composable with each others in larger arrangements
Possibility to add arguments to make variations in compositions
Ideally:
Easy reusability, low maintenance
TLDR; If you have dev capacity, create and maintain block templates. If you only have editors, keep and exchange block patterns.
Decision Drivers
Creating patterns requires to generate them in editor, then copy/paste in php code, and adapt various outputs and attributes
Composing patterns requires management of arguments, to convert them to json and html attributes
Maintaining those patterns would ideally require to regenerate those in the Editor to be on par with last blocks evolutions
Considered Options
Making patterns small enough and with enough arguments to reuse in other patterns (the current solution)
Generating templates, patterns, from a basic js format at runtime, letting the Editor generate the HTML content (the proposed solution)
Generating patterns from a basic js format at build time, letting the Editor libraries generate the HTML content (maybe later ? compatible with proposed solution, less client-intensive, allows to follow and log blocks changes, could self-generate a shareable pattern directory/portal)
Comparison of patterns and templates
Block pattern | Block template | |
creation | Visual editor + PHP | JS + Json |
attributes | PHP + Json + HTML | JS, native filtering |
maintenance | PHP + HTML | JS |
output | static HTML | expanded by Visual Editor, then static HTML |
usage | - insert from Patterns tab | - insert from Blocks tab - insert from Patterns tab if made into a pattern |
use in pattern | - in code with PHP - in editor with insert | - in code with HTML self closing tag - in editor with insert |
use in template | - in editor with insert | - in code with JS - in editor with insert |
editable after insertion | yes | yes |
identifiable in block list | no | yes |
Demo
This PR demonstrates a Block template system, and a conversion of a pattern to a template. It includes documentation to create new templates.
It is important to keep the source format as simple as possible (a format Gutenberg understands), so it can be included in any other format we create and can be used to generate more complex outputs using native Gutenberg libraries.
Another PR shows how we could convert all patterns to templates.
Decision Outcome
Chosen option: Use Block Templates for patterns. Gradually start converting existing patterns.
Links
Last updated