From 03ce6ea04629d4dcd12bf2001afb84f46ac18b40 Mon Sep 17 00:00:00 2001
From: "LB (Ben Johnston)" <mail@lb.ee>
Date: Fri, 20 May 2022 20:53:10 +1000
Subject: [PATCH] Add consistent header & subtitle classes across templates
 (#8368)

---
 wagtail/admin/templates/wagtailadmin/home.html         |  4 ++--
 wagtail/admin/templates/wagtailadmin/pages/index.html  |  2 +-
 .../wagtailadmin/pages/move_choose_destination.html    |  4 ++--
 .../templates/wagtailadmin/pages/preview_error.html    |  4 ++--
 .../templates/wagtailadmin/reports/base_report.html    |  6 +++---
 .../admin/templates/wagtailadmin/shared/header.html    |  8 +++++---
 .../admin/templates/wagtailadmin/workflows/index.html  |  8 +++++---
 .../templates/wagtailadmin/workflows/task_index.html   |  8 +++++---
 wagtail/admin/tests/pages/test_edit_page.py            |  4 +++-
 .../templates/wagtailforms/index_submissions.html      |  4 ++--
 .../contrib/modeladmin/templates/modeladmin/index.html |  4 ++--
 .../redirects/templates/wagtailredirects/index.html    |  2 +-
 .../settings/templates/wagtailsettings/edit.html       |  6 +++---
 .../styleguide/templates/wagtailstyleguide/base.html   |  2 +-
 .../templates/wagtailsnippets/snippets/type_index.html | 10 +++++-----
 15 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/wagtail/admin/templates/wagtailadmin/home.html b/wagtail/admin/templates/wagtailadmin/home.html
index e663f54f04..90228c8e1d 100644
--- a/wagtail/admin/templates/wagtailadmin/home.html
+++ b/wagtail/admin/templates/wagtailadmin/home.html
@@ -12,11 +12,11 @@
 {% endblock %}
 
 {% block content %}
-    <header class="merged header--home">
+    <header class="header merged header--home">
         <div class="avatar"><img src="{% avatar_url user %}" alt="" /></div>
 
         <div class="sm:w-ml-4">
-            <h1>{% block branding_welcome %}{% blocktrans trimmed %}Welcome to the {{ site_name }} Wagtail CMS{% endblocktrans %}{% endblock %}</h1>
+            <h1 class="header__title">{% block branding_welcome %}{% blocktrans trimmed %}Welcome to the {{ site_name }} Wagtail CMS{% endblocktrans %}{% endblock %}</h1>
             <div class="user-name">{{ user|user_display_name }}</div>
         </div>
     </header>
diff --git a/wagtail/admin/templates/wagtailadmin/pages/index.html b/wagtail/admin/templates/wagtailadmin/pages/index.html
index 575a73ade9..ad4aafb949 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/index.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/index.html
@@ -4,7 +4,7 @@
 {% block bodyclass %}page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}
 
 {% block content %}
-    <header class="merged no-border">
+    <header class="header merged no-border">
         <h1 class="visuallyhidden">Explorer</h1>
 
         {% explorer_breadcrumb parent_page %}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html b/wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html
index 6e3f0d7853..4d4e413955 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html
@@ -2,10 +2,10 @@
 {% load i18n wagtailadmin_tags %}
 {% block titletag %}{% blocktrans trimmed with title=page_to_move.specific_deferred.get_admin_display_title %}Select a new parent page for {{ title }}{% endblocktrans %}{% endblock %}
 {% block content %}
-    <header>
+    <header class="header">
         {% move_breadcrumb page_to_move viewed_page %}
         <div class="row">
-            <h1>
+            <h1 class="header__title">
                 {% icon name="doc-empty-inverse" %}
                 {% blocktrans trimmed with title=page_to_move.specific_deferred.get_admin_display_title %}Select a new parent page for <span>{{ title }}</span>{% endblocktrans %}
             </h1>
diff --git a/wagtail/admin/templates/wagtailadmin/pages/preview_error.html b/wagtail/admin/templates/wagtailadmin/pages/preview_error.html
index dffa051c65..bc2f2d9912 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/preview_error.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/preview_error.html
@@ -4,8 +4,8 @@
 {% block titletag %}{% trans 'Preview error' %}{% endblock %}
 
 {% block content %}
-    <header class="header--with-padding">
-        <h1>{% trans 'Preview error' %}</h1>
+    <header class="header header--with-padding">
+        <h1 class="header__title">{% trans 'Preview error' %}</h1>
     </header>
     <div class="nice-padding">
         <p>
