A gallery of six photographs filed as three chapters. Three full-width horizontal bands are stacked with nothing between them: band one on a base chain, band two inverted onto a contrast chain, band three back on base. Each band carries a 13px tracked caps label, one short heading, and a pair of 3:2 frames side by side with a caption under each. The bands butt directly against one another, so every colour change is a hard edge running the full width of the viewport.
The signature moment
The gallery is striped, and the stripe is the structure
Nothing separates the three pairs but a change of ground. There is no rule, no gutter, no card and no border anywhere in the section; the only mark in the design is the line where one band's ground stops and the next one's starts. That is what makes six photographs read as three chapters rather than as a grid of six: the eye groups the pair that shares a ground, and the edge below it says the next pair is a different subject.
It survives colourlessness because it is made of the only two colours every theme has. base and contrast are the sole universal slugs in the preset contract, and alternating between them is the one colour move that always arrives: a theme cannot resolve it to nothing, and it cannot resolve it to two colours that look alike, because a theme that made its ground and its ink alike would be unreadable everywhere else too. Every other colour device in a pattern depends on a slug that may or may not exist and may land at any luminance. This one is guaranteed by construction, which is why the stripe is the structure and not the decoration on top of it.
It survives 390px because the stripe is made of ground rather than layout. Below 782px core stacks each band's core/columns, so the two frames sit one above the other, each still carrying its caption; the band simply gets taller. The band's own ground grows with it, the padding does not stack, and the two hard edges stay exactly where they were, full width. On a phone the section reads as three tall chapters instead of three wide ones, which is the same argument at a different aspect.
What it inherits, what it decides
Inherits: the typeface and its weights, the resolved value of base and contrast, the spacing scale behind presets 20 to 70, and the stacking threshold for core/columns.
Decides: the striped structure and its phase; the 3:2 crop on all six frames with scale: cover, so whatever the buyer uploads is cropped to the proportion the pairs need; the 13px tracked caps label at 0.22em; a heading ramp of clamp(1.625rem, 3vw, 2.5rem) at -0.025em and line-height 1.08; and captions at clamp(0.9375rem, 1.05vw, 1.0625rem), whose floor is 15px so the lines stay above the responsive floor on a phone.
Contrast is claimed at 4.5:1 throughout: every string in the section is a label, a caption or a heading set on its band's own ground, which is a base chain under a contrast chain or the inverse. Nothing in the pattern sits on a photograph, and there is no accent slug anywhere in it, in any rung.
How the bands are butted, and the traps that are avoided263 words
- The parent adds no gap. The outer
core/groupisalign: full, layoutdefault,blockGap: "0"and zero padding on all four sides, so WordPress's flow-layout gap rule between its children resolves to nothing and the bands touch. Acore/separatorcannot do this job at all: it is a line between two things, not the absence of a space, and Twenty Twenty-Four narrows any separator that is notis-style-wideto a centred stub. - Each band owns its own edges. Every band is its own
align: fullgroup with its own ground, its ownspacing|70top and bottom padding and its ownclamp(1.25rem, 4vw, 4rem)gutters, with a nested constrained layout at 1240px. The colour therefore runs to the viewport edge while the content stays on the measure, which is the only way the hard edge reads as full width. - The inverted band states its type on every block inside it, headings included. A theme's heading element style beats a colour inherited from a wrapping group, so a heading left to inherit lands the same colour as its own band at ratio 1.0, invisible and with nothing to flag it. So the label, the heading and both captions in band two each carry an explicit
basechain, and the same is true of whichever bands are inverted in the variation. - Vertical rhythm is inline, not inherited. The heading states
margin-top: var(--wp--preset--spacing--20)andmargin-bottom: 0, and thecore/columnsstatesmargin-top: var(--wp--preset--spacing--50)andmargin-bottom: 0, so the spacing inside a band does not depend on which layout gap a theme happens to apply.
What a buyer changes first113 words
The six photographs. Every image block ships empty, so the editor shows its select-an-image placeholder with the crop and the layout already set; pick a file and it is cropped to 3:2 and covered.
After that, the copy: three labels (keep them short, they are tracked caps and are meant to be glanced at rather than read), three chapter headings, six captions. The pattern will take a fourth band if the story needs one, but the phase has to keep alternating: duplicate a band, swap its ground chain and its type chain, and change the four colours in it so the stripe stays honest.
Last, the phase itself, which is the variation below.
Variations102 words
Inverted bands (variations/bands-inverted.html). The stripe phase flips. Bands one and three go on the contrast chain with base type, and band two onto base with contrast type, so the section reads dark, light, dark instead of light, dark, light. The composition, the six frames, the proportions and the copy are identical; the only thing that changes is the colour relationship, and that is deliberate: the base and the variation are the two answers to how the section joins whatever sits above it on the page. Where the base's first edge is soft against a light page, the variation's is the edge itself.
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: Inverted bands
Fetching the markup…