Merge pull request #24 from nickmoreton/support-wagtail-4

Support wagtail 4

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Wagtail QRcode Changelog
 
+## [1.0.0] - 2022-09-09
+
+- [Support Wagtail 4](https://github.com/nickmoreton/wagtail-qrcode/pull/24)
+
 ## [0.1.4] - 2022-08-17
 
 - [Change admin form and misc. improvements](https://github.com/nickmoreton/wagtail-qrcode/pull/23)

README.md

@@ -2,7 +2,7 @@
 
 This package can be used to create a page in Wagtail CMS that has a corresponding QR Code.
 
-![Alt text](docs/sample.jpg?raw=true "Title")
+![Alt text](docs/sample.png?raw=true "Title")
 
 ## Features
 

tox.ini

@@ -7,6 +7,7 @@ envlist =
     lint
     py{37,38}-django{30,31,32}-wagtail{215}
     py{39,310}-django{32,40}-wagtail{216,30}
+    py{310}-django{41}-wagtail{40}
 
 [gh-actions]
 python =
@@ -26,11 +27,13 @@ deps =
     django30: Django>=3.0,<3.1
     django31: Django>=3.1,<3.2
     django32: Django>=3.2,<4.0
-    django40: Django>=4.0,<5.0
+    django40: Django>=4.0,<4.1
+    django41: Django>=4.1,<4.2
 
     wagtail215: Wagtail>=2.15,<2.16
     wagtail216: Wagtail>=2.16,<2.17
     wagtail30: Wagtail>=3.0,<4.0
+    wagtail40: Wagtail>=4.0,<5.0
 
 [testenv:lint]
 skip_install = True

wagtail_qrcode/field_panels.py

@@ -7,20 +7,32 @@
 
 
 class QrCodeFieldPanel(FieldPanel):
-    if WAGTAIL_VERSION >= (3, 0):
+    if WAGTAIL_VERSION >= (4, 0):
+
+        class BoundPanel(FieldPanel.BoundPanel):
+            template_name = "wagtail_qrcode/admin/field_panel_4.html"
+
+    elif WAGTAIL_VERSION >= (3, 0):
 
         class BoundPanel(FieldPanel.BoundPanel):
             object_template_name = "wagtail_qrcode/admin/field_panel.html"
 
     else:
+
         object_template = "wagtail_qrcode/admin/field_panel.html"
 
 
 class QrCodeUsageFieldPanel(FieldPanel):
-    if WAGTAIL_VERSION >= (3, 0):
+    if WAGTAIL_VERSION >= (4, 0):
+
+        class BoundPanel(FieldPanel.BoundPanel):
+            template_name = "wagtail_qrcode/admin/usage_field_panel_4.html"
+
+    elif WAGTAIL_VERSION >= (3, 0):
 
         class BoundPanel(FieldPanel.BoundPanel):
             object_template_name = "wagtail_qrcode/admin/usage_field_panel.html"
 
     else:
+
         object_template = "wagtail_qrcode/admin/usage_field_panel.html"

wagtail_qrcode/templates/wagtail_qrcode/admin/field_4.html

@@ -0,0 +1,84 @@
+{% load wagtailadmin_tags i18n %}
+{% comment "text/markdown" %}
+
+    The field template is very flexible to cater for a wide range of use cases. It has three main attributes that support different use cases:
+
+    1. `field` when using the template as an `include` anywhere in the CMS.
+    2. `rendered_field` and `show_label=False` are only used inside forms with edit handlers / panels (`FieldPanel`).
+    3. `children` allows fully custom rendering of the Django widget, or usage with arbitrary HTML, as a `{% field %}<select>[…]</select>{% endfield %}` template tag.
+
+    A unified template for all three use cases is messy, but it guarantees we are keeping form field styles the same everywhere.
+
+
+    - `classname` - For legacy patterns requiring field-specific classes. Avoid if possible.
+    - `show_label` - Hide the label if it is rendered outside of the field.
+    - `id_for_label` - Manually set this this if the field’s HTML isn’t rendered by Django (for example hard-coded in HTML).
+    - `sr_only_label` - Make the label invisible for all but screen reader users. Use this if the field is displayed without a label.
+    - `icon` - Some fields have an icon, though this is generally a legacy pattern.
+    - `help_text` - Manually set this if the field’s HTML is hard-coded.
+    - `help_text_id` - The help text’s id, necessary so it can be attached to the field with `aria-describedby`.
+    - `show_add_comment_button` - Display a comment control within Wagtail forms.
+
+{% endcomment %}
+
+{% firstof id_for_label field.id_for_label as label_for %}
+{% fragment as label_id %}{{ label_for }}-label{% endfragment %}
+
+<div class="w-field__wrapper {{ classname }}" data-field-wrapper>
+
+    {# Render custom label attributes if provided, or the bound field’s label attributes otherwise. #}
+    {% if show_label|default_if_none:True %}
+        {# Add an id to the label so we can use it as a descriptor for the "Add comment" button. #}
+        <label class="w-field__label{% if sr_only_label %} w-sr-only{% endif %}" for="{{ label_for }}" id="{{ label_id }}">
+            {% firstof label_text field.label %}{% if field.field.required %}<span class="w-required-mark">*</span>{% endif %}
+        </label>
+    {% endif %}
+
+    {# It’s possible to customise the fields’ layout based on widget type. #}
+    {# Customising fields based on the field type is only supported for backwards compatibility. #}
+    <div class="w-field{% if field %} w-field--{{ field|fieldtype }} w-field--{{ field|widgettype }}{% endif %}{% if field.errors %} w-field--error{% endif %}{% if show_add_comment_button %} w-field--commentable{% endif %}" data-field data-contentpath="{{ field.name }}">
+
+        {# Always associate a wrapping div with the field, so JS error rendering knows where to put error messages. #}
+        <div class="w-field__errors" data-field-errors {% if error_message_id %}id="{{ error_message_id }}"{% endif %}>
+            {# Avoid rendering errors here if the widget itself is taking responsibility for its error rendering. #}
+            {% if field and field|has_unrendered_errors %}
+                {% icon name="warning" class_name="w-field__errors-icon" %}
+                <p class="error-message">
+                    {% for error in field.errors %}{{ error|escape }} {% endfor %}
+                </p>
+            {% endif %}
+        </div>
+
+        {# Separate container for the widget with prefix icon and suffix comment button #}
+        <div class="w-field__input" data-field-input>
+            {% if icon %}
+                {% icon name=icon class_name="w-field__icon" %}
+            {% endif %}
+
+            {% block form_field %}
+                {% if rendered_field %}
+                    {{ rendered_field }}
+                {% elif field %}
+                    {{ field|render_with_errors }}
+                {% elif children %}
+                    {{ children }}
+                {% endif %}
+            {% endblock %}
+            {{ field.value|safe }}
+
+            {% if show_add_comment_button %}
+                <button class="w-field__comment-button w-field__comment-button--add" type="button" data-component="add-comment-button" data-comment-add aria-label="{% trans 'Add comment' %}" {% if label_for %}aria-describedby="{{ label_id }}"{% endif %}>
+                    {% icon name="comment-add" %}
+                    {% icon name="comment-add-reversed" %}
+                </button>
+            {% endif %}
+        </div>
+
+        <div {% if help_text_id %}id="{{ help_text_id }}"{% endif %} data-field-help>
+            {% firstof help_text field.help_text as help_text_value %}
+            {% if help_text_value %}
+                <div class="help">{{ help_text_value }}</div>
+            {% endif %}
+        </div>
+    </div>
+</div>

wagtail_qrcode/templates/wagtail_qrcode/admin/field_panel_4.html

@@ -0,0 +1,2 @@
+{% load i18n wagtailadmin_tags %}
+{% include "wagtail_qrcode/admin/field_4.html" with show_label=False %}

wagtail_qrcode/templates/wagtail_qrcode/admin/usage_field_4.html

@@ -0,0 +1,84 @@
+{% load wagtailadmin_tags i18n %}
+{% comment "text/markdown" %}
+
+    The field template is very flexible to cater for a wide range of use cases. It has three main attributes that support different use cases:
+
+    1. `field` when using the template as an `include` anywhere in the CMS.
+    2. `rendered_field` and `show_label=False` are only used inside forms with edit handlers / panels (`FieldPanel`).
+    3. `children` allows fully custom rendering of the Django widget, or usage with arbitrary HTML, as a `{% field %}<select>[…]</select>{% endfield %}` template tag.
+
+    A unified template for all three use cases is messy, but it guarantees we are keeping form field styles the same everywhere.
+
+
+    - `classname` - For legacy patterns requiring field-specific classes. Avoid if possible.
+    - `show_label` - Hide the label if it is rendered outside of the field.
+    - `id_for_label` - Manually set this this if the field’s HTML isn’t rendered by Django (for example hard-coded in HTML).
+    - `sr_only_label` - Make the label invisible for all but screen reader users. Use this if the field is displayed without a label.
+    - `icon` - Some fields have an icon, though this is generally a legacy pattern.
+    - `help_text` - Manually set this if the field’s HTML is hard-coded.
+    - `help_text_id` - The help text’s id, necessary so it can be attached to the field with `aria-describedby`.
+    - `show_add_comment_button` - Display a comment control within Wagtail forms.
+
+{% endcomment %}
+
+{% firstof id_for_label field.id_for_label as label_for %}
+{% fragment as label_id %}{{ label_for }}-label{% endfragment %}
+
+<div class="w-field__wrapper {{ classname }}" data-field-wrapper>
+
+    {# Render custom label attributes if provided, or the bound field’s label attributes otherwise. #}
+    {% if show_label|default_if_none:True %}
+        {# Add an id to the label so we can use it as a descriptor for the "Add comment" button. #}
+        <label class="w-field__label{% if sr_only_label %} w-sr-only{% endif %}" for="{{ label_for }}" id="{{ label_id }}">
+            {% firstof label_text field.label %}{% if field.field.required %}<span class="w-required-mark">*</span>{% endif %}
+        </label>
+    {% endif %}
+
+    {# It’s possible to customise the fields’ layout based on widget type. #}
+    {# Customising fields based on the field type is only supported for backwards compatibility. #}
+    <div class="w-field{% if field %} w-field--{{ field|fieldtype }} w-field--{{ field|widgettype }}{% endif %}{% if field.errors %} w-field--error{% endif %}{% if show_add_comment_button %} w-field--commentable{% endif %}" data-field data-contentpath="{{ field.name }}">
+
+        {# Always associate a wrapping div with the field, so JS error rendering knows where to put error messages. #}
+        <div class="w-field__errors" data-field-errors {% if error_message_id %}id="{{ error_message_id }}"{% endif %}>
+            {# Avoid rendering errors here if the widget itself is taking responsibility for its error rendering. #}
+            {% if field and field|has_unrendered_errors %}
+                {% icon name="warning" class_name="w-field__errors-icon" %}
+                <p class="error-message">
+                    {% for error in field.errors %}{{ error|escape }} {% endfor %}
+                </p>
+            {% endif %}
+        </div>
+
+        {# Separate container for the widget with prefix icon and suffix comment button #}
+        <div class="w-field__input" data-field-input>
+            {% if icon %}
+                {% icon name=icon class_name="w-field__icon" %}
+            {% endif %}
+
+            {% block form_field %}
+                {% if rendered_field %}
+                    {{ rendered_field }}
+                {% elif field %}
+                    {{ field|render_with_errors }}
+                {% elif children %}
+                    {{ children }}
+                {% endif %}
+                <h3 style="font-size:300%">{{ field.value|safe }}</h3>
+            {% endblock %}
+
+            {% if show_add_comment_button %}
+                <button class="w-field__comment-button w-field__comment-button--add" type="button" data-component="add-comment-button" data-comment-add aria-label="{% trans 'Add comment' %}" {% if label_for %}aria-describedby="{{ label_id }}"{% endif %}>
+                    {% icon name="comment-add" %}
+                    {% icon name="comment-add-reversed" %}
+                </button>
+            {% endif %}
+        </div>
+
+        <div {% if help_text_id %}id="{{ help_text_id }}"{% endif %} data-field-help>
+            {% firstof help_text field.help_text as help_text_value %}
+            {% if help_text_value %}
+                <div class="help">{{ help_text_value }}</div>
+            {% endif %}
+        </div>
+    </div>
+</div>

wagtail_qrcode/templates/wagtail_qrcode/admin/usage_field_panel_4.html

@@ -0,0 +1,2 @@
+{% load i18n wagtailadmin_tags %}
+{% include "wagtail_qrcode/admin/usage_field_4.html" with show_label=False %}