Render PublishingPanel inside dialog component

client/scss/components/forms/_publishing.scss

@@ -0,0 +1,16 @@
+// Styles for the fields in the scheduled publishing dialog
+.w-panel.publishing {
+  .w-panel__wrapper {
+    margin-top: theme('spacing.2');
+    margin-bottom: theme('spacing.2');
+  }
+
+  .w-field__input {
+    // Remove unnecessary padding so that the fields fit within the dialog
+    padding-inline-end: 0;
+  }
+
+  .w-field--date_time_field input {
+    width: 100%;
+  }
+}

client/scss/core.scss

@@ -118,6 +118,7 @@ These are classes for components.
 @import 'components/forms/drop-zone';
 @import 'components/forms/daterange';
 @import 'components/forms/file';
+@import 'components/forms/publishing';
 @import 'components/forms/switch';
 @import 'components/forms/title';
 @import 'components/forms/field';

wagtail/admin/panels.py

@@ -21,6 +21,7 @@ from wagtail.admin.forms.comments import CommentForm
 from wagtail.admin.templatetags.wagtailadmin_tags import avatar_url, user_display_name
 from wagtail.admin.ui.components import Component
 from wagtail.admin.widgets import AdminPageChooser
+from wagtail.admin.widgets.datetime import AdminDateTimeInput
 from wagtail.blocks import BlockField
 from wagtail.coreutils import safe_snake_case
 from wagtail.models import COMMENTS_RELATION_NAME, Page
@@ -1049,21 +1050,38 @@ class InlinePanel(Panel):
 # and therefore the associated styling of the publishing panel
 class PublishingPanel(MultiFieldPanel):
     def __init__(self, **kwargs):
+        js_overlay_parent_selector = "#schedule-publishing-dialog"
         updated_kwargs = {
             "children": [
                 FieldRowPanel(
                     [
-                        FieldPanel("go_live_at"),
+                        FieldPanel(
-                        FieldPanel("expire_at"),
+                            "go_live_at",
+                            widget=AdminDateTimeInput(
+                                js_overlay_parent_selector=js_overlay_parent_selector,
+                            ),
+                        ),
+                        FieldPanel(
+                            "expire_at",
+                            widget=AdminDateTimeInput(
+                                js_overlay_parent_selector=js_overlay_parent_selector,
+                            ),
+                        ),
                     ],
                 ),
             ],
-            "heading": gettext_lazy("Scheduled publishing"),
             "classname": "publishing",
         }
         updated_kwargs.update(kwargs)
         super().__init__(**updated_kwargs)
 
+    @property
+    def clean_name(self):
+        return super().clean_name or "publishing"
+
+    class BoundPanel(PanelGroup.BoundPanel):
+        template_name = "wagtailadmin/panels/publishing/schedule_publishing_panel.html"
+
 
 class CommentPanel(Panel):
     def get_form_options(self):

wagtail/admin/templates/wagtailadmin/icons/calendar-alt.svg

@@ -0,0 +1,4 @@
+<svg id="icon-calendar-alt" viewBox="0 0 448 512">
+  <path
+    d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z" />
+</svg>

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

@@ -0,0 +1,14 @@
+{% load i18n wagtailadmin_tags %}
+
+{% trans 'Set publishing schedule' as schedule_publishing_dialog_title %}
+{% trans 'Choose when this page should go live and/or expire' as schedule_publishing_dialog_subtitle %}
+
+<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 %}
+        {% include 'wagtailadmin/panels/multi_field_panel.html' %}
+
+        <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
+            <em>{% trans 'Save date' %}</em>
+        </button>
+    {% enddialog %}
+</div>

wagtail/admin/wagtail_hooks.py

@@ -977,6 +977,7 @@ def register_icons(icons):
         "bin.svg",
         "bold.svg",
         "breadcrumb-expand.svg",
+        "calendar-alt.svg",
         "chain-broken.svg",
         "check.svg",
         "chevron-down.svg",