diff --git a/wagtail/admin/templates/wagtailadmin/reports/base_report.html b/wagtail/admin/templates/wagtailadmin/reports/base_report.html
index bc3c6da0c8..27df76b2fe 100644
--- a/wagtail/admin/templates/wagtailadmin/reports/base_report.html
+++ b/wagtail/admin/templates/wagtailadmin/reports/base_report.html
@@ -4,13 +4,13 @@
 {% block titletag %}{{ title }}{% endblock %}
 
 {% block content %}
-    <header role="banner">
+    <header class="header" role="banner">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1>
+                    <h1 class="header__title">
                         {% if header_icon %}{% icon name=header_icon %}{% endif %}
-                        {{ title }}{% if subtitle %} <span>{{ subtitle }}</span>{% endif %}
+                        {{ title }}{% if subtitle %} <span class="header__subtitle">{{ subtitle }}</span>{% endif %}
                     </h1>
                 </div>
             </div>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/header.html b/wagtail/admin/templates/wagtailadmin/shared/header.html
index ad70556fe6..5a4d3b9f0f 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/header.html
@@ -14,13 +14,15 @@
     - `action_icon` - icon for the 'action' button, default is 'icon-plus'
 
 {% endcomment %}
-<header class="{% if merged %}merged{% endif %} {% if search_form %}hasform{% endif %}">
+<header class="header {% if merged %}merged{% endif %} {% if search_form %}hasform{% endif %}">
     {% block breadcrumb %}{% endblock %}
     <div class="row">
         <div class="left">
             <div class="col">
-                <h1>{% if icon %}{% icon name=icon %}{% endif %}
-                    {{ title }}{% if subtitle %} <span>{{ subtitle }}</span>{% endif %}</h1>
+                <h1 class="header__title">
+                    {% if icon %}{% icon name=icon %}{% endif %}
+                    {{ title }}{% if subtitle %} <span class="header__subtitle">{{ subtitle }}</span>{% endif %}
+                </h1>
             </div>
             {% if search_url %}
                 <form class="col search-form" action="{% url search_url %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate role="search">
diff --git a/wagtail/admin/templates/wagtailadmin/workflows/index.html b/wagtail/admin/templates/wagtailadmin/workflows/index.html
index 7e97c61dca..a8c87cc3cb 100644
--- a/wagtail/admin/templates/wagtailadmin/workflows/index.html
+++ b/wagtail/admin/templates/wagtailadmin/workflows/index.html
@@ -2,12 +2,14 @@
 {% load i18n wagtailadmin_tags %}
 
 {% block content %}
