Bump djhtml to 3.0.6 (#11158)

Notably, this changes the behaviour of multi-line HTML tags so that attributes are aligned (https://github.com/rtts/djhtml#new-multi-line-html-elements). The pre-commit hook was already set to use djhtml 3.0.6, which meant that it was making changes that conflicted with the formatting rules enforced by the Makefile and CI.

CHANGELOG.txt

@@ -12,6 +12,7 @@ Changelog
  * Maintenance: Migrate initialization of classes (such as `body.ready`) from multiple JavaScript implementations to one Stimulus controller `w-init` (Chiemezuo Akujobi)
  * Maintenance: Adopt the usage of of translate string literals using `arg=_('...')` in all `wagtailadmin` module templates (Chiemezuo Akujobi)
  * Maintenance: Migrate the contrib styleguide index view to a class based view (Chiemezuo Akujobi)
+ * Maintenance: Update djhtml to 3.0.6 (Matt Westcott)
 
 
 5.2 LTS (xx.xx.xxxx) - IN DEVELOPMENT

Makefile

@@ -37,7 +37,7 @@ lint: lint-server lint-client lint-docs
 format-server:
 	black --target-version py38 .
 	ruff check . --fix
-	git ls-files '*.html' | xargs djhtml -i
+	git ls-files '*.html' | xargs djhtml
 
 format-client:
 	npm run format

docs/_templates/search.html

@@ -52,16 +52,16 @@
             )
                 .then(result => {
                 // Display pagination if more than 1 page returned
-                let nbPages = result["nbPages"]
-                if (nbPages > 1) {
-                    document.querySelector("#pagination").hidden = false;
-                    displayPagination(page, nbPages)
-                }
+                    let nbPages = result["nbPages"]
+                    if (nbPages > 1) {
+                        document.querySelector("#pagination").hidden = false;
+                        displayPagination(page, nbPages)
+                    }
 
                 // Display hits
-                let hits = result["hits"]
-                addResultsList(hits, query, searchResultsContainer)
-            })
+                    let hits = result["hits"]
+                    addResultsList(hits, query, searchResultsContainer)
+                })
                 .catch((error) => console.log(error))
         }
 

docs/releases/5.3.md

@@ -32,6 +32,7 @@ depth: 1
  * Migrate initialization of classes (such as `body.ready`) from multiple JavaScript implementations to one Stimulus controller `w-init` (Chiemezuo Akujobi)
  * Adopt the usage of of translate string literals using `arg=_('...')` in all `wagtailadmin` module templates (Chiemezuo Akujobi)
  * Migrate the contrib styleguide index view to a class based view (Chiemezuo Akujobi)
+ * Update djhtml to 3.0.6 (Matt Westcott)
 
 
 ## Upgrade considerations - changes affecting all projects

setup.py

