Etch component
Comments
Native WordPress comments, styled for your Etch site. Light, dark or inherited colors, compact or comfortable spacing, your own wording for every label, and a sample discussion in the builder, so every setting shows before you save. WordPress keeps posting, moderation and replies.
Download .jsonSee the demo
Paste it on the Etch canvas with Ctrl+V or ⌘V, then click Save.
{
"type": "block",
"gutenbergBlock": {
"blockName": "etch/component",
"attrs": {
"ref": 237,
"attributes": {}
},
"innerBlocks": [],
"innerHTML": "\n\n",
"innerContent": [
"\n",
"\n"
]
},
"timestamp": "2026-10-13T19:11:53.484Z",
"styles": {
"bf9gumo": {
"type": "class",
"selector": ".ed-comments",
"collection": "default",
"css": "\n /* Private preset values; public tokens are resolved only at use sites. */\n --_ed-comments-white: var(--white, #fff);\n --_ed-comments-black: var(--black, #000);\n --_ed-comments-surface: var(--_ed-comments-white);\n --_ed-comments-ink: color-mix(in srgb, var(--_ed-comments-black) 86%, var(--_ed-comments-white));\n --_ed-comments-soft: color-mix(in srgb, var(--_ed-comments-black) 3%, var(--_ed-comments-white));\n --_ed-comments-divider: color-mix(in srgb, currentColor 14%, transparent);\n --_ed-comments-control: color-mix(in srgb, var(--_ed-comments-ink) 55%, var(--_ed-comments-surface));\n --_ed-comments-muted: currentColor;\n --_ed-comments-padding: var(--space-m, 1.5rem);\n --_ed-comments-gap: var(--space-s, 1rem);\n --_ed-comments-focus: #2563eb;\n --_ed-comments-link: currentColor;\n --_ed-comments-link-hover: currentColor;\n --_ed-comments-action-hover: currentColor;\n --_ed-comments-action-bg: color-mix(in srgb, currentColor 7%, transparent);\n --_ed-comments-motion: var(--ed-comments-transition, var(--transition, 180ms cubic-bezier(0.4, 0, 0.2, 1)));\n --_ed-comments-button-motion: var(--ed-comments-transition, var(--btn-transition-duration, var(--transition-duration, 180ms)) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)) var(--transition-delay, 0s));\n inline-size: 100%;\n box-sizing: border-box;\n max-inline-size: var(--ed-comments-width, 70ch);\n min-inline-size: 0;\n margin-inline: auto;\n padding: var(--ed-comments-padding, 0);\n border-radius: var(--ed-comments-radius, var(--radius, 0.75rem));\n background: var(--ed-comments-background, transparent);\n color: var(--ed-comments-color, inherit);\n font-family: var(--ed-comments-font-family, inherit);\n font-size: var(--ed-comments-text-size, var(--text-m, 1rem));\n line-height: var(--ed-comments-line-height, var(--text-line-height, 1.6));\n overflow-wrap: anywhere;\n color-scheme: inherit;\n container-type: inline-size;\n\n @supports (color: light-dark(#fff, #000)) {\n --_ed-comments-focus: light-dark(#2563eb, #93c5fd);\n --_ed-comments-surface: light-dark(var(--_ed-comments-white), color-mix(in srgb, var(--_ed-comments-black) 91%, var(--_ed-comments-white)));\n --_ed-comments-ink: light-dark(color-mix(in srgb, var(--_ed-comments-black) 86%, var(--_ed-comments-white)), color-mix(in srgb, var(--_ed-comments-white) 93%, var(--_ed-comments-black)));\n --_ed-comments-soft: light-dark(color-mix(in srgb, var(--_ed-comments-black) 3%, var(--_ed-comments-white)), color-mix(in srgb, var(--_ed-comments-white) 13%, var(--_ed-comments-black)));\n }\n &[data-ed-comments-theme=\"light\"], &[data-ed-comments-theme=\"dark\"] {\n --_ed-comments-muted: color-mix(in srgb, currentColor 72%, var(--_ed-comments-surface));\n --_ed-comments-action-hover: var(--_ed-comments-ink);\n /* Keep enlarged rem spacing from consuming a narrow container's text area. */\n padding: var(--ed-comments-padding, var(--_ed-comments-padding) min(var(--_ed-comments-padding), 8%));\n background: var(--ed-comments-background, var(--_ed-comments-surface));\n color: var(--ed-comments-color, var(--_ed-comments-ink));\n }\n &[data-ed-comments-theme=\"light\"] {\n color-scheme: light;\n --_ed-comments-surface: var(--_ed-comments-white);\n --_ed-comments-ink: color-mix(in srgb, var(--_ed-comments-black) 86%, var(--_ed-comments-white));\n --_ed-comments-soft: color-mix(in srgb, var(--_ed-comments-black) 3%, var(--_ed-comments-white));\n --_ed-comments-link: #3659ae;\n --_ed-comments-link-hover: #234186;\n }\n &[data-ed-comments-theme=\"dark\"] {\n color-scheme: dark;\n --_ed-comments-focus: #93c5fd;\n --_ed-comments-surface: color-mix(in srgb, var(--_ed-comments-black) 91%, var(--_ed-comments-white));\n --_ed-comments-ink: color-mix(in srgb, var(--_ed-comments-white) 93%, var(--_ed-comments-black));\n --_ed-comments-soft: color-mix(in srgb, var(--_ed-comments-white) 13%, var(--_ed-comments-black));\n --_ed-comments-link: #a9c2ff;\n --_ed-comments-link-hover: #d1dfff;\n }\n &[data-ed-comments-density=\"compact\"] {\n --_ed-comments-padding: var(--space-s, 1rem);\n --_ed-comments-gap: calc(var(--space-s, 1rem) * 0.75);\n }\n & :where(*, *::before, *::after) { box-sizing: border-box; }\n /* Properties with a public token use normal specificity. Automatic.css loads after Etch's styles, and its equally\n specific global rules, such as the :is(.wp-block-column) > * + * flow spacing, would otherwise disable the token. */\n & :is(.wp-block-comments-title, .ed-comments__empty-heading) {\n margin: 0 0 var(--ed-comments-comment-gap, calc(var(--_ed-comments-gap) * 0.5));\n color: inherit;\n font-family: inherit;\n font-size: var(--ed-comments-heading-size, var(--h4, 1.5rem));\n font-weight: var(--ed-comments-heading-weight, var(--heading-font-weight, 600));\n letter-spacing: -0.02em;\n line-height: 1.3;\n }\n & .ed-comments__intro:not(:empty) { margin-block-end: var(--ed-comments-comment-gap, var(--space-m, 1.5rem)); }\n & .ed-comments__notice { margin-block: var(--ed-comments-content-gap, var(--_ed-comments-gap)); color: var(--ed-comments-note-color, inherit); }\n /* Builder canvas only: the runtime's inert sample discussion beside Etch's core/comments placeholder. */\n & .ed-comments__preview { margin-block-start: var(--ed-comments-comment-gap, var(--space-m, 1.5rem)); }\n & .ed-comments__preview-note { margin-block: 0 var(--ed-comments-content-gap, var(--_ed-comments-gap)); font-size: var(--ed-comments-meta-size, var(--text-s, 0.875rem)); color: var(--ed-comments-note-color, var(--_ed-comments-muted)); }\n & .ed-comments__preview-reply .comment-reply-title { margin-block-end: 0; }\n\n /* Structural thread selectors must never reset lists in comment content. */\n & :where(.wp-block-comment-template, li.comment > ol) { list-style: none; margin: 0; padding: 0; }\n & :is(.wp-block-comment-template > li, li.comment > ol > li) {\n margin: 0;\n padding-block: var(--ed-comments-comment-padding, var(--_ed-comments-padding));\n border-block-start: 1px solid var(--ed-comments-border, var(--_ed-comments-divider));\n scroll-margin-block-start: var(--space-m, 1.5rem);\n }\n & :is(.wp-block-comment-template > li:first-child, li.comment > ol > li) { border-block-start: 0; }\n & li.comment > ol {\n margin-block-start: var(--ed-comments-reply-gap, calc(var(--_ed-comments-gap) * 0.75));\n margin-inline-start: min(0.25rem, 4px);\n padding: 0;\n padding-inline-start: var(--ed-comments-reply-indent, min(var(--space-s, 1rem), 6%));\n border-inline-start: var(--ed-comments-reply-border-width, 1px) solid var(--ed-comments-reply-border-color, var(--ed-comments-border, var(--_ed-comments-divider)));\n }\n & li.comment > ol > li.comment > ol { margin-inline-start: 0; padding-inline: 0; border-inline-start: 0; }\n & li.comment > ol > li:first-child { padding-block-start: 0.25rem; }\n & li.comment > ol > li:last-child { padding-block-end: 0; }\n\n /* Grid makes the avatar size independent of Core's inline flex-basis. The private column template keeps the avatar\n variants unspecific while the grid itself has normal specificity. */\n & :where(li.comment > .wp-block-columns) { --_ed-comments-columns: minmax(0, var(--ed-comments-avatar-size, 2.5rem)) minmax(0, 1fr); }\n & li.comment > .wp-block-columns {\n display: grid;\n grid-template-columns: var(--_ed-comments-columns);\n gap: var(--ed-comments-avatar-gap, var(--_ed-comments-avatar-gap, var(--_ed-comments-gap)));\n align-items: start;\n margin: 0;\n }\n & :where(li.comment > .wp-block-columns > .wp-block-column) { min-inline-size: 0; }\n & :where(li.comment > .wp-block-columns > .wp-block-column:first-child) { display: block; }\n & :where(li.comment > .wp-block-columns:not(:has(> .wp-block-column:first-child img))) { --_ed-comments-columns: minmax(0, 1fr); }\n & :where(li.comment > .wp-block-columns:not(:has(> .wp-block-column:first-child img)) > .wp-block-column:first-child) { display: none; }\n &[data-ed-comments-avatars=\"hidden\"] :where(li.comment > .wp-block-columns) { --_ed-comments-columns: minmax(0, 1fr); }\n &[data-ed-comments-avatars=\"hidden\"] :where(li.comment > .wp-block-columns > .wp-block-column:first-child) { display: none; }\n & :where(.wp-block-avatar) { inline-size: 100%; max-inline-size: 100%; margin: 0; }\n & :where(.wp-block-avatar img) { display: block; inline-size: 100%; block-size: auto; background: var(--_ed-comments-soft); }\n & .wp-block-avatar img { border-radius: var(--ed-comments-avatar-radius, 50%); }\n & .wp-block-comment-author-name {\n margin: 0;\n color: inherit;\n font-size: var(--ed-comments-author-size, 1em);\n font-weight: var(--ed-comments-author-weight, 600);\n line-height: 1.5;\n }\n & :is(.wp-block-comment-date, .wp-block-comment-edit-link) {\n font-size: var(--ed-comments-meta-size, var(--text-s, 0.875rem));\n font-weight: 400;\n color: var(--ed-comments-meta-color, var(--_ed-comments-muted));\n }\n & li.comment > .wp-block-columns > .wp-block-column > .wp-block-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ed-comments-meta-gap, 0.5em); }\n & .wp-block-comment-content { margin-block: var(--ed-comments-content-gap, calc(var(--_ed-comments-gap) * 0.75)) calc(var(--_ed-comments-gap) * 0.375); }\n & .wp-block-comment-content p { margin-block: 0 var(--ed-comments-content-gap, var(--_ed-comments-gap)); }\n & .wp-block-comment-content > :last-child, & .wp-block-comment-content blockquote > :last-child { margin-block-end: 0; }\n /* Core's descendant ol reset also reaches prose; keep its lists and RTL inset intact. */\n & .wp-block-comment-content :where(ul, ol) { margin-block: var(--ed-comments-content-gap, var(--_ed-comments-gap)); padding: 0; padding-inline-start: 1.5em; }\n & .wp-block-comment-content :where(ul) { list-style: disc; }\n & .wp-block-comment-content :where(ol) { list-style: decimal; }\n & :where(.wp-block-comment-content li) { margin-block: 0.25em; }\n /* Quotes and code keep the component palette in every theme: site styles must not put the theme's text on their own\n surface (ACSS gives blockquote a light background and no text color). */\n & .wp-block-comment-content blockquote {\n margin: 0 0 var(--ed-comments-content-gap, var(--_ed-comments-gap));\n padding: 0.5em 1em;\n border: 0;\n border-inline-start: 3px solid var(--ed-comments-quote-border, var(--ed-comments-border, color-mix(in srgb, currentColor 35%, transparent)));\n background: var(--ed-comments-quote-background, color-mix(in srgb, currentColor 6%, transparent));\n color: var(--ed-comments-quote-color, inherit);\n }\n & .wp-block-comment-content blockquote :where(p, cite, footer) { color: inherit; }\n & .wp-block-comment-content pre {\n margin: 0 0 var(--ed-comments-content-gap, var(--_ed-comments-gap));\n max-inline-size: 100%;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n padding: var(--ed-comments-content-gap, var(--_ed-comments-gap));\n border: 0;\n background: var(--ed-comments-code-background, color-mix(in srgb, currentColor 7%, transparent));\n color: var(--ed-comments-code-color, inherit);\n }\n & .wp-block-comment-content code {\n padding: 0.1em 0.3em;\n border-radius: 0.25em;\n background: var(--ed-comments-code-background, color-mix(in srgb, currentColor 7%, transparent));\n color: var(--ed-comments-code-color, inherit);\n font-size: 0.9em;\n }\n & .wp-block-comment-content pre code { padding: 0; background: none; color: inherit; }\n & :where(.wp-block-comment-content img, .wp-block-comment-content video) { max-inline-size: 100%; block-size: auto; }\n\n /* Links in the native discussion and the notices only; intro slot content keeps its own link and button styling.\n The anchor and its state are scoped normally so late global link rules cannot win. */\n & :where(.wp-block-comments, .ed-comments__notice) a {\n color: var(--ed-comments-link-color, var(--_ed-comments-link));\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 0.2em;\n overflow-wrap: anywhere;\n transition: color var(--_ed-comments-motion), background-color var(--_ed-comments-motion), border-color var(--_ed-comments-motion);\n }\n /* Touch browsers keep :hover on the last tapped element, so every hover style needs a hovering pointer. */\n @media (hover: hover) {\n & :where(.wp-block-comments, .ed-comments__notice) a:hover { color: var(--ed-comments-link-hover-color, var(--ed-comments-link-color, var(--_ed-comments-link-hover))); }\n }\n & :where(.wp-block-comment-author-name, .wp-block-comment-date) a { color: var(--ed-comments-link-color, inherit); text-decoration: none; }\n @media (hover: hover) {\n & :where(.wp-block-comment-author-name, .wp-block-comment-date) a:hover { color: var(--ed-comments-link-hover-color, var(--ed-comments-link-color, var(--_ed-comments-link-hover))); text-decoration: underline; }\n }\n /* WCAG 2.2 target size: Etch's reset makes the date link a block only as tall as the line, ACSS passes a pixel line\n height (about 23.8 px) down to the meta text, and the link sits directly below a linked author name. A pixel\n minimum keeps 24 px at any meta size or root font size; the text keeps the row's baseline. */\n & :where(.wp-block-comment-date) a { display: inline-flex; align-items: center; min-block-size: 24px; }\n & a:where(.comment-reply-link, .comment-reply-login, .comment-edit-link, #cancel-comment-reply-link), & :where(.wp-block-comment-edit-link) a {\n display: inline-flex;\n align-items: center;\n min-block-size: max(24px, 2rem);\n padding: 0.375rem 0.625rem;\n border-radius: var(--radius, 0.375rem);\n color: var(--ed-comments-action-color, var(--_ed-comments-muted));\n font-size: var(--ed-comments-meta-size, var(--text-s, 0.875rem));\n font-weight: 500;\n line-height: 1.5;\n text-decoration: none;\n }\n @media (hover: hover) {\n & a:where(.comment-reply-link, .comment-reply-login, .comment-edit-link, #cancel-comment-reply-link):hover, & :where(.wp-block-comment-edit-link) a:hover {\n color: var(--ed-comments-action-hover-color, var(--ed-comments-action-color, var(--_ed-comments-action-hover)));\n background: var(--ed-comments-action-hover-background, var(--_ed-comments-action-bg));\n text-decoration: none;\n }\n }\n /* The padded Reply or Log in to Reply action lines its text up with the comment text. */\n & .wp-block-comment-reply-link { margin-block: 0; margin-inline-start: -0.625rem; }\n & :where(.wp-block-comment-edit-link) a { padding-block: 0; min-block-size: max(24px, 1.75rem); }\n & :where(.wp-block-comments, .ed-comments__notice) :is(a, input, textarea, button, select):focus-visible { outline: var(--ed-comments-focus-width, 3px) solid var(--ed-comments-focus, var(--focus-color, var(--_ed-comments-focus))); outline-offset: var(--ed-comments-focus-offset, 3px); }\n\n & .wp-block-comments-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ed-comments-pagination-gap, 0.5em); margin-block: var(--ed-comments-comment-gap, var(--space-m, 1.5rem)); }\n & .wp-block-comments-pagination-numbers { display: flex; flex-wrap: wrap; gap: var(--ed-comments-pagination-gap, 0.5em); }\n & .wp-block-comments-pagination :is(a, .current) { display: inline-flex; min-block-size: 2.75em; min-inline-size: 2.75em; align-items: center; justify-content: center; padding: 0.25em 0.625em; border-radius: var(--ed-comments-pagination-radius, var(--radius, 0.375rem)); }\n & .wp-block-comments-pagination .current { background: var(--ed-comments-pagination-current-background, var(--_ed-comments-soft)); color: var(--ed-comments-pagination-current-color, var(--_ed-comments-ink)); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; }\n & .comment-respond {\n margin-block-start: var(--ed-comments-comment-gap, var(--space-m, 1.5rem));\n padding: var(--ed-comments-form-padding, var(--_ed-comments-padding));\n border: 1px solid var(--ed-comments-border, var(--_ed-comments-divider));\n background: var(--ed-comments-form-background, var(--_ed-comments-soft));\n border-radius: var(--ed-comments-form-radius, var(--radius, 0.75rem));\n color: var(--ed-comments-color, var(--_ed-comments-ink));\n }\n & .comment-reply-title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 0.5rem 1rem;\n margin: 0 0 var(--ed-comments-form-gap, var(--_ed-comments-gap));\n font-family: inherit;\n /* The next heading step, at least the text size and never larger than the discussion heading (ACSS --text-l\n exceeds --h4, and --h5 can be smaller than body text). */\n font-size: var(--ed-comments-form-heading-size, min(max(1em, var(--h5, 1.25rem)), var(--ed-comments-heading-size, var(--h4, 1.5rem))));\n font-weight: var(--ed-comments-heading-weight, var(--heading-font-weight, 600));\n line-height: 1.4;\n color: inherit;\n }\n & .comment-reply-title small { display: block; margin: 0; font-size: 1rem; font-weight: 400; }\n & .comment-form > p { margin-block: 0 var(--ed-comments-form-gap, var(--_ed-comments-gap)); }\n & .comment-form-url[hidden] { display: none; }\n & :is(.comment-notes, .logged-in-as, .must-log-in, .comment-form-cookies-consent, .comment-awaiting-moderation) { font-size: var(--ed-comments-meta-size, var(--text-s, 0.875rem)); color: var(--ed-comments-note-color, var(--_ed-comments-muted)); }\n & .comment-form > :is(.logged-in-as, .comment-notes, .must-log-in) { margin-block: 0 var(--ed-comments-form-gap, calc(var(--_ed-comments-gap) * 1.25)); line-height: 1.9; }\n & :where(.logged-in-as) a { display: inline; margin-inline-start: 0.25em; }\n & :where(.required-field-message) { display: block; margin-block-start: 0.375rem; }\n & .comment-form label { display: block; margin-block-end: 0.5rem; color: var(--ed-comments-label-color, inherit); font-size: 0.875em; font-weight: var(--ed-comments-label-weight, 500); }\n & .comment-form :is(input:not([type=\"submit\"], [type=\"checkbox\"], [type=\"hidden\"]), textarea) {\n display: block;\n inline-size: 100%;\n max-inline-size: 100%;\n min-inline-size: 0;\n padding: var(--ed-comments-field-padding, 0.65em 0.8em);\n border: 1px solid var(--ed-comments-control-border, var(--_ed-comments-control));\n border-radius: var(--ed-comments-field-radius, var(--radius, 0.5rem));\n background: var(--ed-comments-field-background, var(--_ed-comments-surface));\n color: var(--ed-comments-field-color, var(--_ed-comments-ink));\n font: inherit;\n box-shadow: none;\n transition: background-color var(--_ed-comments-motion), border-color var(--_ed-comments-motion);\n }\n & .comment-form input:not([type=\"submit\"], [type=\"checkbox\"], [type=\"hidden\"]) { min-block-size: var(--ed-comments-field-min-height, 2.75rem); }\n & .comment-form textarea { block-size: var(--ed-comments-textarea-min-height, 9rem); min-block-size: var(--ed-comments-textarea-min-height, 9rem); resize: vertical; }\n & .comment-form :is(input, textarea)::placeholder { color: var(--ed-comments-field-placeholder-color, color-mix(in srgb, currentColor 75%, var(--_ed-comments-surface))); opacity: 1; }\n & :where(.comment-form-cookies-consent) { display: flex; align-items: start; gap: 0.625em; }\n & .comment-form-cookies-consent label { display: inline; font-size: inherit; font-weight: 400; }\n & .comment-form input[type=\"checkbox\"] { flex: 0 0 auto; inline-size: 1.125em; block-size: 1.125em; margin-block-start: 0.2em; accent-color: var(--ed-comments-action-color, var(--_ed-comments-ink)); }\n & .comment-form > .form-submit { margin-block: 0.25rem 0; }\n & .comment-form input[type=\"submit\"] {\n display: inline-block;\n inline-size: auto;\n max-inline-size: 100%;\n min-block-size: var(--ed-comments-field-min-height, 2.75rem);\n min-inline-size: min(100%, var(--btn-min-width, 0px));\n padding: var(--ed-comments-button-padding, var(--btn-padding-block, 0.65em) var(--btn-padding-inline, 1.25em));\n border-width: var(--btn-border-width, 1px);\n border-style: var(--btn-border-style, solid);\n border-color: var(--btn-border-color, transparent);\n border-radius: var(--ed-comments-button-radius, var(--btn-radius, 0.5rem));\n background: var(--ed-comments-button-background, var(--btn-background, var(--_ed-comments-ink)));\n color: var(--ed-comments-button-color, var(--btn-text-color, var(--_ed-comments-surface)));\n font-family: var(--btn-font-family, inherit);\n font-size: var(--ed-comments-button-font-size, var(--btn-font-size, 1em));\n font-weight: var(--ed-comments-button-font-weight, var(--btn-font-weight, 500));\n font-style: var(--btn-font-style, normal);\n line-height: var(--btn-line-height, 1);\n letter-spacing: var(--btn-letter-spacing, normal);\n text-transform: var(--btn-text-transform, none);\n text-decoration: none;\n white-space: normal;\n cursor: pointer;\n transition: background-color var(--_ed-comments-button-motion), color var(--_ed-comments-button-motion), border-color var(--_ed-comments-button-motion);\n }\n @media (hover: hover) {\n & .comment-form input[type=\"submit\"]:hover {\n background: var(--ed-comments-button-hover-background, var(--btn-background-hover, color-mix(in srgb, var(--ed-comments-button-background, var(--btn-background, var(--_ed-comments-ink))) 82%, var(--ed-comments-button-color, var(--btn-text-color, var(--_ed-comments-surface))))));\n color: var(--ed-comments-button-hover-color, var(--btn-text-color-hover, var(--ed-comments-button-color, var(--btn-text-color, var(--_ed-comments-surface)))));\n border-color: var(--btn-border-color-hover, var(--btn-border-color, transparent));\n text-decoration: none;\n }\n }\n & .comment-form input[type=\"submit\"]:active { filter: brightness(0.94); }\n\n @container (max-width: 24rem) {\n /* Narrow containers keep a smaller avatar beside the text. It stops growing with enlarged text (2rem reached 64 px\n at 200 %), so nested replies keep room for words; explicit tokens still win. */\n & :where(li.comment > .wp-block-columns:has(> .wp-block-column:first-child img)) { --_ed-comments-columns: minmax(0, var(--ed-comments-avatar-size, min(2rem, 32px))) minmax(0, 1fr); --_ed-comments-avatar-gap: min(0.625rem, 10px); }\n /* Percentage caps follow the actual reply/form width; explicit tokens still win. */\n & .comment-respond { padding: var(--ed-comments-form-padding, min(var(--_ed-comments-padding), 1rem) min(var(--_ed-comments-padding), 1rem, 5%)); }\n & .comment-form :is(input:not([type=\"submit\"], [type=\"checkbox\"], [type=\"hidden\"]), textarea) { padding: var(--ed-comments-field-padding, 0.65em min(0.8em, 5%)); }\n & .comment-form input[type=\"submit\"] { padding: var(--ed-comments-button-padding, var(--btn-padding-block, 0.65em) min(var(--btn-padding-inline, 1.25em), 5%)); }\n }\n @media (pointer: coarse) {\n & a:where(.comment-reply-link, .comment-reply-login, .comment-edit-link, #cancel-comment-reply-link), & :where(.wp-block-comment-edit-link) a { min-block-size: 2.75rem; }\n }\n @media (prefers-reduced-motion: reduce) {\n & :where(.wp-block-comments, .ed-comments__notice) a, & .comment-form :is(input:not([type=\"submit\"], [type=\"checkbox\"], [type=\"hidden\"]), textarea), & .comment-form input[type=\"submit\"] { transition: none; }\n }\n @media (forced-colors: active) {\n & .comment-form :is(input:not([type=\"submit\"], [type=\"checkbox\"], [type=\"hidden\"]), textarea), & .wp-block-comments-pagination .current, & .comment-form input[type=\"submit\"] { border-color: ButtonText; }\n & :where(.wp-block-comments, .ed-comments__notice) :is(a, input, textarea, button, select):focus-visible { outline-color: Highlight; }\n }\n",
"readonly": false
},
"ry1db2g": {
"type": "class",
"selector": ".ed-comments__intro",
"collection": "default",
"css": "",
"readonly": false
},
"or5zt6h": {
"type": "class",
"selector": ".ed-comments__empty-heading",
"collection": "default",
"css": "",
"readonly": false
},
"n8hwi2n": {
"type": "class",
"selector": ".ed-comments__notice",
"collection": "default",
"css": "",
"readonly": false
}
},
"components": {
"237": {
"id": 237,
"legacyId": "",
"name": "ED Comments",
"key": "EdComments",
"blocks": [
{
"blockName": "etch/element",
"attrs": {
"metadata": {
"name": "Comments"
},
"script": {
"code": "LyohIEVEIENvbW1lbnRzIDEuMC4wLWJldGEuMiBwcm9ncmVzc2l2ZSB0ZXh0LCBXZWJzaXRlIGNvbnRyb2xzIGFuZCBidWlsZGVyIHByZXZpZXcKQ29weXJpZ2h0IDIwMjYgVG9tIENobWllbCwgaHR0cHM6Ly9ldGNoZGV2ZWxvcGVyLmNvbQpTUERYLUxpY2Vuc2UtSWRlbnRpZmllcjogRlNMLTEuMS1NSVQgKGh0dHBzOi8vZXRjaGRldmVsb3Blci5jb20vbGljZW5zZS8pICovCiJ1c2Ugc3RyaWN0IjsoKCk9Pnt2YXIgVz1bImNvbW1lbnRzVGl0bGUiLCJmb3JtVGl0bGUiLCJyZXBseVRpdGxlIiwiY29tbWVudExhYmVsIiwibmFtZUxhYmVsIiwiZW1haWxMYWJlbCIsIndlYnNpdGVMYWJlbCIsInN1Ym1pdExhYmVsIiwicmVwbHlMYWJlbCIsInJlcGx5QWNjZXNzaWJsZUxhYmVsIiwiY2FuY2VsUmVwbHlMYWJlbCIsImVtYWlsTm90ZSIsInJlcXVpcmVkTm90ZSIsImNvb2tpZXNMYWJlbCIsInBlbmRpbmdNZXNzYWdlIiwicHJldmlvdXNMYWJlbCIsIm5leHRMYWJlbCIsImVkaXRMYWJlbCJdLF89bz0+ImRhdGEtZWQtY29tbWVudHMtbGFiZWwtIitvLnJlcGxhY2UoL1tBLVpdL2csZD0+Ii0iK2QudG9Mb3dlckNhc2UoKSksdz17dGhlbWU6ImRhdGEtZWQtY29tbWVudHMtdGhlbWUiLGRlbnNpdHk6ImRhdGEtZWQtY29tbWVudHMtZGVuc2l0eSIsYXZhdGFyczoiZGF0YS1lZC1jb21tZW50cy1hdmF0YXJzIixjb21tZW50Q291bnQ6ImRhdGEtZWQtY29tbWVudHMtY29tbWVudC1jb3VudCIsY29tbWVudFN0YXR1czoiZGF0YS1lZC1jb21tZW50cy1jb21tZW50LXN0YXR1cyIsd2Vic2l0ZUZpZWxkOiJkYXRhLWVkLWNvbW1lbnRzLXdlYnNpdGUtZmllbGQifTt2YXIgTT0iZWQtY29tbWVudHNfX3ByZXZpZXciO3ZhciBKPShvLGQpPT5gPGRpdiBjbGFzcz0id3AtYmxvY2stYXZhdGFyIj48aW1nIGFsdD0iJHtvfSBBdmF0YXIiIHNyYz0iZGF0YTppbWFnZS9zdmcreG1sLCR7ZW5jb2RlVVJJQ29tcG9uZW50KGA8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQwIDQwIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiR7ZH0iLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjE1LjUiIHI9IjciIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNiAzOGMxLjYtNy42IDctMTEuNSAxNC0xMS41UzMyLjQgMzAuNCAzNCAzOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz5gKX0iIGNsYXNzPSJhdmF0YXIgYXZhdGFyLTQwIHBob3RvIHdwLWJsb2NrLWF2YXRhcl9faW1hZ2UiIGhlaWdodD0iNDAiIHdpZHRoPSI0MCI+PC9kaXY+YCxLPShvLGQpPT5gPGRpdiBjbGFzcz0id3AtYmxvY2stY29tbWVudC1yZXBseS1saW5rIj48YSByZWw9Im5vZm9sbG93IiBjbGFzcz0iY29tbWVudC1yZXBseS1saW5rIiBocmVmPSIjY29tbWVudC0ke299IiBkYXRhLWNvbW1lbnRpZD0iJHtvfSIgZGF0YS1wb3N0aWQ9IjAiIGRhdGEtYmVsb3dlbGVtZW50PSJjb21tZW50LSR7b30iIGRhdGEtcmVzcG9uZGVsZW1lbnQ9InJlc3BvbmQiIGRhdGEtcmVwbHl0bz0iUmVwbHkgdG8gJHtkfSIgYXJpYS1sYWJlbD0iUmVwbHkgdG8gJHtkfSI+UmVwbHk8L2E+PC9kaXY+YCxFPSh7aWQ6byxuYW1lOmQsY29sb3I6cCxkYXRlOnUsZGVwdGg6ZixjbGFzc2VzOm0sYm9keTpsLHJlcGx5TGluazpoPSEwLGNoaWxkcmVuOng9IiJ9KT0+YDxsaSBpZD0iY29tbWVudC0ke299IiBjbGFzcz0iY29tbWVudCAke219IGRlcHRoLSR7Zn0iPjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbHVtbnMgaXMtbm90LXN0YWNrZWQtb24tbW9iaWxlIGlzLWxheW91dC1mbGV4IHdwLWJsb2NrLWNvbHVtbnMtaXMtbGF5b3V0LWZsZXgiPjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbHVtbiBpcy1sYXlvdXQtZmxvdyB3cC1ibG9jay1jb2x1bW4taXMtbGF5b3V0LWZsb3ciIHN0eWxlPSJmbGV4LWJhc2lzOjQwcHgiPiR7SihkLHApfTwvZGl2PjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbHVtbiBpcy1sYXlvdXQtZmxvdyB3cC1ibG9jay1jb2x1bW4taXMtbGF5b3V0LWZsb3ciPjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbW1lbnQtYXV0aG9yLW5hbWUiPjxhIHJlbD0iZXh0ZXJuYWwgbm9mb2xsb3cgdWdjIiBocmVmPSIjY29tbWVudC0ke299IiB0YXJnZXQ9Il9zZWxmIj4ke2R9PC9hPjwvZGl2PjxkaXYgY2xhc3M9IndwLWJsb2NrLWdyb3VwIGlzLWxheW91dC1mbGV4IHdwLWJsb2NrLWdyb3VwLWlzLWxheW91dC1mbGV4IiBzdHlsZT0ibWFyZ2luLXRvcDowcHg7bWFyZ2luLWJvdHRvbTowcHgiPjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbW1lbnQtZGF0ZSI+PHRpbWUgZGF0ZXRpbWU9IiR7dVswXX0iPjxhIGhyZWY9IiNjb21tZW50LSR7b30iPiR7dVsxXX08L2E+PC90aW1lPjwvZGl2PjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbW1lbnQtZWRpdC1saW5rIj48YSBocmVmPSIjY29tbWVudC0ke299IiB0YXJnZXQ9Il9zZWxmIj5FZGl0PC9hPjwvZGl2PjwvZGl2PjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbW1lbnQtY29udGVudCI+JHtsfTwvZGl2PiR7aD9LKG8sZCk6IiJ9PC9kaXY+PC9kaXY+JHt4fTwvbGk+YCxEPSgpPT5gPHAgY2xhc3M9ImVkLWNvbW1lbnRzX19wcmV2aWV3LW5vdGUiPkJ1aWxkZXIgcHJldmlldyB3aXRoIHNhbXBsZSBjb21tZW50cy4gUHVibGlzaGVkIHBhZ2VzIHNob3cgdGhlIHBvc3RcdTIwMTlzIGRpc2N1c3Npb24uPC9wPjxkaXYgY2xhc3M9IndwLWJsb2NrLWNvbW1lbnRzIj48aDIgaWQ9ImNvbW1lbnRzIiBjbGFzcz0id3AtYmxvY2stY29tbWVudHMtdGl0bGUiPjggcmVzcG9uc2VzPC9oMj48b2wgY2xhc3M9IndwLWJsb2NrLWNvbW1lbnQtdGVtcGxhdGUiPiR7RSh7aWQ6MSxuYW1lOiJBIFdvcmRQcmVzcyBDb21tZW50ZXIiLGNvbG9yOiIjYTdiOGM5IixkYXRlOlsiMjAyNi0xMC0wNVQwOToxMjowMCswMDowMCIsIk9jdG9iZXIgNSwgMjAyNiJdLGRlcHRoOjEsY2xhc3NlczoiZXZlbiB0aHJlYWQtZXZlbiIsYm9keTonPHA+SGksIHRoaXMgaXMgYSBjb21tZW50Ljxicj5UbyBnZXQgc3RhcnRlZCB3aXRoIG1vZGVyYXRpbmcsIGVkaXRpbmcsIGFuZCBkZWxldGluZyBjb21tZW50cywgcGxlYXNlIHZpc2l0IHRoZSBDb21tZW50cyBzY3JlZW4gaW4gdGhlIGRhc2hib2FyZC48YnI+Q29tbWVudGVyIGF2YXRhcnMgY29tZSBmcm9tIDxhIGhyZWY9IiNjb21tZW50LTEiPkdyYXZhdGFyPC9hPi48L3A+JyxjaGlsZHJlbjpgPG9sPiR7RSh7aWQ6MixuYW1lOiJKYW5lIERvZSIsY29sb3I6IiNjOWIzYTciLGRhdGU6WyIyMDI2LTEwLTA2VDE0OjMwOjAwKzAwOjAwIiwiT2N0b2JlciA2LCAyMDI2Il0sZGVwdGg6MixjbGFzc2VzOiJieXVzZXIgYnlwb3N0YXV0aG9yIG9kZCBhbHQiLGJvZHk6IjxibG9ja3F1b3RlPjxwPlRvIGdldCBzdGFydGVkIHdpdGggbW9kZXJhdGluZywgZWRpdGluZywgYW5kIGRlbGV0aW5nIGNvbW1lbnRzLCBwbGVhc2UgdmlzaXQgdGhlIENvbW1lbnRzIHNjcmVlbi48L3A+PC9ibG9ja3F1b3RlPjxwPlRoYW5rcyEgUmVwbGllcyBzdGF5IGdyb3VwZWQgdW5kZXIgdGhlIGNvbW1lbnQgdGhleSBhbnN3ZXIuPC9wPiJ9KX08ZGl2IGNsYXNzPSJjb21tZW50LXJlc3BvbmQgZWQtY29tbWVudHNfX3ByZXZpZXctcmVwbHkiIGRhdGEtZWQtY29tbWVudHMtcmVwbHktdG89IjIiPjxoMyBjbGFzcz0iY29tbWVudC1yZXBseS10aXRsZSI+UmVwbHkgdG8gSmFuZSBEb2UgPHNtYWxsPjxhIHJlbD0ibm9mb2xsb3ciIGlkPSJjYW5jZWwtY29tbWVudC1yZXBseS1saW5rIiBocmVmPSIjcmVzcG9uZCI+Q2FuY2VsIHJlcGx5PC9hPjwvc21hbGw+PC9oMz48L2Rpdj48L29sPmB9KX0ke0Uoe2lkOjMsbmFtZToiSm9obiBTbWl0aCIsY29sb3I6IiNhOWM0YWQiLGRhdGU6WyIyMDI2LTEwLTA3VDA4OjA1OjAwKzAwOjAwIiwiT2N0b2JlciA3LCAyMDI2Il0sZGVwdGg6MSxjbGFzc2VzOiJldmVuIHRocmVhZC1vZGQgdGhyZWFkLWFsdCIscmVwbHlMaW5rOiExLGJvZHk6JzxwPjxlbSBjbGFzcz0iY29tbWVudC1hd2FpdGluZy1tb2RlcmF0aW9uIj5Zb3VyIGNvbW1lbnQgaXMgYXdhaXRpbmcgbW9kZXJhdGlvbi48L2VtPjwvcD48cD5Eb2VzIHRoaXMgYWxzbyB3b3JrIHdpdGggPGNvZGU+d3BfbGlzdF9jb21tZW50cygpPC9jb2RlPj88L3A+J30pfTwvb2w+PG5hdiBjbGFzcz0id3AtYmxvY2stY29tbWVudHMtcGFnaW5hdGlvbiBpcy1sYXlvdXQtZmxleCB3cC1ibG9jay1jb21tZW50cy1wYWdpbmF0aW9uLWlzLWxheW91dC1mbGV4IiBhcmlhLWxhYmVsPSJDb21tZW50cyBwYWdpbmF0aW9uIj48YSBocmVmPSIjY29tbWVudHMiIGNsYXNzPSJ3cC1ibG9jay1jb21tZW50cy1wYWdpbmF0aW9uLXByZXZpb3VzIj5PbGRlciBDb21tZW50czwvYT48ZGl2IGNsYXNzPSJ3cC1ibG9jay1jb21tZW50cy1wYWdpbmF0aW9uLW51bWJlcnMiPjxhIGNsYXNzPSJwYWdlLW51bWJlcnMiIGhyZWY9IiNjb21tZW50cyI+MTwvYT4gPHNwYW4gYXJpYS1jdXJyZW50PSJwYWdlIiBjbGFzcz0icGFnZS1udW1iZXJzIGN1cnJlbnQiPjI8L3NwYW4+IDxhIGNsYXNzPSJwYWdlLW51bWJlcnMiIGhyZWY9IiNjb21tZW50cyI+MzwvYT48L2Rpdj48YSBocmVmPSIjY29tbWVudHMiIGNsYXNzPSJ3cC1ibG9jay1jb21tZW50cy1wYWdpbmF0aW9uLW5leHQiPk5ld2VyIENvbW1lbnRzPC9hPjwvbmF2PjxkaXYgaWQ9InJlc3BvbmQiIGNsYXNzPSJjb21tZW50LXJlc3BvbmQgd3AtYmxvY2stcG9zdC1jb21tZW50cy1mb3JtIj48aDMgaWQ9InJlcGx5LXRpdGxlIiBjbGFzcz0iY29tbWVudC1yZXBseS10aXRsZSI+TGVhdmUgYSBSZXBseTwvaDM+PGZvcm0gaWQ9ImNvbW1lbnRmb3JtIiBjbGFzcz0iY29tbWVudC1mb3JtIiBub3ZhbGlkYXRlPjxwIGNsYXNzPSJjb21tZW50LW5vdGVzIj48c3BhbiBpZD0iZW1haWwtbm90ZXMiPllvdXIgZW1haWwgYWRkcmVzcyB3aWxsIG5vdCBiZSBwdWJsaXNoZWQuPC9zcGFuPiA8c3BhbiBjbGFzcz0icmVxdWlyZWQtZmllbGQtbWVzc2FnZSI+UmVxdWlyZWQgZmllbGRzIGFyZSBtYXJrZWQgPHNwYW4gY2xhc3M9InJlcXVpcmVkIj4qPC9zcGFuPjwvc3Bhbj48L3A+PHAgY2xhc3M9ImNvbW1lbnQtZm9ybS1jb21tZW50Ij48bGFiZWwgZm9yPSJjb21tZW50Ij5Db21tZW50IDxzcGFuIGNsYXNzPSJyZXF1aXJlZCI+Kjwvc3Bhbj48L2xhYmVsPiA8dGV4dGFyZWEgaWQ9ImNvbW1lbnQiIG5hbWU9ImNvbW1lbnQiIGNvbHM9IjQ1IiByb3dzPSI4IiBtYXhsZW5ndGg9IjY1NTI1IiByZXF1aXJlZD48L3RleHRhcmVhPjwvcD48cCBjbGFzcz0iY29tbWVudC1mb3JtLWF1dGhvciI+PGxhYmVsIGZvcj0iYXV0aG9yIj5OYW1lIDxzcGFuIGNsYXNzPSJyZXF1aXJlZCI+Kjwvc3Bhbj48L2xhYmVsPiA8aW5wdXQgaWQ9ImF1dGhvciIgbmFtZT0iYXV0aG9yIiB0eXBlPSJ0ZXh0IiB2YWx1ZT0iIiBzaXplPSIzMCIgbWF4bGVuZ3RoPSIyNDUiIGF1dG9jb21wbGV0ZT0ibmFtZSIgcmVxdWlyZWQ+PC9wPjxwIGNsYXNzPSJjb21tZW50LWZvcm0tZW1haWwiPjxsYWJlbCBmb3I9ImVtYWlsIj5FbWFpbCA8c3BhbiBjbGFzcz0icmVxdWlyZWQiPio8L3NwYW4+PC9sYWJlbD4gPGlucHV0IGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIHR5cGU9ImVtYWlsIiB2YWx1ZT0iIiBzaXplPSIzMCIgbWF4bGVuZ3RoPSIxMDAiIGFyaWEtZGVzY3JpYmVkYnk9ImVtYWlsLW5vdGVzIiBhdXRvY29tcGxldGU9ImVtYWlsIiByZXF1aXJlZD48L3A+PHAgY2xhc3M9ImNvbW1lbnQtZm9ybS11cmwiPjxsYWJlbCBmb3I9InVybCI+V2Vic2l0ZTwvbGFiZWw+IDxpbnB1dCBpZD0idXJsIiBuYW1lPSJ1cmwiIHR5cGU9InVybCIgdmFsdWU9IiIgc2l6ZT0iMzAiIG1heGxlbmd0aD0iMjAwIiBhdXRvY29tcGxldGU9InVybCI+PC9wPjxwIGNsYXNzPSJjb21tZW50LWZvcm0tY29va2llcy1jb25zZW50Ij48aW5wdXQgaWQ9IndwLWNvbW1lbnQtY29va2llcy1jb25zZW50IiBuYW1lPSJ3cC1jb21tZW50LWNvb2tpZXMtY29uc2VudCIgdHlwZT0iY2hlY2tib3giIHZhbHVlPSJ5ZXMiPiA8bGFiZWwgZm9yPSJ3cC1jb21tZW50LWNvb2tpZXMtY29uc2VudCI+U2F2ZSBteSBuYW1lLCBlbWFpbCwgYW5kIHdlYnNpdGUgaW4gdGhpcyBicm93c2VyIGZvciB0aGUgbmV4dCB0aW1lIEkgY29tbWVudC48L2xhYmVsPjwvcD48cCBjbGFzcz0iZm9ybS1zdWJtaXQgd3AtYmxvY2stYnV0dG9uIj48aW5wdXQgbmFtZT0ic3VibWl0IiB0eXBlPSJzdWJtaXQiIGlkPSJzdWJtaXQiIGNsYXNzPSJ3cC1ibG9jay1idXR0b25fX2xpbmsgd3AtZWxlbWVudC1idXR0b24iIHZhbHVlPSJQb3N0IENvbW1lbnQiPiA8aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJjb21tZW50X3BhcmVudCIgaWQ9ImNvbW1lbnRfcGFyZW50IiB2YWx1ZT0iMCI+PC9wPjwvZm9ybT48L2Rpdj48L2Rpdj5gO3ZhciBBPSIuZWQtY29tbWVudHMiLEw9U3ltYm9sLmZvcigiZWQuY29tbWVudHMudjEiKSxqPVsuLi5PYmplY3QudmFsdWVzKHcpLC4uLlcubWFwKF8pXSxIPVt3LnRoZW1lLHcuZGVuc2l0eSx3LmF2YXRhcnMsdy53ZWJzaXRlRmllbGRdLHo9bmV3IFdlYWtTZXQ7ZnVuY3Rpb24gVihvKXt0cnl7aWYod2luZG93LmV0Y2h8fHdpbmRvdy5wYXJlbnQhPT13aW5kb3cmJndpbmRvdy5wYXJlbnQuZXRjaClyZXR1cm4hMH1jYXRjaHt9cmV0dXJuIG8uaGFzQXR0cmlidXRlKCJkYXRhLWV0Y2gtaWQiKX1mdW5jdGlvbiBHKG8sZCl7bGV0IHA9bmV3IFNldCx1PW5ldyBTZXQsZj1uZXcgV2Vha01hcCxtPVYobyksbD1udWxsLGg9ITEseD0hMSwkPWU9PmUuY2xvc2VzdChBKT09PW8mJiFlLmNsb3Nlc3QoIi5lZC1jb21tZW50c19faW50cm8iKSx5PShlLHM9ITEpPT5bLi4uby5xdWVyeVNlbGVjdG9yQWxsKGUpXS5maWx0ZXIoYT0+JChhKSYmKHN8fCFhLmNsb3Nlc3QoIi53cC1ibG9jay1jb21tZW50LWNvbnRlbnQiKSkpLHE9ZT0+eShlKVswXSxiPWU9PihvLmdldEF0dHJpYnV0ZShfKGUpKXx8IiIpLnRyaW0oKSxDPWU9PiEhbCYmbC5jb250YWlucyhlKTtmdW5jdGlvbiB2KGUscyxhKXtsZXQgbj1kLmdldChlKTtyZXR1cm4gbnx8ZC5zZXQoZSxuPW5ldyBNYXApLG4uaGFzKHMpfHxuLnNldChzLGEoKSksbi5nZXQocyl9ZnVuY3Rpb24gayhlLHMsYT0iIil7aWYoIWUpcmV0dXJuO2xldCBuPVsuLi5lLmNoaWxkTm9kZXNdLmZpbHRlcih0PT50Lm5vZGVUeXBlPT09Myk7aWYoIW4ubGVuZ3RoKXJldHVybjtsZXQgYz12KGUsInRleHQiLCgpPT5uLm1hcCh0PT50LmRhdGEpKTtuLmZvckVhY2goKHQscik9PntsZXQgaT1zP3I/IiI6cythOmNbcl0/P3QuZGF0YTt0LmRhdGEhPT1pJiYodC5kYXRhPWkpfSl9ZnVuY3Rpb24gTihlLHMsYSl7bGV0IG49dihlLHMsKCk9PmUuZ2V0QXR0cmlidXRlKHMpKSxjPWF8fG47Yz09PW51bGw/ZS5oYXNBdHRyaWJ1dGUocykmJmUucmVtb3ZlQXR0cmlidXRlKHMpOmUuZ2V0QXR0cmlidXRlKHMpIT09YyYmZS5zZXRBdHRyaWJ1dGUocyxjKX1mdW5jdGlvbiBGKGUpe3JldHVybiBlLmNsb3Nlc3QoImxpLmNvbW1lbnQiKT8ucXVlcnlTZWxlY3RvcigiLndwLWJsb2NrLWNvbW1lbnQtYXV0aG9yLW5hbWUiKT8udGV4dENvbnRlbnQudHJpbSgpfHwiIn1mdW5jdGlvbiBJKCl7cmV0dXJuWy4uLm8ucXVlcnlTZWxlY3RvckFsbCgiLmV0Y2gtcGFzc3Rocm91Z2gtYmxvY2siKV0uZmluZChlPT4kKGUpJiYvKF58XHMpY29yZVwvY29tbWVudHMoXHN8JCkvaS50ZXN0KGUudGV4dENvbnRlbnQudHJpbSgpKSl9ZnVuY3Rpb24gUigpe2ZvcihsZXQgZSBvZiBwKUMoZSkmJnAuZGVsZXRlKGUpO2wucmVtb3ZlKCksbD1udWxsfWZ1bmN0aW9uIFUoKXtmb3IobGV0IGEgb2Ygby5xdWVyeVNlbGVjdG9yQWxsKCIuIitNKSlhIT09bCYmYS5jbG9zZXN0KEEpPT09byYmYS5yZW1vdmUoKTtsZXQgZT1tJiZ6LmhhcyhvKSYmSSgpLHM9Wy4uLm8ucXVlcnlTZWxlY3RvckFsbCgiLndwLWJsb2NrLWNvbW1lbnRzIildLnNvbWUoYT0+JChhKSYmIUMoYSkpO2lmKCFlfHxzKXtsJiZSKCk7cmV0dXJufWx8fChsPW8ub3duZXJEb2N1bWVudC5jcmVhdGVFbGVtZW50KCJkaXYiKSxsLmNsYXNzTmFtZT1NLGwuc2V0QXR0cmlidXRlKCJpbmVydCIsIiIpLGwuaW5uZXJIVE1MPUQoKSxsLmFkZEV2ZW50TGlzdGVuZXIoInN1Ym1pdCIsYT0+YS5wcmV2ZW50RGVmYXVsdCgpKSxsLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIixhPT5hLnByZXZlbnREZWZhdWx0KCkpKSxlLm5leHRTaWJsaW5nIT09bCYmZS5hZnRlcihsKX1mdW5jdGlvbiBTKCl7aWYoaD0hMSx4KXJldHVybjtILnNvbWUodD0+by5nZXRBdHRyaWJ1dGUodCkpJiZ6LmFkZChvKSxtJiZVKCk7bGV0IGU9by5nZXRBdHRyaWJ1dGUody5jb21tZW50Q291bnQpfHwiIjt5KCIud3AtYmxvY2stY29tbWVudHMtdGl0bGUiKS5mb3JFYWNoKHQ9PmsodCxiKCJjb21tZW50c1RpdGxlIikucmVwbGFjZUFsbCgiJWNvdW50JSIsKCk9PkModCk/IjgiOmUpKSk7Zm9yKGxldFt0LHJdb2ZbWyJjb21tZW50TGFiZWwiLCdsYWJlbFtmb3I9ImNvbW1lbnQiXSddLFsibmFtZUxhYmVsIiwnbGFiZWxbZm9yPSJhdXRob3IiXSddLFsiZW1haWxMYWJlbCIsJ2xhYmVsW2Zvcj0iZW1haWwiXSddLFsid2Vic2l0ZUxhYmVsIiwnbGFiZWxbZm9yPSJ1cmwiXSddLFsiZW1haWxOb3RlIiwiI2VtYWlsLW5vdGVzIl0sWyJjb29raWVzTGFiZWwiLCdsYWJlbFtmb3I9IndwLWNvbW1lbnQtY29va2llcy1jb25zZW50Il0nXSxbInBlbmRpbmdNZXNzYWdlIiwiLmNvbW1lbnQtYXdhaXRpbmctbW9kZXJhdGlvbiJdLFsicHJldmlvdXNMYWJlbCIsIi53cC1ibG9jay1jb21tZW50cy1wYWdpbmF0aW9uLXByZXZpb3VzIl0sWyJuZXh0TGFiZWwiLCIud3AtYmxvY2stY29tbWVudHMtcGFnaW5hdGlvbi1uZXh0Il0sWyJlZGl0TGFiZWwiLCIuY29tbWVudC1lZGl0LWxpbmssIC53cC1ibG9jay1jb21tZW50LWVkaXQtbGluayBhIl0sWyJjYW5jZWxSZXBseUxhYmVsIiwiI2NhbmNlbC1jb21tZW50LXJlcGx5LWxpbmsiXV0peShyLHQ9PT0icGVuZGluZ01lc3NhZ2UiKS5mb3JFYWNoKGk9PmsoaSxiKHQpLGkucXVlcnlTZWxlY3RvcigiLnJlcXVpcmVkIik/IiAiOiIiKSk7aWYoeSgnLmNvbW1lbnQtZm9ybSBpbnB1dFt0eXBlPSJzdWJtaXQiXScpLmZvckVhY2godD0+e2xldCByPXYodCwidmFsdWUiLCgpPT50LnZhbHVlKSxpPWIoInN1Ym1pdExhYmVsIil8fHI7dC52YWx1ZSE9PWkmJih0LnZhbHVlPWkpfSkseSgiLnJlcXVpcmVkLWZpZWxkLW1lc3NhZ2UiKS5mb3JFYWNoKHQ9PntsZXQgcj10LnF1ZXJ5U2VsZWN0b3IoIi5yZXF1aXJlZCIpO2lmKCFyKXJldHVybjtsZXQgaT12KHQsInJlcXVpcmVkTm9kZXMiLCgpPT5bLi4udC5jaGlsZE5vZGVzXSksZz1iKCJyZXF1aXJlZE5vdGUiKSxQPXYodCwicmVxdWlyZWRBcHBsaWVkIiwoKT0+KHt2YWx1ZTpudWxsfSkpO2lmKFAudmFsdWU9PT1nKXJldHVybjtpZihQLnZhbHVlPWcsIWcpe3QucmVwbGFjZUNoaWxkcmVuKC4uLmkpO3JldHVybn1sZXQgVD1nLnNwbGl0KCIlcmVxdWlyZWQlIik7dC5yZXBsYWNlQ2hpbGRyZW4oZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoVFswXSsoVC5sZW5ndGg9PT0xPyIgIjoiIikpLHIsZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoVC5zbGljZSgxKS5qb2luKHIudGV4dENvbnRlbnQpKSl9KSx5KCIuY29tbWVudC1yZXBseS1saW5rIikuZm9yRWFjaCh0PT57bGV0IHI9Rih0KTtrKHQsYigicmVwbHlMYWJlbCIpKSxOKHQsImRhdGEtcmVwbHl0byIsYigicmVwbHlUaXRsZSIpLnJlcGxhY2VBbGwoIiVuYW1lJSIsKCk9PnIpKTtsZXQgaT1iKCJyZXBseUFjY2Vzc2libGVMYWJlbCIpLnJlcGxhY2VBbGwoIiVuYW1lJSIsKCk9PnIpOyFpJiZiKCJyZXBseUxhYmVsIikmJihpPWAke2IoInJlcGx5TGFiZWwiKX0gJHtyfWAudHJpbSgpKTtsZXQgZz10LnRleHRDb250ZW50LnRyaW0oKTtpJiYhaS50b0xvY2FsZUxvd2VyQ2FzZSgpLmluY2x1ZGVzKGcudG9Mb2NhbGVMb3dlckNhc2UoKSkmJihpPWAke2d9IFx1MjAxNCAke2l9YCksTih0LCJhcmlhLWxhYmVsIixpKX0pLGwpZm9yKGxldCB0IG9mIGwucXVlcnlTZWxlY3RvckFsbCgiLmVkLWNvbW1lbnRzX19wcmV2aWV3LXJlcGx5Iikpe2xldCByPWwucXVlcnlTZWxlY3RvcihgLmNvbW1lbnQtcmVwbHktbGlua1tkYXRhLWNvbW1lbnRpZD0iJHt0LmdldEF0dHJpYnV0ZSgiZGF0YS1lZC1jb21tZW50cy1yZXBseS10byIpfSJdYCk7ayh0LnF1ZXJ5U2VsZWN0b3IoIi5jb21tZW50LXJlcGx5LXRpdGxlIikscj8uZ2V0QXR0cmlidXRlKCJkYXRhLXJlcGx5dG8iKXx8IiIpfWxldCBzPXEoIiNyZXBseS10aXRsZSIpLGE9cSgnaW5wdXRbbmFtZT0iY29tbWVudF9wYXJlbnQiXScpPy52YWx1ZSxuPXM/LnF1ZXJ5U2VsZWN0b3IoImE6bm90KCNjYW5jZWwtY29tbWVudC1yZXBseS1saW5rKSIpO2lmKG4mJighYXx8YT09PSIwIikmJmIoImZvcm1UaXRsZSIpPyh2KG4sImhpZGRlbiIsKCk9Pm4uaGlkZGVuKSxuLmhpZGRlbj0hMCx1LmFkZChuKSk6biYmdS5oYXMobikmJihuLmhpZGRlbj12KG4sImhpZGRlbiIsKCk9PiExKSx1LmRlbGV0ZShuKSksIWF8fGE9PT0iMCIpayhzLGIoImZvcm1UaXRsZSIpKTtlbHNlIGlmKCFufHxuLnN0eWxlLmRpc3BsYXk9PT0ibm9uZSIpe2xldCB0PXkoIi5jb21tZW50LXJlcGx5LWxpbmsiKS5maW5kKHI9PnIuZ2V0QXR0cmlidXRlKCJkYXRhLWNvbW1lbnRpZCIpPT09YSk7dCYmayhzLHQuZ2V0QXR0cmlidXRlKCJkYXRhLXJlcGx5dG8iKXx8IiIpfWxldCBjPXEoJy5jb21tZW50LWZvcm0gLmNvbW1lbnQtZm9ybS11cmwgaW5wdXQjdXJsW25hbWU9InVybCJdOmlzKFt0eXBlPSJ1cmwiXSwgW3R5cGU9InRleHQiXSknKTtpZihjKXtsZXQgdD1jLmNsb3Nlc3QoIi5jb21tZW50LWZvcm0tdXJsIik7aWYoby5nZXRBdHRyaWJ1dGUody53ZWJzaXRlRmllbGQpPT09ImhpZGRlbiImJiFjLnJlcXVpcmVkKXAuaGFzKGMpfHxmLnNldChjLHtkaXNhYmxlZDpjLmRpc2FibGVkLGhpZGRlbjp0LmhpZGRlbn0pLHQuY29udGFpbnMoZG9jdW1lbnQuYWN0aXZlRWxlbWVudCkmJnEoIiNjb21tZW50Iik/LmZvY3VzKCksYy5kaXNhYmxlZHx8KGMuZGlzYWJsZWQ9ITApLHQuaGlkZGVufHwodC5oaWRkZW49ITApLHAuYWRkKGMpO2Vsc2UgaWYocC5oYXMoYykpe2xldCBpPWYuZ2V0KGMpO2MuZGlzYWJsZWQ9aS5kaXNhYmxlZCx0LmhpZGRlbj1pLmhpZGRlbixwLmRlbGV0ZShjKX19fWZ1bmN0aW9uIEIoKXshaCYmIXgmJihoPSEwLHF1ZXVlTWljcm90YXNrKFMpKX1sZXQgTz1uZXcgTXV0YXRpb25PYnNlcnZlcihCKTtyZXR1cm4gTy5vYnNlcnZlKG8se3N1YnRyZWU6ITAsY2hpbGRMaXN0OiEwLGF0dHJpYnV0ZXM6ITAsYXR0cmlidXRlRmlsdGVyOlsuLi5qLCJyZXF1aXJlZCJdfSksUygpLHthcHBseTpTLGRpc3Bvc2UoKXt4PSEwLE8uZGlzY29ubmVjdCgpLGwmJlIoKTtmb3IobGV0IGUgb2YgcCl7ZS5kaXNhYmxlZD1mLmdldChlKT8uZGlzYWJsZWQ/PyExO2xldCBzPWUuY2xvc2VzdCgiLmNvbW1lbnQtZm9ybS11cmwiKTtzJiYocy5oaWRkZW49Zi5nZXQoZSk/LmhpZGRlbj8/ITEpfXAuY2xlYXIoKTtmb3IobGV0IGUgb2YgdSllLmhpZGRlbj12KGUsImhpZGRlbiIsKCk9PiExKTt1LmNsZWFyKCl9fX1mdW5jdGlvbiBaKCl7aWYoZ2xvYmFsVGhpc1tMXSlyZXR1cm4gZ2xvYmFsVGhpc1tMXS5zY2FuKCksZ2xvYmFsVGhpc1tMXTtsZXQgbz1uZXcgTWFwLGQ9bmV3IFdlYWtNYXAscD0oKT0+e2ZvcihsZXRbbSxsXW9mIG8pbS5pc0Nvbm5lY3RlZHx8KGwuZGlzcG9zZSgpLG8uZGVsZXRlKG0pKTtmb3IobGV0IG0gb2YgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbChBKSlvLmhhcyhtKXx8KGQuaGFzKG0pfHxkLnNldChtLG5ldyBXZWFrTWFwKSxvLnNldChtLEcobSxkLmdldChtKSkpKX0sdT1uZXcgTXV0YXRpb25PYnNlcnZlcihtPT57bS5zb21lKGw9PlsuLi5sLmFkZGVkTm9kZXMsLi4ubC5yZW1vdmVkTm9kZXNdLnNvbWUoaD0+aC5ub2RlVHlwZT09PTEmJihoLm1hdGNoZXMoQSl8fGgucXVlcnlTZWxlY3RvcihBKSkpKSYmcCgpfSksZj17c2NhbjpwLGRpc3Bvc2UoKXt1LmRpc2Nvbm5lY3QoKTtmb3IobGV0IG0gb2Ygby52YWx1ZXMoKSltLmRpc3Bvc2UoKTtvLmNsZWFyKCksZGVsZXRlIGdsb2JhbFRoaXNbTF19fTtyZXR1cm4gZ2xvYmFsVGhpc1tMXT1mLHUub2JzZXJ2ZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQse2NoaWxkTGlzdDohMCxzdWJ0cmVlOiEwfSkscCgpLGZ9dHlwZW9mIGRvY3VtZW50PCJ1IiYmWigpO30pKCk7Cg==",
"id": "4nts6cd"
},
"tag": "div",
"attributes": {
"class": "ed-comments",
"data-ed-comments-theme": "{props.theme}",
"data-ed-comments-density": "{props.density}",
"data-ed-comments-avatars": "{props.avatars}",
"data-ed-comments-comment-count": "{this.comment_count}",
"data-ed-comments-comment-status": "{this.comment_status}",
"data-ed-comments-website-field": "{props.websiteField}",
"data-ed-comments-label-comments-title": "{props.labels.commentsTitle}",
"data-ed-comments-label-form-title": "{props.labels.formTitle}",
"data-ed-comments-label-reply-title": "{props.labels.replyTitle}",
"data-ed-comments-label-comment-label": "{props.labels.commentLabel}",
"data-ed-comments-label-name-label": "{props.labels.nameLabel}",
"data-ed-comments-label-email-label": "{props.labels.emailLabel}",
"data-ed-comments-label-website-label": "{props.labels.websiteLabel}",
"data-ed-comments-label-submit-label": "{props.labels.submitLabel}",
"data-ed-comments-label-reply-label": "{props.labels.replyLabel}",
"data-ed-comments-label-reply-accessible-label": "{props.labels.replyAccessibleLabel}",
"data-ed-comments-label-cancel-reply-label": "{props.labels.cancelReplyLabel}",
"data-ed-comments-label-email-note": "{props.labels.emailNote}",
"data-ed-comments-label-required-note": "{props.labels.requiredNote}",
"data-ed-comments-label-cookies-label": "{props.labels.cookiesLabel}",
"data-ed-comments-label-pending-message": "{props.labels.pendingMessage}",
"data-ed-comments-label-previous-label": "{props.labels.previousLabel}",
"data-ed-comments-label-next-label": "{props.labels.nextLabel}",
"data-ed-comments-label-edit-label": "{props.labels.editLabel}"
},
"styles": [
"bf9gumo"
]
},
"innerBlocks": [
{
"blockName": "etch/element",
"attrs": {
"metadata": {
"name": "Intro"
},
"tag": "div",
"attributes": {
"class": "ed-comments__intro"
},
"styles": [
"ry1db2g"
]
},
"innerBlocks": [
{
"blockName": "etch/slot-placeholder",
"attrs": {
"name": "intro"
},
"innerBlocks": [],
"innerHTML": "\n\n",
"innerContent": [
"\n",
"\n"
]
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
]
},
{
"blockName": "etch/condition",
"attrs": {
"metadata": {
"name": "Discussion states"
},
"condition": {
"leftHand": {
"leftHand": {
"leftHand": {
"leftHand": "this.comment_count",
"operator": "===",
"rightHand": 0
},
"operator": "||",
"rightHand": {
"leftHand": "this.comment_count",
"operator": "===",
"rightHand": "\"0\""
}
},
"operator": "isTruthy",
"rightHand": null
},
"operator": "&&",
"rightHand": {
"leftHand": {
"leftHand": {
"leftHand": "this.comment_status",
"operator": "===",
"rightHand": "\"open\""
},
"operator": "||",
"rightHand": {
"leftHand": "this.comment_status",
"operator": "===",
"rightHand": "\"closed\""
}
},
"operator": "isTruthy",
"rightHand": null
}
},
"conditionString": "(this.comment_count === 0 || this.comment_count === \"0\") && (this.comment_status === \"open\" || this.comment_status === \"closed\")"
},
"innerBlocks": [
{
"blockName": "etch/element",
"attrs": {
"metadata": {
"name": "Empty Heading"
},
"tag": "h2",
"attributes": {
"class": "ed-comments__empty-heading"
},
"styles": [
"or5zt6h"
]
},
"innerBlocks": [
{
"blockName": "etch/text",
"attrs": {
"metadata": {
"name": "Text"
},
"content": "{props.emptyHeading}"
},
"innerBlocks": [],
"innerHTML": "",
"innerContent": []
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
]
},
{
"blockName": "etch/condition",
"attrs": {
"condition": {
"leftHand": {
"leftHand": "props.emptyMessage",
"operator": "isTruthy",
"rightHand": null
},
"operator": "&&",
"rightHand": {
"leftHand": "props.emptyMessageVisibility",
"operator": "!==",
"rightHand": "\"hidden\""
}
},
"conditionString": "props.emptyMessage && props.emptyMessageVisibility !== \"hidden\""
},
"innerBlocks": [
{
"blockName": "etch/element",
"attrs": {
"metadata": {
"name": "Notice"
},
"tag": "p",
"attributes": {
"class": "ed-comments__notice"
},
"styles": [
"n8hwi2n"
]
},
"innerBlocks": [
{
"blockName": "etch/text",
"attrs": {
"metadata": {
"name": "Text"
},
"content": "{props.emptyMessage}"
},
"innerBlocks": [],
"innerHTML": "",
"innerContent": []
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
]
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
]
}
],
"innerHTML": "\n\n\n\n",
"innerContent": [
"\n",
null,
"\n\n",
null,
"\n"
]
},
{
"blockName": "core/comments",
"innerBlocks": [
{
"blockName": "core/comments-title",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {
"showPostTitle": false
}
},
{
"blockName": "core/comment-template",
"innerBlocks": [
{
"blockName": "core/columns",
"innerBlocks": [
{
"blockName": "core/column",
"innerBlocks": [
{
"blockName": "core/avatar",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {
"size": 40
}
}
],
"innerHTML": "\n<div class=\"wp-block-column\" style=\"flex-basis:40px\"></div>\n",
"innerContent": [
"\n<div class=\"wp-block-column\" style=\"flex-basis:40px\">",
null,
"</div>\n"
],
"attrs": {
"width": "40px"
}
},
{
"blockName": "core/column",
"innerBlocks": [
{
"blockName": "core/comment-author-name",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
},
{
"blockName": "core/group",
"innerBlocks": [
{
"blockName": "core/comment-date",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
},
{
"blockName": "core/comment-edit-link",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
}
],
"innerHTML": "\n<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">",
null,
"\n\n",
null,
"</div>\n"
],
"attrs": {
"style": {
"spacing": {
"margin": {
"top": "0px",
"bottom": "0px"
}
}
},
"layout": {
"type": "flex"
}
}
},
{
"blockName": "core/comment-content",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
},
{
"blockName": "core/comment-reply-link",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
}
],
"innerHTML": "\n<div class=\"wp-block-column\">\n\n\n\n\n\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-column\">",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"</div>\n"
],
"attrs": {}
}
],
"innerHTML": "\n<div class=\"wp-block-columns is-not-stacked-on-mobile\">\n\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-columns is-not-stacked-on-mobile\">",
null,
"\n\n",
null,
"</div>\n"
],
"attrs": {
"isStackedOnMobile": false
}
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
],
"attrs": {}
},
{
"blockName": "core/comments-pagination",
"innerBlocks": [
{
"blockName": "core/comments-pagination-previous",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
},
{
"blockName": "core/comments-pagination-numbers",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
},
{
"blockName": "core/comments-pagination-next",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
}
],
"innerHTML": "\n\n\n\n\n\n",
"innerContent": [
"\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n"
],
"attrs": {}
},
{
"blockName": "core/post-comments-form",
"innerBlocks": [],
"innerHTML": "",
"innerContent": [],
"attrs": {}
}
],
"innerHTML": "\n<div class=\"wp-block-comments\">\n\n\n\n\n\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-comments\">",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"</div>\n"
],
"attrs": {}
},
{
"blockName": "etch/condition",
"attrs": {
"condition": {
"leftHand": {
"leftHand": "this.comment_status",
"operator": "===",
"rightHand": "\"closed\""
},
"operator": "&&",
"rightHand": {
"leftHand": {
"leftHand": "props.closedMessage",
"operator": "isTruthy",
"rightHand": null
},
"operator": "&&",
"rightHand": {
"leftHand": "props.closedMessageVisibility",
"operator": "!==",
"rightHand": "\"hidden\""
}
}
},
"conditionString": "this.comment_status === \"closed\" && props.closedMessage && props.closedMessageVisibility !== \"hidden\""
},
"innerBlocks": [
{
"blockName": "etch/element",
"attrs": {
"metadata": {
"name": "Notice"
},
"tag": "p",
"attributes": {
"class": "ed-comments__notice"
},
"styles": [
"n8hwi2n"
]
},
"innerBlocks": [
{
"blockName": "etch/text",
"attrs": {
"metadata": {
"name": "Text"
},
"content": "{props.closedMessage}"
},
"innerBlocks": [],
"innerHTML": "",
"innerContent": []
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
]
}
],
"innerHTML": "\n\n",
"innerContent": [
"\n",
null,
"\n"
]
}
],
"innerHTML": "\n\n\n\n\n\n\n\n",
"innerContent": [
"\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n"
]
}
],
"properties": [
{
"name": "Theme",
"key": "theme",
"description": "Inherit the surrounding color context, or choose a complete neutral light/dark theme. Use only one ED Comments instance per page.",
"type": {
"primitive": "string",
"specialized": "select"
},
"default": "inherit",
"selectOptionsString": "Inherit : inherit\nLight : light\nDark : dark"
},
{
"name": "Density",
"key": "density",
"description": "Adjust discussion spacing. Custom CSS tokens always take precedence.",
"type": {
"primitive": "string",
"specialized": "select"
},
"default": "comfortable",
"selectOptionsString": "Comfortable : comfortable\nCompact : compact"
},
{
"name": "Avatars",
"key": "avatars",
"description": "Follow WordPress avatar settings, or hide the avatar column. Hidden avatars are still downloaded; turn off Show Avatars in Settings → Discussion to stop that.",
"type": {
"primitive": "string",
"specialized": "select"
},
"default": "auto",
"selectOptionsString": "Follow WordPress : auto\nHidden : hidden"
},
{
"name": "Empty Heading",
"key": "emptyHeading",
"description": "Heading before the form when there are no published comments.",
"type": {
"primitive": "string"
},
"default": "Discussion"
},
{
"name": "Empty Message",
"key": "emptyMessage",
"description": "Message below the empty heading when there are no published comments. Hide it with Empty Message Visibility.",
"type": {
"primitive": "string"
},
"default": "No published comments yet."
},
{
"name": "Empty Message Visibility",
"key": "emptyMessageVisibility",
"description": "Show or hide the message for a discussion without published comments.",
"type": {
"primitive": "string",
"specialized": "select"
},
"default": "show",
"selectOptionsString": "Show : show\nHidden : hidden"
},
{
"name": "Closed Message",
"key": "closedMessage",
"description": "Message when comments on the post are closed. Hide it with Closed Message Visibility.",
"type": {
"primitive": "string"
},
"default": "Comments are closed."
},
{
"name": "Closed Message Visibility",
"key": "closedMessageVisibility",
"description": "Show or hide the message for a post with closed comments.",
"type": {
"primitive": "string",
"specialized": "select"
},
"default": "show",
"selectOptionsString": "Show : show\nHidden : hidden"
},
{
"name": "Website field",
"key": "websiteField",
"description": "Hidden disables and hides the optional native Website field after JavaScript starts. Without JavaScript it remains usable. Plugin-required fields stay visible.",
"type": {
"primitive": "string",
"specialized": "select"
},
"default": "show",
"selectOptionsString": "Show : show\nHidden : hidden"
},
{
"name": "Translations",
"key": "labels",
"description": "Optional text overrides. Empty or whitespace keeps WordPress wording. JavaScript required; site language remains the no-JS fallback. Existing empty/closed messages are separate props. The builder shows them on a sample discussion.",
"type": {
"primitive": "object",
"specialized": "group"
},
"properties": [
{
"name": "Discussion title",
"key": "commentsTitle",
"description": "Supports %count%, the approved total (not the visible page count). Example: Comments (%count%). Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Form title",
"key": "formTitle",
"description": "Title when composing a top-level comment. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Reply title",
"key": "replyTitle",
"description": "Supports %name%, the author being replied to. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Comment field",
"key": "commentLabel",
"description": "Keeps the native required indicator. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Name field",
"key": "nameLabel",
"description": "Keeps the native required indicator. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Email field",
"key": "emailLabel",
"description": "Keeps the native required indicator. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Website field",
"key": "websiteLabel",
"description": "Label of the optional native URL field. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Submit button",
"key": "submitLabel",
"description": "Text on the native submit control. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Reply link",
"key": "replyLabel",
"description": "Visible text of each native Reply link. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Reply accessible name",
"key": "replyAccessibleLabel",
"description": "Supports %name%. The visible Reply text is retained in the accessible name. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Cancel reply",
"key": "cancelReplyLabel",
"description": "Text of the native Cancel Reply link. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Email privacy note",
"key": "emailNote",
"description": "Keeps the native email-notes relationship. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Required fields note",
"key": "requiredNote",
"description": "Use %required% for the existing required indicator; it is appended when omitted. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Remember details label",
"key": "cookiesLabel",
"description": "Keeps the native consent checkbox and its value. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Moderation message",
"key": "pendingMessage",
"description": "Text displayed on a pending comment preview. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Previous comments page",
"key": "previousLabel",
"description": "Text of the native previous-page link. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Next comments page",
"key": "nextLabel",
"description": "Text of the native next-page link. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
},
{
"name": "Edit comment link",
"key": "editLabel",
"description": "Text of the native edit link when available. Leave blank to use WordPress.",
"type": {
"primitive": "string"
},
"default": ""
}
]
}
],
"description": "ED Comments 1.0.0-beta.2 — native WordPress comments with optional text translations and Website control. One instance per page: Core IDs are fixed."
}
},
"version": 2.1
}
Stay up to date. Etch won’t update a pasted component for you. Subscribe and get one email when a new version is out.
Free on unlimited personal, client and commercial sites. Modify it however you like.License: FSL-1.1-MIT
Live demo
One discussion, every setting
Switch the theme, the page background, the density, the avatars, the Website field and the wording, then reply to a comment or post your own. Switch to Mobile for a phone width.
Features
What it does
One pasted component on top of WordPress’s own comments. No helper plugin, no PHP and no external script: the CSS and a small script travel with it.
Native WordPress inside
The discussion is WordPress’s own comments block. Storage, moderation, threaded replies, validation and your anti-spam plugin keep working as they always have.
Light, dark or inherited
Inherit takes the colors and color scheme of the section around it. Light and Dark draw a complete neutral palette that reads on any background.
Comfortable or compact
Two spacing presets, for long reads and for tight layouts. Compact changes the spacing only; text, fields and buttons keep their size.
Your own wording
18 Translations fields rename the title, the form, Reply, the button and the notes, with placeholders for the count, the author’s name and the required marker. Empty fields keep WordPress’s text.
Hide the Website field
One switch hides and disables the optional Website field, so a remembered address is not sent. A Website field that a plugin makes required stays visible.
Previews in the builder
Etch shows WordPress comments only as a placeholder, so the component adds a sample discussion to the canvas: replies, a pending comment, page links and the form. Every setting shows there before you save.
Accessible by default
Native labels, required fields and validation, a visible focus ring, quotes and code that stay readable in every theme, and reply indents that leave room for words at 200% text size.
68 styling variables
Width, spacing, avatars, links, replies, the form, fields, the button, quotes and code, set on any parent class. ACSS 4 tokens with plain fallbacks, so it works without Automatic.css too.
Install
Add it in four steps
No plugin and no build step. The component brings its own CSS and a small script and loads nothing from a CDN. It works with or without Automatic.css 4.
Shows without its styles? It was pasted but not saved, and pasting again won’t repair it. Delete ED Comments from your components, paste it again and click Save.
- Copy the componentUse Copy component at the top of this page, or download the .json file.
- Paste it into your post templateOpen the single post template, select the spot after the post content, press Ctrl+V or ⌘V and click Save. Etch adds the component to your list right away but stores its CSS only when you save. Use one instance per page and remove any other comment form there.
- Pick the look and the wordsIn the Properties panel choose a theme and a density. Rename any label in Translations, or leave them empty to keep WordPress’s wording.
- Check Settings → DiscussionWordPress decides who may comment, moderation, threading, avatars and page links. Save, open a post and try a reply.
Options
27 settings in the Etch props panel
Grouped as in the Etch props panel, where each setting has help text too, plus the intro slot. Nothing is required: pasted as it is, the discussion takes your page’s colors and WordPress’s wording. Every Translations field is empty by default and keeps WordPress’s text until you fill it.
Good to know
Before you place it
Things that are easy to miss when the discussion goes onto a real site.
- One instance per page. WordPress gives the comment list and the form fixed IDs, so Reply works with one discussion per page. Put it in the single post template, not in a query loop or an archive.
- WordPress decides who can comment. Open or closed comments, moderation, threading, page links, avatars and required name and email come from Settings → Discussion and from each post.
- Inherit needs a color scheme on dark sections. Declare
color-scheme: darkon the dark section, or choose Dark, so the fields and the focus ring switch too. - Custom wording needs JavaScript. Without it, visitors see WordPress’s wording in the site language and the Website field stays visible. Posting and replies work either way.
- Translations rename text; they don’t switch the language. Dates, login notices, error pages, browser validation and plugin text keep the WordPress site language.
%count%has no plural forms, so choose wording such asComments (%count%). - Hidden avatars still download. Avatars: Hidden hides the column only. To stop the requests to Gravatar, turn off Show Avatars in Settings → Discussion.
- Your anti-spam plugin stays in charge. The component never sends comments itself. Spam filters, captchas and moderation run as usual, and some of them need JavaScript to post.
- Not tested yet: NVDA and real phones. It was checked in Chrome, Firefox, Safari and Microsoft Edge, with VoiceOver on macOS, TalkBack on an Android emulator and Safari in the iOS Simulator.
License
Free to use. Not for resale.
Licensed under FSL-1.1-MIT, the Functional Source License with an MIT future license. Each version becomes MIT-licensed two years after its release.
You can
- Use it on unlimited personal, client and commercial websites
- Modify and adapt it however you like
- Use it in paid design and development work for your clients
You can’t
- Sell it, or a modified version, as a component: in a library, bundle, template kit, plugin or marketplace listing
- Offer it in another commercial product or service that competes with it
Keep the copyright and license notices in the code, and link to this page instead of re-hosting the download, so everyone gets fixes and updates. Read the full license
Third-party code
None. This component is all my own code under FSL-1.1-MIT. WordPress supplies the comments themselves; the component bundles no library and loads no external script.
Updates
How to update
Etch has no update button for pasted components. Pasting a newer version over an installed one changes nothing: Etch keeps the component and the CSS it already has. To update, reinstall in five steps.
- Note what you setWrite down the settings and Translations of your instance, and copy any CSS you changed in the component’s own styles.
- Delete the componentIn Etch, delete ED Comments from your components. The discussion disappears from the template that used it; the comments stay in WordPress.
- Delete its stylesIn the Style Manager, search for ed-comments and delete the four styles listed below.
- Paste the new versionCopy or download the new JSON from this page, paste it on the canvas and click Save. Etch creates the component and its CSS fresh.
- Put the discussion backInsert ED Comments in your single post template again, re-enter its settings and save. Reload any other open builder tab.
Styles to delete in step 3
.ed-comments.ed-comments__intro.ed-comments__empty-heading.ed-comments__notice
Trade-offs
- Placements are not kept. Etch doesn’t link the old instance to the new component, so you insert it again and re-enter its settings. Your comments are untouched.
- Edits inside the component’s CSS are replaced. Keep overrides on a parent class with the
--ed-comments-*variables; those survive an update. - Skipping a step leaves a mix. Without step 2, Etch keeps the old component. Without step 3, the new version runs on the old CSS.
Coming from 1.0.0-beta.1? Follow the five steps above. Settings, Translations, classes and styling variables are unchanged, so you can re-enter your settings as they were. Subscribe and you’ll get one email when the next version is out.
Changelog
What changed
Versions follow semantic versioning. When an update changes how existing options behave, its entry says so.
1.0.0-beta.2Latest
- FixedThe date link under each author name and the Edit link are now at least 24 px high, the minimum target size of WCAG 2.2. On Etch sites the date link was only as tall as its line, right below a linked author name.
- FixedOn phones and tablets, a tapped Reply link no longer keeps its hover background. Hover styles now need a mouse or trackpad; on the desktop nothing changes.
- ChangedOnly the CSS of
.ed-commentschanged, so update the component and its styles together (see How to update). Props, classes and the 68 styling variables are the same. - TestedTalkBack on an Android emulator, Safari on iPhone and iPad in the iOS Simulator, and Microsoft Edge, on a live page. Two things are WordPress’s own and stay as they are: after Cancel reply, focus drops back to the page, and TalkBack doesn’t read the “Reply to …” title. It stays a beta until NVDA and real phones are tested.
1.0.0-beta.1
- ReleasedFirst public version. It stays a beta until NVDA, iOS and Android devices and Microsoft Edge are tested.
Feedback
Tell me what this component needs
A bug, a missing option, or anything that made the component awkward to use in a real build — it all belongs here. The versions above are the ones it was tested on; if yours differ, say so.