Adopt DialogController & TeleportController in admin

client/src/entrypoints/admin/modal-workflow.js

@@ -29,7 +29,7 @@ function ModalWorkflow(opts) {
   if (useDialog) {
     self.dialog = document.getElementById(opts.dialogId);
     self.url = opts.url || self.dialog.dataset.url;
-    self.body = self.dialog.querySelector('[data-dialog-body]');
+    self.body = self.dialog.querySelector('[data-w-dialog-target]');
 
     // Clear the dialog body as it may have been populated previously
     self.body.innerHTML = '';
@@ -131,7 +131,7 @@ function ModalWorkflow(opts) {
 
   self.close = function () {
     if (useDialog) {
-      self.dialog.dispatchEvent(new CustomEvent('wagtail:hide'));
+      self.dialog.dispatchEvent(new CustomEvent('w-dialog:hide'));
     } else {
       self.container.modal('hide');
     }

wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html

@@ -1,16 +1,16 @@
 {% load wagtailadmin_tags i18n %}
-<template data-wagtail-dialog>
+<template
+    data-controller="w-teleport"
+    {% if dialog_root_selector %}data-w-teleport-target-value="{{ dialog_root_selector }}"{% endif %}
+>
     <div id="{{ id }}"
         aria-labelledby="title-{{ id }}"
         aria-hidden="true"
         class="w-dialog {% if theme %}w-dialog--{{ theme }}{% endif %} {% if classname %} {{ classname }}{% endif %}"
-        {% if theme %}data-theme="{{ theme }}"{% endif %}
-        {% if dialog_root_selector %}
-            data-dialog-root-selector="{{ dialog_root_selector }}"
-        {% endif %}
-        {% if data_url %}
-            data-url="{{ data_url }}"
-        {% endif %}
+        data-controller="w-dialog"
+        data-action="w-dialog:hide->w-dialog#hide w-dialog:show->w-dialog#show {% comment %} RemovedInWagtail60 - Remove the following two actions. {% endcomment %}wagtail:hide->w-dialog#hide wagtail:show->w-dialog#show"
+        {% if theme %}data-w-dialog-theme-value="{{ theme }}"{% endif %}
+        {% if data_url %}data-url="{{ data_url }}"{% endif %}
     >
         <div data-a11y-dialog-hide class="w-dialog__overlay"></div>
         <div class="w-dialog__box">
@@ -40,7 +40,7 @@
                     {% endif %}
                 </div>
 
-                <div data-dialog-body>
+                <div data-w-dialog-target="body">
                     {{ children }}
                 </div>
             </div>

wagtail/admin/tests/pages/test_edit_page.py

@@ -439,7 +439,13 @@ class TestPageEdit(WagtailTestUtils, TestCase):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -525,7 +531,13 @@ class TestPageEdit(WagtailTestUtils, TestCase):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -1237,7 +1249,13 @@ class TestPageEdit(WagtailTestUtils, TestCase):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,

wagtail/snippets/tests/test_snippets.py

@@ -2188,7 +2188,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -2426,7 +2432,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -2505,7 +2517,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -2601,7 +2619,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -2792,7 +2816,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -2904,7 +2934,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,
@@ -3019,7 +3055,13 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
 
         # 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]">',
+            '<template data-controller="w-teleport" data-w-teleport-target-value="[data-edit-form]">',
+            html,
+            count=1,
+            allow_extra_attrs=True,
+        )
+        self.assertTagInHTML(
+            '<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
             html,
             count=1,
             allow_extra_attrs=True,