Restore instanceId and avoid passing id to useStyleOverride

Author: ellatrix

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

@@ -16,7 +16,6 @@ import {
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -34,12 +33,10 @@ import {
 } from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
-import { useBlockSettings } from './utils';
+import { useBlockSettings, useStyleOverride } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-import { store as blockEditorStore } from '../store';
-import { unlock } from '../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
@@ -291,28 +288,34 @@ function DuotoneStyles( {
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	const { setStyleOverride, deleteStyleOverride } = unlock(
-		useDispatch( blockEditorStore )
+	useStyleOverride(
+		isValidFilter
+			? {
+					css:
+						colors !== 'unset'
+							? getDuotoneStylesheet( selector, filterId )
+							: getDuotoneUnsetStylesheet( selector ),
+					__unstableType: 'presets',
+			  }
+			: undefined
+	);
+	useStyleOverride(
+		isValidFilter
+			? {
+					assets:
+						colors !== 'unset'
+							? getDuotoneFilter( filterId, colors )
+							: '',
+					__unstableType: 'svgs',
+			  }
+			: undefined
 	);
 
 	const blockElement = useBlockElement( clientId );
 
 	useEffect( () => {
 		if ( ! isValidFilter ) return;
 
-		setStyleOverride( filterId, {
-			css:
-				colors !== 'unset'
-					? getDuotoneStylesheet( selector, filterId )
-					: getDuotoneUnsetStylesheet( selector ),
-			__unstableType: 'presets',
-		} );
-		setStyleOverride( `duotone-${ filterId }`, {
-			assets:
-				colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '',
-			__unstableType: 'svgs',
-		} );
-
 		// Safari does not always update the duotone filter when the duotone colors
 		// are changed. When using Safari, force the block element to be repainted by
 		// the browser to ensure any changes are reflected visually. This logic matches
@@ -329,20 +332,7 @@ function DuotoneStyles( {
 			blockElement.offsetHeight;
 			blockElement.style.display = display;
 		}
-
-		return () => {
-			deleteStyleOverride( filterId );
-			deleteStyleOverride( `duotone-${ filterId }` );
-		};
-	}, [
-		isValidFilter,
-		blockElement,
-		colors,
-		selector,
-		filterId,
-		setStyleOverride,
-		deleteStyleOverride,
-	] );
+	}, [ isValidFilter, blockElement ] );
 
 	return null;
 }

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
@@ -17,7 +17,6 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useId } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -361,7 +360,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 		} );
 		const shouldRenderLayoutStyles =
 			blockSupportsLayout && ! disableLayoutStyles;
-		const id = useId();
+		const id = useInstanceId( BlockListBlock );
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
 			getBlockSupport( name, layoutBlockSupportKey ) || {};
@@ -433,7 +432,7 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 		const shouldRenderChildLayoutStyles =
 			hasChildLayout && ! disableLayoutStyles;
 
-		const id = useId();
+		const id = useInstanceId( BlockListBlock );
 		const selector = `.wp-container-content-${ id }`;
 
 		let css = '';
@@ -455,7 +454,7 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 				shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
 		} );
 
-		useStyleOverride( { id, css } );
+		useStyleOverride( { css } );
 
 		return <BlockListBlock { ...props } className={ className } />;
 	},

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

@@ -12,9 +12,9 @@ import {
 	BaseControl,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo, Platform, useId } from '@wordpress/element';
+import { useMemo, Platform } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -361,7 +361,7 @@ export const withPositionStyles = createHigherOrderComponent(
 		const allowPositionStyles =
 			hasPositionBlockSupport && ! isPositionDisabled;
 
-		const id = useId();
+		const id = useInstanceId( BlockListBlock );
 
 		// Higher specificity to override defaults in editor UI.
 		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
@@ -385,7 +385,7 @@ export const withPositionStyles = createHigherOrderComponent(
 				!! attributes?.style?.position?.type,
 		} );
 
-		useStyleOverride( { id, css } );
+		useStyleOverride( { css } );
 
 		return <BlockListBlock { ...props } className={ className } />;
 	},

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

@@ -6,14 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo, useId } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
 	hasBlockSupport,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 
 /**
@@ -400,7 +400,9 @@ const elementTypes = [
  */
 const withElementsStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const blockElementsContainerIdentifier = `wp-elements-${ useId() }`;
+		const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
+			BlockListBlock
+		) }`;
 
 		// The .editor-styles-wrapper selector is required on elements styles. As it is
 		// added to all other editor styles, not providing it causes reset and global
@@ -481,10 +483,7 @@ const withElementsStyles = createHigherOrderComponent(
 				: undefined;
 		}, [ baseElementSelector, blockElementStyles, props.name ] );
 
-		useStyleOverride( {
-			id: blockElementsContainerIdentifier,
-			css: styles,
-		} );
+		useStyleOverride( { css: styles } );
 
 		return (
 			<BlockListBlock

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useEffect, useId } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
 /**
@@ -118,17 +118,19 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
 	return skipSerialization;
 }
 
-export function useStyleOverride( { id, css } ) {
+export function useStyleOverride( style ) {
 	const { setStyleOverride, deleteStyleOverride } = unlock(
 		useDispatch( blockEditorStore )
 	);
+	const fallbackId = useId();
 	useEffect( () => {
-		if ( ! id || ! css ) return;
-		setStyleOverride( id, { css } );
+		if ( ! style ) return;
+		const id = style.id || fallbackId;
+		setStyleOverride( id, style );
 		return () => {
 			deleteStyleOverride( id );
 		};
-	}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+	}, [ fallbackId, style, setStyleOverride, deleteStyleOverride ] );
 }
 
 /**

packages/block-library/src/gallery/gap-styles.js

@@ -40,10 +40,7 @@ export default function GapStyles( { blockGap, clientId } ) {
 		gap: ${ gapValue }
 	}`;
 
-	useStyleOverride( {
-		id: `gallery-gap-${ clientId }`,
-		css: gap,
-	} );
+	useStyleOverride( { css: gap } );
 
 	return null;
 }