Block styles: remove __unstableElementContext in favour of useStyleOverride

Author: ellatrix

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,

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';
 
@@ -402,17 +400,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			layoutClasses
 		);
 
-		const { setStyleOverride, deleteStyleOverride } = unlock(
-			useDispatch( blockEditorStore )
-		);
-
-		useEffect( () => {
-			if ( ! css ) return;
-			setStyleOverride( id, { css } );
-			return () => {
-				deleteStyleOverride( id );
-			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		useStyleOverride( { id, css } );
 
 		return (
 			<BlockListBlock
@@ -466,17 +454,7 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 				shouldRenderChildLayoutStyles && !! 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( id, { css } );
-			return () => {
-				deleteStyleOverride( id );
-			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		useStyleOverride( { id, css } );
 
 		return <BlockListBlock { ...props } className={ className } />;
 	},

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 useSetting from '../components/use-setting';
 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';
 
@@ -365,7 +359,6 @@ export const withPositionStyles = createHigherOrderComponent(
 			hasPositionBlockSupport && ! useIsPositionDisabled( props );
 
 		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 }`;
@@ -389,15 +382,9 @@ export const withPositionStyles = createHigherOrderComponent(
 				!! attributes?.style?.position?.type,
 		} );
 
-		return (
-			<>
-				{ allowPositionStyles &&
-					element &&
-					!! css &&
-					createPortal( <style>{ css }</style>, element ) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
-		);
+		useStyleOverride( { id, css } );
+
+		return <BlockListBlock { ...props } className={ className } />;
 	},
 	'withPositionStyles'
 );

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,23 @@ const withElementsStyles = createHigherOrderComponent(
 				: undefined;
 		}, [ baseElementSelector, blockElementStyles, props.name ] );
 
-		const element = useContext( BlockList.__unstableElementContext );
+		useStyleOverride( {
+			id: blockElementsContainerIdentifier,
+			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'

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 } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useSetting } 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,19 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
 	return skipSerialization;
 }
 
+export function useStyleOverride( { id, css } ) {
+	const { setStyleOverride, deleteStyleOverride } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	useEffect( () => {
+		if ( ! css ) return;
+		setStyleOverride( id, { css } );
+		return () => {
+			deleteStyleOverride( id );
+		};
+	}, [ id, css, 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

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

@@ -11,7 +11,7 @@ import { ComposedPrivateInserter as PrivateInserter } from './components/inserte
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
-import { cleanEmptyObject } from './hooks/utils';
+import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
@@ -41,6 +41,7 @@ lock( privateApis, {
 	BlockInfo,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
+	useStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,

packages/block-library/src/gallery/edit.js

@@ -60,7 +60,7 @@ import {
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
-import GapStyles from './gap-styles';
+import useGapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -535,6 +535,11 @@ function GalleryEdit( props ) {
 		...nativeInnerBlockProps,
 	} );
 
+	useGapStyles( {
+		blockGap: attributes.style?.spacing?.blockGap,
+		clientId,
+	} );
+
 	if ( ! hasImages ) {
 		return (
 			<View { ...innerBlocksProps }>
@@ -653,10 +658,6 @@ function GalleryEdit( props ) {
 							addToGallery={ hasImageIds }
 						/>
 					</BlockControls>
-					<GapStyles
-						blockGap={ attributes.style?.spacing?.blockGap }
-						clientId={ clientId }
-					/>
 				</>
 			) }
 			<Gallery

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

@@ -2,13 +2,18 @@
  * WordPress dependencies
  */
 import {
-	BlockList,
 	__experimentalGetGapCSSValue as getGapCSSValue,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useContext, createPortal } from '@wordpress/element';
 
-export default function GapStyles( { blockGap, clientId } ) {
-	const styleElement = useContext( BlockList.__unstableElementContext );
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { useStyleOverride } = unlock( blockEditorPrivateApis );
+
+export default function useGapStyles( { blockGap, clientId } ) {
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
 	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
@@ -35,11 +40,10 @@ export default function GapStyles( { blockGap, clientId } ) {
 		gap: ${ gapValue }
 	}`;
 
-	const GapStyle = () => {
-		return <style>{ gap }</style>;
-	};
+	useStyleOverride( {
+		id: `gallery-gap-${ clientId }`,
+		css: gap,
+	} );
 
-	return gap && styleElement
-		? createPortal( <GapStyle />, styleElement )
-		: null;
+	return null;
 }