@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/image-editor/use-transform-image.js

@@ -1,47 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-function useTransformState( { url, naturalWidth, naturalHeight } ) {
+export default function useTransformImage( {
+	url,
+	naturalWidth,
+	naturalHeight,
+} ) {
 	const [ editedUrl, setEditedUrl ] = useState();
 	const [ crop, setCrop ] = useState();
 	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ zoom, setZoom ] = useState();
-	const [ rotation, setRotation ] = useState();
-	const [ aspect, setAspect ] = useState();
-	const [ defaultAspect, setDefaultAspect ] = useState();
-
-	const initializeTransformValues = useCallback( () => {
-		setPosition( { x: 0, y: 0 } );
-		setZoom( 100 );
-		setRotation( 0 );
-		setAspect( naturalWidth / naturalHeight );
-		setDefaultAspect( naturalWidth / naturalHeight );
-	}, [
-		naturalWidth,
-		naturalHeight,
-		setPosition,
-		setZoom,
-		setRotation,
-		setAspect,
-		setDefaultAspect,
-	] );
+	const [ zoom, setZoom ] = useState( 100 );
+	const [ rotation, setRotation ] = useState( 0 );
+	const defaultAspect = naturalWidth / naturalHeight;
+	const [ aspect, setAspect ] = useState( defaultAspect );
 
 	const rotateClockwise = useCallback( () => {
 		const angle = ( rotation + 90 ) % 360;
 
-		let naturalAspectRatio = naturalWidth / naturalHeight;
+		let naturalAspectRatio = defaultAspect;
 
 		if ( rotation % 180 === 90 ) {
-			naturalAspectRatio = naturalHeight / naturalWidth;
+			naturalAspectRatio = 1 / defaultAspect;
 		}
 
 		if ( angle === 0 ) {
 			setEditedUrl();
 			setRotation( angle );
-			setAspect( naturalWidth / naturalHeight );
+			setAspect( defaultAspect );
 			setPosition( {
 				x: -( position.y * naturalAspectRatio ),
 				y: position.x * naturalAspectRatio,
@@ -100,15 +88,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		if ( typeof imgCrossOrigin === 'string' ) {
 			el.crossOrigin = imgCrossOrigin;
 		}
-	}, [
-		rotation,
-		naturalWidth,
-		naturalHeight,
-		setEditedUrl,
-		setRotation,
-		setAspect,
-		setPosition,
-	] );
+	}, [ rotation, defaultAspect ] );
 
 	return useMemo(
 		() => ( {
@@ -126,37 +106,16 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 			aspect,
 			setAspect,
 			defaultAspect,
-			initializeTransformValues,
 		} ),
 		[
 			editedUrl,
-			setEditedUrl,
 			crop,
-			setCrop,
 			position,
-			setPosition,
 			zoom,
-			setZoom,
 			rotation,
-			setRotation,
 			rotateClockwise,
 			aspect,
-			setAspect,
 			defaultAspect,
-			initializeTransformValues,
 		]
 	);
 }
-
-export default function useTransformImage( imageProperties, isEditing ) {
-	const transformState = useTransformState( imageProperties );
-	const { initializeTransformValues } = transformState;
-
-	useEffect( () => {
-		if ( isEditing ) {
-			initializeTransformValues();
-		}
-	}, [ isEditing, initializeTransformValues ] );
-
-	return transformState;
-}

package/src/components/image-size-control/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,8 +34,9 @@ export default function ImageSizeControl( {
 
 	return (
 		<>
-			{ ! isEmpty( imageSizeOptions ) && (
+			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }
 					value={ slug }
 					options={ imageSizeOptions }

package/src/components/index.js

@@ -53,11 +53,8 @@ export { default as __experimentalColorGradientControl } from './colors-gradient
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
-export { default as __experimentalHeightControl } from './height-control';
-export {
-	default as __experimentalImageEditor,
-	ImageEditingProvider as __experimentalImageEditingProvider,
-} from './image-editor';
+export { default as HeightControl } from './height-control';
+export { default as __experimentalImageEditor } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
 export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
@@ -74,7 +71,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { default as __experimentalOffCanvasEditor } from './off-canvas-editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

package/src/components/inner-blocks/index.js

@@ -11,7 +11,6 @@ import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	getBlockSupport,
-	getBlockType,
 	store as blocksStore,
 	__unstableGetInnerBlocksProps as getInnerBlocksProps,
 } from '@wordpress/blocks';
@@ -23,13 +22,16 @@ import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
 import useNestedSettingsUpdate from './use-nested-settings-update';
 import useInnerBlockTemplateSync from './use-inner-block-template-sync';
-import getBlockContext from './get-block-context';
+import useBlockContext from './use-block-context';
 import { BlockListItems } from '../block-list';
 import { BlockContextProvider } from '../block-context';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
+import useSetting from '../use-setting';
+
+const EMPTY_OBJECT = {};
 
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
@@ -54,7 +56,7 @@ function UncontrolledInnerBlocks( props ) {
 		renderAppender,
 		orientation,
 		placeholder,
-		__experimentalLayout,
+		layout,
 	} = props;
 
 	useNestedSettingsUpdate(
@@ -65,7 +67,7 @@ function UncontrolledInnerBlocks( props ) {
 		templateLock,
 		captureToolbars,
 		orientation,
-		__experimentalLayout
+		layout
 	);
 
 	useInnerBlockTemplateSync(
@@ -75,43 +77,33 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const { context, name } = useSelect(
+	const context = useBlockContext( clientId );
+	const name = useSelect(
 		( select ) => {
-			const block = select( blockEditorStore ).getBlock( clientId );
-
-			// This check is here to avoid the Redux zombie bug where a child subscription
-			// is called before a parent, causing potential JS errors when the child has been removed.
-			if ( ! block ) {
-				return {};
-			}
-
-			const blockType = getBlockType( block.name );
-
-			if (
-				Object.keys( blockType?.providesContext ?? {} ).length === 0
-			) {
-				return { name: block.name };
-			}
-
-			return {
-				context: getBlockContext( block.attributes, blockType ),
-				name: block.name,
-			};
+			return select( blockEditorStore ).getBlock( clientId )?.name;
 		},
 		[ clientId ]
 	);
 
-	const { allowSizingOnChildren = false } =
-		getBlockSupport( name, '__experimentalLayout' ) || {};
+	const defaultLayoutBlockSupport =
+		getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT;
+
+	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
+
+	const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT;
 
-	const layout = useMemo(
+	const usedLayout = layout || defaultLayoutBlockSupport;
+
+	const memoedLayout = useMemo(
 		() => ( {
-			...__experimentalLayout,
+			// Default layout will know about any content/wide size defined by the theme.
+			...defaultLayout,
+			...usedLayout,
 			...( allowSizingOnChildren && {
 				allowSizingOnChildren: true,
 			} ),
 		} ),
-		[ __experimentalLayout, allowSizingOnChildren ]
+		[ defaultLayout, usedLayout, allowSizingOnChildren ]
 	);
 
 	// This component needs to always be synchronous as it's the one changing
@@ -122,7 +114,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ layout }
+				__experimentalLayout={ memoedLayout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>
@@ -171,8 +163,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
 		options;
-	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
-		useBlockEditContext();
+	const {
+		clientId,
+		layout = null,
+		__unstableLayoutClassNames: layoutClassNames = '',
+	} = useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
@@ -218,6 +213,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 	const innerBlocksProps = {
 		__experimentalCaptureToolbars,
+		layout,
 		...options,
 	};
 	const InnerBlocks =

package/src/components/inner-blocks/index.native.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import {
-	getBlockType,
-	__unstableGetInnerBlocksProps as getInnerBlocksProps,
-} from '@wordpress/blocks';
+import { __unstableGetInnerBlocksProps as getInnerBlocksProps } from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
 
 /**
@@ -15,7 +11,7 @@ import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
 import useNestedSettingsUpdate from './use-nested-settings-update';
 import useInnerBlockTemplateSync from './use-inner-block-template-sync';
-import getBlockContext from './get-block-context';
+import useBlockContext from './use-block-context';
 
 /**
  * Internal dependencies
@@ -26,7 +22,6 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
 import { defaultLayout, LayoutProvider } from '../block-list/layout';
-import { store as blockEditorStore } from '../../store';
 
 /**
  * This hook is used to lightly mark an element as an inner blocks wrapper
@@ -100,10 +95,7 @@ function UncontrolledInnerBlocks( props ) {
 		useCompactList,
 	} = props;
 
-	const block = useSelect(
-		( select ) => select( blockEditorStore ).getBlock( clientId ),
-		[ clientId ]
-	) || { innerBlocks: [] };
+	const context = useBlockContext( clientId );
 
 	useNestedSettingsUpdate( clientId, allowedBlocks, templateLock );
 
@@ -116,43 +108,31 @@ function UncontrolledInnerBlocks( props ) {
 
 	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
 
-	let blockList = (
-		<BlockListComponent
-			marginVertical={ marginVertical }
-			marginHorizontal={ marginHorizontal }
-			rootClientId={ clientId }
-			renderAppender={ renderAppender }
-			renderFooterAppender={ renderFooterAppender }
-			withFooter={ false }
-			orientation={ orientation }
-			parentWidth={ parentWidth }
-			horizontalAlignment={ horizontalAlignment }
-			horizontal={ horizontal }
-			contentResizeMode={ contentResizeMode }
-			contentStyle={ contentStyle }
-			onAddBlock={ onAddBlock }
-			onDeleteBlock={ onDeleteBlock }
-			filterInnerBlocks={ filterInnerBlocks }
-			gridProperties={ gridProperties }
-			blockWidth={ blockWidth }
-		/>
+	return (
+		<LayoutProvider value={ layout }>
+			<BlockContextProvider value={ context }>
+				<BlockListComponent
+					marginVertical={ marginVertical }
+					marginHorizontal={ marginHorizontal }
+					rootClientId={ clientId }
+					renderAppender={ renderAppender }
+					renderFooterAppender={ renderFooterAppender }
+					withFooter={ false }
+					orientation={ orientation }
+					parentWidth={ parentWidth }
+					horizontalAlignment={ horizontalAlignment }
+					horizontal={ horizontal }
+					contentResizeMode={ contentResizeMode }
+					contentStyle={ contentStyle }
+					onAddBlock={ onAddBlock }
+					onDeleteBlock={ onDeleteBlock }
+					filterInnerBlocks={ filterInnerBlocks }
+					gridProperties={ gridProperties }
+					blockWidth={ blockWidth }
+				/>
+			</BlockContextProvider>
+		</LayoutProvider>
 	);
-
-	// Wrap context provider if (and only if) block has context to provide.
-	const blockType = getBlockType( block.name );
-	if ( blockType && blockType.providesContext ) {
-		const context = getBlockContext( block.attributes, blockType );
-
-		blockList = (
-			<LayoutProvider value={ layout }>
-				<BlockContextProvider value={ context }>
-					{ blockList }
-				</BlockContextProvider>
-			</LayoutProvider>
-		);
-	}
-
-	return blockList;
 }
 
 /**

package/src/components/inner-blocks/use-block-context.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns a context object for a given block.
+ *
+ * @param {string} clientId The block client ID.
+ *
+ * @return {Record<string,*>} Context value.
+ */
+export default function useBlockContext( clientId ) {
+	return useSelect(
+		( select ) => {
+			const block = select( blockEditorStore ).getBlock( clientId );
+			if ( ! block ) {
+				return undefined;
+			}
+
+			const blockType = select( blocksStore ).getBlockType( block.name );
+			if ( ! blockType ) {
+				return undefined;
+			}
+
+			if ( Object.keys( blockType.providesContext ).length === 0 ) {
+				return undefined;
+			}
+
+			return Object.fromEntries(
+				Object.entries( blockType.providesContext ).map(
+					( [ contextName, attributeName ] ) => [
+						contextName,
+						block.attributes[ attributeName ],
+					]
+				)
+			);
+		},
+		[ clientId ]
+	);
+}

package/src/components/inserter/block-patterns-explorer/explorer.js

@@ -38,7 +38,6 @@ function PatternsExplorerModal( { onModalClose, ...restProps } ) {
 	return (
 		<Modal
 			title={ __( 'Patterns' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onModalClose }
 			isFullScreen
 		>

package/src/components/inserter/block-patterns-tab.js

@@ -28,8 +28,11 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
-function usePatternsCategories() {
-	const [ allPatterns, allCategories ] = usePatternsState();
+function usePatternsCategories( rootClientId ) {
+	const [ allPatterns, allCategories ] = usePatternsState(
+		undefined,
+		rootClientId
+	);
 
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
@@ -89,6 +92,7 @@ function usePatternsCategories() {
 export function BlockPatternsCategoryDialog( {
 	rootClientId,
 	onInsert,
+	onHover,
 	category,
 	showTitlesAsTooltip,
 } ) {
@@ -110,6 +114,7 @@ export function BlockPatternsCategoryDialog( {
 			<BlockPatternsCategoryPanel
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
+				onHover={ onHover }
 				category={ category }
 				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
@@ -120,6 +125,7 @@ export function BlockPatternsCategoryDialog( {
 export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
+	onHover,
 	category,
 	showTitlesAsTooltip,
 } ) {
@@ -128,7 +134,7 @@ export function BlockPatternsCategoryPanel( {
 		rootClientId
 	);
 
-	const availableCategories = usePatternsCategories();
+	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
@@ -153,6 +159,9 @@ export function BlockPatternsCategoryPanel( {
 
 	const currentShownPatterns = useAsyncList( currentCategoryPatterns );
 
+	// Hide block pattern preview on unmount.
+	useEffect( () => () => onHover( null ), [] );
+
 	if ( ! currentCategoryPatterns.length ) {
 		return null;
 	}
@@ -167,6 +176,7 @@ export function BlockPatternsCategoryPanel( {
 				shownPatterns={ currentShownPatterns }
 				blockPatterns={ currentCategoryPatterns }
 				onClickPattern={ onClick }
+				onHover={ onHover }
 				label={ category.label }
 				orientation="vertical"
 				category={ category.label }
@@ -184,7 +194,7 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories();
+	const categories = usePatternsCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>

package/src/components/inserter/block-types-tab.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, groupBy } from 'lodash';
+import { groupBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -113,7 +113,7 @@ export function BlockTypesTab( {
 					</InserterPanel>
 				) }
 
-				{ map( currentlyRenderedCategories, ( category ) => {
+				{ currentlyRenderedCategories.map( ( category ) => {
 					const categoryItems = itemsPerCategory[ category.slug ];
 					if ( ! categoryItems || ! categoryItems.length ) {
 						return null;
@@ -148,8 +148,7 @@ export function BlockTypesTab( {
 					</InserterPanel>
 				) }
 
-				{ map(
-					currentlyRenderedCollections,
+				{ currentlyRenderedCollections.map(
 					( [ namespace, collection ] ) => {
 						const collectionItems = itemsPerCollection[ namespace ];
 						if ( ! collectionItems || ! collectionItems.length ) {

package/src/components/inserter/hooks/use-patterns-state.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,7 +36,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback( ( pattern, blocks ) => {
 		onInsert(
-			map( blocks, ( block ) => cloneBlock( block ) ),
+			( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
 			pattern.name
 		);
 		createSuccessNotice(

package/src/components/inserter/index.js

@@ -207,7 +207,7 @@ class Inserter extends Component {
 					'block-editor-inserter__popover',
 					{ 'is-quick': isQuick }
 				) }
-				position={ position }
+				popoverProps={ { position } }
 				onToggle={ this.onToggle }
 				expandOnMobile
 				headerTitle={ __( 'Add a block' ) }
@@ -220,48 +220,52 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { clientId, rootClientId } ) => {
-		const {
-			getBlockRootClientId,
-			hasInserterItems,
-			__experimentalGetAllowedBlocks,
-			__experimentalGetDirectInsertBlock,
-			getSettings,
-		} = select( blockEditorStore );
-
-		const { getBlockVariations } = select( blocksStore );
-
-		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
-
-		const directInsertBlock =
-			__experimentalGetDirectInsertBlock( rootClientId );
-
-		const settings = getSettings();
-
-		const hasSingleBlockType =
-			allowedBlocks?.length === 1 &&
-			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-				?.length === 0;
-
-		let allowedBlockType = false;
-		if ( hasSingleBlockType ) {
-			allowedBlockType = allowedBlocks[ 0 ];
+	withSelect(
+		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
+			const {
+				getBlockRootClientId,
+				hasInserterItems,
+				getAllowedBlocks,
+				__experimentalGetDirectInsertBlock,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const { getBlockVariations } = select( blocksStore );
+
+			rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+			const allowedBlocks = getAllowedBlocks( rootClientId );
+
+			const directInsertBlock =
+				shouldDirectInsert &&
+				__experimentalGetDirectInsertBlock( rootClientId );
+
+			const settings = getSettings();
+
+			const hasSingleBlockType =
+				allowedBlocks?.length === 1 &&
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+					?.length === 0;
+
+			let allowedBlockType = false;
+			if ( hasSingleBlockType ) {
+				allowedBlockType = allowedBlocks[ 0 ];
+			}
+
+			return {
+				hasItems: hasInserterItems( rootClientId ),
+				hasSingleBlockType,
+				blockTitle: allowedBlockType ? allowedBlockType.title : '',
+				allowedBlockType,
+				directInsertBlock,
+				rootClientId,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId,
+			};
 		}
-
-		return {
-			hasItems: hasInserterItems( rootClientId ),
-			hasSingleBlockType,
-			blockTitle: allowedBlockType ? allowedBlockType.title : '',
-			allowedBlockType,
-			directInsertBlock,
-			rootClientId,
-			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
-		};
-	} ),
+	),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
 		return {
 			insertOnlyAllowedBlock() {