Start here
What to change first
Replace both photographs together, the three decisions and their captions. Retain an accurate concept disclosure for these sample images, or replace it with true project provenance when using your own work.
The signature moment
The changes form a narrow spine between matching photographs
The matching image frames have equal weight and level feet. A narrow central column carries three numbered decisions: anchor with a green sofa, soften with plants and textiles, and group artwork above the seat. On a phone, the edited empty image comes first, then the decisions, then the furnished room.
Theme handoff
What comes from where
From your theme
The Core payload uses the theme’s base and contrast chains, currentColor rules, its typefaces and heading ladder. Text is intended for 4.5:1 contrast, or 3:1 at large display sizes; the rendered checks measure the actual pairs. Headings and links follow the root painter. The inherited Core payload is the theme route for this composition.
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
Two equal square photographs frame a narrow record of three interior styling decisions. Before, changes and after retain that order on a phone, with all captions outside the photographs.
The signature moment: the changes form a narrow spine between matching photographs
The matching image frames have equal weight and level feet. A narrow central column carries three numbered decisions: anchor with a green sofa, soften with plants and textiles, and group artwork above the seat. On a phone, the edited empty image comes first, then the decisions, then the furnished room.
Make it yoursVariations and the edits to make first
What to change first
Replace both photographs together, the three decisions and their captions. Retain an accurate concept disclosure for these sample images, or replace it with true project provenance when using your own work.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
The Core payload uses the theme’s base and contrast chains, currentColor rules, its typefaces and heading ladder. Text is intended for 4.5:1 contrast, or 3:1 at large display sizes; the rendered checks measure the actual pairs. Headings and links follow the root painter. The inherited Core payload is the theme route for this composition.
Display type
The short heading uses the theme’s x-large rung. Decision numerals use 1.75rem, decision text and photo labels 15px, and body copy medium. The photographs retain their original square crop.
Technical notesBlock mechanics, responsive behaviour and constraints
The Styled look
Pumice ground #EBE9DD, charcoal-green ink #2D3029 and olive accent #535D32; Georgia heading over Arial captions and an underlined olive project link. Every button is deliberately filled or underlined, with its own padding. The root states a 400 body weight.
Image provenance
Both public URLs are reviewed entries in assets/comparison-images.json. The furnished room is by Spacejoy on Unsplash: https://unsplash.com/photos/a-living-room-with-a-green-couch-and-a-coffee-table-0JGRXomKXSw under the Unsplash License. The empty version uses AI-assisted furniture removal from that photograph. This is an illustrative interior styling concept, not a documented renovation or a client before-and-after. The visible caption explicitly says the empty version is edited. Both locally cached square exports and the final rendered crops were reviewed.
Core blocks only. No script, custom CSS, font file or required plugin.
Questions
Before and after change spine: common questions
Does Before and after change spine need a plugin?
No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install.
Will Before and after change spine match my theme?
Choose by variation. Photographs with change spine takes your theme’s palette; Pumice and olive brings its own colours.
How many variations does Before and after change spine have?
2: Photographs with change spine and Pumice and olive. Each is its own markup; choose one in the toolbar above the preview before you copy.
Can I use my own images?
Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.
Is Before and after change spine free?
It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.
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: Pumice and olive
Fetching the markup…
