A full-bleed core/cover on your own photograph, or your own clip, with a paper plate grown out of its bottom-left corner. The plate carries everything a visitor reads: an eyebrow, a headline and one line. The photograph carries nothing but atmosphere, under a 30% veil of your theme's contrast colour.
The signature moment
The plate grows out of the corner
The cover has no padding of its own, so the plate sits flush with the bottom edge of the section and at your theme's own gutter from the left: a museum label laid on the bottom corner of a print, with the photograph running past it on two sides. (The constrained wrapper picks up the theme's root padding, which is why the gutter is the theme's and not ours.) On a phone the plate takes the width between the gutters and the photograph becomes a tall band above it. The plate is held to clamp(36rem, 45vw, 42rem) by a constrained wrapper with justifyContent: left, never by padding on the plate itself: 36rem at 1280 and below, growing with the window to 42rem, so the label keeps its proportion against the photograph instead of thinning to a strip on a wide screen.
What it inherits, what it decides
Inherits: every colour (the plate is base, its type contrast, the veil contrast at 30%), the typeface, the spacing scale. Decides: the proportion of the type (a 13px tracked eyebrow, a headline from 32px to 56px at 1.02 line-height and -0.03em, a 15px to 17px line at 1.6), the plate's width and padding, the cover's 38rem minimum height, and the element order.
The cover states its own text colour (base) so that core's :where() rule, which would otherwise paint any text in it #fff, never fires. Nothing sits outside the plate today; the chain is there so nothing a buyer adds does either without a colour of its own.
The rule this pattern is the worked example of76 words
Type never sits on a photograph. A photograph's luminance is unknowable, exactly like an accent's, and the buyer swaps the image anyway. So every word here is on a plate whose ground is a base chain and whose type is a contrast chain, and it measures as type on a guaranteed pair: 21:1 in every theme tested at every width, on both WordPress versions. The veil over the photograph is decoration; it may recede without loss.
What a buyer changes first53 words
The photograph. The cover ships EMPTY, which is valid at WordPress 6.6 and 7.0: click the cover, choose an image from the media library, and the focal point tool does the rest. The plate's eyebrow is the second thing; it is set in caps with wide tracking and reads best under 28 characters.
Variations106 words
- Ink plate: the plate inverts,
contrastground andbasetype. Same corner, more weight, for a photograph that is mostly light. - In motion:
backgroundType: "video". The same plate over a clip. The cover ships empty here too (an empty video cover is valid at both versions and saves as the veil over the inner container); choose a short, silent, looping clip in the cover's media picker. Core writes the<video>withautoplay muted loop playsinline, which is what iOS requires to play inline without a gesture. Nothing about the type changes, so it is exactly as legible over a clip as over a still.
Why the height is in rem70 words
The cover's minHeight is 38rem, 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; measured on the stage, that loop only ever shrinks. rem also means the section is the same height in every theme at a given root size, which is what a buyer placing it above other sections wants.
Measured42 words
The cover's serialisation on both WordPress versions, the 6.6 element order, the contrast rule for type that does sit on a cover (this pattern never triggers it), and the render of this pattern and its variations in four themes at three widths.
The hand-off row117 words
A full-bleed cover on its own fills the preview on this page edge to edge, and on a buyer's page it is never alone either. So the pattern ships with what comes next: a short row on your theme's paper under the cover, a tracked label and one paragraph at a 34rem measure. Its 1240px wrapper carries justifyContent: left, so the row hangs off the same gutter as the plate above it at every width instead of centring away from it once the window passes about 1350. It is ordinary page copy, it shows where the cover ENDS, and it is the first thing a buyer rewrites or deletes. It carries the same chains as everything else.
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 plate
Fetching the markup…