Fix global styles in iframed site editor (#28731)

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

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import mergeRefs from 'react-merge-refs';
+import { compact, map } from 'lodash';
+import tinycolor from 'tinycolor2';
 
 /**
  * WordPress dependencies
@@ -10,10 +12,16 @@ import {
 	useState,
 	createPortal,
 	useCallback,
+	useEffect,
 	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import transformStyles from '../../utils/transform-styles';
+
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
 
@@ -136,9 +144,35 @@ function setHead( doc, head ) {
 		'<style>body{margin:0}</style>' + head;
 }
 
-function Iframe( { contentRef, children, head, ...props }, ref ) {
+function updateEditorStyles( doc, styles ) {
+	if ( ! doc ) {
+		return;
+	}
+
+	const backgroundColor = window
+		.getComputedStyle( doc.body, null )
+		.getPropertyValue( 'background-color' );
+	if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
+		doc.body.classList.remove( 'is-dark-theme' );
+	} else {
+		doc.body.classList.add( 'is-dark-theme' );
+	}
+
+	const updatedStyles = transformStyles( styles, '.editor-styles-wrapper' );
+	map( compact( updatedStyles ), ( updatedStyle ) => {
+		const styleElement = doc.createElement( 'style' );
+		styleElement.innerHTML = updatedStyle;
+		doc.body.appendChild( styleElement );
+	} );
+}
+
+function Iframe( { contentRef, editorStyles, children, head, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
+	useEffect( () => {
+		updateEditorStyles( iframeDocument, editorStyles );
+	}, [ editorStyles ] );
+
 	const setRef = useCallback( ( node ) => {
 		if ( ! node ) {
 			return;
@@ -157,6 +191,7 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 			setHead( contentDocument, head );
 			setBodyClassName( contentDocument );
 			styleSheetsCompat( contentDocument );
+			updateEditorStyles( contentDocument, editorStyles );
 			bubbleEvents( contentDocument );
 			setBodyClassName( contentDocument );
 

packages/edit-site/src/components/block-editor/index.js

@@ -70,7 +70,9 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 
 	useMouseMoveTypingReset( ref );
-	// Ideally this should be moved to the place where the styles are applied (iframe)
+	// This updates the host document styles.
+	// It is necessary to make sure the preset CSS Custom Properties
+	// are in scope for the sidebar UI controls that use them.
 	const editorStylesRef = useEditorStyles( settings.styles );
 
 	// Allow scrolling "through" popovers over the canvas. This is only called
@@ -112,6 +114,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<Popover.Slot name="block-toolbar" />
 				<Iframe
 					style={ resizedCanvasStyles }
+					editorStyles={ settings.styles }
 					head={ window.__editorStyles.html }
 					ref={ ref }
 					contentRef={ contentRef }