Added support for autowrap and class to the comment_count helper (#15203)

refs https://github.com/TryGhost/Team/issues/1760

This allows theme developers to wrap the output of the comment_count
helper in an element, which will only be shown when there is content
to output.

This makes styling a lot easier, as the default output for no comments
is nothing, meaning that separators defined with CSS will not be rendered.

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`
         <script
             data-ghost-comment-count="${this.id}"
             data-ghost-comment-count-empty="${empty}"
             data-ghost-comment-count-singular="${singular}"
             data-ghost-comment-count-plural="${plural}"
+            data-ghost-comment-count-tag="${tag}"
+            data-ghost-comment-count-class-name="${className}"
+            data-ghost-comment-count-autowrap="${autowrap ? 'true' : 'false'}"
         >
         </script>
     `);

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();
             });
         }

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 () {
+    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"}}`;
+        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"
+            >
+            </script>
+        `);
+    });
+
+    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`
+            <script
+                data-ghost-comment-count="post-id"
+                data-ghost-comment-count-empty="No comments"
+                data-ghost-comment-count-singular="comment"
+                data-ghost-comment-count-plural="comments"
+                data-ghost-comment-count-tag="div"
+                data-ghost-comment-count-class-name="custom"
+                data-ghost-comment-count-autowrap="true"
             >
             </script>
         `);
@@ -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"
             >
             </script>
         `);