Start here
What you change first
- Fill projects from media library to replace the three photographs.
- Edit destination names, descriptions and Explore links in each Caption group. Update the matching numbered travel index and the enquiry link too.
- Adjust Screen height and Ribbon width to suit your crops; inspect both desktop and phone layouts after changing either.
- Edit the Masthead group. Its heading is display type; the route headings follow the theme's ladder.
- Keep Scroll wheel off for natural page scrolling, or enable it intentionally. Use Animate this block to retain the native gallery; reduced motion always does.
- Check heading levels where the section lands: the masthead starts at h2 and project/index titles at h3. Change levels in the toolbar if used elsewhere.
The signature moment
A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index.
A travel collection with a full-screen-height photographic panel on the left. The editorial masthead and three numbered route notes occupy the right column. The index and enquiry remain ordinary, editable core blocks outside the moving surface.
Theme handoff
What comes from where
From your theme
Base and contrast provide paired ground and ink; the theme supplies the typeface, body size, index-heading ladder and button treatment. Rules use currentColor. The small travel labels use the optional label role with a guaranteed ink fallback.
Set by this pattern
A 64/36 desktop split, a full-height contained field, the reading order and a display masthead alongside the wheel. Caption titles are display type tuned to the picture. Labels are compact display paragraphs. Three reviewed WordPress CC0 photos move from blue-green woodland and water to mineral slopes and a golden evening shoreline. They are illustrative destinations, not a claimed itinerary or a sold package. Sources and credits live in assets/wordpress-images.json and /image-credits/.
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
The signature moment: A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index.
A travel collection with a full-screen-height photographic panel on the left. The editorial masthead and three numbered route notes occupy the right column. The index and enquiry remain ordinary, editable core blocks outside the moving surface.
Why this is not the studio split
This is a gallery section with an h2 masthead and a persistent destination index. The picture leads the reading order. A persistent numbered index describes every journey alongside the selected landscape; the studio has one large statement beside its reel. Three projects keep the pictured sequence and index in step. The contained panel uses the block’s full 100svh desktop height, with a broad 88% ribbon and visible edges. No heading or padding precedes the desktop wheel. On phones the warp becomes a compact native photo gallery, followed by the masthead and index. Swipe sideways to browse; vertical page scrolling stays native.
Make it yoursVariations and the edits to make first
What you change first
- Select the reel and use Fill projects from media library to replace the three photographs. Keep the first image unlinked and without an image caption.
- Edit destination names, descriptions and Explore links in each Caption group. Update the matching numbered travel index and the enquiry link too.
- Adjust Screen height and Ribbon width to suit your crops; inspect both desktop and phone layouts after changing either.
- Edit the Masthead group. Its heading is display type; the route headings follow the theme's ladder.
- Keep Scroll wheel off for natural page scrolling, or enable it intentionally. Use Animate this block to retain the native gallery; reduced motion always does.
- Check heading levels where the section lands: the masthead starts at h2 and project/index titles at h3. Change levels in the toolbar if used elsewhere.
The Reel panel’s Show instructions toggle hides the automatic browsing hint without deleting project text, links or navigation. It works in every pattern that uses this block.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
Base and contrast provide paired ground and ink; the theme supplies the typeface, body size, index-heading ladder and button treatment. Rules use currentColor. The small travel labels use the optional label role with a guaranteed ink fallback.
What it decides for itself
A 64/36 desktop split, a full-height contained field, the reading order and a display masthead alongside the wheel. Caption titles are display type tuned to the picture. Labels are compact display paragraphs. Three reviewed WordPress CC0 photos move from blue-green woodland and water to mineral slopes and a golden evening shoreline. They are illustrative destinations, not a claimed itinerary or a sold package. Sources and credits live in assets/wordpress-images.json and /image-credits/.
Technical notesBlock mechanics, responsive behaviour and constraints
What needs the plugin
The frame never pins in this authored mode. Wheel / Drag is selected with Scroll wheel off: mouse or pen dragging snaps to a complete destination, while wheel and trackpad gestures scroll the surrounding page. Loop is on. Arrows, arrow keys and Home/End also browse. Phones use compact native photos with horizontal swiping and normal vertical page scrolling. The inspector can enable wheel input or select finite Page scroll instead; Loop and Scroll wheel preferences are disabled in that mode.
Reduced motion, JS-off and unavailable graphics keep a native sideways gallery with complete photographs and captions. Deactivating the plugin leaves the three Project core Groups in order, with captions below their images, alongside the travel index. WordPress shows its missing-block placeholder in the editor.
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…