Figure break: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/figure-break.html Core Patterns (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Catalogue access Standard # Figure break A reading column interrupted by one wide photograph: the prose holds a strict measure, the figure breaks out to twice that width, and its caption hangs from a small index at the figure's left edge before the column resumes. Includes replaceable example images. ## All patterns Search patterns Loading patterns… Start here ## 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. - The copy. Two paragraphs before the figure, two after. - A second figure. Copy the image and the caption row together; they are a pair. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Image styling. - Spacing rhythm. ### Set by this pattern - The two widths - The crop - The caption index - Proportion Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. ### 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. Make it yoursVariations and the edits to make first ### 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. 01 is 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. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - 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. ### 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 at clamp(max(0.9375rem, 15px), 1.05vw, 1rem) on 1.6; heading at clamp(1.875rem, 3.8vw, 2.875rem) on 1.08. ### Contrast 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. Technical notesBlock mechanics, responsive behaviour and constraints ### How the widths work 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 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. ### What happens at 390 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. ### Included images 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Figure break: common questions Does Figure break need a plugin? No. It is built only from core WordPress blocks (group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Figure break match my theme? Choose by variation. Figure break takes your theme’s palette; Straw and rhubarb brings its own colours. How many variations does Figure break have? 2: Figure break and Straw and rhubarb. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Figure break free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 6.8KB of core-block markup, 4 blocks (group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Editorial Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, heading, image, paragraph Presets color 5, spacing 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in Editorial Explore all 13 Editorial patterns (https://patternpaste.com/patterns/editorial/) Shot in Twenty Twenty-Five Editorial No plugin needed ### Editorial lap A two-frame editorial spread where an inverted headline slab laps up over the first photograph and breaks out of its column. Editorial Preview pattern (https://patternpaste.com/pattern/editorial-lap.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Newsprint columns A magazine body: a running head on a rule, a wide headline, then the prose packed into two true text columns under it with numbered footnotes gathered on a rule at the foot. Editorial Preview pattern (https://patternpaste.com/pattern/newsprint-columns.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Open letter A statement set as a letter: a centred eyebrow, headline and short rule open it, the body runs left-aligned at a generous size and line height down one narrow measure, and it closes with a sign-off set in italic at display size. Editorial Preview pattern (https://patternpaste.com/pattern/open-letter.html)