Add dedicated blocks for title, breadcrumbs, and actions in slim_header.html and refactor page header templates to make better use of them

wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html

@@ -1,16 +1,19 @@
 {% extends 'wagtailadmin/shared/headers/slim_header.html' %}
 {% load wagtailadmin_tags i18n %}
 
-{% block header_content %}
+{% block title %}
     {# Accessible page title #}
     <h1 class="w-sr-only">
         {{ title }}
     </h1>
+{% endblock %}
+
+{% block breadcrumbs %}
     {# breadcrumbs #}
     {% page_breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' is_expanded=parent_page.is_root classname='sm:w-py-2.5' %}
-    {# Actions divider #}
-    <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
+{% endblock %}
 
+{% block actions %}
     {% page_permissions parent_page as parent_page_perms %}
     {% if parent_page_perms.can_add_subpage %}
         <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="header-main-action-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>

wagtail/admin/templates/wagtailadmin/shared/headers/page_create_header.html

@@ -1,10 +1,11 @@
 {% extends 'wagtailadmin/shared/headers/slim_header.html' %}
 {% load wagtailadmin_tags i18n %}
 
-{% block header_content %}
-    {% blocktrans trimmed asvar title with model_name=content_type.model_class.get_verbose_name %}New: {{ model_name }}{% endblocktrans %}
+{% block breadcrumbs %}
     {% page_breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' include_self=True trailing_breadcrumb_title=title %}
+{% endblock %}
 
+{% block title %}
     <h1 class="w-sr-only">
         {{ title }}
     </h1>

wagtail/admin/templates/wagtailadmin/shared/headers/page_edit_header.html

@@ -1,15 +1,17 @@
 {% extends 'wagtailadmin/shared/headers/slim_header.html' %}
 {% load wagtailadmin_tags i18n %}
 
-{% block header_content %}
+{% block breadcrumbs %}
     {% page_breadcrumbs page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' page_perms=page_perms %}
+{% endblock %}
 
+{% block title %}
     <h1 class="w-sr-only">
         {% blocktrans trimmed with title=page.get_admin_display_title page_type=content_type.model_class.get_verbose_name %}Editing {{ page_type }} {{ title }}{% endblocktrans %}
     </h1>
+{% endblock %}
 
-    {# Actions divider #}
-    <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
+{% block actions %}
     {# Page actions dropdown #}
     {% page_header_buttons page user=request.user view_name="edit" %}
 {% endblock %}

wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html

@@ -6,6 +6,7 @@
     - `breadcrumbs_items` - breadcrumbs items to be rendered, in the format of [{"url": str, "label": str}]
     - `side_panels` - list of side panels to be rendered
     - `history_url` - URL to the history view for the current object
+    - `title` - title of the current page, to be displayed as a hidden h1 for screen readers
 
     When including this template, use the `only` parameter whenever possible to
     ensure that the above variables are indeed the only ones needed for this
@@ -23,8 +24,27 @@
             <div class="w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
                 <div class="w-flex w-flex-1 w-items-center w-overflow-hidden">
                     {% block header_content %}
-                        {% if breadcrumbs_items %}
-                            {% breadcrumbs breadcrumbs_items %}
+                        {% block title %}
+                            {% if title %}
+                                {# Accessible page title as the h1 because we do not want #}
+                                {# to put the h1 inside the breadcrumbs #}
+                                <h1 class="w-sr-only">
+                                    {{ title }}
+                                </h1>
+                            {% endif %}
+                        {% endblock %}
+
+                        {% block breadcrumbs %}
+                            {% if breadcrumbs_items %}
+                                {% breadcrumbs breadcrumbs_items %}
+                            {% endif %}
+                        {% endblock %}
+
+                        {% fragment as actions %}{% block actions %}{% endblock %}{% endfragment %}
+                        {% if actions %}
+                            {# Actions divider #}
+                            <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
+                            {{ actions }}
                         {% endif %}
                     {% endblock %}
                 </div>