Start here
What to change first
- The eight photographs. Select each one in the editor; the crop and the layout are already set.
- The dates. Months here, but a year, a quarter or a short word all set.
- The heading and lede. Written to say the section is a strip of eight.
- The number of frames. Duplicate a column to add one, delete one to drop one, and check 820px afterwards: that is where the columns are narrowest before they stack.
The signature moment
A history read in one sweep, not in rows
The signature is that the whole history is one horizontal pass. A grid of photographs asks the reader to scan a block; a strip asks them to move their eye once, left to right, and the dates arrive in order as they do. Eight narrow columns at 1240px are about 145px each, which is a shape with room for a photograph and a date and room for nothing else, and that constraint is the design rather than a limitation of it. Nothing here carries a title, a caption or a paragraph.
Theme handoff
What comes from where
From your theme
- The typeface.
- Your colours.
- Your spacing scale.
- Your photographs.
Set by this pattern
- Full bleed with a 1240px measure
- The tight gutter.
- The portrait crop.
- The date alone as the caption
- Eight frames.
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
Eight months of an archive in one thin filmstrip across the page. Each frame is a narrow 2:3 photograph filed under a currentColor hairline with a date and nothing else, and the eight of them run the full 1240px measure with a 3-to-12px gutter between them. Core blocks only: core/group, core/columns, core/column, core/image, core/heading, core/paragraph.
The signature moment: a history read in one sweep, not in rows
The signature is that the whole history is one horizontal pass. A grid of photographs asks the reader to scan a block; a strip asks them to move their eye once, left to right, and the dates arrive in order as they do. Eight narrow columns at 1240px are about 145px each, which is a shape with room for a photograph and a date and room for nothing else, and that constraint is the design rather than a limitation of it. Nothing here carries a title, a caption or a paragraph.
Nothing is at display size except the section heading. Every date sits at a clamp() floored at 0.9375rem in tracked capitals. The heading above carries the whole of the section's scale, so the strip below it can stay completely flat: no frame is louder than any other, which is what stops a strip becoming a timeline with a favourite in it.
Density contrast holds the band together. Above the strip, the eyebrow, the heading and the lede get a spacing-70 run of air and the lede is held to a 40rem measure, so the opening breathes like the top of an essay. Below it, eight frames sit hard against each other with a clamp(0.5rem, 1.2vw, 0.75rem) gutter. One band, one ground, two densities.
How a frame is built
Each column is a core/group holding a populated core/image at aspectRatio 2/3 with scale: cover, then a second group carrying a 1px currentColor border-top and the date. The rule belongs to the caption, not to the image, so it sits under the frame like the line on a filing card and follows your text colour wherever your theme puts it. It cannot resolve to nothing, which a preset colour rung could.
The wrapping group states contentSize: 1240px, and that is load-bearing. A nested constrained group with no contentSize re-caps its children at the THEME's content width rather than the band's, which in a stock theme is about 620px. Eight columns inside 620px are 67px each, and at that width even a three-letter month breaks across two lines. If you wrap the strip in a group of your own, give that group the same contentSize or take the wrapper away.
What happens at 390, stated honestly
The eight columns stack. Core sets flex-basis: 100% on a column below 782px and this pattern does not override it. isStackedOnMobile: false was deliberately not set: eight across at 390 leaves about 43px a frame, which is a smear rather than a photograph. So on a phone the strip becomes a single column of eight dated frames read top to bottom. It is a different reading from the one a laptop gets, and it is still the same archive: the rule and the date arrive in the same order under every photograph.
Between 782px and about 820px the eight columns are roughly 90px each. That is the width the caption was written for, and it is why a date alone is the whole caption: a date cannot wrap, so the strip stays legible everywhere the frames do.
Make it yoursVariations and the edits to make first
What to change first
- The eight photographs. Select each one in the editor; the crop and the layout are already set. They want to be shot in roughly the same light: a strip puts eight of them side by side with 6px between them and nothing to excuse a mismatch.
- The dates. Months here, but a year, a quarter or a short word all set. Keep them short enough not to wrap at 90px.
- The heading and lede. Written to say the section is a strip of eight. If you change the count, say so there too.
- The number of frames. Duplicate a column to add one, delete one to drop one, and check 820px afterwards: that is where the columns are narrowest before they stack.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
- The typeface. No font family is stated anywhere.
- Your colours.
basefor the ground,contrastfor the type, both ending on a colour WordPress guarantees. Every rule iscurrentColor. - Your spacing scale. The air above the strip and the gap between a frame and its rule are spacing presets, so a theme with a generous scale gets a more generous opening and the density contrast grows rather than shrinks.
- Your photographs. The image blocks include example photographs. Choose Replace to select your own media; the 2:3 crop is already set.
What it decides for itself
- Full bleed with a 1240px measure, stated on the strip's own wrapper as well as the band's.
- The tight gutter.
clamp(0.5rem, 1.2vw, 0.75rem), so the eight frames read as one object rather than eight pictures. - The portrait crop. 2:3 is what makes a 145px column read as a frame rather than as a chip; a square at that width looks like a thumbnail.
- The date alone as the caption, measured rather than stylistic. See the 390 note above.
- Eight frames. Eight is a year's worth of selections at a sensible column width; ten drops each frame under 115px and twelve is a filmstrip nobody can see the pictures in.
Technical notesBlock mechanics, responsive behaviour and constraints
Why it is a history and not a gallery
The dates mark a monthly selection from a studio image library, in order. Nothing is numbered, nothing is counted down and no caption asks the reader to do anything. The photographs are visual references selected during those months, not historical photographs of the studio or a record of when each source image was taken.
It is also not the other photographic timeline. timeline-archive is the same eight frames as a contact sheet, four across and twice, square crops, with room under each for three or four words of title as well as the date. Take the sheet where the section is a block on the page that the reader stops at, and this one where the section is a band the reader crosses.
Notes
- Core blocks only. No plugin, no script, no separator, no
core/gallery. - Grid layout on
core/groupwas deliberately not used: this catalogue's floor is WordPress 6.6 and onecore/columnsrow is the shape that is certain there. - Example photograph URLs travel with the copied markup; see image credits.
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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.
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…