Fix CSS classes for the post editor iframe body. (WordPress#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 <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: colinduwe <[email protected]>

packages/block-editor/src/components/iframe/index.js

@@ -131,27 +131,30 @@ 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;
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
 
 			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() ) {

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/ );
+		} );
+	} );
+} );

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/ );
+		} );
+	} );
+} );

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 -->

test/gutenberg-test-themes/darktheme/block-templates/singular.html

@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->

test/gutenberg-test-themes/darktheme/index.php

@@ -0,0 +1,9 @@
+<?php
+/**
+ * Theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;

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.
+*/

test/gutenberg-test-themes/darktheme/theme.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"color": {
+			"background": "#000",
+			"text": "#fff"
+		}
+	}
+}