diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 00a15d2bcfa48d..34c4a90020e3be 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/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 (
<>
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index a07fa7ce9557e0..1b4cc3ad5afe48 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/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 ) => (
+
+ ) ) }
+
+ );
}
function useBlockStyleVariation( name, variation, clientId ) {
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index f831249881200d..6e79d2b3dbab86 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/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';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 0e5f18a5005b2f..b408693e375345 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/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,
} );
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index aee6136df58888..932905a8effd08 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -25,7 +25,7 @@ const {
ExperimentalBlockEditorProvider,
GlobalStylesContext,
useGlobalStylesOutputWithConfig,
- useUpdateBlockStyleVariationOverridesWithConfig,
+ ExperimentalBlockStyleVariationOverridesWithConfig,
} = unlock( blockEditorPrivateApis );
const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -33,13 +33,6 @@ function isObjectEmpty( object ) {
return ! object || Object.keys( object ).length === 0;
}
-function RevisionStyles( { styles, config } ) {
- const mergedOverrides =
- useUpdateBlockStyleVariationOverridesWithConfig( config );
-
- return ;
-}
-
function Revisions( { userConfig, blocks } ) {
const { base: baseConfig } = useContext( GlobalStylesContext );
@@ -96,12 +89,11 @@ function Revisions( { userConfig, blocks } ) {
>
{ /*
- * 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.
*/ }
-
+