-    <header role="banner">
+    <header class="header" role="banner">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1>{% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
-                        {{ view.page_title }}{% if view.subtitle %} <span>{{ view.subtitle }}</span>{% endif %}</h1>
+                    <h1 class="header__title">
+                        {% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
+                        {{ view.page_title }}{% if view.subtitle %} <span class="header__subtitle">{{ view.subtitle }}</span>{% endif %}
+                    </h1>
                 </div>
             </div>
             <div class="right">
diff --git a/wagtail/admin/templates/wagtailadmin/workflows/task_index.html b/wagtail/admin/templates/wagtailadmin/workflows/task_index.html
index e48af319fb..420879a712 100644
--- a/wagtail/admin/templates/wagtailadmin/workflows/task_index.html
+++ b/wagtail/admin/templates/wagtailadmin/workflows/task_index.html
@@ -2,12 +2,14 @@
 {% load i18n wagtailadmin_tags %}
 
 {% block content %}
-    <header role="banner">
+    <header class="header" role="banner">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1>{% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
-                        {{ view.page_title }}{% if view.subtitle %} <span>{{ view.subtitle }}</span>{% endif %}</h1>
+                    <h1 class="header__title">
+                        {% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
+                        {{ view.page_title }}{% if view.subtitle %} <span class="header__subtitle">{{ view.subtitle }}</span>{% endif %}
+                    </h1>
                 </div>
             </div>
             <div class="right">
diff --git a/wagtail/admin/tests/pages/test_edit_page.py b/wagtail/admin/tests/pages/test_edit_page.py
index f564b045fa..9c3e188c5f 100644
--- a/wagtail/admin/tests/pages/test_edit_page.py
+++ b/wagtail/admin/tests/pages/test_edit_page.py
@@ -858,7 +858,9 @@ class TestPageEdit(TestCase, WagtailTestUtils):
         self.assertContains(
             response, "<title>Wagtail - Preview error</title>", html=True
         )
-        self.assertContains(response, "<h1>Preview error</h1>", html=True)
+        self.assertContains(
+            response, '<h1 class="header__title">Preview error</h1>', html=True
+        )
 
     @override_settings(
         CACHES={
diff --git a/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html b/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html
index 712a5b38b1..4c5378e7da 100644
--- a/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html
+++ b/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html
@@ -81,12 +81,12 @@
     </script>
 {% endblock %}
 {% block content %}
-    <header>
+    <header class="header">
         <form action="" method="get" novalidate>
             <div class="row">
                 <div class="left">
                     <div class="col">
-                        <h1>
+                        <h1 class="header__title">
                             {% icon name="form" %}
                             {% blocktrans trimmed with form_title=form_page.title|capfirst %}Form data <span>{{ form_title }}</span>{% endblocktrans %}
                         </h1>
diff --git a/wagtail/contrib/modeladmin/templates/modeladmin/index.html b/wagtail/contrib/modeladmin/templates/modeladmin/index.html
index 4fcc4e2187..bee095fde1 100644
--- a/wagtail/contrib/modeladmin/templates/modeladmin/index.html
+++ b/wagtail/contrib/modeladmin/templates/modeladmin/index.html
@@ -15,7 +15,7 @@
 
 {% block content %}
     {% block header %}
-        <header class="hasform">
+        <header class="header hasform">
             {% block breadcrumb %}{% endblock %}
             <div class="row">
                 <div class="left header-left">
@@ -24,7 +24,7 @@
                             <h1>
                                 {% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
                                 {{ view.get_page_title }}
-                                {% if view.get_page_subtitle %} <span>{{ view.get_page_subtitle }}</span> {% endif %}
+                                {% if view.get_page_subtitle %} <span class="header__subtitle">{{ view.get_page_subtitle }}</span> {% endif %}
                                 {% include 'modeladmin/includes/result_count.html' %}
                             </h1>
                         {% endblock %}
diff --git a/wagtail/contrib/redirects/templates/wagtailredirects/index.html b/wagtail/contrib/redirects/templates/wagtailredirects/index.html
index 67cd03ccd4..e4c6965e97 100644
--- a/wagtail/contrib/redirects/templates/wagtailredirects/index.html
+++ b/wagtail/contrib/redirects/templates/wagtailredirects/index.html
@@ -27,7 +27,7 @@
         {% trans "Import redirects" as import_str %}
         {% trans "Export redirects" as export_str %}
 
-        <header class="hasform">
+        <header class="header hasform">
             {% block breadcrumb %}{% endblock %}
             <div class="row">
                 <div class="left">
diff --git a/wagtail/contrib/settings/templates/wagtailsettings/edit.html b/wagtail/contrib/settings/templates/wagtailsettings/edit.html
index 479635677a..375a9ada6e 100644
--- a/wagtail/contrib/settings/templates/wagtailsettings/edit.html
+++ b/wagtail/contrib/settings/templates/wagtailsettings/edit.html
@@ -3,14 +3,14 @@
 {% block titletag %}{% blocktrans trimmed %}Editing {{ setting_type_name}} - {{ instance }}{% endblocktrans %}{% endblock %}
 {% block bodyclass %}menu-settings{% endblock %}
 {% block content %}
-    <header class="merged">
+    <header class="header merged">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1>
+                    <h1 class="header__title">
                         {% icon name="cogs" %}
                         {% trans "Editing" %}
-                        <span>{{ setting_type_name|capfirst }}</span>
+                        <span class="header__subtitle">{{ setting_type_name|capfirst }}</span>
                     </h1>
                 </div>
             </div>
diff --git a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
index 4ed561b9ed..24daf528e9 100644
--- a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
@@ -626,7 +626,7 @@
             </div>
 
             <p>These can also have an inverted  theme:</p>
-            <header>
+            <header class="header">
                 <div class="c-dropdown  t-inverted" data-dropdown="">
                     <a class="c-dropdown__button  u-btn-current">
                         More
diff --git a/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html b/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html
index f4dade4f32..f498091c08 100644
--- a/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html
+++ b/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html
@@ -18,13 +18,14 @@
 
 {% block content %}
 
-    <header>
+    <header class="header">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1>{% icon name="snippet" %}
-                        {% blocktrans trimmed with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>
-
+                    <h1 class="header__title">
+                        {% icon name="snippet" %}
+                        {% blocktrans trimmed with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}
+                    </h1>
                     {% if is_searchable and search_url %}
                         <form class="col search-form" action="{{ search_url }}" method="get" novalidate>
                             <ul class="fields">
@@ -36,7 +37,6 @@
                         </form>
                     {% endif %}
                 </div>
-
                 {% if locales %}
                     <div class="col">