Open letter: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/open-letter.html Core Patterns (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Free Standard # 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 Search patterns Loading patterns… Start here ## What you change first - The headline. One sentence, said plainly. - The body. Three paragraphs is a letter; six is an essay. - The sign-off. A name or names. - 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 - The headline. One sentence, said plainly. - The body. Three paragraphs is a letter; six is an essay. Copy a paragraph to add one. - The sign-off. A name or names. Keep it to one line at 390, about 20 characters. - 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Editorial Access Free Plugin None, core blocks only Variations 1 Colour From your theme Type From your theme Motion None Blocks group, heading, paragraph, separator Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Editorial Explore all 13 Editorial patterns (https://patternpaste.com/patterns/editorial/) Shot in Twenty Twenty-Five Editorial No 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. Editorial Preview pattern (https://patternpaste.com/pattern/newsprint-columns.html) Shot in Twenty Twenty-Five Editorial No 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. Editorial Preview pattern (https://patternpaste.com/pattern/quote-break.html) Shot in Twenty Twenty-Five Editorial No 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. Editorial Preview pattern (https://patternpaste.com/pattern/story-two-voices.html)