Comments region: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/comments-region.html Core Patterns (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Catalogue access Standard # Comments region The comment thread as a ruled record: a long rule under the count, then every comment opened by a currentColor hairline with the name tracked small against a plain date, the comment set at reading size, and the reply link tracked back down to the name's size. Replies are indented by WordPress, so the hairlines step in with the depth of the thread. Dynamic core blocks, so it shows the comments on the post it is placed on; the preview here is sample data. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The reading measure. 44rem on the per-comment group. - The label. "The thread" is a paragraph. - The date format. core/comment-date takes a format attribute. - The rule weight. 1px currentColor on the top of each comment. - The finish. Ship the base for a stacked record, and thread-hang where you want to scan who said what. The signature moment ## The rules step with the thread Every comment is opened by a hairline that runs the full 1240 measure, and a reply's hairline starts where the reply starts. WordPress indents nested comments by wrapping them in an

inside their parent, so the moment each comment carries its own border-top the indentation stops being whitespace and becomes a visible step in the rules. Measured at 1400 in Twenty Twenty-Four: the top-level rules start at the band's left edge, the reply's starts 30px in. At 390 the same 30px is a bigger fraction of the measure and the step reads harder. Under each rule the text is held to a 44rem reading column at the LEFT, not centred, so the rule is long and the words are short. That gap between rule length and measure is the second half of the composition: the thread looks like a ledger somebody is still writing in rather than a boxed comment widget. The type does the rest. The name is 13px at 0.18em uppercase, the date is 13px plain beside it, the comment is 17px at 1.6, and the reply link comes back down to the name's size. Nothing is boxed and nothing is tinted. Make it yoursVariations and the edits to make first ### What to change first - The reading measure. 44rem on the per-comment group. Widen it and the rules stay where they are while the text runs longer. - The label. "The thread" is a paragraph. Delete it and the count carries the section on its own. - The date format. core/comment-date takes a format attribute. - The rule weight. 1px currentColor on the top of each comment. 2px turns the thread into a list of cards, which is the composition this one is avoiding. - The finish. Ship the base for a stacked record, and thread-hang where you want to scan who said what. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated. - Your colours. The band asks for base and the type for contrast, both ending on a colour WordPress guarantees. Every rule is currentColor. - The indentation. Core and your theme decide how far a reply steps in. This pattern decides that the step should be visible, not how big it is. - The reply link's colour, which is your theme's link colour, because it is the one thing in the row a reader is meant to click. ### What it decides for itself - Full bleed with a 1240px measure and a 44rem reading column held left. - The count is a heading and the label above it is not. "The thread" is a 13px tracked paragraph; core/comments-title sits under it at up to 34px with showPostTitle: false, so it reads "4 responses" rather than repeating the post's title, which the page has already printed once. - No pagination block. core/comments-pagination saves as null and must carry no wrapper element of its own; it is left out rather than shipped as a trap, and a thread long enough to need it can add the block itself. - No comment form. Add core/post-comments-form under this section if your template does not already have one; its fields are your theme's, and this pattern deliberately does not try to restyle them. Technical notesBlock mechanics, responsive behaviour and constraints ### It shows YOUR comments, and the preview is our sample content core/comments renders the thread on the post it is placed on. The preview on the product page is our preview site's seeded discussion: four approved comments, one of them a reply, on a post called "The weight of a line". Your page will carry your thread, and a post with no comments renders the region with its title and nothing under it. It belongs in a single post template, under the content. The comment blocks read the post from block context, so pasted into a post's own body they print nothing at all, with no warning anywhere. ### Why the date is not a link core/comment-date links to the comment's permalink by default. An anchor carries a colour rule of its own that beats an inherited colour, so a linked date takes the theme's link colour and lands beside a name that has ours. It ships isLink: false; the reply link is the one anchor in the row and it is supposed to look like one. ### Notes - Core blocks only: group, columns, column, paragraph, comments, comments-title, comment-template, comment-author-name, comment-date, comment-content, comment-reply-link. No plugin, no script. - Valid at WordPress 7.0, base and variation, 13 and 15 blocks. Questions ## Comments region: common questions Does Comments region need a plugin? No. It is built only from core WordPress blocks (comment-author-name, comment-content, comment-date, comment-reply-link, comment-template, comments, comments-title, group and paragraph), so it pastes into the block editor with nothing to install. Will Comments region 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 Comments region have? 2: Ruled thread and Hanging byline. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Comments region free? It is included with a subscription, with every Core Pattern and variation. 64 Core Patterns are free to copy without one. 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. 4.2KB of core-block markup, 9 blocks (comment-author-name, comment-content, comment-date, comment-reply-link, comment-template, comments, comments-title, group, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### 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 Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks comment-author-name, comment-content, comment-date, comment-reply-link, comment-template, comments, comments-title, group, paragraph Presets color 5, spacing 3 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 ### Chapter rail A chapter of a guide: a narrow rail on the left carries the chapter numeral at display size and a short contents list, and stays put while the prose on the right scrolls past it. Editorial Preview pattern (https://patternpaste.com/pattern/chapter-rail.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Content columns A long-form editorial section held to a strict reading measure, with a narrow sidenote rail hanging outside it: each note sits under its own hairline beside the paragraph it annotates, and drops beneath that paragraph on a phone. Editorial Preview pattern (https://patternpaste.com/pattern/content-columns.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Editorial cover contents A screen-height cover like a magazine's: a heavy veil of your theme's contrast colour over the photograph, a display headline hung in the lower left and a numbered contents list in a narrow column at the top right, each entry a number, a title and one line between hairline rules. Editorial Preview pattern (https://patternpaste.com/pattern/editorial-cover-contents.html)