Post header: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/post-header.html Core Patterns (https://patternpaste.com/patterns/) Page header (https://patternpaste.com/patterns/page-header/) Free Standard # Post header Single-post furniture, built as a lit plate on an unlit band: the post's category, title and byline sit on a paper plate held to 74% of the measure, while the publication date hangs outside it on the ink, aligned to the plate's foot. Dynamic core blocks, so it shows the post it is placed on; the preview here is our sample content. Drop it into a single template, above the content. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The date column's width. It is 26%. - core/post-terms. Shipped with term: category. - The byline label. "Words by" is an ordinary paragraph beside core/post-author-name, so it takes any wording; the author's name is the dynamic half. - The title ceiling. clamp(2.25rem, 5.4vw, 4.25rem). - The finish. Ship the base where the post deserves an announcement, and header-paper where the page should stay quiet. The signature moment ## The date is outside the plate The plate holds three of the four facts and the fourth hangs beside it. The band runs edge to edge in your contrast colour; the plate is your base colour and takes 74% of the 1240 measure, so the ink shows as a wide margin down the right. The publication date sits in that margin, bottom-aligned with the plate's foot, in the band's own light type. Nothing else is out there. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - The category link's colour is NOT inherited, on purpose. ### Set by this pattern - Full bleed with a 1240px measure - The plate is the only lit ground - h1, - Bottom alignment. 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 Single-post furniture: the post's category, title, byline and date, set as a lit plate on an unlit band. Core blocks only, but four of them are DYNAMIC: core/post-terms, core/post-title, core/post-author-name and core/post-date, plus core/group and core/columns around them. ### The signature moment: the date is outside the plate The plate holds three of the four facts and the fourth hangs beside it. The band runs edge to edge in your contrast colour; the plate is your base colour and takes 74% of the 1240 measure, so the ink shows as a wide margin down the right. The publication date sits in that margin, bottom-aligned with the plate's foot, in the band's own light type. Nothing else is out there. That is the composition, and it is doing two jobs. It gives the header an asymmetry that survives colourlessness, and it puts the one fact a reader scans for where a reader scans for it, without spending a row of the plate on it. Inside the plate the ramp is a collapse, on the same principle as page-header-rule: a 13px category at 0.22em, then the title at up to 68px, then a currentColor hairline, then the byline back at 13px against the author name at 18px. ### Why it is not the other two page headers page-header-rule and page-header-meta open an INTERIOR PAGE and carry text somebody typed. This one opens a POST and carries data WordPress resolved, which is the whole reason it exists, and it is the only header in the section with a filled ground. article-opener is a drop cap and a standfirst: furniture for the article's first paragraph rather than for the page's title. Make it yoursVariations and the edits to make first ### What to change first - The date column's width. It is 26%. A long date format wants more. - core/post-terms. Shipped with term: category. Change it to post_tag for a tags header, or delete it and the collapse starts at the title. - The byline label. "Words by" is an ordinary paragraph beside core/post-author-name, so it takes any wording; the author's name is the dynamic half. - The title ceiling. clamp(2.25rem, 5.4vw, 4.25rem). Long post titles are the normal case here, so this is lower than a page header's; raise it only if your titles are short. - The finish. Ship the base where the post deserves an announcement, and header-paper where the page should stay quiet. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated. The effect is tracking, scale and the plate. - Your colours. The band asks for contrast and the plate for base, each ending on a colour WordPress itself guarantees, so neither can resolve to nothing. The hairline in the plate is currentColor. - Your spacing scale. Every vertical measure is a spacing preset, so the header is roomier in Twenty Twenty-Four than in Twenty Twenty-Five and that is inheritance working. Measured at 1400: 570px in Twenty Twenty-Four, 384px in Twenty Twenty-Five. - The category link's colour is NOT inherited, on purpose. core/post-terms always renders anchors, and an anchor carries a colour rule of its own that beats anything the group hands down. So the block states style.elements.link.color.text as well as its text colour, and the category is the same ink as the title in every theme. ### What it decides for itself - Full bleed with a 1240px measure, and a plate at 74% of it. - The plate is the only lit ground, so every link in the pattern sits on paper. That is deliberate: a theme paints its links from theme.json, and a category link on an ink ground can land ink on ink with nothing to warn you. - h1, with its own explicit colour, because a theme's heading element style beats a colour inherited from the wrapping group. - Bottom alignment. The columns row is verticalAlignment: bottom and both columns restate it, because a columns-level alignment alone does nothing on the front end. Technical notesBlock mechanics, responsive behaviour and constraints ### It shows YOUR post, and the preview is our sample content This is the first thing to understand about it. A static pattern's preview holds the same words the buyer pastes; this one holds whatever post it is rendered on. The preview on the product page is our preview site's own seeded content, so the category reads "Field Notes", the title reads "The weight of a line" and the byline reads "Dana Rivera". None of that is in the markup you paste. Paste it and it prints your post. It belongs in a template, not in a post. The four dynamic blocks read the post from their block context, which WordPress supplies inside a single post template (Appearance, Editor, Templates, Single Posts) or inside a query loop. Pasted into the body of one post it prints nothing at all, with no warning anywhere, which is exactly the silent failure this catalogue refuses; so it is said here and on the product page. ### Notes - Core blocks only: group, columns, column, paragraph, post-terms, post-title, post-author-name, post-date. No plugin, no script. - Every colour is a fallback chain ending on a guaranteed colour; the only rule in the pattern is currentColor. - Valid at WordPress 7.0. No core/query-total anywhere: it is a recent core block, and an older WordPress parses it as core/missing. Questions ## Post header: common questions Does Post header need a plugin? No. It is built only from core WordPress blocks (column, columns, group, paragraph, post-author-name, post-date, post-terms and post-title), so it pastes into the block editor with nothing to install. Will Post header 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. How many variations does Post header have? 2: Plate on ink and Ruled slip. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Post header free? Yes. It is one of 64 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 Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.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 Page header Access Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, paragraph, post-author-name, post-date, post-terms, post-title Presets color 5, spacing 3 WordPress 7.0+ Continue exploring ## Next in Page header Explore all 6 Page header patterns (https://patternpaste.com/patterns/page-header/) Shot in Twenty Twenty-Five Page header No plugin needed ### Page header rule The opening of an interior page, and nothing more: a tiny widely tracked breadcrumb, the page title at display size directly under it, one line of orientation held to a reading measure, and a currentColor hairline closing the whole thing. Page header Preview pattern (https://patternpaste.com/pattern/page-header-rule.html) Shot in Twenty Twenty-Five Page header No plugin needed ### Page header cover strip An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate of your theme's base beside a broad uninterrupted photograph. Page header Preview pattern (https://patternpaste.com/pattern/page-header-cover-strip.html) Shot in Twenty Twenty-Five Page header No plugin needed ### Facts beside the title An interior-page opening that splits in two: a small tracked kicker and the page title hold the left 46% on their own, and the right 54% carries four facts as a ruled ledger, label against value on each line, divided by currentColor hairlines and closed by one at the foot. Page header Preview pattern (https://patternpaste.com/pattern/page-header-facts.html)