Filter styles coming from the EditorProvider, not before it's passed …

…to EditorProvider
WordPress · Jul 19, 2023 · 00fde60 · youknowriad · Jul 19, 2023 · 00fde60
1 parent 01a9803
commit 00fde60
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 45 deletions.
diff --git a/packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php b/packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php
@@ -10,7 +10,10 @@
 add_action(
 	'block_editor_settings_all',
 	function( $settings ) {
-		$settings['styles'][] = array( 'css' => 'p { border: 1px solid red }' );
+		$settings['styles'][] = array(
+			'css' => 'p { border: 1px solid red }',
+			'__unstableType' => 'plugin',
+		);
 		return $settings;
 	}
 );
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -18,7 +18,10 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	BlockBreadcrumb,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
@@ -51,6 +54,9 @@ import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
 import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -92,8 +98,42 @@ function Layout() {
 		styles,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
+		const hasThemeStyles = isFeatureActive( 'themeStyles' );
+
+		const themeStyles = [];
+		const presetStyles = [];
+		editorSettings.styles?.forEach( ( style ) => {
+			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
+				themeStyles.push( style );
+			} else {
+				presetStyles.push( style );
+			}
+		} );
+
+		const defaultEditorStyles = [
+			...editorSettings.defaultEditorStyles,
+			...presetStyles,
+		];
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if (
+			! editorSettings.disableLayoutStyles &&
+			! ( hasThemeStyles && themeStyles.length )
+		) {
+			defaultEditorStyles.push( {
+				css: getLayoutStyles( {
+					style: {},
+					selector: 'body',
+					hasBlockGapSupport: false,
+					hasFallbackGapSupport: true,
+					fallbackGapValue: '0.5em',
+				} ),
+			} );
+		}
 
 		return {
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
@@ -126,7 +166,10 @@ function Layout() {
 			),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			styles: editorSettings.styles,
+			styles:
+				hasThemeStyles && themeStyles.length
+					? editorSettings.styles
+					: defaultEditorStyles,
 		};
 	}, [] );
 

diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -9,7 +9,6 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -28,7 +27,6 @@ import { unlock } from './lock-unlock';
 import useCommonCommands from './hooks/commands/use-common-commands';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
@@ -39,7 +37,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		focusMode,
 		isDistractionFree,
 		hasInlineToolbar,
-		hasThemeStyles,
 		post,
 		preferredStyleVariations,
 		hiddenBlockTypes,
@@ -86,7 +83,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				focusMode: isFeatureActive( 'focusMode' ),
 				isDistractionFree: isFeatureActive( 'distractionFree' ),
 				hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
-				hasThemeStyles: isFeatureActive( 'themeStyles' ),
 				preferredStyleVariations: select( preferencesStore ).get(
 					'core/edit-post',
 					'preferredStyleVariations'
@@ -143,43 +139,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 			);
 		}
 
-		const themeStyles = [];
-		const presetStyles = [];
-		settings.styles?.forEach( ( style ) => {
-			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
-				themeStyles.push( style );
-			} else {
-				presetStyles.push( style );
-			}
-		} );
-
-		const defaultEditorStyles = [
-			...settings.defaultEditorStyles,
-			...presetStyles,
-		];
-
-		// If theme styles are not present or displayed, ensure that
-		// base layout styles are still present in the editor.
-		if (
-			! settings.disableLayoutStyles &&
-			! ( hasThemeStyles && themeStyles.length )
-		) {
-			defaultEditorStyles.push( {
-				css: getLayoutStyles( {
-					style: {},
-					selector: 'body',
-					hasBlockGapSupport: false,
-					hasFallbackGapSupport: true,
-					fallbackGapValue: '0.5em',
-				} ),
-			} );
-		}
-
-		result.styles =
-			hasThemeStyles && themeStyles.length
-				? settings.styles
-				: defaultEditorStyles;
-
 		return result;
 	}, [
 		settings,
@@ -193,7 +152,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		setIsInserterOpened,
 		updatePreferredStyleVariations,
 		keepCaretInsideBlock,
-		hasThemeStyles,
 	] );
 
 	if ( ! post ) {