Dynamically create content-heading

brianjhanson · brianjhanson · commit cd6a015566db · 2024-05-23T21:40:29.000-05:00
diff --git a/src/templates/_layouts/cp.twig b/src/templates/_layouts/cp.twig
@@ -216,7 +216,7 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                                         <div id="page-title" class="flex{% if toolbar %} has-toolbar{% endif %}">
                                             {% block pageTitle %}
                                                 {% if title is defined and title|length %}
-                                                    <h1 class="screen-title" title="{{ title }}">{{ title }}<span id="content-heading"></span></h1>
+                                                    <h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
                                                 {% endif %}
                                             {% endblock %}
                                         </div>
diff --git a/src/web/assets/cp/src/js/BaseElementIndex.js b/src/web/assets/cp/src/js/BaseElementIndex.js
@@ -776,7 +776,17 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     },
 
     updateMainHeading: function () {
-      $('#content-heading').text(this.getSourceLabel());
+      let $contentHeading = $('#content-heading');
+
+      if (!$contentHeading.length) {
+        $contentHeading = $('<span>', {
+          id: 'content-heading',
+        });
+
+        $contentHeading.appendTo('.screen-title');
+      }
+
+      $contentHeading.text(this.getSourceLabel());
     },
 
     deinitSource: function ($source) {
