Remove data-default-size from preview panel

Now that the preview sizes are customizable, we can't rely on the
default being the mobile size when we want to force the size of the
preview unavailable screen.

client/src/controllers/PreviewController.test.js

@@ -132,7 +132,6 @@ describe('PreviewController', () => {
               data-action="w-preview#togglePreviewSize"
               data-w-preview-target="size"
               data-device-width="375"
-              data-default-size
               checked
             />
             Preview in mobile size
@@ -582,14 +581,9 @@ describe('PreviewController', () => {
       expect(
         currentSizeLabel.classList.contains('w-preview__size-button--selected'),
       ).toBe(true);
-      const defaultSizeInput = document.querySelector(
-        'input[name="preview-size"][data-default-size]',
-      );
-      expect(defaultSizeInput.value).toEqual('mobile');
-      const defaultSizeLabel = defaultSizeInput.labels[0];
       expect(
-        defaultSizeLabel.classList.contains('w-preview__size-button--selected'),
-      ).toBe(false);
+        document.querySelectorAll('.w-preview__size-button--selected'),
+      ).toHaveLength(1);
 
       // However, the actual rendered size should be the default size
       // (This is because the "Preview is unavailable" screen is actually the
@@ -738,14 +732,9 @@ describe('PreviewController', () => {
       expect(
         currentSizeLabel.classList.contains('w-preview__size-button--selected'),
       ).toBe(true);
-      const defaultSizeInput = document.querySelector(
-        'input[name="preview-size"][data-default-size]',
-      );
-      expect(defaultSizeInput.value).toEqual('mobile');
-      const defaultSizeLabel = defaultSizeInput.labels[0];
       expect(
-        defaultSizeLabel.classList.contains('w-preview__size-button--selected'),
-      ).toBe(false);
+        document.querySelectorAll('.w-preview__size-button--selected'),
+      ).toHaveLength(1);
 
       // However, the actual rendered size should be the default size
       // (This is because the "Preview is unavailable" screen is actually the
@@ -944,10 +933,8 @@ describe('PreviewController', () => {
 
     it('should assume the first device size is the default if none are marked as default', async () => {
       // Remove the default size marker
-      document
-        .querySelector('[data-default-size]')
-        .removeAttribute('data-default-size');
-      expect(document.querySelectorAll('[data-default-size]')).toHaveLength(0);
+      document.querySelector(':checked').removeAttribute('checked');
+      expect(document.querySelectorAll(':checked')).toHaveLength(0);
 
       const element = document.querySelector('[data-controller="w-preview"]');
 

client/src/controllers/PreviewController.ts

@@ -100,6 +100,8 @@ interface PreviewDataResponse {
   is_available: boolean;
 }
 
+const PREVIEW_UNAVAILABLE_WIDTH = 375;
+
 /**
  * Controls the preview panel component to submit the current form state and
  * update the preview iframe if the form is valid.
@@ -167,6 +169,9 @@ export class PreviewController extends Controller<HTMLElement> {
 
   static outlets = ['w-progress'];
 
+  /** The device size width to use when the preview is not available. */
+  static fallbackWidth = PREVIEW_UNAVAILABLE_WIDTH.toString();
+
   // Classes
 
   /** CSS class to indicate that there are errors in the form. */
@@ -300,25 +305,11 @@ export class PreviewController extends Controller<HTMLElement> {
    */
   updatePromise: Promise<boolean> | null = null;
 
-  /**
-   * The default size input element.
-   * This is the size input element with the `data-default-size` data attribute.
-   * If no input element has this attribute, the first size input element will be used.
-   */
-  get defaultSizeInput(): HTMLInputElement {
-    return (
-      this.sizeTargets.find((input) => 'defaultSize' in input.dataset) ||
-      this.sizeTargets[0]
-    );
-  }
-
   /**
    * The currently active device size input element. Falls back to the default size input.
    */
-  get activeSizeInput(): HTMLInputElement {
-    return (
-      this.sizeTargets.find((input) => input.checked) || this.defaultSizeInput
-    );
+  get activeSizeInput(): HTMLInputElement | null {
+    return this.sizeTargets.find((input) => input.checked) || null;
   }
 
   /**
@@ -400,9 +391,10 @@ export class PreviewController extends Controller<HTMLElement> {
     }
     const lastDeviceInput =
       this.sizeTargets.find((input) => input.value === lastDevice) ||
-      this.defaultSizeInput;
+      this.activeSizeInput ||
+      this.sizeTargets[0];
     lastDeviceInput.click();
-    // If lastDeviceInput resolves to the defaultSizeInput, the click event will
+    // If lastDeviceInput resolves to the default input, the click event will
     // not trigger the togglePreviewSize method, so we need to apply the
     // selected size class manually.
     this.applySelectedSizeClass(lastDeviceInput.value);
@@ -513,12 +505,14 @@ export class PreviewController extends Controller<HTMLElement> {
     let deviceWidth = width;
     if (!width) {
       // Restore width using the currently active device size input
-      deviceWidth = this.activeSizeInput.dataset.deviceWidth;
+      deviceWidth =
+        this.activeSizeInput?.dataset.deviceWidth ||
+        PreviewController.fallbackWidth;
     }
 
     if (!this.available) {
       // Ensure the 'Preview not available' message is not scaled down
-      deviceWidth = this.defaultSizeInput.dataset.deviceWidth;
+      deviceWidth = PreviewController.fallbackWidth;
     }
 
     this.element.style.setProperty(

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

@@ -25,7 +25,6 @@
                         aria-label="{{ size.label }}"
                         data-device-width="{{ size.device_width|stringformat:'s' }}"
                         {% if object.default_preview_size == size.name %}
-                            data-default-size
                             checked
                         {% endif %}
                     />