@wordpress/block-editor 12.25.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,
@@ -205,8 +201,19 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockSettings,
 				isDragging,
 				getSettings,
-				getBlockOrder,
 			} = 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 =
@@ -215,14 +222,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			// 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.
-			let _isDropZoneDisabled = blockEditingMode === 'disabled';
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
-				const sectionsClientIds = getBlockOrder( sectionRootClientId );
-				_isDropZoneDisabled = sectionsClientIds?.includes( clientId );
+			if ( _isDropZoneDisabled !== undefined ) {
+				_isDropZoneDisabled = blockEditingMode === 'disabled';
 			}
 
 			return {
@@ -262,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 = {
@@ -287,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

@@ -3,8 +3,9 @@
  */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import { Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ 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';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -28,6 +31,19 @@ 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 />;

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';
 
 /**
@@ -27,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
@@ -109,7 +107,7 @@ export function BlockTypesTab( {
 
 	return (
 		<InserterListbox>
-			<div>
+			<div ref={ ref }>
 				{ showMostUsedBlocks && !! suggestedItems.length && (
 					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
@@ -184,4 +182,4 @@ export function BlockTypesTab( {
 	);
 }
 
-export default BlockTypesTab;
+export default forwardRef( BlockTypesTab );

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 (

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

@@ -16,12 +16,13 @@ import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
 /**
  * Retrieves the block patterns inserter state.
  *
- * @param {Function} onInsert     function called when inserter a list of blocks.
- * @param {string=}  rootClientId Insertion's root client ID.
+ * @param {Function} onInsert         function called when inserter a list of blocks.
+ * @param {string=}  rootClientId     Insertion's root client ID.
  *
+ * @param {string}   selectedCategory The selected pattern category.
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId ) => {
+const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { patternCategories, patterns, userPatternCategories } = useSelect(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
@@ -63,7 +64,19 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(
-				( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				( patternBlocks ?? [] ).map( ( block ) => {
+					const clonedBlock = cloneBlock( block );
+					if (
+						clonedBlock.attributes.metadata?.categories?.includes(
+							selectedCategory
+						)
+					) {
+						clonedBlock.attributes.metadata.categories = [
+							selectedCategory,
+						];
+					}
+					return clonedBlock;
+				} ),
 				pattern.name
 			);
 			createSuccessNotice(
@@ -78,7 +91,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert ]
+		[ createSuccessNotice, onInsert, selectedCategory ]
 	);
 
 	return [ patterns, allCategories, onClickPattern ];

package/src/components/inserter/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,10 +207,9 @@ class PrivateInserter extends Component {
 		return (
 			<Dropdown
 				className="block-editor-inserter"
-				contentClassName={ classnames(
-					'block-editor-inserter__popover',
-					{ 'is-quick': isQuick }
-				) }
+				contentClassName={ clsx( 'block-editor-inserter__popover', {
+					'is-quick': isQuick,
+				} ) }
 				popoverProps={ { position, shift: true } }
 				onToggle={ this.onToggle }
 				expandOnMobile

package/src/components/inserter/library.js

@@ -20,10 +20,13 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
 		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onClose,
 	},
 	ref
 ) {
@@ -52,8 +55,11 @@ function InserterLibrary(
 			__experimentalOnPatternCategorySelection={
 				__experimentalOnPatternCategorySelection
 			}
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
+			onClose={ onClose }
 		/>
 	);
 }

package/src/components/inserter/media-tab/media-preview.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -222,7 +222,7 @@ export function MediaPreview( { media, onClick, category } ) {
 			<InserterDraggableBlocks isEnabled blocks={ [ block ] }>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<div
-						className={ classnames(
+						className={ clsx(
 							'block-editor-inserter__media-list__list-item',
 							{
 								'is-hovered': isHovered,