One client quote against one square portrait, two up. It is the testimonial for the page that needs a face on it: the person is shown, small, and the words are still the largest thing in the section. The picture ships empty, so the buyer points it at their own media library and nothing here is a photograph we redistributed.
The signature moment
The quote overhangs a low portrait
The picture is the small half and it is aligned to the foot of the row, so it starts a long way below the first line of the quote and the words hang over it. The two columns are 62 and 38, the portrait is held to a 240px square inside its column rather than filling it, and the whole row is bottom aligned. So the top edge of the section is the quote alone, the bottom edge is the quote and the picture together, and the step between them is the composition. Nothing is centred, nothing is stretched to match, and the empty space above the portrait is the point rather than a gap.
That is what keeps it away from the rest of the section. testimonial-band is a full-bleed inverted band with a hanging quotation mark and a display-size quote; testimonial-trio is three bordered cards with ragged tops and level feet; quote-wall is eight short voices at reading size. This one is the only pattern in the section with a picture in it, and the only one whose composition is a step rather than a row.
What it inherits from your theme
- The typeface. No font family is stated anywhere, so the quote is set in your theme's face and the tracked attribution in the same one.
- Your colours. The ground asks for
baseand the type forcontrast, the two slugs every stock block theme defines, each behind a fallback chain that ends on a colour WordPress itself guarantees. Nothing here can resolve to nothing. - The hairline. It is
currentColor, so it is exactly the colour of the type above it in every theme, including one that defines no presets at all. - Your spacing scale. The section's padding and the gaps inside it are spacing presets, so a theme with a generous scale gets a taller section.
What it decides for itself
- The quote is at reading size, not display size.
clamp(1.25rem, 1.9vw, 1.625rem)at a 1.42 line-height. A display quote beside a photograph turns into a poster, and the section already has a second object in it. This is the deliberate opposite ofpull-quote's ramp, and it lets the quote run to sixty words without shouting. - The portrait's size and its crop. A 240px square,
aspectRatio: 1withscale: cover, so whatever the buyer uploads is cropped square rather than changing the layout. - The bottom alignment and the 62/38 split. Both are the signature. Set the columns back to top alignment, or give the picture the wide half, and there is no reason to buy this over any other two-up.
- The attribution as a ruled block under the words. In the base the rule belongs to the quote column, so the portrait stands free of it.
- Its own ground and padding. The section states both, so it can drop between any two neighbours without borrowing air from either. It is a section on your page ground rather than a coloured band: the bands in this section are
testimonial-band's job.
What a buyer changes first182 words
- The picture. Click the empty frame and choose one from your media library. It arrives empty on purpose: a pattern that shipped a photograph would be redistributing somebody's licence along with the markup.
- The quote. Fifty to seventy words is what the ramp is drawn for. Much shorter and the quote column stops being taller than the portrait, which is the whole composition; much longer and it becomes a case study.
- The name and the role. Two lines, tracked caps then plain. Delete the second and the first stays on its rule.
- The eyebrow. "From the client" is a paragraph rather than a heading, so it stays out of your page outline. Change the words or delete the block.
- How small the picture is. It is held by a 240px content size on the group around it. Raise it towards 320px to close the step, lower it to open it. Do not let it pass the height of the quote block: at that point the picture is overhanging the words and the section is a different one.
The variation61 words
- Ruled foot (
variations/ruled-foot.html) is the structural axis. The attribution leaves the quote column and becomes a hairline running the full 1240 under both halves, so the picture and the last line of the quote stand on the same rule and the quote is the only thing above it. The copy, the picture, the ground and the type are the base's.
Notes173 words
- Core blocks only: group, columns, column, paragraph, image. No plugin, no script, no stylesheet, nothing to keep updated.
- The image block ships EMPTY, which is what WordPress's own
save()writes before a file is chosen and is valid at both matrix entries. The previews on the product page substitute one of our own photographs at render time; the markup you copy has nosrcin it. - Nothing is set on the photograph. Type over an image is a colour pair nobody can measure, because the buyer chooses the image, so the quote and the attribution sit on the section's own ground.
- The quote crosses 24px at wide viewports, so its pair is judged at the large-text floor of 3:1 there and at 4.5:1 below; the eyebrow and the attribution are small and are judged at 4.5:1. Every pair is
baseagainstcontrast. - At 390 the columns stack, which is the right answer: the quote, then its rule and name, then the portrait beneath, still small and still left.
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: Ruled foot
Fetching the markup…