Refactor so we don't have to change the EditorStyles props

Register revision overrides with useStyleOverride

packages/block-editor/src/components/editor-styles/index.js

@@ -67,35 +67,17 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-function getStyleOverrideById( overrides, id ) {
-	if ( ! overrides?.length || ! id ) {
-		return [];
-	}
-
-	return overrides.find( ( [ _id ] ) => _id === id ) || [];
-}
-
-function EditorStyles( { styles, scope, overrides } ) {
-	const styleOverrides = useSelect(
+function EditorStyles( { styles, scope } ) {
+	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
 	);
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
-		for ( const [ id, override ] of styleOverrides ) {
+		for ( const [ id, override ] of overrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
-			/*
-			 * The `overrides` prop	in EditorStyles,
-			 * allows consumers to override any existing overrides.
-			 */
-			const [ incomingId, incomingOverride ] = getStyleOverrideById(
-				overrides,
-				id
-			);
-			const overrideWithId = incomingId
-				? { ...incomingOverride, id: incomingId }
-				: { ...override, id };
+			const overrideWithId = { ...override, id };
 			if ( index === -1 ) {
 				_styles.push( overrideWithId );
 			} else {
@@ -113,7 +95,7 @@ function EditorStyles( { styles, scope, overrides } ) {
 				.map( ( style ) => style.assets )
 				.join( '' ),
 		];
-	}, [ styles, styleOverrides, overrides, scope ] );
+	}, [ styles, overrides, scope ] );
 
 	return (
 		<>

packages/block-editor/src/hooks/block-style-variation.js

@@ -60,15 +60,23 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
+function OverrideStyles( { override } ) {
+	useStyleOverride( override );
+}
+
 /**
- * This hook is used to generate new block style variation overrides
+ * This component is used to generate new block style variation overrides
  * based on an incoming theme config. If a matching style is found in the config,
- * a new override is created and returned.
+ * a new override is created and returned. The overrides can be used in conjunction with
+ * useStyleOverride to apply the new styles to the editor.
  *
- * @param {Object} config A global styles object, containing settings and styles.
- * @return {Array} An array of new block variation overrides.
+ * @param {Object} props        Props.
+ * @param {Object} props.config A global styles object, containing settings and styles.
+ * @return {JSX.Element} An array of new block variation overrides.
  */
-export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
+export function ExperimentalBlockStyleVariationOverridesWithConfig( {
+	config,
+} ) {
 	const { getBlockStyles, overrides } = useSelect(
 		( select ) => ( {
 			getBlockStyles: select( blocksStore ).getBlockStyles,
@@ -78,10 +86,19 @@ export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
 	);
 	const { getBlockName } = useSelect( blockEditorStore );
 
-	return useMemo( () => {
+	const overridesWithConfig = useMemo( () => {
 		const newOverrides = [];
-		for ( const [ id, override ] of overrides ) {
-			if ( override?.variation && override?.clientId ) {
+		const clientIds = [];
+		for ( const [ , override ] of overrides ) {
+			if (
+				override?.variation &&
+				override?.clientId &&
+				/*
+				 * Because this component overwrites existing style overrides,
+				 * filter out any overrides that are already present in the store.
+				 */
+				! clientIds.includes( override.clientId )
+			) {
 				const blockName = getBlockName( override.clientId );
 				const configStyles =
 					config?.styles?.blocks?.[ blockName ]?.variations?.[
@@ -130,15 +147,30 @@ export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
 							variationStyles: true,
 						}
 					);
-					newOverrides.push( [
-						id,
-						{ ...override, css: variationStyles },
-					] );
+					newOverrides.push( {
+						id: `${ override.variation }-${ override.clientId }`,
+						css: variationStyles,
+						__unstableType: 'variation',
+						variation: override.variation,
+						// The clientId will be stored with the override and used to ensure
+						// the order of overrides matches the order of blocks so that the
+						// correct CSS cascade is maintained.
+						clientId: override.clientId,
+					} );
+					clientIds.push( override.clientId );
 				}
 			}
 		}
 		return newOverrides;
-	}, [ config, overrides ] );
+	}, [ config, overrides, getBlockStyles ] );
+
+	return (
+		<>
+			{ overridesWithConfig.map( ( override ) => (
+				<OverrideStyles key={ override.id } override={ override } />
+			) ) }
+		</>
+	);
 }
 
 function useBlockStyleVariation( name, variation, clientId ) {

packages/block-editor/src/hooks/index.js

@@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
-export { useUpdateBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { ExperimentalBlockStyleVariationOverridesWithConfig } from './block-style-variation';

packages/block-editor/src/private-apis.js

@@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import {
 	useLayoutClasses,
 	useLayoutStyles,
-	useUpdateBlockStyleVariationOverridesWithConfig,
+	ExperimentalBlockStyleVariationOverridesWithConfig,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
@@ -92,5 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
-	useUpdateBlockStyleVariationOverridesWithConfig,
+	ExperimentalBlockStyleVariationOverridesWithConfig,
 } );

packages/edit-site/src/components/revisions/index.js

@@ -25,21 +25,14 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
-	useUpdateBlockStyleVariationOverridesWithConfig,
+	ExperimentalBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function RevisionStyles( { styles, config } ) {
-	const mergedOverrides =
-		useUpdateBlockStyleVariationOverridesWithConfig( config );
-
-	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;
-}
-
 function Revisions( { userConfig, blocks } ) {
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
@@ -96,12 +89,11 @@ function Revisions( { userConfig, blocks } ) {
 					>
 						<BlockList renderAppender={ false } />
 						{ /*
-						 * Styles are printed at the end of the document,
-						 * so they can access any registered style overrides,
-						 * which are only stored after the block list is rendered.
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
 						 */ }
-						<RevisionStyles
-							styles={ editorStyles }
+						<EditorStyles styles={ editorStyles } />
+						<ExperimentalBlockStyleVariationOverridesWithConfig
 							config={ mergedConfig }
 						/>
 					</ExperimentalBlockEditorProvider>