Added new non collapsible breadcrumbs to page chooser

CHANGELOG.txt

@@ -33,7 +33,8 @@ Changelog
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
  * Introduce a `wagtail.admin.viewsets.chooser.ChooserViewSet` module to serve as a common base implementation for chooser modals (Matt Westcott)
  * Add documentation for `wagtail.admin.viewsets.model.ModelViewSet` (Matt Westcott)
- * Enhance new Breadcrumbs so they can be added to any header or container element and adopt on the page explorer (listing) view (Paarth Agarwal)
+ * Enhance new breadcrumbs so they can be added to any header or container element (Paarth Agarwal)
+ * Adopt new breadcrumbs on the page explorer (listing) view and the page chooser modal (Paarth Agarwal)
  * Added multi-site support to the API (Sævar Öfjörð Magnússon)
  * Add `add_to_admin_menu` option for ModelAdmin (Oliver Parker)
  * Implement Fuzzy matching for Elasticsearch (Nick Smith)

client/src/entrypoints/admin/page-chooser-modal.js

@@ -93,8 +93,10 @@ const PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
       });
       /* pagination links within search results should be AJAX-fetched
       and the result loaded into .page-results (and ajaxified) */
-      // eslint-disable-next-line func-names
-      $('.page-results a.navigate-pages', modal.body).on('click', function () {
+      $(
+        '.page-results a.navigate-pages, .page-results [data-breadcrumb-item] a',
+        modal.body,
+      ).on('click', function handleLinkClick() {
         $('.page-results', modal.body).load(this.href, ajaxifySearchResults);
         return false;
       });
@@ -108,8 +110,10 @@ const PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
 
     function ajaxifyBrowseResults() {
       /* Set up page navigation links to open in the modal */
-      // eslint-disable-next-line func-names
-      $('.page-results a.navigate-pages', modal.body).on('click', function () {
+      $(
+        '.page-results a.navigate-pages, .page-results [data-breadcrumb-item] a',
+        modal.body,
+      ).on('click', function handleLinkClick() {
         modal.loadUrl(this.href);
         return false;
       });

docs/releases/4.0.md

@@ -42,7 +42,8 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
  * Introduce a `wagtail.admin.viewsets.chooser.ChooserViewSet` module to serve as a common base implementation for chooser modals (Matt Westcott)
  * Add documentation for `wagtail.admin.viewsets.model.ModelViewSet` (Matt Westcott)
- * Enhance new Breadcrumbs so they can be added to any header or container element and adopt on the page explorer (listing) view (Paarth Agarwal)
+ * Enhance new breadcrumbs so they can be added to any header or container element (Paarth Agarwal)
+ * Adopt new breadcrumbs on the page explorer (listing) view and the page chooser modal (Paarth Agarwal)
  * Added [multi-site support](api_filtering_pages_by_site) to the API (Sævar Öfjörð Magnússon)
  * Add `add_to_admin_menu` option for ModelAdmin (Oliver Parker)
  * Implement [Fuzzy matching](fuzzy_matching) for Elasticsearch (Nick Smith)

wagtail/admin/templates/wagtailadmin/chooser/_browse_results.html

@@ -1,6 +1,26 @@
 {% load i18n wagtailadmin_tags %}
 
-{% include "wagtailadmin/shared/chooser_breadcrumb.html" with page=parent_page show_locale_labels=show_locale_labels %}
+{% if show_locale_labels %}
+    <div class="locale-options">
+        {% if locale_options %}
+            {% if selected_locale %}
+                {% include "wagtailadmin/shared/locale_selector.html" with translations=locale_options locale=selected_locale only %}
+            {% else %}
+                {% include "wagtailadmin/shared/locale_selector.html" with translations=locale_options locale=parent_page.locale only %}
+            {% endif %}
+        {% else %}
+            <div class="c-dropdown t-inverted {{ class }}" style="display: inline-block;">
+                <div class="c-dropdown__button u-btn-current">
+                    {% icon name="site" class_name="default" %}
+                    {{ parent_page.locale.get_display_name }}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+{% endif %}
+
+{% querystring p=None as querystring_value %}
+{% explorer_breadcrumb parent_page 'wagtailadmin_choose_page_child' include_self=False use_next_template=True is_expanded=True querystring_value=querystring_value %}
 
 {% component table %}
 

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

@@ -7,7 +7,7 @@
     <header class="header merged no-border">
         <h1 class="visuallyhidden">Explorer</h1>
 
-        {% explorer_breadcrumb parent_page use_next_template=True %}
+        {% explorer_breadcrumb parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' use_next_template=True %}
     </header>
 
     <form id="page-reorder-form">

wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.html

@@ -7,42 +7,57 @@
 {% endcomment %}
 {% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
     {# Breadcrumbs are visible on mobile by default but hidden on desktop #}
-
-    <div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin" data-breadcrumb-next>
-        <button
-            type="button"
-            data-toggle-breadcrumbs
-            class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-w-[50px] w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
-            aria-label="{% trans 'Toggle breadcrumbs' %}"
-            aria-expanded="false"
-        >
-            {% icon name="breadcrumb-expand" class_name="w-w-4 w-h-4" %}
-        </button>
-
+    <div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin" data-breadcrumb-next{% if not pages %} hidden{% endif %}>
+        {% if not is_expanded %}
+            <button
+                type="button"
+                data-toggle-breadcrumbs
+                class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-w-[50px] w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
+                aria-label="{% trans 'Toggle breadcrumbs' %}"
+                aria-expanded="false"
+            >
+                {% icon name="breadcrumb-expand" class_name="w-w-4 w-h-4" %}
+            </button>
+        {% endif %}
         <div class="w-relative w-h-[50px] w-mr-4 w-top-0 w-z-20 w-flex w-items-center w-flex-row w-flex-1 sm:w-flex-none w-transition w-duration-300">
             <nav class="w-flex w-items-center w-flex-row w-h-full"
                 aria-label="{% trans 'Breadcrumb' %}">
                 <ol class="w-flex w-flex-row w-justify-start w-items-center w-h-full w-pl-0 w-my-0 w-gap-2 sm:w-gap-0 sm:w-space-x-2">
                     {% for page in pages %}
                         {% if page.is_root %}
-                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
-                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore_root' %}">
+                            <li
+                                class="{{ breadcrumb_item_classes }} {% if not is_expanded %}w-max-w-0{% endif %}"
+                                data-breadcrumb-item
+                                {% if not is_expanded %}hidden{% endif %}
+                            >
+                                <a
+                                    class="{{ breadcrumb_link_classes }}"
+                                    href="{% if url_root_name %}{% url url_root_name %}{% else %}{% url url_name page.id %}{% endif %}{{ querystring_value }}"
+                                >
                                     {% trans "Root" %}
                                 </a>
                                 {% icon name="arrow-right" class_name=icon_classes %}
                             </li>
                         {% elif forloop.first %}
                             {# For limited-permission users whose breadcrumb starts further down from the root #}
-                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
-                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore' page.id %}">
+                            <li
+                                class="{{ breadcrumb_item_classes }} {% if not is_expanded %}w-max-w-0{% endif %}"
+                                data-breadcrumb-item
+                                {% if not is_expanded %}hidden{% endif %}
+                            >
+                                <a class="{{ breadcrumb_link_classes }}" href="{% url url_name page.id %}{{ querystring_value }}">
                                     {% trans "Root" %}
                                 </a>
                                 {% icon name="arrow-right" class_name=icon_classes %}
                             </li>
                         {% elif forloop.last %}
-                            <li class="{{ breadcrumb_item_classes }}" {% if trailing_breadcrumb_title %} data-breadcrumb-item hidden {% endif %}>
+                            <li
+                                class="{{ breadcrumb_item_classes }}"
+                                {% if trailing_breadcrumb_title or is_expanded %}data-breadcrumb-item{% endif %}
+                                {% if trailing_breadcrumb_title and not is_expanded %}hidden{% endif %}
+                            >
                                 <a class="{{ breadcrumb_link_classes }}"
-                                    href="{% url 'wagtailadmin_explore' page.id %}">
+                                    href="{% url url_name page.id %}{{ querystring_value }}">
                                     {{ page.get_admin_display_title }}
                                 </a>
                                 {% if trailing_breadcrumb_title %}
@@ -50,8 +65,12 @@
                                 {% endif %}
                             </li>
                         {% else %}
-                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
-                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore' page.id %}">
+                            <li
+                                class="{{ breadcrumb_item_classes }} {% if not is_expanded %}w-max-w-0{% endif %}"
+                                data-breadcrumb-item
+                                {% if not is_expanded %}hidden{% endif %}
+                            >
+                                <a class="{{ breadcrumb_link_classes }}" href="{% url url_name page.id %}{{ querystring_value }}">
                                     {{ page.get_admin_display_title }}
                                 </a>
                                 {% icon name="arrow-right" class_name=icon_classes %}

wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.stories.tsx

@@ -24,6 +24,8 @@ const Template = (args) => (
 export const Base = Template.bind({});
 
 Base.args = {
+  url_root_name: 'wagtailadmin_explore_root',
+  url_name: 'wagtailadmin_explore',
   pages: [
     {
       is_root: true,
@@ -40,6 +42,8 @@ Base.args = {
 export const WithTrailingTitle = Template.bind({});
 
 WithTrailingTitle.args = {
+  url_root_name: 'wagtailadmin_explore_root',
+  url_name: 'wagtailadmin_explore',
   pages: [
     {
       is_root: true,
@@ -65,6 +69,8 @@ WithTrailingTitle.args = {
 export const MultipleItems = Template.bind({});
 
 MultipleItems.args = {
+  url_root_name: 'wagtailadmin_explore_root',
+  url_name: 'wagtailadmin_explore',
   pages: [
     {
       is_root: true,
@@ -93,3 +99,30 @@ MultipleItems.args = {
     },
   ],
 };
+
+export const Expanded = Template.bind({});
+
+Expanded.args = {
+  url_root_name: 'wagtailadmin_explore_root',
+  url_name: 'wagtailadmin_explore',
+  is_expanded: 'True',
+  pages: [
+    {
+      is_root: true,
+      id: 2,
+      get_admin_display_title: 'Root item',
+    },
+    {
+      id: 3,
+      get_admin_display_title: 'First item',
+    },
+    {
+      id: 4,
+      get_admin_display_title: 'Second item',
+    },
+    {
+      id: 5,
+      get_admin_display_title: 'Third item',
+    },
+  ],
+};

wagtail/admin/templates/wagtailadmin/shared/chooser_breadcrumb.html

@@ -1,33 +0,0 @@
-{% load i18n wagtailadmin_tags %}
-
-<ul class="breadcrumb">
-    {% if show_locale_labels %}
-        <li class="breadcrumb-item">
-            {% if locale_options %}
-                {% if selected_locale %}
-                    {% include "wagtailadmin/shared/locale_selector.html" with translations=locale_options locale=selected_locale only %}
-                {% else %}
-                    {% include "wagtailadmin/shared/locale_selector.html" with translations=locale_options locale=page.locale only %}
-                {% endif %}
-            {% else %}
-                <div class="c-dropdown t-inverted {{ class }}" style="display: inline-block;">
-                    <div aria-label="{{ page.locale.get_display_name }}" class="c-dropdown__button u-btn-current">
-                        {% icon name="site" class_name="default" %}
-                        {{ page.locale.get_display_name }}
-                    </div>
-                </div>
-            {% endif %}
-        </li>
-    {% endif %}
-    {% for page in page.get_ancestors.specific %}
-        {% url 'wagtailadmin_choose_page_child' page.id as choose_page_child_url %}
-        {% if page.is_root %}
-            {% trans 'Home' as home %}
-            <li class="breadcrumb-item home"><a href="{{ choose_page_child_url }}{% querystring p=None %}" class="breadcrumb-link navigate-pages">{% icon name="home" class_name="home_icon" title=home %}{% icon name="arrow-right" class_name="arrow_right_icon" %}</a></li>
-        {% elif forloop.last %}
-            <li class="breadcrumb-item"><a href="{{ choose_page_child_url }}{% querystring p=None %}" class="breadcrumb-link navigate-pages">{{ page.get_admin_display_title }}</a></li>
-        {% else %}
-            <li class="breadcrumb-item"><a href="{{ choose_page_child_url }}{% querystring p=None %}" class="breadcrumb-link navigate-pages"><span class="title">{{ page.get_admin_display_title }}</span>{% icon name="arrow-right" class_name="arrow_right_icon" %}</a></li>
-        {% endif %}
-    {% endfor %}
-</ul>

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

@@ -3,7 +3,7 @@
 
 {% block header_content %}
     {% trans 'New: '|add:content_type.model_class.get_verbose_name as title %}
-    {% explorer_breadcrumb parent_page include_self=1 trailing_breadcrumb_title=title use_next_template=True %}
+    {% explorer_breadcrumb parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' include_self=True trailing_breadcrumb_title=title use_next_template=True %}
 
     <h1 class="w-sr-only">
         {{ title }}

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

@@ -2,7 +2,7 @@
 {% load wagtailadmin_tags i18n %}
 
 {% block header_content %}
-    {% explorer_breadcrumb page=page page_perms=page_perms use_next_template=True %}
+    {% explorer_breadcrumb page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' page_perms=page_perms use_next_template=True %}
 
     <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 %}

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -60,10 +60,14 @@ register.filter("naturaltime", naturaltime)
 def explorer_breadcrumb(
     context,
     page,
-    page_perms=None,
+    url_name,
+    url_root_name=None,
     include_self=True,
-    use_next_template=False,
+    is_expanded=False,
+    page_perms=None,
+    querystring_value=None,
     trailing_breadcrumb_title=None,
+    use_next_template=False,
 ):
     user = context["request"].user
 
@@ -78,9 +82,13 @@ def explorer_breadcrumb(
         .descendant_of(cca, inclusive=True)
         .specific(),
         "current_page": page,
+        "is_expanded": is_expanded,
         "page_perms": page_perms,
-        "use_next_template": use_next_template,
+        "querystring_value": querystring_value or "",
         "trailing_breadcrumb_title": trailing_breadcrumb_title,  # Only used in collapsible breadcrumb templates
+        "url_name": url_name,
+        "url_root_name": url_root_name,
+        "use_next_template": use_next_template,
     }
 
 

wagtail/admin/tests/test_page_chooser.py

@@ -257,12 +257,13 @@ class TestChooserBrowseChild(TestCase, WagtailTestUtils):
 
         # Look for a link element in the breadcrumbs with the admin title
         expected = """
-            <li class="breadcrumb-item">
-                <a href="/admin/choose-page/{page_id}/?" class="breadcrumb-link navigate-pages">{page_title}
-                    <svg class="icon icon-arrow-right arrow_right_icon" aria-hidden="true">
-                        <use href="#icon-arrow-right"></use>
-                    </svg>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold " data-breadcrumb-item>
+                <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/choose-page/{page_id}/?">
+                    {page_title}
                 </a>
+                <svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
+                   <use href="#icon-arrow-right"></use>
+                </svg>
             </li>
         """.format(
             page_id=self.child_page.id,