@wordpress/block-editor 12.24.0 → 12.26.0

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -8,34 +8,70 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 import { POPOVER_PROPS } from './constants';
 import { useImageEditingContext } from './context';
 
-function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
+function AspectRatioGroup( {
+	aspectRatios,
+	isDisabled,
+	label,
+	onClick,
+	value,
+} ) {
 	return (
 		<MenuGroup label={ label }>
-			{ aspectRatios.map( ( { title, aspect } ) => (
+			{ aspectRatios.map( ( { name, slug, ratio } ) => (
 				<MenuItem
-					key={ aspect }
+					key={ slug }
 					disabled={ isDisabled }
 					onClick={ () => {
-						onClick( aspect );
+						onClick( ratio );
 					} }
 					role="menuitemradio"
-					isSelected={ aspect === value }
-					icon={ aspect === value ? check : undefined }
+					isSelected={ ratio === value }
+					icon={ ratio === value ? check : undefined }
 				>
-					{ title }
+					{ name }
 				</MenuItem>
 			) ) }
 		</MenuGroup>
 	);
 }
 
+export function ratioToNumber( str ) {
+	// TODO: support two-value aspect ratio?
+	// https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
+	const [ a, b, ...rest ] = str.split( '/' ).map( Number );
+	if (
+		a <= 0 ||
+		b <= 0 ||
+		Number.isNaN( a ) ||
+		Number.isNaN( b ) ||
+		rest.length
+	) {
+		return NaN;
+	}
+	return b ? a / b : a;
+}
+
+function presetRatioAsNumber( { ratio, ...rest } ) {
+	return {
+		ratio: ratioToNumber( ratio ),
+		...rest,
+	};
+}
+
 export default function AspectRatioDropdown( { toggleProps } ) {
 	const { isInProgress, aspect, setAspect, defaultAspect } =
 		useImageEditingContext();
 
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
 	return (
 		<DropdownMenu
 			icon={ aspectRatioIcon }
@@ -46,7 +82,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 		>
 			{ ( { onClose } ) => (
 				<>
-					<AspectGroup
+					<AspectRatioGroup
 						isDisabled={ isInProgress }
 						onClick={ ( newAspect ) => {
 							setAspect( newAspect );
@@ -56,61 +92,57 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						aspectRatios={ [
 							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
 							{
-								title: __( 'Original' ),
+								slug: 'original',
+								name: __( 'Original' ),
 								aspect: defaultAspect,
 							},
-							{
-								title: __( 'Square' ),
-								aspect: 1,
-							},
-						] }
-					/>
-					<AspectGroup
-						label={ __( 'Landscape' ) }
-						isDisabled={ isInProgress }
-						onClick={ ( newAspect ) => {
-							setAspect( newAspect );
-							onClose();
-						} }
-						value={ aspect }
-						aspectRatios={ [
-							{
-								title: __( '16:9' ),
-								aspect: 16 / 9,
-							},
-							{
-								title: __( '4:3' ),
-								aspect: 4 / 3,
-							},
-							{
-								title: __( '3:2' ),
-								aspect: 3 / 2,
-							},
-						] }
-					/>
-					<AspectGroup
-						label={ __( 'Portrait' ) }
-						isDisabled={ isInProgress }
-						onClick={ ( newAspect ) => {
-							setAspect( newAspect );
-							onClose();
-						} }
-						value={ aspect }
-						aspectRatios={ [
-							{
-								title: __( '9:16' ),
-								aspect: 9 / 16,
-							},
-							{
-								title: __( '3:4' ),
-								aspect: 3 / 4,
-							},
-							{
-								title: __( '2:3' ),
-								aspect: 2 / 3,
-							},
+							...( showDefaultRatios
+								? defaultRatios
+										.map( presetRatioAsNumber )
+										.filter( ( { ratio } ) => ratio === 1 )
+								: [] ),
 						] }
 					/>
+					{ themeRatios?.length > 0 && (
+						<AspectRatioGroup
+							label={ __( 'Theme' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ themeRatios }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Landscape' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio > 1 ) }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Portrait' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio < 1 ) }
+						/>
+					) }
 				</>
 			) }
 		</DropdownMenu>

package/src/components/image-editor/cropper.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import Cropper from 'react-easy-crop';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -47,7 +47,7 @@ export default function ImageCropper( {
 
 	const area = (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wp-block-image__crop-area',
 				borderProps?.className,
 				{

package/src/components/image-editor/index.js

@@ -6,11 +6,11 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 /**
  * Internal dependencies
  */
+import AspectRatioDropdown from './aspect-ratio-dropdown';
 import BlockControls from '../block-controls';
 import ImageEditingProvider from './context';
 import Cropper from './cropper';
 import ZoomDropdown from './zoom-dropdown';
-import AspectRatioDropdown from './aspect-ratio-dropdown';
 import RotationButton from './rotation-button';
 import FormControls from './form-controls';
 

package/src/components/image-editor/test/index.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { ratioToNumber } from '../aspect-ratio-dropdown';
+
+test( 'ratioToNumber', () => {
+	expect( ratioToNumber( '1/1' ) ).toBe( 1 );
+	expect( ratioToNumber( '1' ) ).toBe( 1 );
+	expect( ratioToNumber( '11/11' ) ).toBe( 1 );
+	expect( ratioToNumber( '16/9' ) ).toBe( 16 / 9 );
+	expect( ratioToNumber( '4/3' ) ).toBe( 4 / 3 );
+	expect( ratioToNumber( '3/2' ) ).toBe( 3 / 2 );
+	expect( ratioToNumber( '2/1' ) ).toBe( 2 );
+	expect( ratioToNumber( '1/2' ) ).toBe( 1 / 2 );
+	expect( ratioToNumber( '2/3' ) ).toBe( 2 / 3 );
+	expect( ratioToNumber( '3/4' ) ).toBe( 3 / 4 );
+	expect( ratioToNumber( '9/16' ) ).toBe( 9 / 16 );
+	expect( ratioToNumber( '1/16' ) ).toBe( 1 / 16 );
+	expect( ratioToNumber( '16/1' ) ).toBe( 16 );
+	expect( ratioToNumber( '1/9' ) ).toBe( 1 / 9 );
+	expect( ratioToNumber( 'auto' ) ).toBe( NaN );
+} );

package/src/components/index.js

@@ -160,6 +160,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { default as BlockPopover } from './block-popover';
 export { useBlockEditingMode } from './block-editing-mode';
 
 /*

package/src/components/inner-blocks/button-block-appender.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ export const ButtonBlockAppender = ( {
 } ) => {
 	return (
 		<BaseButtonBlockAppender
-			className={ classnames( {
+			className={ clsx( {
 				'block-list-appender__toggle': isToggle,
 			} ) }
 			rootClientId={ clientId }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -190,10 +190,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	} = useBlockEditContext();
 	const selected = useSelect(
 		( select ) => {
-			if ( ! clientId ) {
-				return {};
-			}
-
 			const {
 				getBlockName,
 				isBlockSelected,
@@ -204,7 +200,20 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockEditingMode,
 				getBlockSettings,
 				isDragging,
+				getSettings,
 			} = unlock( select( blockEditorStore ) );
+			let _isDropZoneDisabled;
+			// In zoom out mode, we want to disable the drop zone for the sections.
+			// The inner blocks belonging to the section drop zone is
+			// already disabled by the blocks themselves being disabled.
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				const { sectionRootClientId } = unlock( getSettings() );
+				_isDropZoneDisabled = clientId !== sectionRootClientId;
+			}
+			if ( ! clientId ) {
+				return { isDropZoneDisabled: _isDropZoneDisabled };
+			}
+
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const enableClickThrough =
@@ -212,6 +221,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const blockEditingMode = getBlockEditingMode( clientId );
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
+
+			if ( _isDropZoneDisabled !== undefined ) {
+				_isDropZoneDisabled = blockEditingMode === 'disabled';
+			}
+
 			return {
 				__experimentalCaptureToolbars: hasBlockSupport(
 					blockName,
@@ -228,7 +242,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				blockType: getBlockType( blockName ),
 				parentLock: getTemplateLock( parentClientId ),
 				parentClientId,
-				isDropZoneDisabled: blockEditingMode === 'disabled',
+				isDropZoneDisabled: _isDropZoneDisabled,
 				defaultLayout,
 			};
 		},
@@ -249,12 +263,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		dropZoneElement,
 		rootClientId: clientId,
 		parentClientId,
-		isDisabled: isDropZoneDisabled,
 	} );
 
 	const ref = useMergeRefs( [
 		props.ref,
-		__unstableDisableDropZone ? null : blockDropZoneRef,
+		__unstableDisableDropZone || isDropZoneDisabled
+			? null
+			: blockDropZoneRef,
 	] );
 
 	const innerBlocksProps = {
@@ -274,7 +289,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-list__layout',
 			__unstableDisableLayoutClassNames ? '' : layoutClassNames,

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

@@ -61,7 +61,8 @@ function PatternList( {
 	} );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		selectedCategory
 	);
 
 	const registeredPatternCategories = useMemo(

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

@@ -2,15 +2,10 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	FlexBlock,
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { Button, Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,10 +14,11 @@ import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
+import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
+import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { Tabs } = unlock( componentsPrivateApis );
-
 function BlockPatternsTab( {
 	onSelectCategory,
 	selectedCategory,
@@ -35,65 +31,35 @@ function BlockPatternsTab( {
 	const categories = usePatternCategories( rootClientId );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const isResolvingPatterns = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).isResolvingPatterns(),
+		[]
+	);
+
+	if ( isResolvingPatterns ) {
+		return (
+			<div className="block-editor-inserter__patterns-loading">
+				<Spinner />
+			</div>
+		);
+	}
+
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
 
 	return (
 		<>
 			{ ! isMobile && (
 				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<Tabs
-						selectOnMove={ false }
-						selectedTabId={
-							selectedCategory ? selectedCategory.name : null
-						}
-						orientation={ 'vertical' }
-						onSelect={ ( categoryId ) => {
-							// Pass the full category object
-							onSelectCategory(
-								categories.find(
-									( category ) => category.name === categoryId
-								)
-							);
-						} }
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
 					>
-						<Tabs.TabList className="block-editor-inserter__block-patterns-tablist">
-							{ categories.map( ( category ) => (
-								<Tabs.Tab
-									key={ category.name }
-									tabId={ category.name }
-									className="block-editor-inserter__patterns-tab"
-									aria-label={ category.label }
-									aria-current={
-										category === selectedCategory
-											? 'true'
-											: undefined
-									}
-								>
-									<HStack>
-										<FlexBlock>
-											{ category.label }
-										</FlexBlock>
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</Tabs.Tab>
-							) ) }
-						</Tabs.TabList>
-						{ categories.map( ( category ) => (
-							<Tabs.TabPanel
-								key={ category.name }
-								tabId={ category.name }
-								focusable={ false }
-								className="block-editor-inserter__patterns-category-panel"
-							>
-								{ children }
-							</Tabs.TabPanel>
-						) ) }
-					</Tabs>
+						{ children }
+					</CategoryTabs>
 					<Button
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
@@ -106,7 +72,7 @@ function BlockPatternsTab( {
 			{ isMobile && (
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
-						<div className="block-editor-inserter__patterns-category-panel">
+						<div className="block-editor-inserter__category-panel">
 							<PatternCategoryPreviews
 								key={ category.name }
 								onInsert={ onInsert }

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -44,7 +44,8 @@ export function PatternCategoryPreviews( {
 } ) {
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
-		rootClientId
+		rootClientId,
+		category?.name
 	);
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useEffect, forwardRef } from '@wordpress/element';
 import { pipe, useAsyncList } from '@wordpress/compose';
 
 /**
@@ -13,6 +13,7 @@ import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
+import InserterNoResults from './no-results';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -26,12 +27,10 @@ const MAX_SUGGESTED_ITEMS = 6;
  */
 const EMPTY_ARRAY = [];
 
-export function BlockTypesTab( {
-	rootClientId,
-	onInsert,
-	onHover,
-	showMostUsedBlocks,
-} ) {
+export function BlockTypesTab(
+	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
+	ref
+) {
 	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
 		rootClientId,
 		onInsert
@@ -102,9 +101,13 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<InserterListbox>
-			<div>
+			<div ref={ ref }>
 				{ showMostUsedBlocks && !! suggestedItems.length && (
 					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
@@ -179,4 +182,4 @@ export function BlockTypesTab( {
 	);
 }
 
-export default BlockTypesTab;
+export default forwardRef( BlockTypesTab );

package/src/components/inserter/category-tabs/index.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	FlexBlock,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function CategoryTabs( {
+	categories,
+	selectedCategory,
+	onSelectCategory,
+	children,
+} ) {
+	return (
+		<Tabs
+			className="block-editor-inserter__category-tabs"
+			selectOnMove={ false }
+			selectedTabId={ selectedCategory ? selectedCategory.name : null }
+			orientation={ 'vertical' }
+			onSelect={ ( categoryId ) => {
+				// Pass the full category object
+				onSelectCategory(
+					categories.find(
+						( category ) => category.name === categoryId
+					)
+				);
+			} }
+		>
+			<Tabs.TabList className="block-editor-inserter__category-tablist">
+				{ categories.map( ( category ) => (
+					<Tabs.Tab
+						key={ category.name }
+						tabId={ category.name }
+						className="block-editor-inserter__category-tab"
+						aria-label={ category.label }
+						aria-current={
+							category === selectedCategory ? 'true' : undefined
+						}
+					>
+						<HStack>
+							<FlexBlock>{ category.label }</FlexBlock>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</Tabs.Tab>
+				) ) }
+			</Tabs.TabList>
+			{ categories.map( ( category ) => (
+				<Tabs.TabPanel
+					key={ category.name }
+					tabId={ category.name }
+					focusable={ false }
+					className="block-editor-inserter__category-panel"
+				>
+					{ children }
+				</Tabs.TabPanel>
+			) ) }
+		</Tabs>
+	);
+}
+
+export default CategoryTabs;

package/src/components/inserter/hooks/use-insertion-point.js

@@ -11,6 +11,7 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * @typedef WPInserterConfig
@@ -86,10 +87,23 @@ function useInsertionPoint( {
 		insertBlocks,
 		showInsertionPoint,
 		hideInsertionPoint,
-	} = useDispatch( blockEditorStore );
+		setLastFocus,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	const onInsertBlocks = useCallback(
 		( blocks, meta, shouldForceFocusBlock = false ) => {
+			// When we are trying to move focus or select a new block on insert, we also
+			// need to clear the last focus to avoid the focus being set to the wrong block
+			// when tabbing back into the canvas if the block was added from outside the
+			// editor canvas.
+			if (
+				shouldForceFocusBlock ||
+				shouldFocusBlock ||
+				selectBlockOnInsert
+			) {
+				setLastFocus( null );
+			}
+
 			const selectedBlock = getSelectedBlock();
 
 			if (