Proof strip: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/proof-strip.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Catalogue access Standard # Proof strip A full-bleed band holding a narrow 34rem ribbon of four portrait frames stacked one under another, each ruled off by a hairline and captioned with a tracked title and one short line. The rest of the page width is left as air on both sides, so the section reads as a photo essay rather than a grid. Includes replaceable example images. ## All patterns Search patterns Loading patterns… The signature moment ## The gallery refuses the page's width Every other gallery in this library spends the full 1240px measure it is given. This one takes 34rem of it and leaves the rest as air on both sides, so on a wide screen the section is a narrow ribbon of pictures with a great deal of nothing around it. That restraint is the design, and it is the reason the pattern reads as a photo essay rather than a grid: a single column of portraits at a reading measure is how a magazine sets pictures that are meant to be looked at in order, and a grid is how a site sets pictures that are meant to be scanned. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the band is a base chain with contrast type; the variation is the inverse; the hairlines are currentColor), the typeface, and the spacing scale (spacing|80 above and below the band, spacing|50 between the intro and the first entry and between entries, spacing|40 between a hairline and the frame under it, spacing|30 between a frame and its caption, spacing|20 inside the intro). Decides: the 34rem measure, which is the pattern; the 1240px band the ribbon sits inside and the clamp(1.25rem, 4vw, 4rem) gutters that keep it off the viewport edge on a phone; the 4:5 portrait crop on all four frames, set with aspectRatio and "scale":"cover" so the buyer's uploads are cropped to the proportion rather than setting it; the proportion of the type, a 13px tracked caps title against a 15px to 17px line at 1.55; and the hairline above every entry including the first, so the ribbon opens with a rule under the intro rather than drifting into the pictures. 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 full-bleed band with almost nothing in it. Down the middle runs a ribbon 34rem wide holding four portrait frames, one under another, each ruled off from the one above by a hairline and captioned with a tracked title and a single short line. Above them sits a small label and one line of intent. Everything else is air. Every word a visitor reads sits on the band's own ground; nothing sits on a photograph. ### The signature moment: the gallery refuses the page's width Every other gallery in this library spends the full 1240px measure it is given. This one takes 34rem of it and leaves the rest as air on both sides, so on a wide screen the section is a narrow ribbon of pictures with a great deal of nothing around it. That restraint is the design, and it is the reason the pattern reads as a photo essay rather than a grid: a single column of portraits at a reading measure is how a magazine sets pictures that are meant to be looked at in order, and a grid is how a site sets pictures that are meant to be scanned. It survives colourlessness because the device is measure and emptiness. There is no wash, no tint and no accent anywhere in it; the only marks are currentColor hairlines and the type itself. Take every colour away and the ribbon is still narrow and the band is still empty, which is the whole argument. Invert the band, as the variation does, and the argument is untouched. What happens at 390px. Nothing. The 34rem measure is already wider than a phone, so the ribbon simply becomes the full width of the band and the pattern looks the way it was designed to look all along: one column of portrait frames, each ruled off and captioned, read top to bottom. This is the only gallery in the set whose composition is UNCHANGED by the stack, and it is unchanged for the same reason it is unusual on a desktop. There is no core/columns anywhere in the pattern, so there is nothing for core's 782px breakpoint to restack. Make it yoursVariations and the edits to make first ### Variations - Ink proofs: the band inverts, contrast ground and base type throughout, including every caption title. The ribbon, its 34rem measure, its four frames and its hairlines are identical to the base; only the colour relationship changes, so the strip reads as a set of prints laid on a dark table. The hairlines need no edit, because currentColor follows the type into the inversion by itself. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (the band is a base chain with contrast type; the variation is the inverse; the hairlines are currentColor), the typeface, and the spacing scale (spacing|80 above and below the band, spacing|50 between the intro and the first entry and between entries, spacing|40 between a hairline and the frame under it, spacing|30 between a frame and its caption, spacing|20 inside the intro). Decides: the 34rem measure, which is the pattern; the 1240px band the ribbon sits inside and the clamp(1.25rem, 4vw, 4rem) gutters that keep it off the viewport edge on a phone; the 4:5 portrait crop on all four frames, set with aspectRatio and "scale":"cover" so the buyer's uploads are cropped to the proportion rather than setting it; the proportion of the type, a 13px tracked caps title against a 15px to 17px line at 1.55; and the hairline above every entry including the first, so the ribbon opens with a rule under the intro rather than drifting into the pictures. Technical notesBlock mechanics, responsive behaviour and constraints ### The mechanic, and the one that was refused The narrow measure is held by a nested constrained group: the outer align: full band is {"layout":{"type":"constrained","contentSize":"1240px"}}, and its single child is a core/group with {"layout":{"type":"constrained","contentSize":"34rem"}}. No justifyContent, so the layout's own margin-inline: auto centres it in the band. It is NOT held with padding-right: max(0rem, 100% - 34rem). That was measured: content-columns shipped it on a direct child of a constrained band, and nothing caught it while the block sat 144px out of line at 1400px, because the block is content-box and the padding therefore sits outside the layout's max-width. The block grows to the band's full width and centring puts its left edge at the band's padding edge. What gets measured is a width, and the width was right; the position was not. The hairlines are per-side top borders on each entry group (border.top, currentColor, solid, 1px), never core/separator, which Twenty Twenty-Four narrows to a centred stub unless it carries is-style-wide. currentColor cannot blank, needs no chain, and follows whatever text colour the band carries, so the rule is exactly as dark as the caption beside it in both the base and the inverted variation. ### What a buyer changes first The photographs. All four image blocks include example photographs; choose Replace to select an image from your media library, and the 4:5 crop is already set. Portraits suit it; a landscape upload will be cropped hard to the ribbon's proportion, which is the point of scale: cover. The captions are the second thing. Each title is caps with 0.2em tracking and reads best under about 30 characters, and each line should be long enough to wrap once at 34rem so the entry has two lines of caption under its frame. The measure is the third thing, and it is one number: the inner group's contentSize. Widening it past about 40rem loses the signature, because the air on either side is the design; narrowing it below about 28rem starts to crop the captions into columns of three or four words. ### 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 ## Proof strip: common questions Does Proof strip need a plugin? No. It is built only from core WordPress blocks (group, image and paragraph), so it pastes into the block editor with nothing to install. Will Proof strip match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Proof strip have? 2: Paper proofs and Ink proofs. 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 Proof strip free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 9.4KB of core-block markup, 3 blocks (group, 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)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.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 Gallery Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks group, image, paragraph Presets color 5, spacing 6, font-size 1 WordPress 7.0+ Continue exploring ## Next in Gallery Explore all 30 Gallery patterns (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Gallery No plugin needed ### Plate lap Two photographs made into one object by overlap: a tall portrait frame with a smaller landscape frame lapping over its lower-right corner, hanging past both the bottom and the right edge, and a caption plate below squaring the pair back up. Gallery Preview pattern (https://patternpaste.com/pattern/plate-lap.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Quote gallery A display-size quotation held between two portrait frames. Gallery Preview pattern (https://patternpaste.com/pattern/quote-gallery.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Ragged grid A two-by-two photograph grid in which every frame keeps a different proportion: square, three-by-two, four-by-five and sixteen-by-nine. Gallery Preview pattern (https://patternpaste.com/pattern/ragged-grid.html)