@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/src/components/date-format-picker/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { uniq } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -83,15 +78,17 @@ function NonDefaultControls( { format, onChange } ) {
 	// 2022) in German (de). The resultant array is de-duplicated as some
 	// languages will use the same format string for short, medium, and long
 	// formats.
-	const suggestedFormats = uniq( [
-		'Y-m-d',
-		_x( 'n/j/Y', 'short date format' ),
-		_x( 'n/j/Y g:i A', 'short date format with time' ),
-		_x( 'M j, Y', 'medium date format' ),
-		_x( 'M j, Y g:i A', 'medium date format with time' ),
-		_x( 'F j, Y', 'long date format' ),
-		_x( 'M j', 'short date format without the year' ),
-	] );
+	const suggestedFormats = [
+		...new Set( [
+			'Y-m-d',
+			_x( 'n/j/Y', 'short date format' ),
+			_x( 'n/j/Y g:i A', 'short date format with time' ),
+			_x( 'M j, Y', 'medium date format' ),
+			_x( 'M j, Y g:i A', 'medium date format with time' ),
+			_x( 'F j, Y', 'long date format' ),
+			_x( 'M j', 'short date format without the year' ),
+		] ),
+	];
 
 	const suggestedOptions = suggestedFormats.map(
 		( suggestedFormat, index ) => ( {
@@ -116,6 +113,7 @@ function NonDefaultControls( { format, onChange } ) {
 		<>
 			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
 				<CustomSelectControl
+					__nextUnconstrainedWidth
 					label={ __( 'Choose a format' ) }
 					options={ [ ...suggestedOptions, customOption ] }
 					value={

package/src/components/date-format-picker/style.scss

@@ -11,10 +11,6 @@
 	&.components-base-control {
 		margin-bottom: 0;
 	}
-
-	.components-custom-select-control__button {
-		width: 100%;
-	}
 }
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {

package/src/components/duotone/components.js

@@ -11,9 +11,9 @@ import { __unstableGetValuesFromColors as getValuesFromColors } from './index';
 /**
  * SVG and stylesheet needed for rendering the duotone filter.
  *
- * @param {Object}   props          Duotone props.
- * @param {string}   props.selector Selector to apply the filter to.
- * @param {string}   props.id       Unique id for this duotone filter.
+ * @param {Object} props          Duotone props.
+ * @param {string} props.selector Selector to apply the filter to.
+ * @param {string} props.id       Unique id for this duotone filter.
  *
  * @return {WPElement} Duotone element.
  */
@@ -29,8 +29,8 @@ ${ selector } {
 /**
  * Stylesheet for disabling a global styles duotone filter.
  *
- * @param {Object}   props          Duotone props.
- * @param {string}   props.selector Selector to disable the filter for.
+ * @param {Object} props          Duotone props.
+ * @param {string} props.selector Selector to disable the filter for.
  *
  * @return {WPElement} Filter none style element.
  */

package/src/components/duotone-control/style.scss

@@ -18,10 +18,6 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 		padding: 0;
 	}
 
-	.components-custom-gradient-picker__gradient-bar {
-		margin: $grid-unit-20 0 $grid-unit-15;
-	}
-
 	.components-circular-option-picker__swatches {
 		display: grid;
 		grid-template-columns: repeat($swatch-columns, $swatch-size);

package/src/components/font-appearance-control/index.js

@@ -88,6 +88,7 @@ export default function FontAppearanceControl( props ) {
 		hasFontStyles = true,
 		hasFontWeights = true,
 		value: { fontStyle, fontWeight },
+		...otherProps
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
 	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
@@ -205,6 +206,7 @@ export default function FontAppearanceControl( props ) {
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
+				{ ...otherProps }
 				className="components-font-appearance-control"
 				label={ label }
 				describedBy={ getDescribedBy() }
@@ -213,6 +215,7 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
+				__nextUnconstrainedWidth
 			/>
 		)
 	);

package/src/components/font-appearance-control/style.scss

@@ -1,6 +1,4 @@
 .components-font-appearance-control {
-	margin-bottom: 24px;
-
 	ul {
 		li {
 			color: $gray-900;

package/src/components/font-family/index.js

@@ -40,7 +40,7 @@ export default function FontFamilyControl( {
 	];
 	return (
 		<SelectControl
-			label={ __( 'Font family' ) }
+			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }
 			onChange={ onChange }

package/src/components/font-sizes/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce, some, upperFirst } from 'lodash';
+import { find, pickBy, reduce, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,16 @@ import useSetting from '../use-setting';
 
 const DEFAULT_FONT_SIZES = [];
 
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
+ */
+const upperFirst = ( [ firstLetter, ...rest ] ) =>
+	firstLetter.toUpperCase() + rest.join( '' );
+
 /**
  * Higher-order component, which handles font size logic for class generation,
  * font size value retrieval, and font size change handling.

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

@@ -23,6 +23,7 @@ export default function ImageCropper( {
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
+	borderProps,
 } ) {
 	const {
 		isInProgress,
@@ -44,10 +45,15 @@ export default function ImageCropper( {
 
 	return (
 		<div
-			className={ classnames( 'wp-block-image__crop-area', {
-				'is-applying': isInProgress,
-			} ) }
+			className={ classnames(
+				'wp-block-image__crop-area',
+				borderProps?.className,
+				{
+					'is-applying': isInProgress,
+				}
+			) }
 			style={ {
+				...borderProps?.style,
 				width: width || clientWidth,
 				height: editedHeight,
 			} }

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

@@ -20,10 +20,12 @@ export default function ImageEditor( {
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
+	borderProps,
 } ) {
 	return (
 		<>
 			<Cropper
+				borderProps={ borderProps }
 				url={ url }
 				width={ width }
 				height={ height }

package/src/components/image-size-control/README.md

@@ -32,6 +32,13 @@ const MyImageSizeControl = () => {
 
 The component accepts the following props:
 
+### imageSizeHelp
+
+If this property is added, a help text will be generated for the image size control, using imageSizeHelp property as the content.
+
+-   Type: `String|WPElement`
+-   Required: No
+
 ### slug
 
 The currently-selected image size slug (`thumbnail`, `large`, etc). This is used by the parent component to get the specific image, which is used to populate `imageHeight` & `imageWidth`. This is not required, but necessary when `imageSizeOptions` is used.

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

@@ -23,6 +23,7 @@ const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
 const noop = () => {};
 
 export default function ImageSizeControl( {
+	imageSizeHelp,
 	imageWidth,
 	imageHeight,
 	imageSizeOptions = [],
@@ -44,6 +45,7 @@ export default function ImageSizeControl( {
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
+					help={ imageSizeHelp }
 				/>
 			) }
 			{ isResizable && (

package/src/components/index.js

@@ -93,6 +93,7 @@ export { default as URLInputButton } from './url-input/button';
 export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
+export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
 
 /*
  * Content Related Components
@@ -147,7 +148,10 @@ export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
-export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export {
+	RecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion as __experimentalUseHasRecursion,
+} from './recursion-provider';
 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';

package/src/components/index.native.js

@@ -59,7 +59,10 @@ export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as useSetting } from './use-setting';
-export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export {
+	RecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion as __experimentalUseHasRecursion,
+} from './recursion-provider';
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';

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

@@ -1,36 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockTypesList from '../block-types-list';
 import useClipboardBlock from './hooks/use-clipboard-block';
-import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
+import useBlockTypesState from './hooks/use-block-types-state';
 
-function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
-	const clipboardBlock = useClipboardBlock( rootClientId );
-
-	const { blockTypes } = useSelect(
-		( select ) => {
-			const { getInserterItems } = select( blockEditorStore );
-			const blockItems = filterInserterItems(
-				getInserterItems( rootClientId )
-			);
+const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
-			return {
-				blockTypes: clipboardBlock
-					? [ clipboardBlock, ...blockItems ]
-					: blockItems,
-			};
-		},
-		[ rootClientId ]
+function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
+	const [ rawBlockTypes, , collections ] = useBlockTypesState(
+		rootClientId,
+		onSelect
 	);
-
+	const clipboardBlock = useClipboardBlock( rootClientId );
+	const filteredBlockTypes = filterInserterItems( rawBlockTypes );
+	const blockTypes = clipboardBlock
+		? [ clipboardBlock, ...filteredBlockTypes ]
+		: filteredBlockTypes;
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );
 
@@ -39,10 +32,38 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 		onSelect( ...args );
 	};
 
+	const collectionSections = useMemo( () => {
+		const result = [];
+		Object.keys( collections ).forEach( ( namespace ) => {
+			const data = items.filter(
+				( item ) => getBlockNamespace( item ) === namespace
+			);
+			if ( data.length > 0 ) {
+				result.push(
+					createInserterSection( {
+						key: `collection-${ namespace }`,
+						metadata: {
+							icon: collections[ namespace ].icon,
+							title: collections[ namespace ].title,
+						},
+						items: data,
+					} )
+				);
+			}
+		} );
+
+		return result;
+	}, [ items, collections ] );
+
+	const sections = [
+		createInserterSection( { key: 'default', items } ),
+		...collectionSections,
+	];
+
 	return (
 		<BlockTypesList
 			name="Blocks"
-			items={ items }
+			sections={ sections }
 			onSelect={ handleSelect }
 			listProps={ listProps }
 		/>

package/src/components/inserter/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { AccessibilityInfo, Platform, Text } from 'react-native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,6 +79,8 @@ const defaultRenderToggle = ( {
 };
 
 export class Inserter extends Component {
+	announcementTimeout;
+
 	constructor() {
 		super( ...arguments );
 
@@ -88,6 +89,10 @@ export class Inserter extends Component {
 		this.renderContent = this.renderContent.bind( this );
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.announcementTimeout );
+	}
+
 	getInsertionOptions() {
 		const addBeforeOption = {
 			value: 'before',
@@ -217,7 +222,7 @@ export class Inserter extends Component {
 				const announcement = isOpen
 					? __( 'Scrollable block menu opened. Select a block.' )
 					: __( 'Scrollable block menu closed.' );
-				delay(
+				this.announcementTimeout = setTimeout(
 					() =>
 						AccessibilityInfo.announceForAccessibility(
 							announcement

package/src/components/inserter/preview-panel.js

@@ -5,7 +5,6 @@ import {
 	isReusableBlock,
 	createBlock,
 	getBlockFromExample,
-	getBlockType,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -16,31 +15,24 @@ import BlockCard from '../block-card';
 import BlockPreview from '../block-preview';
 
 function InserterPreviewPanel( { item } ) {
-	const { name, title, icon, description, initialAttributes } = item;
-	const hoveredItemBlockType = getBlockType( name );
+	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
-				{ isReusable || hoveredItemBlockType?.example ? (
+				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							__experimentalPadding={ 16 }
-							viewportWidth={
-								hoveredItemBlockType.example?.viewportWidth ??
-								500
-							}
+							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
-								hoveredItemBlockType.example
+								example
 									? getBlockFromExample( item.name, {
 											attributes: {
-												...hoveredItemBlockType.example
-													.attributes,
+												...example.attributes,
 												...initialAttributes,
 											},
-											innerBlocks:
-												hoveredItemBlockType.example
-													.innerBlocks,
+											innerBlocks: example.innerBlocks,
 									  } )
 									: createBlock( name, initialAttributes )
 							}

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -8,7 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTypesList from '../block-types-list';
 import { store as blockEditorStore } from '../../store';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 	const { items } = useSelect(
@@ -23,10 +23,12 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 		[ rootClientId ]
 	);
 
+	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
+
 	return (
 		<BlockTypesList
 			name="ReusableBlocks"
-			items={ items }
+			sections={ sections }
 			onSelect={ onSelect }
 			listProps={ listProps }
 		/>

package/src/components/inserter/search-items.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
-import { deburr, find, words } from 'lodash';
+import { noCase } from 'change-case';
+import removeAccents from 'remove-accents';
+import { find } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -21,7 +23,7 @@ const defaultGetCollection = () => null;
 function normalizeSearchInput( input = '' ) {
 	// Disregard diacritics.
 	//  Input: "média"
-	input = deburr( input );
+	input = removeAccents( input );
 
 	// Accommodate leading slash, matching autocomplete expectations.
 	//  Input: "/media"
@@ -34,6 +36,17 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input ).split( ' ' ).filter( Boolean );
+}
+
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -42,8 +55,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	// Extract words.
-	return words( normalizeSearchInput( input ) );
+	return extractWords( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -150,7 +162,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = words( normalizedSearchInput );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms

package/src/components/inserter/search-results.native.js

@@ -11,7 +11,7 @@ import BlockTypesList from '../block-types-list';
 import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
 
 function InserterSearchResults( {
 	filterValue,
@@ -51,7 +51,9 @@ function InserterSearchResults( {
 		<BlockTypesList
 			name="Blocks"
 			initialNumToRender={ isFullScreen ? 10 : 3 }
-			{ ...{ items, onSelect: handleSelect, listProps } }
+			sections={ [ createInserterSection( { key: 'search', items } ) ] }
+			onSelect={ handleSelect }
+			listProps={ listProps }
 		/>
 	);
 }

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

@@ -18,6 +18,8 @@ jest.mock( '../hooks/use-clipboard-block' );
 jest.mock( '@wordpress/data/src/components/use-select' );
 
 const selectMock = {
+	getCategories: jest.fn().mockReturnValue( [] ),
+	getCollections: jest.fn().mockReturnValue( [] ),
 	getInserterItems: jest.fn().mockReturnValue( [] ),
 	canInsertBlockType: jest.fn(),
 	getBlockType: jest.fn(),

package/src/components/inserter/test/utils.native.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { createInserterSection } from '../utils';
+
+describe( 'createInserterSection', () => {
+	it( 'returns the expected object shape', () => {
+		const key = 'mock-1';
+		const items = [ 1, 2, 3 ];
+		const metadata = { icon: 'icon-mock', title: 'Title Mock' };
+
+		expect( createInserterSection( { key, metadata, items } ) ).toEqual(
+			expect.objectContaining( {
+				metadata,
+				data: [ { key, list: items } ],
+			} )
+		);
+	} );
+
+	it( 'return always includes metadata', () => {
+		const key = 'mock-1';
+		const items = [ 1, 2, 3 ];
+
+		expect( createInserterSection( { key, items } ) ).toEqual(
+			expect.objectContaining( {
+				metadata: {},
+				data: [ { key, list: items } ],
+			} )
+		);
+	} );
+
+	it( 'requires a unique key', () => {
+		expect( () => {
+			createInserterSection( { items: [ 1, 2, 3 ] } );
+		} ).toThrow( 'A unique key for the section must be provided.' );
+	} );
+} );

package/src/components/inserter/utils.native.js

@@ -33,3 +33,14 @@ export function filterInserterItems(
 		blockAllowed( block, { onlyReusable, allowReusable } )
 	);
 }
+
+export function createInserterSection( { key, metadata = {}, items } ) {
+	if ( ! key ) {
+		throw new Error( 'A unique key for the section must be provided.' );
+	}
+
+	return {
+		metadata,
+		data: [ { key, list: items } ],
+	};
+}

package/src/components/inserter-list-item/index.js

@@ -11,7 +11,8 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 } from '@wordpress/blocks';
-import { ENTER } from '@wordpress/keycodes';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
+import { ENTER, isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -20,22 +21,6 @@ import BlockIcon from '../block-icon';
 import { InserterListboxItem } from '../inserter-listbox';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 
-/**
- * Return true if platform is MacOS.
- *
- * @param {Object} _window window object by default; used for DI testing.
- *
- * @return {boolean} True if MacOS; false otherwise.
- */
-function isAppleOS( _window = window ) {
-	const { platform } = _window.navigator;
-
-	return (
-		platform.indexOf( 'Mac' ) !== -1 ||
-		[ 'iPad', 'iPhone' ].includes( platform )
-	);
-}
-
 function InserterListItem( {
 	className,
 	isFirst,
@@ -135,7 +120,9 @@ function InserterListItem( {
 							<BlockIcon icon={ item.icon } showColors />
 						</span>
 						<span className="block-editor-block-types-list__item-title">
-							{ item.title }
+							<Truncate numberOfLines={ 3 }>
+								{ item.title }
+							</Truncate>
 						</span>
 					</InserterListboxItem>
 				</div>

package/src/components/letter-spacing-control/index.js

@@ -26,6 +26,7 @@ export default function LetterSpacingControl( {
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
@@ -33,6 +34,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
+			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }