Revert "Fix global styles in iframed site editor (#28731)"

This reverts commit 9c206dd.

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

@@ -1,27 +1,15 @@
-/**
- * External dependencies
- */
-import { compact, map } from 'lodash';
-import tinycolor from 'tinycolor2';
-
 /**
  * WordPress dependencies
  */
 import {
 	useState,
 	createPortal,
 	useCallback,
-	useEffect,
 	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import transformStyles from '../../utils/transform-styles';
-
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
 
@@ -144,35 +132,9 @@ function setHead( doc, head ) {
 		'<style>body{margin:0}</style>' + head;
 }
 
-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 ) {
+function Iframe( { contentRef, children, head, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
-	useEffect( () => {
-		updateEditorStyles( iframeDocument, editorStyles );
-	}, [ editorStyles ] );
-
 	const setRef = useCallback( ( node ) => {
 		if ( ! node ) {
 			return;
@@ -191,7 +153,6 @@ function Iframe( { contentRef, editorStyles, 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,9 +70,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 
 	useMouseMoveTypingReset( ref );
-	// 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.
+	// Ideally this should be moved to the place where the styles are applied (iframe)
 	const editorStylesRef = useEditorStyles( settings.styles );
 
 	// Allow scrolling "through" popovers over the canvas. This is only called
@@ -114,7 +112,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<Popover.Slot name="block-toolbar" />
 				<Iframe
 					style={ resizedCanvasStyles }
-					editorStyles={ settings.styles }
 					head={ window.__editorStyles.html }
 					ref={ ref }
 					contentRef={ contentRef }