A reading column interrupted by one photograph. The prose holds a 36rem measure; the figure breaks out to a 74rem wide width; a caption hangs from a small index at the figure's left edge; the column resumes beneath it. core/group, core/heading, core/paragraph and one core/image, shipped empty.
The signature moment
The figure breaks the measure
Two widths, used strictly. Everything a visitor reads is 36rem wide and centred, and one thing is not: the photograph, set alignwide so it runs to 74rem, twice the column, with the prose continuing at its own width above and below. The contrast between the two widths is what makes the image feel like an event in the article rather than an illustration beside it. The caption reinforces it by sitting at the figure's width, not the column's: a 6rem index (Fig. 01) and the caption text in a flex row aligned to the figure's left edge, so the caption belongs to the picture and the prose belongs to the column.
What it inherits from your theme
- Typeface. None stated.
- Palette.
baseground,contrasttext, two-rung chains. The heading carries its colour explicitly. - Image styling. Corner radius, borders and caption styles, if your theme applies any to
core/image, arrive with the block. - Spacing rhythm. Core spacing presets.
What it decides for itself
- The two widths: 36rem and 74rem, in
rem. - The crop: 21/9, cover.
- The caption index: a 6rem fixed column at
max(0.8125rem, 13px), 0.18em tracking. - Proportion: body at
clamp(1.0625rem, 1.45vw, 1.25rem)on 1.75; caption atclamp(max(0.9375rem, 15px), 1.05vw, 1rem)on 1.6; heading atclamp(1.875rem, 3.8vw, 2.875rem)on 1.08.
What you change first
- The image. Select it in the editor and choose a file; the crop is set.
- The caption and its index.
Fig. 01is a placeholder; a photographer credit or a location works the same way. - The copy. Two paragraphs before the figure, two after. Add more by copying a paragraph; keep the figure roughly in the middle so it reads as a break and not as an opener.
- A second figure. Copy the image and the caption row together; they are a pair.
How the widths work155 words
The band is a constrained group with contentSize: 36rem and wideSize: 74rem. Core's layout styles give a child with no alignment the content width and a child with align: wide the wide width, both centred, so the column and the figure share a centre line and the figure overhangs it by 19rem each side. Below 74rem plus padding the figure simply fills the band; below 36rem plus padding so does the column. Neither is a vw width. The caption row is also alignwide and wraps; its index is a paragraph with layout.selfStretch: fixed at 6rem and the caption is a second fixed item at 32rem, so a long caption never runs the full 74rem. Both are fixed because WordPress writes a fixed item as flex-basis alone, with no flex-shrink: 0: the first draft had the caption filling and the row nowrap, and at 390 the index shrank and Fig. 01 broke across two lines (measured).
The image47 words
The image block ships empty, with aspectRatio: 21/9 and scale: cover, so whatever the buyer uploads is cropped to the wide proportion the layout needs. There is no text on the photograph: its luminance is unknowable, so the caption sits under it on the band's base ground.
What happens at 39063 words
The figure and the column are both the width of the phone, which is the right answer: the break becomes a full-bleed image between two runs of text. The caption row wraps: the index sits on its own line above the caption, which then fills the width. The 21/9 crop is 167px tall at this width, a short band rather than a hero.
Contrast27 words
Every text pair is contrast on base. The heading is large text at 3:1; body and caption are held to 4.5:1. Nothing is set on the photograph.
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…