Block styles: remove __unstableElementContext in favour of useStyleOv…

…erride (#54493)
WordPress · Nov 14, 2023 · f1c516c · f1c516c
1 parent f521523
commit f1c516c
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 134 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -17,12 +17,7 @@ import {
 	useMergeRefs,
 	useDebounce,
 } from '@wordpress/compose';
-import {
-	createContext,
-	useState,
-	useMemo,
-	useCallback,
-} from '@wordpress/element';
+import { createContext, useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -40,13 +35,10 @@ import {
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
 
-const elementContext = createContext();
-
 export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
-	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
 		( select ) => {
@@ -115,13 +107,9 @@ function Root( { className, ...settings } ) {
 		settings
 	);
 	return (
-		<elementContext.Provider value={ element }>
-			<IntersectionObserver.Provider value={ intersectionObserver }>
-				<div { ...innerBlocksProps } />
-				{ /* Ensure element and layout styles are always at the end of the document */ }
-				<div ref={ setElement } />
-			</IntersectionObserver.Provider>
-		</elementContext.Provider>
+		<IntersectionObserver.Provider value={ intersectionObserver }>
+			<div { ...innerBlocksProps } />
+		</IntersectionObserver.Provider>
 	);
 }
 
@@ -133,8 +121,6 @@ export default function BlockList( settings ) {
 	);
 }
 
-BlockList.__unstableElementContext = elementContext;
-
 function Items( {
 	placeholder,
 	rootClientId,

diff --git a/packages/block-editor/src/hooks/duotone.js b/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;
 }

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -9,15 +9,14 @@ import classnames from 'classnames';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	Button,
 	ButtonGroup,
 	ToggleControl,
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,8 +28,7 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { kebabCase } from '../utils/object';
-import { useBlockSettings } from './utils';
-import { unlock } from '../lock-unlock';
+import { useBlockSettings, useStyleOverride } from './utils';
 
 const layoutBlockSupportKey = 'layout';
 
@@ -381,17 +379,7 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 		layoutClasses
 	);
 
-	const { setStyleOverride, deleteStyleOverride } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
-	useEffect( () => {
-		if ( ! css ) return;
-		setStyleOverride( selector, { css } );
-		return () => {
-			deleteStyleOverride( selector );
-		};
-	}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
+	useStyleOverride( { css } );
 
 	return (
 		<BlockListBlock
@@ -459,17 +447,7 @@ function BlockWithChildLayoutStyles( { block: BlockListBlock, props } ) {
 		[ `wp-container-content-${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
 	} );
 
-	const { setStyleOverride, deleteStyleOverride } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
-	useEffect( () => {
-		if ( ! css ) return;
-		setStyleOverride( selector, { css } );
-		return () => {
-			deleteStyleOverride( selector );
-		};
-	}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
+	useStyleOverride( { css } );
 
 	return <BlockListBlock { ...props } className={ className } />;
 }

diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
@@ -14,22 +14,16 @@ import {
 } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import {
-	useContext,
-	useMemo,
-	createPortal,
-	Platform,
-} from '@wordpress/element';
+import { useMemo, Platform } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import BlockList from '../components/block-list';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
@@ -368,7 +362,6 @@ export const withPositionStyles = createHigherOrderComponent(
 			hasPositionBlockSupport && ! isPositionDisabled;
 
 		const id = useInstanceId( BlockListBlock );
-		const element = useContext( BlockList.__unstableElementContext );
 
 		// Higher specificity to override defaults in editor UI.
 		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
@@ -392,15 +385,9 @@ export const withPositionStyles = createHigherOrderComponent(
 				!! attributes?.style?.position?.type,
 		} );
 
-		return (
-			<>
-				{ allowPositionStyles &&
-					element &&
-					!! css &&
-					createPortal( <style>{ css }</style>, element ) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
-		);
+		useStyleOverride( { css } );
+
+		return <BlockListBlock { ...props } className={ className } />;
 	},
 	'withPositionStyles'
 );

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo, createPortal } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -19,7 +19,6 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import BlockList from '../components/block-list';
 import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
@@ -34,7 +33,7 @@ import {
 	DimensionsPanel,
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
-import { shouldSkipSerialization } from './utils';
+import { shouldSkipSerialization, useStyleOverride } from './utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 
@@ -484,33 +483,20 @@ const withElementsStyles = createHigherOrderComponent(
 				: undefined;
 		}, [ baseElementSelector, blockElementStyles, props.name ] );
 
-		const element = useContext( BlockList.__unstableElementContext );
+		useStyleOverride( { css: styles } );
 
 		return (
-			<>
-				{ styles &&
-					element &&
-					createPortal(
-						<style
-							dangerouslySetInnerHTML={ {
-								__html: styles,
-							} }
-						/>,
-						element
-					) }
-
-				<BlockListBlock
-					{ ...props }
-					className={
-						props.attributes.style?.elements
-							? classnames(
-									props.className,
-									blockElementsContainerIdentifier
-							  )
-							: props.className
-					}
-				/>
-			</>
+			<BlockListBlock
+				{ ...props }
+				className={
+					props.attributes.style?.elements
+						? classnames(
+								props.className,
+								blockElementsContainerIdentifier
+						  )
+						: props.className
+				}
+			/>
 		);
 	},
 	'withElementsStyles'

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
@@ -2,14 +2,17 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useId } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 /**
  * Removed falsy values from nested object.
@@ -115,6 +118,35 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
 	return skipSerialization;
 }
 
+export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
+	const { setStyleOverride, deleteStyleOverride } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const fallbackId = useId();
+	useEffect( () => {
+		// Unmount if there is CSS and assets are empty.
+		if ( ! css && ! assets ) return;
+		const _id = id || fallbackId;
+		setStyleOverride( _id, {
+			id,
+			css,
+			assets,
+			__unstableType,
+		} );
+		return () => {
+			deleteStyleOverride( _id );
+		};
+	}, [
+		id,
+		css,
+		assets,
+		__unstableType,
+		fallbackId,
+		setStyleOverride,
+		deleteStyleOverride,
+	] );
+}
+
 /**
  * Based on the block and its context, returns an object of all the block settings.
  * This object can be passed as a prop to all the Styles UI components