diff --git a/ghost/core/core/frontend/helpers/comment_count.js b/ghost/core/core/frontend/helpers/comment_count.js
index fd5466a2a8..0046f7836f 100644
--- a/ghost/core/core/frontend/helpers/comment_count.js
+++ b/ghost/core/core/frontend/helpers/comment_count.js
@@ -6,12 +6,18 @@ function commentCount(options) {
const empty = options.hash.empty === undefined ? '' : options.hash.empty;
const singular = options.hash.singular === undefined ? 'comment' : options.hash.singular;
const plural = options.hash.plural === undefined ? 'comments' : options.hash.plural;
+ const autowrap = options.hash.autowrap !== 'false';
+ const tag = autowrap ? options.hash.autowrap || 'span' : 'script';
+ const className = options.hash.class;
return new SafeString(html`
`);
diff --git a/ghost/core/core/frontend/src/comment-counts/js/comment-counts.js b/ghost/core/core/frontend/src/comment-counts/js/comment-counts.js
index 5e54478ea0..c7045d30f6 100644
--- a/ghost/core/core/frontend/src/comment-counts/js/comment-counts.js
+++ b/ghost/core/core/frontend/src/comment-counts/js/comment-counts.js
@@ -42,7 +42,18 @@
text = count;
}
}
- e.insertAdjacentText('afterend', text);
+ if (text) {
+ if (e.dataset.ghostCommentCountAutowrap !== 'false') {
+ const el = document.createElement(e.dataset.ghostCommentCountTag);
+ if (e.dataset.ghostCommentCountClassName) {
+ el.classList.add(e.dataset.ghostCommentCountClassName);
+ }
+ el.textContent = text;
+ e.insertAdjacentElement('afterend', el);
+ } else {
+ e.insertAdjacentText('afterend', text);
+ }
+ }
e.remove();
});
}
diff --git a/ghost/core/test/unit/frontend/helpers/comment_count.test.js b/ghost/core/test/unit/frontend/helpers/comment_count.test.js
index 24667be35e..f7d6691cf7 100644
--- a/ghost/core/test/unit/frontend/helpers/comment_count.test.js
+++ b/ghost/core/test/unit/frontend/helpers/comment_count.test.js
@@ -41,8 +41,8 @@ describe('{{comment_count}} helper', function () {
configUtils.restore();
});
- it('returns a script with the post id', async function () {
- const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments"}}`;
+ it('returns a script with the post id when autowrap is disabled', async function () {
+ const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments" autowrap="false"}}`;
shouldCompileToExpected(templateString, {
id: 'post-id'
@@ -52,6 +52,28 @@ describe('{{comment_count}} helper', function () {
data-ghost-comment-count-empty="No comments"
data-ghost-comment-count-singular="comment"
data-ghost-comment-count-plural="comments"
+ data-ghost-comment-count-tag="script"
+ data-ghost-comment-count-class-name=""
+ data-ghost-comment-count-autowrap="false"
+ >
+
+ `);
+ });
+
+ it('applies all the hash params as data attributes', function () {
+ const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments" autowrap="div" class="custom"}}`;
+
+ shouldCompileToExpected(templateString, {
+ id: 'post-id'
+ }, html`
+
`);
@@ -68,6 +90,9 @@ describe('{{comment_count}} helper', function () {
data-ghost-comment-count-empty=""
data-ghost-comment-count-singular="comment"
data-ghost-comment-count-plural="comments"
+ data-ghost-comment-count-tag="span"
+ data-ghost-comment-count-class-name=""
+ data-ghost-comment-count-autowrap="true"
>
`);