@wordpress/block-editor 12.13.0 → 12.14.0

package/src/hooks/layout.js

@@ -9,7 +9,7 @@ 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,
@@ -17,7 +17,6 @@ import {
 	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';
 
@@ -333,7 +331,7 @@ export function addAttribute( settings ) {
  *
  * @return {Function} Wrapped component.
  */
-export const withInspectorControls = createHigherOrderComponent(
+export const withLayoutControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const supportLayout = hasLayoutBlockSupport( props.name );
 
@@ -342,9 +340,55 @@ export const withInspectorControls = createHigherOrderComponent(
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},
-	'withInspectorControls'
+	'withLayoutControls'
 );
 
+function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
+	const { name, attributes } = props;
+	const id = useInstanceId( BlockListBlock );
+	const { layout } = attributes;
+	const { default: defaultBlockLayout } =
+		getBlockSupport( name, layoutBlockSupportKey ) || {};
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || defaultBlockLayout || {};
+	const layoutClasses = useLayoutClasses( attributes, name );
+
+	// Higher specificity to override defaults from theme.json.
+	const selector = `.wp-container-${ id }.wp-container-${ id }`;
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
+
+	// Get CSS string for the current layout type.
+	// The CSS and `style` element is only output if it is not empty.
+	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
+	const css = fullLayoutType?.getLayoutStyle?.( {
+		blockName: name,
+		selector,
+		layout: usedLayout,
+		style: attributes?.style,
+		hasBlockGapSupport,
+	} );
+
+	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
+	const layoutClassNames = classnames(
+		{
+			[ `wp-container-${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
+		},
+		layoutClasses
+	);
+
+	useStyleOverride( { css } );
+
+	return (
+		<BlockListBlock
+			{ ...props }
+			__unstableLayoutClassNames={ layoutClassNames }
+		/>
+	);
+}
+
 /**
  * Override the default block element to add the layout styles.
  *
@@ -354,76 +398,60 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const blockSupportsLayout = hasLayoutBlockSupport( name );
-		const disableLayoutStyles = useSelect( ( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return !! getSettings().disableLayoutStyles;
-		} );
-		const shouldRenderLayoutStyles =
-			blockSupportsLayout && ! disableLayoutStyles;
-		const id = useInstanceId( BlockListBlock );
-		const { layout } = attributes;
-		const { default: defaultBlockLayout } =
-			getBlockSupport( name, layoutBlockSupportKey ) || {};
-		const usedLayout =
-			layout?.inherit || layout?.contentSize || layout?.wideSize
-				? { ...layout, type: 'constrained' }
-				: layout || defaultBlockLayout || {};
-		const layoutClasses = blockSupportsLayout
-			? useLayoutClasses( attributes, name )
-			: null;
-		// Higher specificity to override defaults from theme.json.
-		const selector = `.wp-container-${ id }.wp-container-${ id }`;
-		const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
-		const hasBlockGapSupport = blockGapSupport !== null;
-
-		// Get CSS string for the current layout type.
-		// The CSS and `style` element is only output if it is not empty.
-		let css;
-		if ( shouldRenderLayoutStyles ) {
-			const fullLayoutType = getLayoutType(
-				usedLayout?.type || 'default'
-			);
-			css = fullLayoutType?.getLayoutStyle?.( {
-				blockName: name,
-				selector,
-				layout: usedLayout,
-				style: attributes?.style,
-				hasBlockGapSupport,
-			} );
-		}
-
-		// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
-		const layoutClassNames = classnames(
-			{
-				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+		const blockSupportsLayout = hasLayoutBlockSupport( props.name );
+		const shouldRenderLayoutStyles = useSelect(
+			( select ) => {
+				// The callback returns early to avoid block editor subscription.
+				if ( ! blockSupportsLayout ) {
+					return false;
+				}
+
+				return ! select( blockEditorStore ).getSettings()
+					.disableLayoutStyles;
 			},
-			layoutClasses
+			[ blockSupportsLayout ]
 		);
 
-		const { setStyleOverride, deleteStyleOverride } = unlock(
-			useDispatch( blockEditorStore )
-		);
-
-		useEffect( () => {
-			if ( ! css ) return;
-			setStyleOverride( selector, { css } );
-			return () => {
-				deleteStyleOverride( selector );
-			};
-		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
+		if ( ! shouldRenderLayoutStyles ) {
+			return <BlockListBlock { ...props } />;
+		}
 
 		return (
-			<BlockListBlock
-				{ ...props }
-				__unstableLayoutClassNames={ layoutClassNames }
-			/>
+			<BlockWithLayoutStyles block={ BlockListBlock } props={ props } />
 		);
 	},
 	'withLayoutStyles'
 );
 
+function BlockWithChildLayoutStyles( { block: BlockListBlock, props } ) {
+	const layout = props.attributes.style?.layout ?? {};
+	const { selfStretch, flexSize } = layout;
+
+	const id = useInstanceId( BlockListBlock );
+	const selector = `.wp-container-content-${ id }`;
+
+	let css = '';
+	if ( selfStretch === 'fixed' && flexSize ) {
+		css = `${ selector } {
+				flex-basis: ${ flexSize };
+				box-sizing: border-box;
+			}`;
+	} else if ( selfStretch === 'fill' ) {
+		css = `${ selector } {
+				flex-grow: 1;
+			}`;
+	}
+
+	// Attach a `wp-container-content` id-based classname.
+	const className = classnames( props.className, {
+		[ `wp-container-content-${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
+	} );
+
+	useStyleOverride( { css } );
+
+	return <BlockListBlock { ...props } className={ className } />;
+}
+
 /**
  * Override the default block element to add the child layout styles.
  *
@@ -433,52 +461,33 @@ export const withLayoutStyles = createHigherOrderComponent(
  */
 export const withChildLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { attributes } = props;
-		const { style: { layout = {} } = {} } = attributes;
+		const layout = props.attributes.style?.layout ?? {};
 		const { selfStretch, flexSize } = layout;
 		const hasChildLayout = selfStretch || flexSize;
-		const disableLayoutStyles = useSelect( ( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return !! getSettings().disableLayoutStyles;
-		} );
-		const shouldRenderChildLayoutStyles =
-			hasChildLayout && ! disableLayoutStyles;
 
-		const id = useInstanceId( BlockListBlock );
-		const selector = `.wp-container-content-${ id }`;
+		const shouldRenderChildLayoutStyles = useSelect(
+			( select ) => {
+				// The callback returns early to avoid block editor subscription.
+				if ( ! hasChildLayout ) {
+					return false;
+				}
 
-		let css = '';
+				return ! select( blockEditorStore ).getSettings()
+					.disableLayoutStyles;
+			},
+			[ hasChildLayout ]
+		);
 
-		if ( selfStretch === 'fixed' && flexSize ) {
-			css += `${ selector } {
-				flex-basis: ${ flexSize };
-				box-sizing: border-box;
-			}`;
-		} else if ( selfStretch === 'fill' ) {
-			css += `${ selector } {
-				flex-grow: 1;
-			}`;
+		if ( ! shouldRenderChildLayoutStyles ) {
+			return <BlockListBlock { ...props } />;
 		}
 
-		// Attach a `wp-container-content` id-based classname.
-		const className = classnames( props?.className, {
-			[ `wp-container-content-${ id }` ]:
-				shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
-		} );
-
-		const { setStyleOverride, deleteStyleOverride } = unlock(
-			useDispatch( blockEditorStore )
+		return (
+			<BlockWithChildLayoutStyles
+				block={ BlockListBlock }
+				props={ props }
+			/>
 		);
-
-		useEffect( () => {
-			if ( ! css ) return;
-			setStyleOverride( selector, { css } );
-			return () => {
-				deleteStyleOverride( selector );
-			};
-		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
-
-		return <BlockListBlock { ...props } className={ className } />;
 	},
 	'withChildLayoutStyles'
 );
@@ -501,5 +510,5 @@ addFilter(
 addFilter(
 	'editor.BlockEdit',
 	'core/editor/layout/with-inspector-controls',
-	withInspectorControls
+	withLayoutControls
 );

package/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';
 
@@ -329,7 +323,7 @@ export function PositionPanel( props ) {
  *
  * @return {Function} Wrapped component.
  */
-export const withInspectorControls = createHigherOrderComponent(
+export const withPositionControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
 		const positionSupport = hasBlockSupport(
@@ -346,7 +340,7 @@ export const withInspectorControls = createHigherOrderComponent(
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},
-	'withInspectorControls'
+	'withPositionControls'
 );
 
 /**
@@ -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'
 );
@@ -413,5 +400,5 @@ addFilter(
 addFilter(
 	'editor.BlockEdit',
 	'core/editor/position/with-inspector-controls',
-	withInspectorControls
+	withPositionControls
 );

package/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';
 
@@ -354,7 +353,7 @@ export function addEditProps( settings ) {
  *
  * @return {Function} Wrapped component.
  */
-export const withBlockControls = createHigherOrderComponent(
+export const withBlockStyleControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		if ( ! hasStyleSupport( props.name ) ) {
 			return <BlockEdit key="edit" { ...props } />;
@@ -378,7 +377,7 @@ export const withBlockControls = createHigherOrderComponent(
 			</>
 		);
 	},
-	'withToolbarControls'
+	'withBlockStyleControls'
 );
 
 // Defines which element types are supported, including their hover styles or
@@ -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'
@@ -537,7 +523,7 @@ addFilter(
 addFilter(
 	'editor.BlockEdit',
 	'core/style/with-block-controls',
-	withBlockControls
+	withBlockStyleControls
 );
 
 addFilter(

package/src/hooks/test/align.js

@@ -22,7 +22,7 @@ import BlockEdit from '../../components/block-edit';
 import BlockEditorProvider from '../../components/provider';
 import {
 	getValidAlignments,
-	withToolbarControls,
+	withAlignmentControls,
 	withDataAlign,
 	addAssignedAlign,
 } from '../align';
@@ -157,7 +157,7 @@ describe( 'align', () => {
 		} );
 	} );
 
-	describe( 'withToolbarControls', () => {
+	describe( 'withAlignControls', () => {
 		const componentProps = {
 			name: 'core/foo',
 			attributes: {},
@@ -167,7 +167,7 @@ describe( 'align', () => {
 		it( 'should do nothing if no valid alignments', () => {
 			registerBlockType( 'core/foo', blockSettings );
 
-			const EnhancedComponent = withToolbarControls(
+			const EnhancedComponent = withAlignmentControls(
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 
@@ -197,7 +197,7 @@ describe( 'align', () => {
 				},
 			} );
 
-			const EnhancedComponent = withToolbarControls(
+			const EnhancedComponent = withAlignmentControls(
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 

package/src/hooks/utils.js

@@ -2,7 +2,8 @@
  * 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
@@ -10,6 +11,8 @@ import { useMemo } from '@wordpress/element';
 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

package/src/private-apis.js

@@ -10,8 +10,9 @@ import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
+import BlockContextualToolbar from './components/block-tools/block-contextual-toolbar';
 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,8 +42,10 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
+	BlockContextualToolbar,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
+	useStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,