Three core/cover frames in a row, one per core/column, each on your own photograph with a small caption plate grown out of its bottom-left corner. An intro row above them carries a tracked label on the left and one short line on the right. Every word a visitor reads sits on a plate; the photographs carry atmosphere under a 30% veil of your theme's contrast colour.
The signature moment
The middle frame is raised
The outer covers are 26rem tall and the middle one is 30rem, and the columns block is vertically aligned to the bottom, set on EACH core/column (verticalAlignment: "bottom", written as is-vertically-aligned-bottom), because the columns-level class is overridden by core's own align-items: normal !important and does nothing on the front end; the first draft set it on the parent only and the frames sat top-aligned, with the tall one dropping instead of rising. So the three bottoms sit flush and the centre frame rises 4rem above its neighbours: a podium, not a grid. The rise is structural, made of height and alignment rather than a margin, which is why it survives the phone. Below 782px core stacks the columns, each one becomes its own flex line, the alignment has nothing left to act on, and the three frames stack with the block gap between them and no stray offset. No margin-top was needed on any column, and none is set.
What it inherits, what it decides
Inherits: every colour (the band is base, its type contrast, the plates base with contrast type, the veil contrast at 30%), the typeface, the spacing scale (spacing|70 above and below, spacing|50 between intro and row, spacing|40 between stacked frames, spacing|30 and spacing|40 inside each plate). Decides: the proportion of the type (a 13px tracked label, a 15px to 17px line at 1.5), the 1240px measure, the clamp gutters, the 21rem plate width held by a constrained wrapper with justifyContent: left, the 26/30/26rem heights and the bottom alignment that makes the centre rise, and the 6.6 cover element order.
The rule this pattern follows82 words
Type never sits on a photograph. A photograph's luminance is unknowable, and the buyer swaps all three anyway. So every caption is on a plate whose ground is a base chain and whose type is a contrast chain, and the contrast is measured as type on a guaranteed pair. Each cover also states its own text colour (base) so that core's :where() rule, which would otherwise paint any text in it #fff, never fires on anything a buyer adds outside the plate.
What a buyer changes first70 words
The photographs. All three covers ship EMPTY, which is valid at WordPress 6.6 and 7.0: click each cover, choose an image from the media library, and set the focal point. The captions are the second thing; each label is set in caps with wide tracking and reads best under 20 characters, and each line should be long enough to wrap once at 21rem so the plate takes its full width.
Variations100 words
- Ink captions: the plates invert,
contrastground andbasetype. Same corner, more weight, for photographs that are mostly light. The band, the veil and the intro row are unchanged. - In motion: ONLY the middle cover gains
backgroundType: "video"; the outer two stay stills and everything else is identical to the base. The middle cover ships empty here too (an empty video cover is valid at both versions); choose a short, silent, looping clip in its media picker. Core writes the<video>withautoplay muted loop playsinline, which is what iOS requires to play inline without a gesture.
Why the heights are in rem54 words
minHeight is 26rem and 30rem, never a vh value. The preview on this page sizes its frame to the pattern, and a viewport-relative height would size the pattern to the frame in turn; that loop only ever shrinks. rem also keeps the 4rem rise the same in every theme at a given root size.
Measured28 words
The base and both variations survive an editor round-trip with every block valid on WordPress 6.6.7 and 7.0.4, and each takes every colour and typeface from the theme.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: In motion
Fetching the markup…Variation: Ink captions
Fetching the markup…