Pattern Paste
Subscribe

Core Patterns Editorial

FreeStandard

Open letter

A statement set as a letter: a centred eyebrow, headline and short rule open it, the body runs left-aligned at a generous size and line height down one narrow measure, and it closes with a sign-off set in italic at display size.

All patterns

Loading patterns…

Theme
Preview size
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. The headline. One sentence, said plainly.
  2. The body. Three paragraphs is a letter; six is an essay.
  3. The sign-off. A name or names.
  4. The dateline. Where and when; keep it at or above 14px.

The signature moment

Centred head, ragged body

The only centred composition in the editorial section, and it is centred exactly as far as a letter is: the heading block is symmetrical, the short rule under it is core's default 100px separator sitting on the centre line, and then the body turns left-aligned, because a centred paragraph is a thing nobody can read. The switch from symmetry to a ragged right edge is what makes it read as a letter rather than an announcement. The sign-off is the other half of the signature: a name at up to 36px in the theme's italic, weight 400, which is the closest core markup gets to a signature without a font.

Theme handoff

What comes from where

From your theme

  • Typeface, including the italic.
  • Palette.
  • The rule.
  • Spacing rhythm.

Set by this pattern

  • The measure
  • Body proportion
  • The sign-off
  • The eyebrow and the dateline

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 statement set as a letter. A centred eyebrow, headline and short rule open it; the body runs left-aligned at a generous size down one narrow measure; it closes with a sign-off set in italic at display size and a dated line beneath. core/group, core/paragraph, core/heading and core/separator.

The signature moment: centred head, ragged body

The only centred composition in the editorial section, and it is centred exactly as far as a letter is: the heading block is symmetrical, the short rule under it is core's default 100px separator sitting on the centre line, and then the body turns left-aligned, because a centred paragraph is a thing nobody can read. The switch from symmetry to a ragged right edge is what makes it read as a letter rather than an announcement. The sign-off is the other half of the signature: a name at up to 36px in the theme's italic, weight 400, which is the closest core markup gets to a signature without a font.

Make it yoursVariations and the edits to make first

What you change first

  1. The headline. One sentence, said plainly.
  2. The body. Three paragraphs is a letter; six is an essay. Copy a paragraph to add one.
  3. The sign-off. A name or names. Keep it to one line at 390, about 20 characters.
  4. The dateline. Where and when; keep it at or above 14px.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • Typeface, including the italic. None stated. The sign-off uses fontStyle: italic, so it takes your theme's italic where the face has one and the browser's synthesised slant where it does not; in a serif theme it is the closest thing to a signature this catalogue can make.
  • Palette. base ground, contrast text, two-rung chains. The heading carries its colour explicitly.
  • The rule. Your separator style, at core's default short width.
  • Spacing rhythm. Core spacing presets.

What it decides for itself

  • The measure: 36rem.
  • Body proportion: clamp(1.125rem, 1.55vw, 1.3125rem) on 1.8.
  • The sign-off: clamp(1.625rem, 2.8vw, 2.25rem), italic, weight 400, -0.02em, line-height 1.2.
  • The eyebrow and the dateline: max(0.875rem, 14px), uppercase, tracked.

Contrast

Every pair is contrast on base. The headline and the sign-off are large text at 3:1; the body, the eyebrow and the dateline are held to 4.5:1.

Display type

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.625rem, 2.8vw, 2.25rem)
Technical notesBlock mechanics, responsive behaviour and constraints

How the widths work

One measure, 36rem, the band's contentSize. Nothing is wider. The body is clamp(1.125rem, 1.55vw, 1.3125rem) on a 1.8 line height, larger and looser than the other editorial bodies because a letter is short and is meant to be read slowly; at 36rem and 19px that is 60 to 65 characters.

The short rule is a core/separator with no is-style-wide, which core and both stock themes render at 100px, centred. It states no colour.

What happens at 390

The measure fills the width. The headline floors at 32px on 1.05 and centres over three or four lines. The sign-off floors at 26px. There are no links, so no tap targets.

Questions

Open letter: common questions

Does Open letter need a plugin?

No. It is built only from core WordPress blocks (group, heading, paragraph and separator), so it pastes into the block editor with nothing to install.

Will Open letter match my theme?

Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted.

Is Open letter free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

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. This is the file as authored; the copy button on the stage applies the finish you chose there.

5,773 bytes 
<!-- wp:group {"align":"full","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":{"blockGap":"0","padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"36rem"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" 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: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:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"max(0.875rem, 14px)","fontWeight":"600","letterSpacing":"0.22em","lineHeight":"1.2","textTransform":"uppercase"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}}} -->
<p class="has-text-color has-text-align-center" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:max(0.875rem, 14px);font-weight:600;letter-spacing:0.22em;line-height:1.2;text-transform:uppercase">A letter to our clients</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2rem, 4.4vw, 3.5rem))"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2rem, 4.4vw, 3.5rem))">We are going to build less, and we want to say why.</h2>
<!-- /wp:heading -->

<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.55vw, 1.3125rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:var(--wp--preset--spacing--60);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.55vw, 1.3125rem));font-weight:400;letter-spacing:normal">For twelve years the measure of a good year here has been how much we built. We have decided to stop counting that way, and since a number of you have asked us, over dinners and in site huts, whether the practice was changing, the honest answer is yes, and this is the shape of it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.55vw, 1.3125rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.55vw, 1.3125rem));font-weight:400;letter-spacing:normal">From next year we will take on fewer projects, and we will stay with each of them for longer: through the first winter, through the first time the building is full, through the small adjustments that every building needs and almost none receives. We think the work will be better for it. We are certain it will be slower.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.55vw, 1.3125rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.55vw, 1.3125rem));font-weight:400;letter-spacing:normal">If that is not what you need from us, we understand, and we will help you find a practice that builds the way we used to. If it is, we would like to talk to you before the year is out.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"0"}},"typography":{"fontSize":"clamp(1.625rem, 2.8vw, 2.25rem)","fontStyle":"italic","fontWeight":"400","letterSpacing":"-0.02em","lineHeight":"1.2"}}} -->
<p style="margin-top:var(--wp--preset--spacing--70);margin-bottom:0;font-size:clamp(1.625rem, 2.8vw, 2.25rem);font-style:italic;font-weight:400;letter-spacing:-0.02em;line-height:1.2">The partners</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"max(0.875rem, 14px)","fontWeight":"600","letterSpacing":"0.18em","textTransform":"uppercase"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:max(0.875rem, 14px);font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Written in the studio, spring</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Editorial

Explore all 13 Editorial patterns

Newsprint columns rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Newsprint columns

A magazine body: a running head on a rule, a wide headline, then the prose packed into two true text columns under it with numbered footnotes gathered on a rule at the foot.

EditorialPreview pattern
Quote break rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Quote break

A reading column broken by one quotation: two hairlines run wider than the measure and between them the line is set at display size, with its source on a short rule beneath, before the prose resumes at its own width.

EditorialPreview pattern
Story two voices rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Story two voices

How we met, told twice: two monogram circles head two columns, Nell and Sam, then three questions set across the full width, each answered once by each of them side by side, the answers disagreeing a little.

EditorialPreview pattern