Start here
What you change first
- The photographs. Every chapter includes an image block with an example photograph; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection in order.
- The words. A month, a title and two paragraphs a chapter, inside the
Plategroup. - The plate's colour. The plate is your
base; acontrastplate withbaseink is the other honest choice. - The band and the line.
Chapter lengthin the inspector, 760 here, is a floor: a plate may be as long as it likes and its picture stays behind it until the next plate arrives. - The masthead and the hand-off row. Ordinary core blocks before and after the block.
- Motion. The inspector has the switch and the dials.
- The heading levels. The masthead is an
h2and every chapter title anh3.
The signature moment
Six photographs behind six plates, each one the height of the screen
The backdrop is the block's cinematic layout. Live, the frame is not a window in a column but the whole width of the section and the height of the screen, parked behind the chapters; every photograph is cropped to fill it, and the prose sits on a plate of the page's own base colour down the right-hand side. Reading it is reading captions over a slideshow that only turns when you do: a chapter arrives, its photograph wipes up behind it, and the previous one is pushed out underneath.
Theme handoff
What comes from where
From your theme
- Typeface.
- Palette.
- The measure.
- The ladder.
Set by this pattern
- Six chapters across a year.
- Mixed crops
- The band, at 760.
- The reading line at 80
- The masthead is outside the block
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 photo essay where the pictures fill the page. Six chapters run down the right on white plates over one full-height frame behind them, and as each chapter reaches the reading line the photograph behind the words changes, wiping in along the direction of travel. The block is patternpaste/chapters with the backdrop on, the morph and the plate off, the reading line at 80, the smear off, a band of 760 and no fade.
The signature moment: six photographs behind six plates, each one the height of the screen
The backdrop is the block's cinematic layout. Live, the frame is not a window in a column but the whole width of the section and the height of the screen, parked behind the chapters; every photograph is cropped to fill it, and the prose sits on a plate of the page's own base colour down the right-hand side. Reading it is reading captions over a slideshow that only turns when you do: a chapter arrives, its photograph wipes up behind it, and the previous one is pushed out underneath.
The plate is the composite's, not the block's. The block paints nothing under the words, because type never sits on a photograph and a translucent ground over one has a contrast nobody can measure; each chapter here is a group with your base as its ground and your contrast as its ink, measured on the stock themes at better than 17:1.
Why this is not editorial-chapters-case, team-chapters-index or timeline-chapters-years
- The frame is behind the words, not beside them. Every other chapters composite is a two-column spread live. This one is a spread only at rest and on a phone; live, at two columns, the pictures are the page.
- The chapter is a plate. The prose is inside a
Plategroup with a stated ground, which the others never need. That is the one authoring rule the backdrop adds: never take the plate away. - The pictures are the largest of the set by some way, cropped to the screen rather than to a frame in a column, so this is the composition for photographs that carry the story: a review, a travelogue, a campaign.
- The morph is off because the frame is the screen and every picture fills it; the wipe is on because a photograph the height of the screen wants a direction to arrive from.
- No fade, and it is the only one of the set without it. The fade dims the whole chapter cell, plate included, and a plate at sixty per cent over a photograph is translucent type on a picture, which is the one thing this composite exists to avoid (seen in the first live picture, 2026-09-03). The plates are already what separates one chapter from the next.
Make it yoursVariations and the edits to make first
What you change first
- The photographs. Every chapter includes an image block with an example photograph; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection in order. Choose pictures that survive being cropped to a screen.
- The words. A month, a title and two paragraphs a chapter, inside the
Plategroup. Keep the plate: it is what keeps the words off the picture. - The plate's colour. The plate is your
base; acontrastplate withbaseink is the other honest choice. Never a translucent one. - The band and the line.
Chapter lengthin the inspector, 760 here, is a floor: a plate may be as long as it likes and its picture stays behind it until the next plate arrives.Reading lineis at 80 so a picture changes as its plate enters the screen; lower it and the plate is read over the wrong picture for a while. - The masthead and the hand-off row. Ordinary core blocks before and after the block.
- Motion. The inspector has the switch and the dials. Turning the backdrop OFF makes this a two-column spread live as well as at rest.
- The heading levels. The masthead is an
h2and every chapter title anh3. If this lands under anotherh2, or the page has noh1, change the masthead's level in the block toolbar.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
- Typeface. Nothing states a family.
- Palette. The band and every plate are your
base, the ink yourcontrast; the two labels lead onrole-labeland fall through; the button is your theme's outline style. - The measure. The plate is a constrained group at 36rem, aligned left in its column, so a line of prose never runs wider than a reader wants over a photograph.
- The ladder. The masthead is
x-large, every chapter titlelarge, every paragraphmedium.
What it decides for itself
- Six chapters across a year. A creative studio notebook at two-month intervals links each photograph to an observation about light, material or space. The months are labels you replace.
- Mixed crops (3:2, 4:3, 16:9, 3:4), because with the backdrop on every picture is cropped to the screen anyway and the crop only shapes the still spread; a portrait photograph works as a backdrop, it is simply cropped harder.
- The band, at 760. A plate of two paragraphs is under that, so each photograph is held for a screen and a bit before the next arrives.
- The reading line at 80, the control's maximum and the opposite of every spread composite. The photograph is the plate's own background, so it has to be behind the plate BEFORE the plate is read: at 80 the swap fires as the next plate's top enters the bottom of the screen, and a plate of any length keeps its picture until the one after it arrives. At 40 a reader had half a plate on screen over the previous month's picture.
- The masthead is outside the block and the hand-off row is a sibling after it, both inset by the block's gutter, and both sit on the band rather than on a photograph.
Technical notesBlock mechanics, responsive behaviour and constraints
What needs the plugin
This pattern embeds patternpaste/chapters, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor.
- With the plugin and motion off (the inspector switch, and also what the storefront's still picture and the contact sheet show): the two-column spread, every photograph in the left rail beside its own plate.
- With the plugin deactivated entirely: the masthead is followed by the six chapters as a plain stack of core blocks, each photograph above its own plate, and then the hand-off row.
- A reader who has asked for reduced motion gets the still spread.
- On a phone or a tablet in portrait, with the plugin and motion on, the backdrop is the whole screen and the plates pass over it, the composition every scroll piece uses on a small screen. With motion off, or without the plugin, it is the one-column stack.
What is not proved
- The plate's contrast is measured on the resting spread, where the plate sits on the band; live it sits on a photograph, and the plate is opaque, so the measurement holds, but nothing reads it there.
- The backdrop's width is
100cqw, the block's own width, which every current browser supports; a browser without container query units shows the frame at the column's width instead, which is the spread's frame and not a fault. - The sheet is the spread. The backdrop composition is seen on the live page and in the storefront's picture, which is photographed live at the second chapter; the contact sheet, which is the resting section at four widths, never shows it. The motion gate's 390 viewport judges the screen composition with every frame rule, and the section's height is held to the script-free one there as it is at two columns.
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…