Move scheduled publishing dialog root to editor form element

client/scss/components/forms/_publishing.scss

@@ -1,5 +1,5 @@
 // Styles for the fields in the scheduled publishing dialog
-.w-panel.publishing {
+.w-dialog.publishing {
   .w-panel__wrapper {
     margin-top: theme('spacing.2');
     margin-bottom: theme('spacing.2');

wagtail/admin/panels.py

@@ -1115,6 +1115,7 @@ class PublishingPanel(MultiFieldPanel):
             context = super().get_context_data(parent_context)
             context["request"] = self.request
             context["instance"] = self.instance
+            context["classname"] = self.classname
             if isinstance(self.instance, Page):
                 context["page"] = self.instance
             return context

wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html

@@ -13,12 +13,10 @@
     {% endif %}
 {% endif %}
 
-<div data-schedule-publishing-dialog-root>
-    {% dialog id='schedule-publishing-dialog' dialog_root_selector='[data-schedule-publishing-dialog-root]' icon_name='calendar-alt' title=schedule_publishing_dialog_title subtitle=schedule_publishing_dialog_subtitle message_icon_name='info' message_status='info' message_heading=message_heading message_description=message_description %}
-        {% include 'wagtailadmin/panels/multi_field_panel.html' %}
+{% dialog id='schedule-publishing-dialog' dialog_root_selector='[data-edit-form]' classname=classname icon_name='calendar-alt' title=schedule_publishing_dialog_title subtitle=schedule_publishing_dialog_subtitle message_icon_name='info' message_status='info' message_heading=message_heading message_description=message_description %}
+    {% include 'wagtailadmin/panels/multi_field_panel.html' %}
 
-        <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
-            <em>{% trans 'Save schedule' %}</em>
-        </button>
-    {% enddialog %}
-</div>
+    <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
+        <em>{% trans 'Save schedule' %}</em>
+    </button>
+{% enddialog %}

wagtail/admin/tests/pages/test_edit_page.py

@@ -410,6 +410,14 @@ class TestPageEdit(TestCase, WagtailTestUtils):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
         self.assertContains(
             response,
             "This publishing schedule will only take effect after you have published",
@@ -1007,6 +1015,14 @@ class TestPageEdit(TestCase, WagtailTestUtils):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_post_publish_schedule_before_a_scheduled_expire_page(self):
         # First let's publish a page with *just* an expire_at in the future
         expire_at = timezone.now() + datetime.timedelta(days=20)

wagtail/snippets/tests/test_snippets.py

@@ -1956,6 +1956,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_scheduled_go_live_before_expiry(self):
         response = self.post(
             post_data={
@@ -2089,6 +2097,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_post_publish_now_an_already_scheduled_unpublished(self):
         # First let's publish an object with a go_live_at in the future
         go_live_at = now() + datetime.timedelta(days=1)
@@ -2154,6 +2170,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_post_publish_scheduled_published(self):
         self.test_snippet.save_revision().publish()
         self.test_snippet.refresh_from_db()
@@ -2239,6 +2263,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_post_publish_now_an_already_scheduled_published(self):
         self.test_snippet.save_revision().publish()
 
@@ -2407,6 +2439,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_post_publish_schedule_before_a_scheduled_expire(self):
         # First let's publish an object with *just* an expire_at in the future
         expire_at = now() + datetime.timedelta(days=20)
@@ -2505,6 +2545,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
     def test_edit_post_publish_schedule_after_a_scheduled_expire(self):
         # First let's publish an object with *just* an expire_at in the future
         expire_at = now() + datetime.timedelta(days=20)
@@ -2606,6 +2654,14 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
             allow_extra_attrs=True,
         )
 
+        # Should show the dialog template pointing to the [data-edit-form] selector as the root
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-dialog-root-selector="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+
 
 class TestSnippetUnpublish(TestCase, WagtailTestUtils):
     def setUp(self):