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

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Add editor styles to product editor and iframe editor

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;

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

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.

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>