A closing band: one statement, one action, edge to edge. It is built to be the last thing on a page, the block a reader hits when there is nothing left to explain.
The signature moment
The inversion
The signature is the inversion itself. Every other section on a typical page sits on your light ground. This one flips: your theme's dark colour becomes the ground and your light colour becomes the type. Nothing else in the band is trying to be clever, and that is deliberate. The band reads as a hard stop because it is the only place on the page where the page turns over.
The one flourish is a short accent rule above the heading, centred, used as a mark rather than as text. If your theme has an accent colour, that is where it shows up.
What it inherits from your theme
Everything that makes it look like yours:
- The typeface. The pattern states no font family anywhere. Serif theme, geometric sans theme, either way the band is set in your face.
- Your colours. The ground asks for
contrastand the type asks forbase, which every stock block theme defines. If a theme defines neither, the band falls back to black and white and still inverts. - Your spacing scale. Padding and rhythm are stated as spacing presets, so a theme with a generous scale gets a taller band and a tight one gets a tighter band, without you editing anything.
- Your button shape. The action uses a core button carrying your theme's button element styles.
What it decides for itself
- Full bleed. The band spans the viewport and holds its content to its own measure, so it is a band rather than another column of text. This is the point of the pattern and it does not defer to the theme.
- The reading measure. The statement is held to 780px rather than the full 1240px container, so the heading breaks into two or three strong lines instead of one long one.
- The display ramp. The heading is a
clamp(), so it scales with the viewport rather than stepping at a breakpoint, set tight: negative tracking, line-height just above 1. - The button's colours. A filled button using the same colour as the band's ground would disappear into it, so the button inverts back: it takes the light ground and the dark type, which is the same pair your page body already uses. It reads as a lit panel sitting on the dark band, and it cannot vanish in any theme because the two chains are each other's opposites.
What to change first
- The heading. Replace "Your next section is already written." with the one sentence you would say if you only got one. Keep it short: this ramp is built for six to nine words, and a long heading softens the full stop.
- The button label and its link. The button ships without a URL. Set it, and make the label a verb.
- The eyebrow and the fine print. Two small uppercase lines bracket the statement. Both are optional. Delete either and the band still reads.
- The accent rule. If you would rather the band were monochrome, select the separator and clear its colour; it then follows your text colour instead.
- The band's height. The padding is spacing preset 80 top and bottom. Step it down to 70 if the band feels heavy in your theme's scale, or up if you want it to feel more like a full page.
Notes72 words
- Core blocks only: group, paragraph, separator, heading, buttons, button. No plugin, nothing to keep updated.
- Every colour in the pattern is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the band can resolve to nothing.
- The band's text sits on the inverted ground rather than on your page ground, so if you swap either colour, check the pair rather than assuming it carried over.
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.
4,398 bytes
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"640px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.18em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size" style="font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Ready to ship</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"style":{"color":{"background":"var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, var(--wp--preset--color--luminous-vivid-amber)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|40"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40);background-color:var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, var(--wp--preset--color--luminous-vivid-amber)));color:var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, var(--wp--preset--color--luminous-vivid-amber)))"/>
<!-- /wp:separator -->
<!-- wp:heading {"textAlign":"center","level":2,"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.4vw, 4rem))"}}} -->
<h2 class="wp-block-heading has-text-align-center has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.4vw, 4rem))">Your next section is already written.</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size" style="margin-top:var(--wp--preset--spacing--40)">Paste a pattern into any block theme and it takes on your colours, your type and your spacing. No plugin to install, no settings to reconcile, nothing to keep updated.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">Get the full library</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","textTransform":"uppercase","letterSpacing":"0.12em"}}} -->
<p class="has-text-align-center" style="font-size:clamp(0.875rem, 1vw, 0.9375rem);margin-top:var(--wp--preset--spacing--40);letter-spacing:0.12em;text-transform:uppercase">Instant download. Core blocks only. Yours to edit forever.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->