Add a background on the preview iframe

Ensures that when the iframe content is loaded there is a background on the iframe. So that transparent websites show correctly in the preview panel.
Fixes #11174

CHANGELOG.txt

@@ -8,6 +8,7 @@ Changelog
  * Fix: Update system check for overwriting storage backends to recognise the `STORAGES` setting introduced in Django 4.2 (phijma-leukeleu)
  * Fix: Prevent password change form from raising a validation error when browser autocomplete fills in the "Old password" field (Chiemezuo Akujobi)
  * Fix: Ensure that the legacy dropdown options, when closed, do not get accidentally clicked by other interactions wide viewports (CheesyPhoenix, Christer Jensen)
+ * Fix: Add a fallback background for the editing preview iframe for sites without a background (Ian Price)
  * Docs: Document, for contributors, the use of translate string literals passed as arguments to tags and filters using `_()` within templates (Chiemezuo Akujobi)
  * Maintenance: Update BeautifulSoup upper bound to 4.12.x (scott-8)
  * Maintenance: Migrate initialization of classes (such as `body.ready`) from multiple JavaScript implementations to one Stimulus controller `w-init` (Chiemezuo Akujobi)

CONTRIBUTORS.md

@@ -758,6 +758,7 @@
 * phijma-leukeleu
 * CheesyPhoenix
 * Vedant Pandey
+* Ian Price
 
 ## Translators
 

client/scss/components/_preview-panel.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
 
+  --w-preview-background-color: var(--w-color-white);
   --preview-width-ratio: min(
     1,
     var(--preview-panel-width, 450) / var(--preview-device-width, 375)
@@ -33,6 +34,11 @@
     transform: scale(var(--preview-width-ratio));
     display: block;
 
+    &:empty {
+      // Ensure that sites without a background show with a fallback, only when iframe has loaded
+      background-color: var(--w-preview-background-color);
+    }
+
     [dir='rtl'] & {
       // Transform with the top-right physical corner as the origin since the layout is reversed.
       transform-origin: top right;

docs/releases/6.0.md

@@ -21,6 +21,7 @@ depth: 1
  * Update system check for overwriting storage backends to recognise the `STORAGES` setting introduced in Django 4.2 (phijma-leukeleu)
  * Prevent password change form from raising a validation error when browser autocomplete fills in the "Old password" field (Chiemezuo Akujobi)
  * Ensure that the legacy dropdown options, when closed, do not get accidentally clicked by other interactions wide viewports (CheesyPhoenix, Christer Jensen)
+ * Add a fallback background for the editing preview iframe for sites without a background (Ian Price)
 
 ### Documentation
 

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

@@ -54,7 +54,11 @@
         </div>
 
         <div class="preview-panel__wrapper">
-            <iframe loading="lazy" title="{% trans 'Preview' %}" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner"></iframe>
+            <iframe loading="lazy" title="{% trans 'Preview' %}" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">
+                <div>
+                     {# Add placeholder element to support styling content when iframe has loaded #}
+                </div>
+            </iframe>
         </div>
     </div>
 </div>