From a58761293497a8d79bbc554d5934faaa9c0be64e Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Thu, 11 May 2023 07:43:22 -0700
Subject: [PATCH] Add editor styles to product editor and iframe editor
 (#38168)

* Add editor styles to product editor and iframe editor

* Make section title css selectors more specific

* Add changelog entry

* Remove additional commented component

* Remove unused import
---
 packages/js/product-editor/changelog/fix-38021       |  4 ++++
 .../js/product-editor/src/blocks/section/editor.scss |  2 +-
 .../src/components/block-editor/block-editor.tsx     |  4 ++++
 .../src/components/iframe-editor/editor-canvas.tsx   | 12 ++++++++++--
 .../src/components/iframe-editor/iframe-editor.tsx   | 11 ++++++++---
 5 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 packages/js/product-editor/changelog/fix-38021

diff --git a/packages/js/product-editor/changelog/fix-38021 b/packages/js/product-editor/changelog/fix-38021
new file mode 100644
index 00000000000..6df229ebaf4
--- /dev/null
+++ b/packages/js/product-editor/changelog/fix-38021
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Add editor styles to product editor and iframe editor
diff --git a/packages/js/product-editor/src/blocks/section/editor.scss b/packages/js/product-editor/src/blocks/section/editor.scss
index 039b05a42db..b8469630403 100644
--- a/packages/js/product-editor/src/blocks/section/editor.scss
+++ b/packages/js/product-editor/src/blocks/section/editor.scss
@@ -6,7 +6,7 @@
 		padding-top: 64px;
 	}
 
-    &__title {
+    .wp-block-woocommerce-product-section__title {
         margin-top: 0;
         margin-bottom: 0;
         font-size: 24px;
diff --git a/packages/js/product-editor/src/components/block-editor/block-editor.tsx b/packages/js/product-editor/src/components/block-editor/block-editor.tsx
index a53e7ca52ad..de33904ec3a 100644
--- a/packages/js/product-editor/src/components/block-editor/block-editor.tsx
+++ b/packages/js/product-editor/src/components/block-editor/block-editor.tsx
@@ -19,6 +19,9 @@ import {
 	EditorSettings,
 	EditorBlockListSettings,
 	ObserveTyping,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore No types for this exist yet.
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 // It doesn't seem to notice the External dependency block whn @ts-ignore is added.
 // eslint-disable-next-line @woocommerce/dependency-group
@@ -100,6 +103,7 @@ export function BlockEditor( {
 					onChange={ onChange }
 					settings={ settings }
 				>
+					<EditorStyles styles={ settings?.styles } />
 					<div className="editor-styles-wrapper">
 						{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
 						{ /* @ts-ignore No types for this exist yet. */ }
diff --git a/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx b/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx
index b2f14718e23..44cfe5e1587 100644
--- a/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx
+++ b/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx
@@ -3,22 +3,29 @@
  */
 import { createElement, Fragment } from '@wordpress/element';
 import {
+	EditorSettings,
+	EditorBlockListSettings,
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore No types for this exist yet.
 	__unstableIframe as Iframe,
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore No types for this exist yet.
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore No types for this exist yet.
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 
 type EditorCanvasProps = {
-	enableResizing: boolean;
 	children: React.ReactNode;
+	enableResizing: boolean;
+	settings: Partial< EditorSettings & EditorBlockListSettings > | undefined;
 };
 
 export function EditorCanvas( {
-	enableResizing,
 	children,
+	enableResizing,
+	settings,
 	...props
 }: EditorCanvasProps ) {
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
@@ -26,6 +33,7 @@ export function EditorCanvas( {
 		<Iframe
 			head={
 				<>
+					<EditorStyles styles={ settings?.styles } />
 					<style>
 						{
 							// Forming a "block formatting context" to prevent margin collapsing.
diff --git a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
index 3f546bfe805..e74df5c3aa5 100644
--- a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
+++ b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
@@ -39,7 +39,7 @@ export function IframeEditor( {
 	initialBlocks = [],
 	onChange,
 	onClose,
-	settings,
+	settings: __settings,
 }: IframeEditorProps ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ blocks, setBlocks ] = useState< BlockInstance[] >( initialBlocks );
@@ -61,11 +61,13 @@ export function IframeEditor( {
 		updateSettings( productBlockEditorSettings );
 	}, [] );
 
+	const settings = __settings || parentEditorSettings;
+
 	return (
 		<div className="woocommerce-iframe-editor">
 			<BlockEditorProvider
 				settings={ {
-					...( settings || parentEditorSettings ),
+					...settings,
 					hasFixedToolbar: true,
 					templateLock: false,
 				} }
@@ -103,7 +105,10 @@ export function IframeEditor( {
 						// @ts-ignore This accepts numbers or strings.
 						height={ sizes.height ?? '100%' }
 					>
-						<EditorCanvas enableResizing={ true }>
+						<EditorCanvas
+							enableResizing={ true }
+							settings={ settings }
+						>
 							{ resizeObserver }
 							<BlockList className="edit-site-block-editor__block-list wp-site-blocks" />
 						</EditorCanvas>