An image-led history. Four dated milestones across the page, each one a portrait photograph with its year and title on a slab directly beneath it. Core blocks only: core/group, core/columns, core/column, core/image, core/heading, core/paragraph.
The signature moment
The stagger
The signature is that columns two and four are dropped by a fixed offset. Four frames of identical proportion, two of them pushed down by one spacing preset, so a row of photographs acquires direction. A flush row of four pictures is a gallery and the eye reads it as a set; a row where every second frame sits lower is a sequence, and the eye walks it left to right the way it walks a timeline. Nothing else in the section carries that meaning: there is no rail, no arrow and no number.
The offset is var:preset|spacing|70 as a top padding on the two dropped columns, so it is the buyer's own spacing scale and not a fixed length. A theme with a generous scale gets a longer drift.
At 390 the columns stack and the stagger disappears, and that is correct. Once the frames are one above another there is no row for them to drift along; the same padding then reads as extra breathing room before the second and fourth entries, which is the right amount of separation for a list of dated pictures on a phone. The section loses its signature at phone width and does not acquire a defect in its place.
It is not drift-columns
The other staggered pattern in this catalogue is a gallery: six frames in three columns of two, each column lower than the one before, a monotonic descending diagonal, and no captions at all. This one is a timeline: four frames in one row, alternating rather than descending, every frame carrying a year, and the whole point of the offset is chronology rather than diagonal. It is also not timeline-rail or timeline-decades, the two existing timelines: both are type only, and neither has a photograph in it.
What it inherits from your theme
- The typeface. No font family is stated anywhere.
- Your colours.
basefor the ground,contrastfor the type, both chains ending on a colour WordPress guarantees. Every rule iscurrentColor. - Your spacing scale. The section padding, the caption offsets and the stagger itself are all spacing presets.
What it decides for itself
- Full bleed with a 1240px measure.
- Four equal 25% columns and the 4:5 crop, because the stagger only reads if the frames match.
- Which columns drop. The second and the fourth, so the row alternates rather than descends.
- The reading measure of the lede, held at 40rem in a nested constrained group rather than by padding.
What to change first
- The four photographs. Every image block is empty and waiting; point them at your own media library. Portrait originals crop best.
- The years and titles. The year is plain text, so
1968,Spring 1968or1968-71all set. Keep titles to two or three words: at tablet width a column is about 190px and a long uppercase title falls down it. - The stagger. Change
var:preset|spacing|70on the two dropped columns to80for a stronger drift or60for a quieter one, or move the padding to columns one and three to tip the row the other way. - The heading and lede. Written to say this is four pictures out of a longer record. If you add entries, change that sentence too.
- The number of entries. Six frames of 16.66% still work; keep the drop on alternate columns so the alternation survives.
How the caption is built, and why type never sits on the picture182 words
A photograph's luminance is unknowable, exactly like an accent's: the buyer chooses the image, so a year set on top of one can land white on white with nothing to warn anybody. So the caption group sits beneath its frame, on the section's own base ground, with a currentColor top border that butts the image. The border is what ties the caption to the picture, and because it is currentColor it cannot resolve to nothing and it follows whatever text colour the theme sets.
Inside the caption is a scale collision, which is what carries the design when there is no colour to spend: the year is a display clamp from 1.5rem to 2.25rem with -0.04em tracking and a line-height of 1, set directly against a 15px uppercase title with 0.12em tracking. Large against small, tight against wide, with nothing in between.
The four images ship empty, as aspectRatio: 4/5 with scale: cover, so whatever the buyer uploads is cropped to the portrait proportion the row depends on. Frames of unequal height would read as an accident rather than as a stagger.
How the entries are structured55 words
Each entry is one core/column holding two things in this order:
- An empty
core/imageataspectRatio: 4/5,scale: cover, margins zeroed. - A
core/groupwith acurrentColortop border, holding the year paragraph and the title paragraph.
A dropped entry is exactly that column with padding-top: var:preset|spacing|70 set in the core/column's own block settings.
The variation78 words
frames-ledger moves the composition and nothing else. The four staggered frames are identical to the base, and a single full-width ruled row is added beneath them: the same four years, each with the figure it stands for, under one currentColor hairline. The drifting row is resolved by one flat line, so the section carries the pictures and the record at once. The ledger stacks on a phone, where four dated labels side by side would ladder into ribbons.
Notes52 words
- Core blocks only. No plugin, no script, no separator block.
- No photograph is shipped. A preview is a use of an image; the markup you buy is a distribution of one.
- Every colour is a fallback chain ending on a guaranteed colour, and every rule and border is
currentColor.
Display type18 words
Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(1.5rem, 2.6vw, 2.25rem)
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…Variation: Frames with a ledger
Fetching the markup…