Remember last opened side panel in the editor on page load

client/scss/components/_form-side.scss

@@ -31,6 +31,10 @@
     @apply w-translate-x-0;
   }
 
+  &--initial {
+    @apply w-transition-none;
+  }
+
   &__close-button {
     @apply w-text-primary w-absolute w-left-3 w-top-3 hover:w-text-primary-200 w-bg-white w-p-3 w-hidden w-transition;
 

client/src/entrypoints/admin/preview-panel.js

@@ -43,6 +43,7 @@ function initPreview() {
     const deviceWidth = event.target.dataset.deviceWidth;
 
     setPreviewWidth(deviceWidth);
+    localStorage.setItem('wagtail-preview-panel-device', device);
 
     // Ensure only one device class is applied
     sizeInputs.forEach((input) => {
@@ -150,6 +151,9 @@ function initPreview() {
   };
 
   const setPreviewData = () => {
+    // Bail out if there is already a pending update
+    if (hasPendingUpdate) return Promise.resolve();
+
     hasPendingUpdate = true;
     spinnerTimeout = setTimeout(
       () => loadingSpinner.classList.remove('w-hidden'),
@@ -274,7 +278,13 @@ function initPreview() {
   clearPreviewData()
     .then(() => setPreviewData())
     .then(() => reloadIframe());
-  setPreviewWidth();
+
+  // Remember last selected device size
+  const lastDevice = localStorage.getItem('wagtail-preview-panel-device');
+  const lastDeviceInput =
+    previewPanel.querySelector(`[data-device-width][value="${lastDevice}"]`) ||
+    defaultSizeInput;
+  lastDeviceInput.click();
 }
 
 document.addEventListener('DOMContentLoaded', () => {

client/src/includes/sidePanel.js

@@ -1,7 +1,21 @@
 export default function initSidePanel() {
+  const sidePanelWrapper = document.querySelector('[data-form-side]');
+
+  // Abort if the side panel isn't available
+  if (!sidePanelWrapper) return;
+
+  // For now, we do not want to persist the side panel state in the explorer
+  const inExplorer = 'formSideExplorer' in sidePanelWrapper.dataset;
+
   const setPanel = (panelName) => {
-    const sidePanelWrapper = document.querySelector('[data-form-side]');
     const body = document.querySelector('body');
+    const selectedPanel = document.querySelector(
+      `[data-side-panel-toggle="${panelName}"]`,
+    );
+
+    // Abort if panelName is specified but it does not exist
+    if (panelName && !selectedPanel) return;
+
     // Open / close side panel
 
     // HACK: For now, the comments will show without the side-panel opening.
@@ -44,6 +58,11 @@ export default function initSidePanel() {
         toggle.dataset.sidePanelToggle === panelName ? 'true' : 'false',
       );
     });
+
+    // Remember last opened side panel if not in explorer
+    if (!inExplorer) {
+      localStorage.setItem('wagtail-side-panel-open', panelName);
+    }
   };
 
   const togglePanel = (panelName) => {
@@ -72,4 +91,19 @@ export default function initSidePanel() {
       setPanel('');
     });
   }
+
+  // Open the last opened panel if not in explorer,
+  // use timeout to allow comments to load first
+  setTimeout(() => {
+    const sidePanelOpen = localStorage.getItem('wagtail-side-panel-open');
+    if (!inExplorer && sidePanelOpen) {
+      setPanel(sidePanelOpen);
+    }
+
+    // Skip the animation on initial load only,
+    // use timeout to ensure the panel has been triggered to open
+    setTimeout(() => {
+      sidePanelWrapper.classList.remove('form-side--initial');
+    });
+  });
 }

wagtail/admin/templates/wagtailadmin/pages/index.html

@@ -7,7 +7,7 @@
     {% page_permissions parent_page as parent_page_perms %}
     <div class="w-sticky w-top-0 w-z-header">
         {% include 'wagtailadmin/pages/page_listing_header.html' with title=parent_page.get_admin_display_title page_perms=parent_page_perms %}
-        {% include "wagtailadmin/shared/side_panels.html" %}
+        {% include "wagtailadmin/shared/side_panels.html" with in_explorer=True %}
     </div>
     <form id="page-reorder-form">
         {% csrf_token %}

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

@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags i18n %}
 
-<aside class="form-side" data-form-side>
+<aside class="form-side form-side--initial" data-form-side {% if in_explorer %}data-form-side-explorer{% endif %}>
     <button type="button" class="form-side__close-button" data-form-side-close-button aria-label="{% trans 'Toggle side panel' %}">
         {% icon name="expand-right" %}
     </button>

wagtail/admin/tests/pages/test_edit_page.py

@@ -149,6 +149,13 @@ def test_page_edit(self):
             '<button type="submit" name="action-submit" value="Submit to Moderators approval" class="button">',
         )
 
+        # test that side panel is shown
+        self.assertContains(
+            response,
+            '<aside class="form-side form-side--initial" data-form-side >',
+        )
+        self.assertNotContains(response, "data-form-side-explorer")
+
         # test that AdminURLFinder returns the edit view for the page
         url_finder = AdminURLFinder(self.user)
         expected_url = "/admin/pages/%d/edit/" % self.event_page.id

wagtail/admin/tests/pages/test_explorer_view.py

@@ -418,6 +418,26 @@ def test_breadcrumb_uses_specific_titles(self):
         self.assertContains(response, expected, html=True)
 
 
+class TestPageExplorerSidePanel(TestCase, WagtailTestUtils):
+    fixtures = ["test.json"]
+
+    def test_side_panel_present(self):
+        self.user = self.login()
+
+        # get the explorer view for a subpage of a SimplePage
+        page = Page.objects.get(url_path="/home/secret-plans/steal-underpants/")
+        response = self.client.get(reverse("wagtailadmin_explore", args=(page.id,)))
+        self.assertEqual(response.status_code, 200)
+
+        # The side panel should be present with data-form-side-explorer attribute
+        html = response.content.decode()
+        self.assertTagInHTML(
+            "<aside data-form-side data-form-side-explorer>",
+            html,
+            allow_extra_attrs=True,
+        )
+
+
 class TestPageExplorerSignposting(TestCase, WagtailTestUtils):
     fixtures = ["test.json"]