From 70ab1d43380af00c0ecf3cdaf7897532bc439b61 Mon Sep 17 00:00:00 2001
From: Leanza Francesco <leanzafrancesco@gmail.com>
Date: Wed, 28 Aug 2024 14:56:28 +0200
Subject: [PATCH] [block-editor][BlockEditor] Fix: added specific CSS class to
 apply the editor styles, like font-family, to use the same style as the
 frontend one

---
 .../src/block-editor-preview/BlockEditorPreview.tsx  | 11 ++++++++---
 .../src/block-editor/BlockEditorWritingFlow.tsx      | 12 +++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/block-editor-preview/BlockEditorPreview.tsx b/packages/block-editor/src/block-editor-preview/BlockEditorPreview.tsx
index aa9e605..76c643a 100644
--- a/packages/block-editor/src/block-editor-preview/BlockEditorPreview.tsx
+++ b/packages/block-editor/src/block-editor-preview/BlockEditorPreview.tsx
@@ -12,7 +12,7 @@ import {
 // @ts-ignore No types exists for this yet.
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
-import { styled } from "@lapilli-ui/styles";
+import { generateComponentSlotClasses, styled } from "@lapilli-ui/styles";
 
 import type { BlockEditorPreviewProps } from "./types";
 import useLayoutClasses from "../utils/use-layout-classes";
@@ -26,12 +26,17 @@ const BlockEditorPreviewRoot = styled( 'div', { name: 'BlockEditorPreview', slot
 	},
 } ) );
 
+const classes = generateComponentSlotClasses(
+	'BlockEditorPreview',
+	[ 'root' ]
+);
+
 function BlockEditorPreview( { className, blocks, settings = {}, ...other }: BlockEditorPreviewProps ) {
 
 	const layoutClasses = useLayoutClasses();
 
-	return <BlockEditorPreviewRoot className={ classNames( 'editor-styles-wrapper', className ) } { ...other }>
-		<EditorStyles styles={ settings.styles ?? [] }/>
+	return <BlockEditorPreviewRoot className={ classNames( classes.root, 'editor-styles-wrapper', className ) } { ...other }>
+		<EditorStyles styles={ settings.styles ?? [] } scope={ `.${ classes.root }` }/>
 		<Disabled>
 			<ShortcutProvider>
 				<BlockEditorProvider value={ blocks } settings={ settings }>
diff --git a/packages/block-editor/src/block-editor/BlockEditorWritingFlow.tsx b/packages/block-editor/src/block-editor/BlockEditorWritingFlow.tsx
index 1ac055f..ac9b0e4 100644
--- a/packages/block-editor/src/block-editor/BlockEditorWritingFlow.tsx
+++ b/packages/block-editor/src/block-editor/BlockEditorWritingFlow.tsx
@@ -18,9 +18,10 @@ import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { drawerRight } from '@wordpress/icons';
 import { createBlock, BlockInstance } from "@wordpress/blocks";
 
-import { styled } from "@lapilli-ui/styles";
+import { generateComponentSlotClasses, styled } from "@lapilli-ui/styles";
 import useLayoutClasses from "../utils/use-layout-classes";
 import { useLosingFocusFix } from "./utils/useLosingFocusFix";
+import classNames from "classnames";
 
 type BlockEditorWritingFlowProps = {
 	blocks: BlockInstance[];
@@ -60,6 +61,11 @@ const BlockEditorToolbarActionsRoot = styled( 'div', { name: 'BlockEditorToolbar
 	}
 } ) );
 
+const classes = generateComponentSlotClasses(
+	'BlockEditorWritingFlow',
+	[ 'writingFlow' ]
+);
+
 export default function BlockEditorWritingFlow(
 	{
 		blocks,
@@ -108,11 +114,11 @@ export default function BlockEditorWritingFlow(
 
 	return <BlockEditorWritingFlowRoot ref={ rootRef }>
 		<BlockTools>
-			<EditorStyles styles={ blockEditorSettings?.styles ?? [] }/>
+			<EditorStyles styles={ blockEditorSettings?.styles ?? [] } scope={ `.${ classes.writingFlow }` }/>
 			<BlockEditorWritingFlowWrapper>
 				<WritingFlow
 					// @ts-ignore className is a valid prop for WritingFlow.
-					className="editor-styles-wrapper"
+					className={ classNames( classes.writingFlow, 'editor-styles-wrapper' ) }
 				>
 					<ObserveTyping>
 						<BlockList className={ layoutClasses }/>