From ffad4ebc3a25dc80b90e8b9c8dcd5a8adf5a079d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <andres.maneiro@automattic.com>
Date: Thu, 4 Feb 2021 18:18:46 +0100
Subject: [PATCH 1/3] Make iframe use editor styles

---
 .../src/components/iframe/index.js            | 28 ++++++++++++++++++-
 .../src/components/block-editor/index.js      |  1 +
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 1407ad0bdc73d..6ecf053ed3f19 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import mergeRefs from 'react-merge-refs';
+import { compact, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,10 +11,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 +143,27 @@ 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 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 +182,7 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 			setHead( contentDocument, head );
 			setBodyClassName( contentDocument );
 			styleSheetsCompat( contentDocument );
+			updateEditorStyles( contentDocument, editorStyles );
 			bubbleEvents( contentDocument );
 			setBodyClassName( contentDocument );
 
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index d9cf7cee964ba..aac855b78df3a 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -112,6 +112,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 }

From 8acf40a2b9e090c98b6f8e58abd7f34915a0e390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <andres.maneiro@automattic.com>
Date: Thu, 4 Feb 2021 18:20:09 +0100
Subject: [PATCH 2/3] Update comment

---
 packages/edit-site/src/components/block-editor/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index aac855b78df3a..3cb8e58cd10e4 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/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

From 7329efbeefdcbc0f06f9c8ade46b98eb05d58aaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <andres.maneiro@automattic.com>
Date: Thu, 4 Feb 2021 18:48:28 +0100
Subject: [PATCH 3/3] Port dark-theme class

---
 packages/block-editor/src/components/iframe/index.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 6ecf053ed3f19..32366d1e3863e 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -3,6 +3,7 @@
  */
 import mergeRefs from 'react-merge-refs';
 import { compact, map } from 'lodash';
+import tinycolor from 'tinycolor2';
 
 /**
  * WordPress dependencies
@@ -148,8 +149,16 @@ function updateEditorStyles( doc, styles ) {
 		return;
 	}
 
-	const updatedStyles = transformStyles( styles, '.editor-styles-wrapper' );
+	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;