[block-editor][BlockEditor] Fix: added specific CSS class to apply th…

…e editor styles, like font-family, to use the same style as the frontend one
yithemes · Aug 28, 2024 · 70ab1d4 · 70ab1d4
1 parent 01098a4
commit 70ab1d4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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 }/>