Fetching overrides in the hook

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

@@ -16,6 +16,7 @@ import {
 import { useStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
+import { unlock } from '../lock-unlock';
 
 const VARIATION_PREFIX = 'is-style-';
 
@@ -64,20 +65,20 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
  * based on an incoming theme config. If a matching style is found in the config,
  * a new override is created and returned.
  *
- * @param {Object}               config             A global styles object, containing settings and styles.
- * @param {Array<Array, Object>} variationOverrides An array of existing block variation overrides.
+ * @param {Object} config A global styles object, containing settings and styles.
  * @return {Array} An array of new block variation overrides.
  */
-export function useUpdateBlockVariationOverridesWithConfig(
-	config,
-	variationOverrides = []
-) {
+export function useUpdateBlockVariationOverridesWithConfig( config ) {
+	const overrides = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[]
+	);
 	const { getBlockStyles } = useSelect( blocksStore );
 	const { getBlockName } = useSelect( blockEditorStore );
 
 	return useMemo( () => {
 		const newOverrides = [];
-		for ( const [ id, override ] of variationOverrides ) {
+		for ( const [ id, override ] of overrides ) {
 			if ( override?.variation && override?.clientId ) {
 				const blockName = getBlockName( override.clientId );
 				const configStyles =
@@ -135,7 +136,7 @@ export function useUpdateBlockVariationOverridesWithConfig(
 			}
 		}
 		return newOverrides;
-	}, [ config, variationOverrides ] );
+	}, [ config, overrides ] );
 }
 
 function useBlockStyleVariation( name, variation, clientId ) {

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

@@ -34,15 +34,8 @@ function isObjectEmpty( object ) {
 }
 
 function RevisionStyles( { styles, config } ) {
-	const variationOverrides = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
-		[]
-	);
-
-	const mergedOverrides = useUpdateBlockVariationOverridesWithConfig(
-		config,
-		variationOverrides
-	);
+	const mergedOverrides =
+		useUpdateBlockVariationOverridesWithConfig( config );
 
 	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;
 }
@@ -102,6 +95,11 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<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.
+						 */ }
 						<RevisionStyles
 							styles={ editorStyles }
 							config={ mergedConfig }