@wordpress/block-editor 9.4.0 → 9.7.0

package/src/components/iframe/index.js

@@ -65,12 +65,31 @@ function useStylesCompatibility() {
 				return;
 			}
 
-			const isMatch = Array.from( cssRules ).find(
-				( { selectorText } ) =>
-					selectorText &&
-					( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
-						selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-			);
+			function matchFromRules( _cssRules ) {
+				return Array.from( _cssRules ).find(
+					( {
+						selectorText,
+						conditionText,
+						cssRules: __cssRules,
+					} ) => {
+						// If the rule is conditional then it will not have selector text.
+						// Recurse into child CSS ruleset to determine selector eligibility.
+						if ( conditionText ) {
+							return matchFromRules( __cssRules );
+						}
+
+						return (
+							selectorText &&
+							( selectorText.includes(
+								`.${ BODY_CLASS_NAME }`
+							) ||
+								selectorText.includes( `.${ BLOCK_PREFIX }` ) )
+						);
+					}
+				);
+			}
+
+			const isMatch = matchFromRules( cssRules );
 
 			if (
 				isMatch &&

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

@@ -147,7 +147,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-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/style.scss

@@ -342,7 +342,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height;
+		top: $header-height + $grid-unit-20;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

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 }

package/src/components/line-height-control/index.js

@@ -21,6 +21,7 @@ const LineHeightControl = ( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
 
@@ -89,6 +90,7 @@ const LineHeightControl = ( {
 			style={ deprecatedStyles }
 		>
 			<NumberControl
+				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ onChange }

package/src/components/link-control/index.js

@@ -235,6 +235,7 @@ function LinkControl( {
 			internalTextValue !== value?.title
 		) {
 			onChange( {
+				...value,
 				url: currentInputValue,
 				title: internalTextValue,
 			} );

package/src/components/link-control/is-url-like.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,6 @@ import { isURL } from '@wordpress/url';
  * @return {boolean} whether or not the value is potentially a URL.
  */
 export default function isURLLike( val ) {
-	const isInternal = startsWith( val, '#' );
+	const isInternal = val?.startsWith( '#' );
 	return isURL( val ) || ( val && val.includes( 'www.' ) ) || isInternal;
 }

package/src/components/link-control/test/index.js

@@ -2417,10 +2417,12 @@ describe( 'Controlling link title text', () => {
 			Simulate.keyDown( textInput, { keyCode: ENTER } );
 		} );
 
-		expect( mockOnChange ).toHaveBeenCalledWith( {
-			title: textValue,
-			url: selectedLink.url,
-		} );
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: textValue,
+				url: selectedLink.url,
+			} )
+		);
 
 		// The text input should not be showing as the form is submitted.
 		expect(

package/src/components/link-control/use-search-handler.js

@@ -5,11 +5,6 @@ import { getProtocol, prependHTTP } from '@wordpress/url';
 import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -38,7 +33,7 @@ export const handleDirectEntry = ( val ) => {
 		type = TEL_TYPE;
 	}
 
-	if ( startsWith( val, '#' ) ) {
+	if ( val?.startsWith( '#' ) ) {
 		type = INTERNAL_TYPE;
 	}
 

package/src/components/list-view/block-select-button.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -16,7 +20,7 @@ import { SPACE, ENTER } from '@wordpress/keycodes';
  */
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
-import BlockTitle from '../block-title';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 
@@ -35,6 +39,10 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -72,19 +80,26 @@ function ListViewBlockSelectButton(
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<span className="block-editor-list-view-block-select-button__title">
-					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
-				</span>
-				{ blockInformation?.anchor && (
-					<span className="block-editor-list-view-block-select-button__anchor">
-						{ blockInformation.anchor }
+				<HStack
+					alignment="center"
+					className="block-editor-list-view-block-select-button__label-wrapper"
+					justify="flex-start"
+					spacing={ 1 }
+				>
+					<span className="block-editor-list-view-block-select-button__title">
+						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
-				) }
-				{ isLocked && (
-					<span className="block-editor-list-view-block-select-button__lock">
-						<Icon icon={ lock } />
-					</span>
-				) }
+					{ blockInformation?.anchor && (
+						<span className="block-editor-list-view-block-select-button__anchor">
+							{ blockInformation.anchor }
+						</span>
+					) }
+					{ isLocked && (
+						<span className="block-editor-list-view-block-select-button__lock">
+							<Icon icon={ lock } />
+						</span>
+					) }
+				</HStack>
 			</Button>
 		</>
 	);

package/src/components/list-view/branch.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -95,7 +90,7 @@ function ListViewBranch( props ) {
 
 	const { expandedState, draggedClientIds } = useListViewContext();
 
-	const filteredBlocks = compact( blocks );
+	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
 	let nextPosition = listPosition;
 

package/src/components/list-view/drop-indicator.js

@@ -81,7 +81,7 @@ export default function ListViewDropIndicator( {
 			left: rect.left + indent,
 			right: rect.right,
 			width: 0,
-			height: rect.height,
+			height: 0,
 			ownerDocument,
 		};