The signature moment
Portholes lap the frame
Each circle is a core/cover with aspectRatio: 1 and a 50% radius, pulled up by exactly half its own width, so all three centres sit on the photograph's lower edge whatever their size: the largest reaches furthest into the picture and the smallest barely breaks it. Widths and laps are the same vw ratio, so the centres stay on the edge from 390 to 1920.
Theme handoff
What comes from where
Theme and pattern
Inherits every colour, the typeface and the spacing scale. Decides the three circle sizes (34rem, 23rem and 14.5rem at their widest), the photograph height (half the viewport width, 24rem to 60rem) and its focal point on the lamps, and a 1440px measure; below about 1000px the lede drops under the heading.
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 wide full-bleed core/cover on your photograph, giving way to a band of your theme's paper. Three circular photographs of decreasing size sit on the edge between them, each captioned on the paper below, and under them a display heading beside a lede and a text link.
The signature moment: portholes lap the frame
Each circle is a core/cover with aspectRatio: 1 and a 50% radius, pulled up by exactly half its own width, so all three centres sit on the photograph's lower edge whatever their size: the largest reaches furthest into the picture and the smallest barely breaks it. Widths and laps are the same vw ratio, so the centres stay on the edge from 390 to 1920.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits, what it decides
Inherits every colour, the typeface and the spacing scale. Decides the three circle sizes (34rem, 23rem and 14.5rem at their widest), the photograph height (half the viewport width, 24rem to 60rem) and its focal point on the lamps, and a 1440px measure; below about 1000px the lede drops under the heading.
Technical notesBlock mechanics, responsive behaviour and constraints
Why the paper band is inside the cover
A cover clips its overflow and its photograph is a positioned layer, so a sibling lapped up after it paints under the picture. The paper band is a group INSIDE the cover's inner container, and its top margin is what gives the photograph its height. The circles are flex items in a flex row, so their negative margins never collapse into the band.
Type never sits on a photograph
The large photograph and the circles carry no veil and no text. The heading (a bare clamp() display, 44px to 88px: its size is the composition), the lede (medium at 1.6) and the captions (14px to 16px, under 30 characters) sit on the paper in your contrast.
What a buyer changes first
The four photographs: select a cover and choose Replace. The circles crop to the middle of whatever you choose, so pick photographs with a centred subject.
The Styled look
variations/smoke-and-brass.html states its own colours and face: a smoke-grey paper (#d8d6d1) under near-black ink (#17171a), deep brass (#6b4e17) for the circle labels and a brass (#c9a24a) pill button with ink type. Avenir Next (Avenir, Futura) sets everything.
Included images
The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select a cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses.
Questions
Cover portholes: common questions
Does Cover portholes need a plugin?
No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install.
Will Cover portholes match my theme?
Choose by variation. Three portholes takes your theme’s palette; Smoke and brass brings its own colours.
How many variations does Cover portholes have?
2: Three portholes and Smoke and brass. 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 Cover portholes 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: Smoke and brass
Fetching the markup…
