Start here
What you change first
- The photograph. Each photographic chapter includes the same example image; when replacing it, point all the photographic covers at one file from your media library.
- The points. Select each cover and drag the focal point picker in the block sidebar to the part of the photograph that chapter is about.
- The words. Two paragraphs a chapter, about the thing at the point, inside the
Plategroup. - The zoom and the spotlight.
ZoomandSpotlightin the block's Motion panel, 190 and 55 here. - The band.
Chapter lengthin the inspector, 720 here; raise it for longer chapters. - 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
One scene, and a camera that carries the frame to the part each chapter is about
This is the ordinaryabundance.com mechanism in core blocks: nothing swaps. There is one photograph, and reading down it is walking around inside it. The first five chapters each point at one part of the view (the open water, the blue surface, the green foreground, the coastal edge and the water beyond the walls) and the frame pans and zooms there over the block's swap time, with the rest of the scene veiled in the page's own ink so the part being talked about is the part that is lit. The sixth chapter has no cover, so the camera pulls back to the whole view and the veil lifts: the section ends on the picture it began with, now read.
Theme handoff
What comes from where
From your theme
- Typeface.
- Palette.
- The measure.
- The ladder.
Set by this pattern
- Six chapters, five of them pointed.
- The zoom, at 190.
- The band, at 720.
- The rail on the right
- 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
One photograph, six looks. The frame on the right holds a single scene for the whole section and the camera moves across it as you read: each chapter is a cover block whose focal point is where the camera looks, the frame pans and zooms to that point with a soft spotlight on it, and the last chapter lets the whole picture go. The chapters you are not reading fade back. The block is patternpaste/chapters with the camera on, the rail flipped to the right, the morph and the plate off, a zoom of 190, a spotlight of 55, the reading line at the block's default and the fade at 45.
The signature moment: one scene, and a camera that carries the frame to the part each chapter is about
This is the ordinaryabundance.com mechanism in core blocks: nothing swaps. There is one photograph, and reading down it is walking around inside it. The first five chapters each point at one part of the view (the open water, the blue surface, the green foreground, the coastal edge and the water beyond the walls) and the frame pans and zooms there over the block's swap time, with the rest of the scene veiled in the page's own ink so the part being talked about is the part that is lit. The sixth chapter has no cover, so the camera pulls back to the whole view and the veil lifts: the section ends on the picture it began with, now read.
Scroll back up and the camera retraces its route. Nothing moves until you scroll, and nothing moves after you stop.
Why this is not editorial-chapters-case, team-chapters-index or timeline-chapters-years
- One picture, not six. Every other chapters composite gives each chapter its own photograph and swaps them. Here every chapter is a cover pointed at the SAME photograph and the frame never changes what it holds, only where it is looking. That is a different thing to author (one good photograph and six focal points, set with the ordinary focal point picker) and a different thing to read.
- The morph is off and the plate is off, and both follow from the camera: a frame that pans wants one shape to pan inside, and a mount around a photograph the reader is moving through reads as a porthole. The window is the stage box, and the photograph fills it at every zoom.
- The spotlight is the only one of the set that veils the picture. At 55 the parts of the scene the chapter is not about drop back under the page's ink, which on a light theme darkens and on a dark theme fogs; the hole at the point is soft and about a quarter of the frame across. It lifts on the resting chapter, so the whole view is seen clean twice: at the top and at the end.
- The fade is 45, between the index's 40 and the case study's 50: a chapter here is two paragraphs about one thing in the picture, and it wants to be read while the camera is on that thing.
- The rest chapter is the ending. The timeline's interludes keep the previous print; a camera rest is the opposite, the camera letting go. It is the one chapter that must have no cover.
Make it yoursVariations and the edits to make first
What you change first
- The photograph. Each photographic chapter includes the same example image; when replacing it, point all the photographic covers at one file from your media library. The camera uses the first chapter's picture as the scene and ignores the others' files, but the still spread and the phone show each cover, so they should all be the one picture.
- The points. Select each cover and drag the focal point picker in the block sidebar to the part of the photograph that chapter is about. That is the whole of the camera's authoring.
- The words. Two paragraphs a chapter, about the thing at the point, inside the
Plategroup. Add a chapter by duplicating aChaptergroup; leave one chapter with no cover where you want the camera to pull back. - The zoom and the spotlight.
ZoomandSpotlightin the block's Motion panel, 190 and 55 here. A spotlight of 0 is a plain pan and zoom. - The band.
Chapter lengthin the inspector, 720 here; raise it for longer chapters. - 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 camera OFF turns this back into a picture-per-chapter section, each cover its own frame.
- 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 is your
basewith yourcontrastas its ink; the two labels lead onrole-labeland fall through tocontrast; the button is your theme's outline button style. The spotlight's veil iscurrentColormixed down, so it is your ink, not ours. - The measure. Each chapter's prose is inside a
Plategroup at 36rem on yourbase, invisible on the band at two columns and the thing the words sit on when the photograph is the screen. Never take the plate away. - The ladder. The masthead is
x-large, every chapter titlelarge, every paragraphmedium, each as a chain with a tunedclamp()behind it.
What it decides for itself
- Six chapters, five of them pointed. Five looks is enough to walk a photograph without running out of things in it; the sixth is the whole.
- The zoom, at 190. Nearly twice the resting size: enough that a point in a wide scene fills the frame, not so much that the photograph turns to pixels. A very high-resolution photograph can take more.
- The band, at 720. A chapter is two paragraphs, a little under the band at the theme's measure, so the next chapter's label is on screen faded beneath the one being read.
- The rail on the right, so the words lead and the picture answers them.
- The masthead is outside the block and the hand-off row is a sibling after it, both inset by the block's gutter.
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 chapter's cover beside its own words, each showing the photograph at its own focal point, the sixth chapter with no picture.
- With the plugin deactivated entirely: the masthead is followed by the six chapters as a plain stack of core blocks, each cover above its own words, 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 block goes live on the screen: the photograph is the whole screen behind the chapters, which pass over it on their plates, and the camera moves exactly as it does in the frame. With motion off, or without the plugin, it is the one-column stack.
What is not proved
- The judge proves the camera moved to a pointed chapter and kept the frame full (
chapters-camera-still,chapters-camera-uncovered), and that it did so again on the way back up. It does not prove the camera looked at the RIGHT part of the picture: the point is read off the cover's focal point and clamped to the crop, and a point outside the crop lands at its edge. - The spotlight's strength is not measured. The veil is
currentColormixed down at the percentage stated; on a theme whose ink is pale it fogs rather than darkens, which is a look and not a fault, and it has not been rendered on such a theme here. - The sheet shows five covers of the same photograph, each at its own focal point, followed by the text-only rest chapter. The preview uses the same coastal photograph as the copied markup. The storefront's picture is photographed live, with the camera on the second chapter's point.
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…