Add a background on the preview iframe #11188

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

# Conflicts:
#	CHANGELOG.txt
#	CONTRIBUTORS.md
#	docs/releases/6.0.md

CONTRIBUTORS.md

@@ -753,6 +753,7 @@
 * Chris Lawton
 * Meghana Reddy
 * Chinedu Ihedioha
+* 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;

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

@@ -55,7 +55,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>