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" > `);