From 67a2ff28b235119764011b89af28bbd733b2f03e Mon Sep 17 00:00:00 2001 From: Ian Price Date: Sat, 4 Nov 2023 17:33:35 -0700 Subject: [PATCH] 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 | 1 + CONTRIBUTORS.md | 1 + client/scss/components/_preview-panel.scss | 6 ++++++ docs/releases/6.0.md | 1 + .../templates/wagtailadmin/shared/side_panels/preview.html | 6 +++++- 5 files changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 96d5aad77e..177a12cab0 100644 --- a/CHANGELOG.txt +++ b/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) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 9f7e331353..d62b8aa8cd 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -758,6 +758,7 @@ * phijma-leukeleu * CheesyPhoenix * Vedant Pandey +* Ian Price ## Translators diff --git a/client/scss/components/_preview-panel.scss b/client/scss/components/_preview-panel.scss index f53efb598c..4b5edbd2a4 100644 --- a/client/scss/components/_preview-panel.scss +++ b/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; diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md index da4c56e6e1..61590a4f4b 100644 --- a/docs/releases/6.0.md +++ b/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 diff --git a/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html b/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html index 7ea4ff0d97..de1247ba85 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html +++ b/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html @@ -54,7 +54,11 @@
- +