Start here
What to change first
- Replace each sample photo with its office or neighbourhood. Use the Image block's Replace control and update the descriptive alternative text.
- Edit the city, time zone, address, hours and direct lines in each bay.
- Duplicate or delete a bay as needed. The base grid fits the available space; the paired variation uses columns that can be edited in List View.
- Link email addresses with
mailto:and telephone numbers withtel:if they should be tappable. Edit or remove the shared delivery note.
The signature moment
The same shape, four times, under one unbroken rule
Every bay has the same image crop and content order. Adjacent top borders meet because the grid has no horizontal gap; padding inside each bay separates the pictures and facts. One closing rule holds the shared delivery note. No office gets greater weight than another.
Theme handoff
What comes from where
From your theme
Typeface, heading sizes, base and contrast colours, and vertical spacing presets. Rules use currentColor. Heading sizes have clamp fallbacks; the narrow address and contact lines keep their own reading-size clamp.
Set by this pattern
The full-width band has a 1240px inner measure. A grid with 16rem minimum tracks keeps four offices across when they fit, pairs at tablet widths, and a single column on a phone. Each bay keeps its own top border when the grid reflows. Horizontal padding is fluid. The photo fills the bay's content width at 4:3, with cover cropping and a consistent gap before the city name.
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 photographic office directory. Matching 4:3 frames open four equal bays, followed by each city's time zone, address, hours and direct contact details. The photos are included examples, ready to replace with the buyer's own rooms.
The signature moment: the same shape, four times, under one unbroken rule
Every bay has the same image crop and content order. Adjacent top borders meet because the grid has no horizontal gap; padding inside each bay separates the pictures and facts. One closing rule holds the shared delivery note. No office gets greater weight than another.
Make it yoursVariations and the edits to make first
The variation
Offices in pairs gives the same four images and offices two rows of two, with larger city names. Its core columns stack below 782px. The photos remain 4:3, so the bigger frames give each office more presence.
Forest and apricot keeps the four bays on warm paper, with forest text, apricot details and Georgia city names.
What to change first
- Replace each sample photo with its office or neighbourhood. Use the Image block's Replace control and update the descriptive alternative text.
- Edit the city, time zone, address, hours and direct lines in each bay.
- Duplicate or delete a bay as needed. The base grid fits the available space; the paired variation uses columns that can be edited in List View.
- Link email addresses with
mailto:and telephone numbers withtel:if they should be tappable. Edit or remove the shared delivery note.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
Typeface, heading sizes, base and contrast colours, and vertical spacing presets. Rules use currentColor. Heading sizes have clamp fallbacks; the narrow address and contact lines keep their own reading-size clamp.
What it decides for itself
The full-width band has a 1240px inner measure. A grid with 16rem minimum tracks keeps four offices across when they fit, pairs at tablet widths, and a single column on a phone. Each bay keeps its own top border when the grid reflows. Horizontal padding is fluid. The photo fills the bay's content width at 4:3, with cover cropping and a consistent gap before the city name.
Contrast and display type
Headings qualify as large text at 3:1; address lines, contact details and labels are held to 4.5:1. Colour chains end in WordPress's guaranteed base colours. Address and contact lines use clamp(0.9375rem, 1vw, 1rem) so compact office bays remain readable without the theme's medium size overwhelming the measure.
Technical notesBlock mechanics, responsive behaviour and constraints
Included images and core blocks
The photographs come from the reviewed WordPress collection in assets/wordpress-images.json. Their public HTTPS URLs travel in the copied Image blocks without source attachment IDs. The preview and pasted section use the same photos. These are illustrative workspace details, not photographs of the fictional addresses in the sample copy.
Core group, image, heading and paragraph blocks make the base. The paired variation also uses columns and a spacer. No plugin, custom CSS or JavaScript. Text sits on the theme's ground, never on the photos.
Questions
Contact offices: common questions
Does Contact offices need a plugin?
No. It is built only from core WordPress blocks (group, heading, image and paragraph), so it pastes into the block editor with nothing to install.
Will Contact offices match my theme?
Choose by variation. Offices and Offices in pairs take your theme’s palette; Forest and apricot brings its own colours.
How many variations does Contact offices have?
3: Offices, Forest and apricot and Offices in pairs. 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 Contact offices 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: Forest and apricot
Fetching the markup…Variation: Offices in pairs
Fetching the markup…