Just revamped. Got feedback? Share now.

Privacy
Subscribe

Block Editor: Pattern vs. Variation vs. Style vs. Transformation

By Digital Setups Published 23 Nov, 2022 Modified last Fri Viewed 108 times Read in 3m 31s
Editor's Pick Experience Based Requested by Community
Content Validity: Valid and Applicable Comprehension: Level 2 – For Professionals

Get a clear explanation of what is the difference between block pattern, block variation, block style, and block transformation in Wordpress Block Editor.

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

PatternsVariationsStylesTransformations
descriptionalternative layout generated from single or multiple available blocksalternative layout for the selected (one) blockalternative layout for the selected (one) blocktransformable blocks for the selected (one) block
conceptual difference for end-usersdoes not have settings or transformations or variation optionscan 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 examplecallout: group of blocks including a heading, button, paragraph, and an image regular heading, heading with icon, heading with imageif 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 editorin the inserter panel under Patterns tabin 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 registercan 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 differencepattern cannot be transformed to another patternvariations 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 thisyou cannot transform to totally different
technical impactwhen inserted, add blocks and/or inner blockswhen 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
Block Patterns vs. Block Variations vs. Block Styles vs. Block Transformations

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.

×

Your feedback matters.

Our standardized editorial process ensures right, timely, and healthy updates to our content. Your honest opinion drives significant improvement to our content. We appreciate you are taking time to share that.

×