@@ -59,7 +59,7 @@ testing_extras = [
     # For templates linting
     "curlylint==0.13.1",
     # For template indenting
-    "djhtml==1.5.2",
+    "djhtml==3.0.6",
     # For validating string formats in .po translation files
     "polib>=1.1,<2.0",
     # For wagtail.test.utils.wagtail_factories (used for streamfield migration toolkit)

wagtail/admin/templates/wagtailadmin/bulk_actions/listing_checkbox_cell.html

@@ -1,9 +1,9 @@
 {% load i18n l10n wagtailadmin_tags %}
 <td class="bulk-action-checkbox-cell">
     <input type="checkbox"
-        {% if obj_type == 'page' %}data-page-status="{% if obj.live %}live{% else %}draft{% endif %}"{% endif %}
-        data-object-id="{{obj.pk|unlocalize|admin_urlquote}}" data-bulk-action-checkbox class="bulk-action-checkbox"
-        {% if checkbox_aria_label %}aria-label="{{checkbox_aria_label}}"{% endif %}
-        {% if aria_labelledby %}aria-labelledby="{{ aria_labelledby_prefix }}{{ aria_labelledby }}{{ aria_labelledby_suffix }}"{% endif %}
+           {% if obj_type == 'page' %}data-page-status="{% if obj.live %}live{% else %}draft{% endif %}"{% endif %}
+           data-object-id="{{obj.pk|unlocalize|admin_urlquote}}" data-bulk-action-checkbox class="bulk-action-checkbox"
+           {% if checkbox_aria_label %}aria-label="{{checkbox_aria_label}}"{% endif %}
+           {% if aria_labelledby %}aria-labelledby="{{ aria_labelledby_prefix }}{{ aria_labelledby }}{{ aria_labelledby_suffix }}"{% endif %}
     />
 </td>

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

@@ -81,7 +81,7 @@
                         {% endblocktrans %}
                     </label>
                     <input type="text" name="confirm_site_name" class="w-mb-4"
-                        id="id_confirm_site_name" aria-describedby="id_confirm_site_name-warning" required>
+                           id="id_confirm_site_name" aria-describedby="id_confirm_site_name-warning" required>
                 {% endif %}
                 <input type="hidden" name="next" value="{{ next }}">
                 <input type="submit" value="{% trans 'Yes, delete it' %}" class="button serious">

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

@@ -10,16 +10,16 @@
 {% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label 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' 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-breadcrumbs w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin {{ classname }} {% if is_expanded %} w-pl-3{% endif %}"
-        {% if not items %}hidden{% endif %}
-        {% if not is_expanded %}
-            data-controller="w-breadcrumbs"
-            data-action="keyup.esc@document->w-breadcrumbs#close w-breadcrumbs:open@document->w-breadcrumbs#open w-breadcrumbs:close@document->w-breadcrumbs#close"
-            data-w-breadcrumbs-close-icon-class="icon-cross"
-            data-w-breadcrumbs-closed-value="true"
-            data-w-breadcrumbs-open-icon-class="icon-breadcrumb-expand"
-            data-w-breadcrumbs-opened-content-class="w-max-w-4xl"
-            data-w-breadcrumbs-peek-target-value="header"
-        {% endif %}
+         {% if not items %}hidden{% endif %}
+         {% if not is_expanded %}
+             data-controller="w-breadcrumbs"
+             data-action="keyup.esc@document->w-breadcrumbs#close w-breadcrumbs:open@document->w-breadcrumbs#open w-breadcrumbs:close@document->w-breadcrumbs#close"
+             data-w-breadcrumbs-close-icon-class="icon-cross"
+             data-w-breadcrumbs-closed-value="true"
+             data-w-breadcrumbs-open-icon-class="icon-breadcrumb-expand"
+             data-w-breadcrumbs-opened-content-class="w-max-w-4xl"
+             data-w-breadcrumbs-peek-target-value="header"
+         {% endif %}
     >
         {% if not is_expanded %}
             <button
@@ -35,7 +35,7 @@
         {% endif %}
         <div class="w-relative w-h-slim-header 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' %}">
+                 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">
                     {% block breadcrumbs_items %}
                         {% for item in items %}

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

@@ -5,7 +5,7 @@
         <option value="">{% trans "All collections" %}</option>
         {% for pk, display_name in collections.get_indented_choices %}
             <option value="{{ pk|unlocalize }}"
-                {% if pk == current_collection.pk %}selected="selected"{% endif %}>
+                    {% if pk == current_collection.pk %}selected="selected"{% endif %}>
                 {{ display_name }}
             </option>
         {% endfor %}

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

@@ -4,13 +4,13 @@
     {% if dialog_root_selector %}data-w-teleport-target-value="{{ dialog_root_selector }}"{% endif %}
 >
     <div id="{{ id }}"
-        aria-labelledby="title-{{ id }}"
-        aria-hidden="true"
-        class="w-dialog {% if theme %}w-dialog--{{ theme }}{% endif %} {% if classname %} {{ classname }}{% endif %}"
-        data-controller="w-dialog"
-        data-action="w-dialog:hide->w-dialog#hide w-dialog:show->w-dialog#show {% comment %} RemovedInWagtail60 - Remove the following two actions. {% endcomment %}wagtail:hide->w-dialog#hide wagtail:show->w-dialog#show"
-        {% if theme %}data-w-dialog-theme-value="{{ theme }}"{% endif %}
-        {% if data_url %}data-url="{{ data_url }}"{% endif %}
+         aria-labelledby="title-{{ id }}"
+         aria-hidden="true"
+         class="w-dialog {% if theme %}w-dialog--{{ theme }}{% endif %} {% if classname %} {{ classname }}{% endif %}"
+         data-controller="w-dialog"
+         data-action="w-dialog:hide->w-dialog#hide w-dialog:show->w-dialog#show {% comment %} RemovedInWagtail60 - Remove the following two actions. {% endcomment %}wagtail:hide->w-dialog#hide wagtail:show->w-dialog#show"
+         {% if theme %}data-w-dialog-theme-value="{{ theme }}"{% endif %}
+         {% if data_url %}data-url="{{ data_url }}"{% endif %}
     >
         <div class="w-dialog__overlay" data-action="click->w-dialog#hide"></div>
         <div class="w-dialog__box">

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

@@ -1,11 +1,11 @@
 {% load wagtailadmin_tags i18n %}
 
 <a href="{{ history_url }}"
-    class="{{ nav_icon_button_classes }}"
-    aria-label="{% trans 'History' %}"
-    data-controller="w-tooltip"
-    data-w-tooltip-content-value="{% trans 'History' %}"
-    data-w-tooltip-offset-value="[0, 0]"
+   class="{{ nav_icon_button_classes }}"
+   aria-label="{% trans 'History' %}"
+   data-controller="w-tooltip"
+   data-w-tooltip-content-value="{% trans 'History' %}"
+   data-w-tooltip-offset-value="[0, 0]"
 >
     {% icon name="history" classname=nav_icon_classes %}
 </a>

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

@@ -51,7 +51,7 @@
                 {% if trailing_breadcrumb_title or is_expanded %}data-w-breadcrumbs-target="content"{% endif %}
             >
                 <a class="{{ breadcrumb_link_classes }}"
-                    href="{{ breadcrumb_url }}{{ querystring_value }}">
+                   href="{{ breadcrumb_url }}{{ querystring_value }}">
                     {{ page.get_admin_display_title }}
                 </a>
                 {% if trailing_breadcrumb_title %}

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

@@ -12,30 +12,30 @@
     {% test_page_is_public page as is_public %}
 
     <a href="{{ page.url }}" target="_blank" rel="noreferrer"
-        class="
-            page-status-tag
-            u-text-uppercase
-            w-inline-flex
-            w-items-center
-            w-justify-center
-            w-whitespace-nowrap
-            w-px-1
-            w-ml-3
-            w-text-[0.6875rem]
-            w-rounded-sm
-            w-bg-transparent
-            w-text-text-meta
-            w-border
-            w-border-border-furniture
-            w-no-underline
-            w-font-semibold
-            hover:w-border-surface-menus
-            hover:w-text-text-label
-            w-transition"
-        aria-label="{% if is_public %}{% trans 'Visible to all. Visit the live page' %}{% else %}{% trans 'Private. Visit the live page' %}{% endif %}"
-        data-controller="w-tooltip"
-        data-w-tooltip-content-value="{% if is_public %}{% trans 'Visible to all' %}{% else %}{% trans 'Private' %}{% endif %}"
-        data-w-tooltip-offset-value="[0, 13]"
+       class="
+              page-status-tag
+              u-text-uppercase
+              w-inline-flex
+              w-items-center
+              w-justify-center
+              w-whitespace-nowrap
+              w-px-1
+              w-ml-3
+              w-text-[0.6875rem]
+              w-rounded-sm
+              w-bg-transparent
+              w-text-text-meta
+              w-border
+              w-border-border-furniture
+              w-no-underline
+              w-font-semibold
+              hover:w-border-surface-menus
+              hover:w-text-text-label
+              w-transition"
+       aria-label="{% if is_public %}{% trans 'Visible to all. Visit the live page' %}{% else %}{% trans 'Private. Visit the live page' %}{% endif %}"
+       data-controller="w-tooltip"
+       data-w-tooltip-content-value="{% if is_public %}{% trans 'Visible to all' %}{% else %}{% trans 'Private' %}{% endif %}"
+       data-w-tooltip-offset-value="[0, 13]"
     >
 
         {% with icon_classes='privacy-indicator-icon w-w-4 w-h-4 w-mr-1' %}

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

@@ -1,13 +1,13 @@
 {% load wagtailadmin_tags %}
 
 <button type="button"
-    class="{{ nav_icon_button_classes }}"
-    aria-label="{{ toggle.aria_label }}"
-    aria-expanded="false"
-    data-controller="w-tooltip"
-    data-side-panel-toggle="{{ panel.name }}"
-    data-w-tooltip-content-value="{{ panel.title }}"
-    data-w-tooltip-offset-value="[0, 0]"
+        class="{{ nav_icon_button_classes }}"
+        aria-label="{{ toggle.aria_label }}"
+        aria-expanded="false"
+        data-controller="w-tooltip"
+        data-side-panel-toggle="{{ panel.name }}"
+        data-w-tooltip-content-value="{{ panel.title }}"
+        data-w-tooltip-offset-value="[0, 0]"
 >
     {% icon name=toggle.icon_name classname=nav_icon_classes %}
     {% if toggle.has_counter %}

wagtail/admin/templates/wagtailadmin/shared/side_panels/includes/action_list_item.html

@@ -18,8 +18,8 @@
                 {% block action %}
                     {% if not hide_action %}
                         <a class="w-text-14 w-text-text-link-default hover:w-text-text-link-hover w-no-underline w-transition"
-                            href="{{ action_url }}"
-                            aria-describedby="status-sidebar-{{ title|cautious_slugify }}"
+                           href="{{ action_url }}"
+                           aria-describedby="status-sidebar-{{ title|cautious_slugify }}"
                         >
                             {{ action_text }}
                         </a>

wagtail/admin/templates/wagtailadmin/shared/side_panels/includes/status/usage.html

@@ -8,7 +8,7 @@
                 </h3>
             </div>
             <a class="w-text-14 w-text-text-link-default hover:w-text-text-link-hover w-no-underline w-transition"
-                href="{{ usage_url }}"
+               href="{{ usage_url }}"
             >
                 {% if usage_url_text %}
                     {{ usage_url_text }}

wagtail/admin/templates/wagtailadmin/workflows/workflow_status.html

@@ -74,7 +74,7 @@
                         <div class="w-mx-2" aria-hidden="true">|</div>
                     {% endif %}
                     <a href="{% url revisions_compare_url_name object.pk|admin_urlquote previous_revision.id latest_revision.id %}"
-                        class="workflow-timeline__footer-link">{% trans 'Compare with previous version' %}</a>
+                       class="workflow-timeline__footer-link">{% trans 'Compare with previous version' %}</a>
                 {% endif %}
             {% endwith %}
         </div>

wagtail/contrib/modeladmin/templates/modeladmin/prepopulated_slugs.html

@@ -1,6 +1,6 @@
 {% load l10n static %}
 <script type="text/javascript"
-    id="modeladmin-prepopulated-fields-constants"
-    src="{% static "wagtailmodeladmin/js/prepopulate.js" %}"
-    data-prepopulated-fields="{{ prepopulated_fields_json }}">
+        id="modeladmin-prepopulated-fields-constants"
+        src="{% static "wagtailmodeladmin/js/prepopulate.js" %}"
+        data-prepopulated-fields="{{ prepopulated_fields_json }}">
 </script>