A full-width opening section built on core/media-text, which nothing else in this catalogue uses. The photograph takes 45% of the viewport and runs off the left edge of the screen; the words take the rest and are held to a 30rem measure inside it. Above the headline is a 14px tracked caps eyebrow, below it a lede and two buttons. The media frame ships EMPTY; the buyer points it at their own library.
The signature moment
The picture and the words obey different grids
The photograph is measured against the viewport and the type is measured against the page. The media column is 45% of the full screen width and bleeds to the left edge and to the top and bottom of the section, while the eyebrow, the h1, the lede and the buttons sit in a 30rem measure that does not move when the screen gets wider. So the two halves of the section are not two columns of a grid; they are two different systems butted together, and the seam between them is the whole design. That is what core/media-text gives you and core/columns cannot: a column whose width is a percentage of the window rather than of a container, with the block's own grid holding the two sides level.
Everything else is held quiet so the seam is what you see. There is no rule, no tint, no border on the picture, and the only weight in the type is the one-step jump from a 14px eyebrow to a headline that clamps between 36px and 64px.
It survives colourlessness because it is entirely proportion: 45% against 55%, a viewport measure against a 30rem measure. Take the palette away and the picture still escapes the layout the words obey.
What it inherits, what it decides
Inherits: every colour (the band's ground is a base chain, its type and its primary button's ground a contrast chain, and the outline button's rule is currentColor), the typeface, and the theme's own button hover and focus states.
Decides: the 45/55 split, the 30rem measure, the vertical air (clamp(3.5rem, 7vw, 5.5rem) top and bottom on the text side only, so the picture bleeds past it), and the type proportion: a 14px eyebrow at 0.24em tracking, an h1 at clamp(2.25rem, 4.5vw, 4rem) with -0.03em tracking at 1.03, and a lede at 17px to 19px at 1.6.
The section has no vertical padding of its own. All of the air is on the text side, which is what lets the photograph run to the top and bottom edges of the band as well as to the side. If you want a margin above the picture, move the padding from the inner group to the core/media-text block itself, and accept that it insets the picture on every side.
How the width is actually written131 words
mediaWidth is only serialised when it differs from 50: at 45 the block emits grid-template-columns: 45% auto inline (auto 45% when the media is on the right). At 50 it emits nothing and core's stylesheet supplies the default, so a "50/50" variation of this pattern would carry no inline width at all. That is why the number in the block's settings and the number in the style attribute have to agree: they are two copies of one decision, and only one of them is what the browser reads.
align: "full" is stated in the block's settings and in the markup. The attribute has a default of "none" in block.json, so "align":"full" is non-default and survives serialisation; the class alignfull is what actually makes the picture reach the edge of the screen.
What happens at 390px131 words
isStackedOnMobile is core's default and is left on, so below 782px the block becomes one column, the inline grid-template-columns is overridden by core's !important mobile rule, and the picture goes full width with the words beneath it. The media is always first on a phone, in both the base and the mirrored variation, because core puts the figure in grid row 1 and the content in row 2 regardless of mediaPosition. That is right for a hero: the phone gets the picture, then the headline.
The content side keeps core's own padding: 0 8% and adds nothing horizontal of its own, so at 390 the words sit in a 328px measure with a 31px gutter on each side, and the 30rem constraint stops applying because it is wider than the column.
What a buyer changes first156 words
The photograph. The media frame ships EMPTY, which is exactly what WordPress's own save() writes for a core/media-text whose mediaType is image and whose mediaUrl is not set yet: click it, choose an image, and the composition is already made.
The one thing worth knowing before choosing: core/media-text does not crop. The <img> is width: 100%; height: auto, so the photograph's own proportion decides the height of the section when it is taller than the words. A portrait picture makes a tall, quiet hero with the type centred against it; a wide one makes a short band with the ground showing above and below the picture. Pick the crop before you upload, or set mediaWidth lower so a wide photograph is not so tall.
After that: the headline reads best at two lines, which is about 50 characters at the 30rem measure, and the lede at about 140. The eyebrow is a label, not a sentence.
Variations137 words
- Media right:
mediaPosition: "right", so the figure is serialised after the content and the grid becomesauto 45%. The picture escapes the right edge and the words keep the left of the page. The composition is the only thing that moves: same measure, same chains, same type scale. On a phone it is identical to the base, because core stacks media first either way. - Night: the colour axis by inversion, which is the one colour move that arrives in every theme, since
baseandcontrastare the only universal slugs. The band's ground becomes acontrastchain and every piece of type abasechain; the primary button flips to a base ground with contrast text and the outline button keeps itscurrentColorrule, which now follows the light type. One axis, nothing else touched.
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: Media right
Fetching the markup…Variation: Night
Fetching the markup…