Figure break

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 with an included example photograph.

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.

1. The image. Select it in the editor and choose a file; the crop is set.
2. The caption and its index. Fig. 01 is a placeholder; a photographer credit or a location works the same way.
3. 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.
4. A second figure. Copy the image and the caption row together; they are a pair.

• Typeface. None stated.
• Palette. base ground, contrast text, 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.

• 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 at clamp(max(0.9375rem, 15px), 1.05vw, 1rem) on 1.6; heading at clamp(1.875rem, 3.8vw, 2.875rem) on 1.08.

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 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 image block includes an example photograph, 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.

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.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.