Update field templates and styling for Wagtail 6.1 (#243)

Includes
- Wagtail 5.1 upgrade consideration: Any direct usage of the jQuery widget in JavaScript should be removed
- Wagtail 6.0 upgrade consideration: The global Javascript definition headerSearch has been removed
- Update change logs, classifiers, test matrix on tox.ini
- Add upgrading notes to include templates

.github/workflows/nightly-tests.yml

@@ -23,9 +23,9 @@ jobs:
         options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python 3.11
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.11"
       - name: Install dependencies

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+### Added
+-
+- Add support for Wagtail 6.1 ([#243](https://github.com/torchbox/wagtailmedia/pull/243)) @katdom13
+
+### Removed
+
+- Drop support for Wagtail < 5.2 and Django < 4.2. ([#243](https://github.com/torchbox/wagtailmedia/pull/243)) @katdom13
+
 ## [0.15.1] - 2024-02-5
 
 ### Fixed

README.md

@@ -307,6 +307,20 @@ wagtailmedia has translations in French and Chinese. More translations welcome!
 
 All contributions are welcome!
 
+## Upgrading
+
+When upgrading the Wagtail version, it is good practice to also check that the template styles and formatting are up-to-date with the current supported version of Wagtail.
+
+The following templates should be checked:
+
+- `src/wagtailmedia/templates/wagtailmedia/media/add.html`
+- `src/wagtailmedia/templates/wagtailmedia/media/confirm_delete.html`
+- `src/wagtailmedia/templates/wagtailmedia/media/edit.html`
+- `src/wagtailmedia/templates/wagtailmedia/media/index.html`
+- `src/wagtailmedia/templates/wagtailmedia/media/media_chooser.html`
+- `src/wagtailmedia/templates/wagtailmedia/media/media_permissions_formset.html`
+- `src/wagtailmedia/templates/wagtailmedia/media/usage.html`
+
 ### Install
 
 To make changes to this project, first clone this repository:

pyproject.toml

@@ -20,16 +20,15 @@ classifiers = [
     "Programming Language :: Python :: 3.11",
     "Programming Language :: Python :: 3.12",
     "Framework :: Wagtail",
-    "Framework :: Wagtail :: 4",
     "Framework :: Wagtail :: 5",
     "Framework :: Wagtail :: 6",
 ]
 
 dynamic = ["version"]
 requires-python = ">=3.8"
 dependencies = [
-    "Wagtail>=4.1",
-    "Django>=3.2",
+    "Wagtail>=5.2",
+    "Django>=4.2",
 ]
 
 [project.optional-dependencies]

src/wagtailmedia/blocks.py

@@ -49,7 +49,7 @@ def widget(self):
 
     def render_basic(self, value, context=None):
         raise NotImplementedError(
-            "You need to implement %s.render_basic" % self.__class__.__name__
+            f"You need to implement {self.__class__.__name__}.render_basic"
         )
 
     def get_comparison_class(self) -> Type["MediaChooserBlockComparison"]:

src/wagtailmedia/models.py

@@ -176,8 +176,7 @@ def get_media_model():
     media_model = apps.get_model(app_label, model_name)
     if media_model is None:
         raise ImproperlyConfigured(
-            "WAGTAILMEDIA[\"MEDIA_MODEL\"] refers to model '%s' that has not been installed"
-            % wagtailmedia_settings.MEDIA_MODEL
+            f"WAGTAILMEDIA[\"MEDIA_MODEL\"] refers to model '{wagtailmedia_settings.MEDIA_MODEL}' that has not been installed"
         )
 
     return media_model

src/wagtailmedia/settings.py

@@ -68,7 +68,7 @@ def user_settings(self):
 
     def __getattr__(self, attr):
         if attr not in self.defaults:
-            raise AttributeError("Invalid wagtailmedia setting: '%s'" % attr)
+            raise AttributeError(f"Invalid wagtailmedia setting: '{attr}'")
 
         try:
             # Check if present in user settings

src/wagtailmedia/templates/wagtailmedia/media/_file_field.html

@@ -1,7 +1,6 @@
-{% extends "wagtailadmin/shared/field.html" %}
-{% load i18n %}
-{% block form_field %}
-    <a href="{{ media.url }}" class="icon icon-media">{{ media.filename }}</a><br /><br />
+{% load i18n wagtailadmin_tags %}
+{% rawformattedfield field=field %}
+    <a href="{{ media.url }}">{% icon name="media" classname="middle" %}&nbsp; {{ media.filename }}</a><br /><br />
     {% trans "Change media file:" %}
     {{ field }}
-{% endblock %}
+{% endrawformattedfield %}

src/wagtailmedia/templates/wagtailmedia/media/_file_field_as_li.html

@@ -1,4 +1,11 @@
-{% load wagtailadmin_tags %}
+{% load wagtailadmin_tags media_tags %}
+
+{% wagtail_version_gte "6.0" as wagtail_gte_60 %}
+
 <li class="{% if field.field.required %}required{% endif %} {{ wrapper_classes }} {{ li_classes }} {% if field.errors %}error{% endif %}">
-    {% include "wagtailmedia/media/_file_field.html" %}
+    {% if wagtail_gte_60 %}
+        {% include "wagtailmedia/media/_file_field.html" %}
+    {% else %}
+        {% include "wagtailmedia/media/_file_field_legacy.html" %}
+    {% endif %}
 </li>

src/wagtailmedia/templates/wagtailmedia/media/_file_field_legacy.html

@@ -0,0 +1,7 @@
+{% extends "wagtailadmin/shared/field.html" %}
+{% load i18n %}
+{% block form_field %}
+    <a href="{{ media.url }}" class="icon icon-media">{{ media.filename }}</a><br /><br />
+    {% trans "Change media file:" %}
+    {{ field }}
+{% endblock %}

src/wagtailmedia/templates/wagtailmedia/media/_thumbnail_field.html

@@ -1,11 +1,10 @@
-{% extends "wagtailadmin/shared/field.html" %}
-{% load i18n %}
-{% block form_field %}
+{% load i18n wagtailadmin_tags %}
+{% rawformattedfield field=field %}
 <div class="w-field__wrapper">
     {% if media.thumbnail %}
-        <a href="{{ media.thumbnail.url }}" class="icon icon-image">{{ media.thumbnail_filename }}</a><br /><br />
+        <a href="{{ media.thumbnail.url }}">{% icon name="image" classname="middle" %}&nbsp; {{ media.thumbnail_filename }}</a><br /><br />
     {% endif %}
 
     {{ field }}
 </div>
-{% endblock %}
+{% endrawformattedfield %}

src/wagtailmedia/templates/wagtailmedia/media/_thumbnail_field_as_li.html

@@ -1,4 +1,11 @@
-{% load wagtailadmin_tags %}
+{% load wagtailadmin_tags media_tags %}
+
+{% wagtail_version_gte "6.0" as wagtail_gte_60 %}
+
 <li class="{% if field.field.required %}required{% endif %} {{ wrapper_classes }} {{ li_classes }} {% if field.errors %}error{% endif %}">
-    {% include "wagtailmedia/media/_thumbnail_field.html" %}
+    {% if wagtail_gte_60 %}
+        {% include "wagtailmedia/media/_thumbnail_field.html" %}
+    {% else %}
+        {% include "wagtailmedia/media/_thumbnail_field_legacy.html" %}
+    {% endif %}
 </li>

src/wagtailmedia/templates/wagtailmedia/media/_thumbnail_field_legacy.html

@@ -0,0 +1,11 @@
+{% extends "wagtailadmin/shared/field.html" %}
+{% load i18n %}
+{% block form_field %}
+<div class="w-field__wrapper">
+    {% if media.thumbnail %}
+        <a href="{{ media.thumbnail.url }}" class="icon icon-image">{{ media.thumbnail_filename }}</a><br /><br />
+    {% endif %}
+
+    {{ field }}
+</div>
+{% endblock %}

src/wagtailmedia/templates/wagtailmedia/media/add.html

@@ -14,13 +14,8 @@
     {{ block.super }}
     {{ form.media.js }}
 
-    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
     <script>
         $(function() {
-            $('#id_tags').tagit({
-                autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
-            });
-
             const fileWidget = document.getElementById("id_file");
             const titleWidget = document.getElementById("id_title");
             fileWidget.addEventListener('change', function () {

src/wagtailmedia/templates/wagtailmedia/media/confirm_delete.html

@@ -7,7 +7,7 @@
 
     <div class="nice-padding">
         <div class="usagecount">
-            <a href="{{ media.usage_url }}">{% blocktrans count usage_count=media.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
+            <a href="{{ media.usage_url }}">{% blocktrans trimmed count usage_count=media.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
         </div>
 
         <p>{% trans "Are you sure you want to delete this media file?" %}</p>

src/wagtailmedia/templates/wagtailmedia/media/edit.html

@@ -1,19 +1,11 @@
 {% extends "wagtailadmin/base.html" %}
-{% load i18n %}
+{% load i18n media_tags %}
 {% block titletag %}{% blocktrans with title=media.title %}Editing {{ title }}{% endblocktrans %}{% endblock %}
 
 {% block extra_js %}
     {{ block.super }}
     {{ form.media.js }}
 
-    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
-    <script>
-        $(function() {
-            $('#id_tags').tagit({
-                autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
-            });
-        });
-    </script>
 {% endblock %}
 
 {% block extra_css %}
@@ -26,10 +18,11 @@
     {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=media.title icon=media.icon %}
     {% include "wagtailadmin/shared/non_field_errors.html" %}
 
+    {% wagtail_version_gte "6.1" as wagtail_gte_61 %}
+
     {% block form_row %}
         <div class="row row-flush nice-padding">
-
-            <div class="col10 divider-after">
+            <div class="col10{% if not wagtail_gte_61 %} divider-after{% endif %}">
                 <form action="{% block action %}{% url 'wagtailmedia:edit' media.pk %}{% endblock %}" method="POST" enctype="multipart/form-data" novalidate>
                     {% csrf_token %}
                     {% if next %}<input type="hidden" value="{{ next }}" name="next">{% endif %}

src/wagtailmedia/templates/wagtailmedia/media/index.html

@@ -48,22 +48,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block extra_js %}
-    {{ block.super }}
-    <script>
-        window.headerSearch = {
-            url: "{% url 'wagtailmedia:index' %}",
-            termInput: "#id_q",
-            targetOutput: "#media-results"
-        };
-
-        $(function() {
-            $('#collection_chooser_collection_id').change(function() {
-                const params = new URLSearchParams(window.location.search);
-                this.form["q"].value = params.get("q");
-                this.form.submit();
-            });
-        });
-    </script>
-{% endblock %}

src/wagtailmedia/templatetags/media_tags.py

@@ -0,0 +1,10 @@
+from django.template import Library
+from wagtail.utils.version import get_main_version
+
+
+register = Library()
+
+
+@register.simple_tag
+def wagtail_version_gte(version: str) -> bool:
+    return get_main_version() >= version

tests/test_legacy_template_usage.py

@@ -0,0 +1,72 @@
+import unittest
+
+from unittest.mock import patch
+
+from django import forms
+from django.http import HttpResponse
+from django.template import Context, Template
+from django.test import TestCase, override_settings
+from django.urls import path
+from django.views import View
+from wagtail import VERSION as WAGTAIL_VERSION
+
+
+class DummyForm(forms.Form):
+    media_file = forms.FileField(label="Change media file:", required=False)
+
+
+class DummyFileFieldView(View):
+    template_string = """
+        {% load media_tags %}
+        {% wagtail_version_gte "6.0" as wagtail_gte_60 %}  # Update version as needed
+        {% if wagtail_gte_60 %}
+            {% include "wagtailmedia/media/_file_field.html" %}
+        {% else %}
+            {% include "wagtailmedia/media/_file_field_legacy.html" %}
+        {% endif %}
+    """
+
+    def get(self, request, *args, **kwargs):
+        template = Template(self.template_string)
+        form = DummyForm()  # Create an instance of the form
+        context_data = self.get_context_data(form=form, **kwargs)
+        return HttpResponse(template.render(Context(context_data)))
+
+    def get_context_data(self, **kwargs):
+        # Mock 'media' and 'field' as they are used in the templates
+        return {
+            "media": {
+                "url": "http://example.com/media/file.mp3",
+                "filename": "file.mp3",
+            },
+            "field": kwargs["form"]["media_file"],  # Passing the actual form field
+            **kwargs,
+        }
+
+
+urlpatterns = [
+    # Temporary URL for testing
+    path(
+        "test-filefield-template/",
+        DummyFileFieldView.as_view(),
+        name="test-filefield-template",
+    ),
+]
+
+
+@override_settings(ROOT_URLCONF=__name__)  # Override ROOT_URLCONF during this test
+class WagtailVersionFileFieldTemplateTests(TestCase):
+    @patch(
+        "wagtailmedia.templatetags.media_tags.get_main_version", return_value="5.2"
+    )  # Version for legacy template
+    def test_legacy_template_loaded(self, _mock):
+        response = self.client.get("/test-filefield-template/")
+        self.assertTemplateUsed(response, "wagtailmedia/media/_file_field_legacy.html")
+
+    @unittest.skipUnless(WAGTAIL_VERSION >= (6, 0), "Requires Wagtail 6.0 or higher")
+    @patch(
+        "wagtailmedia.templatetags.media_tags.get_main_version", return_value="6.0"
+    )  # Version for new template
+    def test_new_template_loaded(self, _mock):
+        response = self.client.get("/test-filefield-template/")
+        self.assertTemplateUsed(response, "wagtailmedia/media/_file_field.html")

tests/test_tags.py

@@ -0,0 +1,21 @@
+from unittest.mock import patch
+
+from django.test import TestCase
+from wagtailmedia.templatetags.media_tags import wagtail_version_gte
+
+
+class MediaTagsTests(TestCase):
+    def test_wagtail_version_gte(self):
+        scenarios = [
+            ("5.2", "5.2", True),
+            ("5.2.1", "5.2", True),
+            ("5.2", "5.2.1", False),
+            ("4.2", "5.2", False),
+        ]
+
+        for wagtail_version, version_to_test, result in scenarios:
+            with patch(
+                "wagtailmedia.templatetags.media_tags.get_main_version",
+                return_value=wagtail_version,
+            ):
+                self.assertEqual(wagtail_version_gte(version_to_test), result)

tox.ini

@@ -2,9 +2,8 @@
 min_version = 4.11
 
 env_list =
-    py{38,39,310}-dj{32}-wagtail{41,52}
-    py{311}-dj{41,42}-wagtail{52,60}
-    py{312}-dj{42,50}-wagtail{52,60}
+    py{38,39,310,311}-dj42-wagtail{52,60,61}
+    py{310,311,312}-dj50-wagtail{52,60,61}
 
 base_python =
     py38: python3.8
@@ -38,12 +37,11 @@ setenv =
 
 deps =
     coverage>=7.0,<8.0
-    dj32: Django>=3.2,<3.3
     dj42: Django>=4.2,<5.0
     dj50: Django>=5.0,<5.1
-    wagtail41: wagtail>=4.1,<4.2
     wagtail52: wagtail>=5.2,<6.0
-    wagtail60: wagtail>=6.0rc1,<6.1
+    wagtail60: wagtail>=6.0,<6.1
+    wagtail61: wagtail>=6.1,<6.2
 
 install_command = python -Im pip install --upgrade {opts} {packages}