Block Editor: Pattern vs. Variation vs. Style vs. Transformation
Get a clear explanation of what is the difference between block pattern, block variation, block style, and block transformation in Wordpress Block Editor.
In adherence to our rigorous editorial policy, this article's content has undergone careful testing for accuracy and trustworthiness and hence, this content is marked source of information. View editorial history of this content.
WP Block editor is evolving everyday. Several new APIs have been introduced recently to handle blocks in block editor interface.
In this post, I’ve explained the conceptual difference between block patterns, block variations, block styles, and block transformations.
Notice This content is still being improved time to time. Please share your feedback to improve it. Several pull requests are in queue related to different aspects of variations, styles, transformations, and patterns. It is possible that something might have changed or updated recently. If you know that, let us know to update this resource.
Quick Reading in Tabular Form
| Patterns | Variations | Styles | Transformations | |
|---|---|---|---|---|
| description | alternative layout generated from single or multiple available blocks | alternative layout for the selected (one) block | alternative layout for the selected (one) block | transformable blocks for the selected (one) block |
| conceptual difference for end-users | does not have settings or transformations or variation options | can have a transformation option to another variation only (not other block) doesn’t have its own settings and styles yet | can have transformation to another block and/or variation don’t have further settings | variations can have other variations to transform to blocks can be transformed to other blocks (if feasible) transformations (if for a block) can have settings, variations, or transformation options transformations (if variation to variation) can have settings, variations, or transformations |
| common example | callout: group of blocks including a heading, button, paragraph, and an image | regular heading, heading with icon, heading with image | if it’s a block (not a variation block), style can be padded heading, extra margin heading, full-page heading, bordered heading, etc. if it’s a variation of a block, lets say heading with icon was picked, style can be heading with icon on left, heading with icon on right, heading with filled icon, or plain icon etc. | if it’s a block (and not a variation of a block), lets say paragraph, it can be transformed to a quote, pullquote, or list item under list if it’s a variation of a block, lets say heading with icon, it can be transformed to other variations i-e: heading with image, back to regular heading etc. |
| where to locate in block editor | in the inserter panel under Patterns tab | in inserter panel under blocks or patterns tab in the initial view of a block when a block is inserted in the transforms to option in settings toolbar if the inserted block is a variation block | in the settings panel (yet) | in the settings toolbar under transforms to option when a block is in focus (selected) |
| where to register | can be registered via theme.json can be registered at the time of block definition or configuration (block api) can be registered via register_block_pattern() and enqueuing it | cannot be registered via theme.json yet can be registered via PHP using registerBlockVariation() and enqueuing it | not sure if styles can be registered via theme.json can be registered via register_block_style() and enqueuing it | can be registered within block or variation block configuration |
| additional notes on difference | pattern cannot be transformed to another pattern | variations for core blocks can be created with only inserter scope variations for core blocks with scope transform or block seem to be not functional yet | multiple styles cannot be applied to the selected block or variation yet, however, a PR is in queue for this | you cannot transform to totally different |
| technical impact | when inserted, add blocks and/or inner blocks | when inserted, add blocks and/or inner blocks replacing the selected block for which this variation was registered can modify block attributes upon insertion | when picked, doesn’t add/replace block or inner blocks modifies the block attributes upon selection | when inserted, replaces the selected block to selected transformable blocks and/or inner blocks |
2D only differences – explanatory-style reading
Difference between block variations vs. block styles in block editor
Block variation is an alternative layout of the selected (one) block. It is only available if it was registered for that block. Block variations can be transformed to another block variation registered for the same block using the ‘transform’ scope. Currently block variations do not have settings and styles support in the settings panel. Block variations can be scoped to be visible in inserter panel (under blocks or patterns tab), in the initial view of the block, and/or under ‘transform to’ option if the block have other variations with scope ‘transform’.
Digital Setups has enforced a strict sourcing policy. Every content piece published on our website is passed through strict editorial review for contextual correctness, communication ethics, and programmatic tests wherever required. Our team research solutions from only credible, authentic, and trustworthy sources. Learn more about our editorial process.
This article may have additional citations but they are not yet reviewed for trustworthiness. We will add them here at our earliest.
This article may have additional citations but they are not yet reviewed for trustworthiness. We will add them here at our earliest.
This article may have additional citations but they are not yet reviewed for trustworthiness. We will add them here at our earliest.
Based on our editorial policy, we update our content time to time to ensure its usefulness, reliability, and validity.
Our standardized editorial process ensures right, timely, and usefulness updates to our content. Your honest opinion drives significant improvement to our content. We appreciate you are taking time to share that.
Readers who read this also found these helpful:
- Facebook Meta for Business Suite Hacked. Can you take it back?
- Fixed Error: WordPress XML Declaration Allowed Only Start of Document
- Why my site webpages are not indexing properly in search results?
- Authorship in SEO (2022)
- OPTIONS / RTSP/1.0″ – Apache Access Log Entry
- SECP Pakistan
- Using ‘Advertisement’ or Similar Term above AdSense Ads
- What you need to know before starting any online business
- Apache Access Log Entry: CONNECT Method
- Verify Company Registration Status of Any Country