From f5869708e99bd5e8bf9f0e0e326edb43544560cb Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 18 Feb 2025 17:20:23 +0100
Subject: [PATCH] Fix CSS classes for the post editor iframe body. (#68481)

* Fix CSS classes for the post editor iframe body.

* Remove canvas loader CSS animation for testing purposes.

* Restore canvas loader CSS animation previously removed for testing purposes.

* Add test theme and post editor tests.

* Add tests for the site editor.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: colinduwe <colind@git.wordpress.org>
---
 .../src/components/iframe/index.js            | 29 +++----
 .../block-editor-dark-background.spec.js      | 52 +++++++++++++
 .../site-editor-dark-background.spec.js       | 75 +++++++++++++++++++
 .../darktheme/block-templates/index.html      | 11 +++
 .../darktheme/block-templates/singular.html   |  2 +
 .../gutenberg-test-themes/darktheme/index.php |  9 +++
 .../gutenberg-test-themes/darktheme/style.css | 15 ++++
 .../darktheme/theme.json                      | 10 +++
 8 files changed, 190 insertions(+), 13 deletions(-)
 create mode 100644 test/e2e/specs/editor/various/block-editor-dark-background.spec.js
 create mode 100644 test/e2e/specs/site-editor/site-editor-dark-background.spec.js
 create mode 100644 test/gutenberg-test-themes/darktheme/block-templates/index.html
 create mode 100644 test/gutenberg-test-themes/darktheme/block-templates/singular.html
 create mode 100644 test/gutenberg-test-themes/darktheme/index.php
 create mode 100644 test/gutenberg-test-themes/darktheme/style.css
 create mode 100644 test/gutenberg-test-themes/darktheme/theme.json

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3ae01525a80109..8411430dfbdadd 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -131,8 +131,23 @@ function Iframe( {
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
+
+		const { ownerDocument } = node;
+
+		// Ideally ALL classes that are added through get_body_class should
+		// be added in the editor too, which we'll somehow have to get from
+		// the server in the future (which will run the PHP filters).
+		setBodyClasses(
+			Array.from( ownerDocument.body.classList ).filter(
+				( name ) =>
+					name.startsWith( 'admin-color-' ) ||
+					name.startsWith( 'post-type-' ) ||
+					name === 'wp-embed-responsive'
+			)
+		);
+
 		function onLoad() {
-			const { contentDocument, ownerDocument } = node;
+			const { contentDocument } = node;
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
@@ -140,18 +155,6 @@ function Iframe( {
 
 			clearerRef( documentElement );
 
-			// Ideally ALL classes that are added through get_body_class should
-			// be added in the editor too, which we'll somehow have to get from
-			// the server in the future (which will run the PHP filters).
-			setBodyClasses(
-				Array.from( ownerDocument.body.classList ).filter(
-					( name ) =>
-						name.startsWith( 'admin-color-' ) ||
-						name.startsWith( 'post-type-' ) ||
-						name === 'wp-embed-responsive'
-				)
-			);
-
 			contentDocument.dir = ownerDocument.dir;
 
 			for ( const compatStyle of getCompatibilityStyles() ) {
diff --git a/test/e2e/specs/editor/various/block-editor-dark-background.spec.js b/test/e2e/specs/editor/various/block-editor-dark-background.spec.js
new file mode 100644
index 00000000000000..dc333f31c7ed9d
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-editor-dark-background.spec.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block editor with dark background theme', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'darktheme' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Block editor iframe body', () => {
+		test( 'Should have the is-dark-theme CSS class', async ( {
+			editor,
+		} ) => {
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			await expect( canvasBody ).toHaveClass( /is-dark-theme/ );
+		} );
+	} );
+} );
+
+test.describe( 'Block editor with light background theme', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Block editor iframe body', () => {
+		test( 'Should not have the is-dark-theme CSS class', async ( {
+			editor,
+		} ) => {
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			await expect( canvasBody ).not.toHaveClass( /is-dark-theme/ );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/site-editor-dark-background.spec.js b/test/e2e/specs/site-editor/site-editor-dark-background.spec.js
new file mode 100644
index 00000000000000..1bf49c196bdfc6
--- /dev/null
+++ b/test/e2e/specs/site-editor/site-editor-dark-background.spec.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor with dark background theme', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'darktheme' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Site editor iframe body', () => {
+		test( 'Should have the is-dark-theme CSS class', async ( {
+			editor,
+		} ) => {
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			await expect( canvasBody ).toHaveClass( /is-dark-theme/ );
+		} );
+	} );
+} );
+
+test.describe( 'Site editor with light background theme and theme variations', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Site editor iframe body', () => {
+		test( 'Should not have the is-dark-theme CSS class', async ( {
+			editor,
+		} ) => {
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			await expect( canvasBody ).not.toHaveClass( /is-dark-theme/ );
+		} );
+
+		test( 'Should add and remove the is-dark-theme CSS class with dark and light theme variation', async ( {
+			page,
+			editor,
+		} ) => {
+			// Click "Styles"
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
+
+			// Click "Browse styles"
+			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
+
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			// Activate "Maelstrom" Theme Variation.
+			await page.getByRole( 'button', { name: 'Maelstrom' } ).click();
+
+			await expect( canvasBody ).toHaveClass( /is-dark-theme/ );
+
+			// Activate "Ember" Theme Variation.
+			await page.getByRole( 'button', { name: 'Ember' } ).click();
+
+			await expect( canvasBody ).not.toHaveClass( /is-dark-theme/ );
+		} );
+	} );
+} );
diff --git a/test/gutenberg-test-themes/darktheme/block-templates/index.html b/test/gutenberg-test-themes/darktheme/block-templates/index.html
new file mode 100644
index 00000000000000..0283daeb54c6f4
--- /dev/null
+++ b/test/gutenberg-test-themes/darktheme/block-templates/index.html
@@ -0,0 +1,11 @@
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query">
+	<!-- wp:post-template -->
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
+	<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
+<!-- wp:paragraph -->
+<p>My awesome paragraph</p>
+<!-- /wp:paragraph -->
diff --git a/test/gutenberg-test-themes/darktheme/block-templates/singular.html b/test/gutenberg-test-themes/darktheme/block-templates/singular.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/darktheme/block-templates/singular.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/darktheme/index.php b/test/gutenberg-test-themes/darktheme/index.php
new file mode 100644
index 00000000000000..0c6530acc1aaff
--- /dev/null
+++ b/test/gutenberg-test-themes/darktheme/index.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;
diff --git a/test/gutenberg-test-themes/darktheme/style.css b/test/gutenberg-test-themes/darktheme/style.css
new file mode 100644
index 00000000000000..751cdae61cd960
--- /dev/null
+++ b/test/gutenberg-test-themes/darktheme/style.css
@@ -0,0 +1,15 @@
+/*
+Theme Name: Dark Theme
+Theme URI: https://github.com/wordpress/gutenberg/
+Author: the WordPress team
+Description: Dark background test theme.
+Requires at least: 5.3
+Tested up to: 5.5
+Requires PHP: 5.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: dark-theme
+Dark Theme WordPress Theme, (C) 2021 WordPress.org
+Dark Theme is distributed under the terms of the GNU GPL.
+*/
diff --git a/test/gutenberg-test-themes/darktheme/theme.json b/test/gutenberg-test-themes/darktheme/theme.json
new file mode 100644
index 00000000000000..99d2134aa1b67f
--- /dev/null
+++ b/test/gutenberg-test-themes/darktheme/theme.json
@@ -0,0 +1,10 @@
+{
+	"$schema": "../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"color": {
+			"background": "#000",
+			"text": "#fff"
+		}
+	}
+}