Move comment notifications toggle to the comments side panel (#10437)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Fix: Ensure comment buttons always respect `WAGTAILADMIN_COMMENTS_ENABLED` (Thibaud Colas)
  * Fix: Fix error when deleting a single snippet through the bulk actions interface (Sage Abdullah)
  * Fix: Pass the correct `for_update` value for `get_form_class` in `SnippetViewSet` edit views (Sage Abdullah)
+ * Fix: Move comment notifications toggle to the comments side panel (Sage Abdullah)
  * Docs: Update documentation for `log_action` parameter on `RevisionMixin.save_revision` (Christer Jensen)
 
 

client/src/entrypoints/admin/comments.js

@@ -289,10 +289,15 @@ window.comments = (() => {
     }
 
     // Show comments app
-    const commentNotifications = formElement.querySelector(
+    const commentNotifications = document.querySelector(
       '[data-comment-notifications]',
     );
     commentNotifications.hidden = false;
+    // Attach the comment notifications input to the form using the form attribute
+    // because the input element is outside the form.
+    const notificationsInput = commentNotifications.querySelector('input');
+    notificationsInput.setAttribute('form', formElement.id);
+
     const tabContentElement = formElement.querySelector('.tab-content');
     tabContentElement.classList.add('tab-content--comments-enabled');
 

docs/releases/5.0.1.md

@@ -18,6 +18,7 @@ depth: 1
  * Ensure comment buttons always respect `WAGTAILADMIN_COMMENTS_ENABLED` (Thibaud Colas)
  * Fix error when deleting a single snippet through the bulk actions interface (Sage Abdullah)
  * Pass the correct `for_update` value for `get_form_class` in `SnippetViewSet` edit views (Sage Abdullah)
+ * Move comment notifications toggle to the comments side panel (Sage Abdullah)
 
 ### Documentation
 

wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.html

@@ -14,17 +14,6 @@
                 {% endif %}
             {% endfor %}
         </div>
-
-        {# Comment Notifications Toggle  #}
-        {% if self.form.show_comments_toggle %}
-            <div class="w-relative w-flex w-justify-end w-px-5 sm:w-py-1 sm:w-px-2 w-mr-6 sm:w-mr-8 sm:w-mt-12 w-bg-surface-page" data-comment-notifications hidden>
-                <label class="switch w-p-0 w-m-0 w-font-normal w-flex w-justify-between w-text-14 w-space-x-2">
-                    {% trans "Comment notifications" %}
-                    {{ self.form.comment_notifications }}
-                    <span class="switch__toggle"></span>
-                </label>
-            </div>
-        {% endif %}
     </div>
 
     <div class="tab-content">

wagtail/admin/templates/wagtailadmin/shared/side_panels/comments.html

@@ -1 +1,14 @@
+{% load i18n %}
+
+{# Comment Notifications Toggle  #}
+{% if form.show_comments_toggle %}
+    <div class="w-relative w-flex w-justify-end w-mt-1 w-bg-surface-page" data-comment-notifications hidden>
+        <label class="switch w-p-0 w-m-0 w-font-normal w-flex w-justify-between w-text-14 w-space-x-2">
+            {% trans "Comment notifications" %}
+            {{ form.comment_notifications }}
+            <span class="switch__toggle"></span>
+        </label>
+    </div>
+{% endif %}
+
 <div id="comments"></div>

wagtail/admin/ui/side_panels.py

@@ -282,6 +282,11 @@ class CommentsSidePanel(BaseSidePanel):
     toggle_aria_label = gettext_lazy("Toggle comments")
     toggle_icon_name = "comment"
 
+    def get_context_data(self, parent_context):
+        context = super().get_context_data(parent_context)
+        context["form"] = parent_context.get("form")
+        return context
+
 
 class BasePreviewSidePanel(BaseSidePanel):
     name = "preview"