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

package/src/components/block-styles/index.js

@@ -11,7 +11,7 @@ import { useState, useLayoutEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
-	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
 	Slot,
 	Fill,
 } from '@wordpress/components';
@@ -117,15 +117,12 @@ function BlockStyles( {
 							onClick={ () => onSelectStylePreview( style ) }
 							aria-current={ activeStyle.name === style.name }
 						>
-							<Text
-								as="span"
-								limit={ 12 }
-								ellipsizeMode="tail"
+							<Truncate
+								numberOfLines={ 1 }
 								className="block-editor-block-styles__item-text"
-								truncate
 							>
 								{ buttonText }
-							</Text>
+							</Truncate>
 						</Button>
 					);
 				} ) }

package/src/components/block-styles/preview.native.js

@@ -8,8 +8,8 @@ import {
 	Dimensions,
 	Animated,
 	Easing,
+	Image,
 } from 'react-native';
-import FastImage from 'react-native-fast-image';
 
 /**
  * WordPress dependencies
@@ -91,7 +91,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 				<View style={ styles.imageWrapper }>
 					{ isActive &&
 						getOutline( [ styles.outline, innerOutlineStyle ] ) }
-					<FastImage
+					<Image
 						style={ [ styles.image, styles[ name ] ] }
 						source={ { uri: url } }
 					/>

package/src/components/block-styles/style.scss

@@ -64,6 +64,16 @@
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-block-styles__item-text {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
 }
 
 // To prevent overflow in the preview container,

package/src/components/block-switcher/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, uniq } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,10 +28,10 @@ import { copy } from '@wordpress/icons';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import BlockTitle from '../block-title';
 import BlockTransformationsMenu from './block-transformations-menu';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -41,7 +41,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		canRemove,
 		hasBlockStyles,
 		icon,
-		blockTitle,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -64,7 +63,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				_icon = blockInformation?.icon; // Take into account active block variations.
 			} else {
 				const isSelectionOfSameType =
-					uniq( blocks.map( ( { name } ) => name ) ).length === 1;
+					new Set( blocks.map( ( { name } ) => name ) ).size === 1;
 				// When selection consists of blocks of multiple types, display an
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType
@@ -79,7 +78,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -89,6 +87,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
 
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
+		maximumLength: 35,
+	} );
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
@@ -119,10 +121,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 							<BlockIcon icon={ icon } showColors />
 							{ ( isReusable || isTemplate ) && (
 								<span className="block-editor-block-switcher__toggle-text">
-									<BlockTitle
-										clientId={ clientIds }
-										maximumLength={ 35 }
-									/>
+									{ blockTitle }
 								</span>
 							) }
 						</>
@@ -176,10 +175,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								/>
 								{ ( isReusable || isTemplate ) && (
 									<span className="block-editor-block-switcher__toggle-text">
-										<BlockTitle
-											clientId={ clientIds }
-											maximumLength={ 35 }
-										/>
+										{ blockTitle }
 									</span>
 								) }
 							</>

package/src/components/block-switcher/test/index.js

@@ -18,6 +18,7 @@ import { copy } from '@wordpress/icons';
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {

package/src/components/block-toolbar/index.js

@@ -23,6 +23,7 @@ import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
+import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
@@ -159,6 +160,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 					</__unstableBlockNameContext.Provider>
 				</>
 			) }
+			<BlockEditVisuallyButton clientIds={ blockClientIds } />
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);

package/src/components/block-tools/block-selection-button.js

@@ -102,7 +102,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
-		isNavigationMode,
 	} = useSelect( blockEditorStore );
 	const {
 		selectBlock,
@@ -160,10 +159,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				selectedBlockClientId;
 		}
 		const startingBlockClientId = hasBlockMovingClientId();
-		if ( isEscape && isNavigationMode() ) {
-			clearSelectedBlock();
-			event.preventDefault();
-		}
 		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
 			setBlockMovingClientId( null );
 			event.preventDefault();

package/src/components/block-tools/index.js

@@ -53,6 +53,8 @@ export default function BlockTools( {
 	} = useDispatch( blockEditorStore );
 
 	function onKeyDown( event ) {
+		if ( event.defaultPrevented ) return;
+
 		if ( isMatch( 'core/block-editor/move-up', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
@@ -93,12 +95,13 @@ export default function BlockTools( {
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length > 1 ) {
+			if ( clientIds.length ) {
 				event.preventDefault();
 				clearSelectedBlock();
 				event.target.ownerDocument.defaultView
 					.getSelection()
 					.removeAllRanges();
+				__unstableContentRef?.current.focus();
 			}
 		}
 	}

package/src/components/block-types-list/index.js

@@ -41,7 +41,7 @@ function BlockTypesList( {
 							) }
 							onSelect={ onSelect }
 							onHover={ onHover }
-							isDraggable={ isDraggable }
+							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
 						/>
 					) ) }

package/src/components/block-types-list/index.native.js

@@ -4,7 +4,9 @@
 import {
 	Dimensions,
 	FlatList,
+	SectionList,
 	StyleSheet,
+	Text,
 	TouchableWithoutFeedback,
 	View,
 } from 'react-native';
@@ -13,7 +15,11 @@ import {
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import {
+	usePreferredColorScheme,
+	usePreferredColorSchemeStyle,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -24,7 +30,7 @@ const MIN_COL_NUM = 3;
 
 export default function BlockTypesList( {
 	name,
-	items,
+	sections,
 	onSelect,
 	listProps,
 	initialNumToRender = 3,
@@ -80,33 +86,79 @@ export default function BlockTypesList( {
 		listProps.contentContainerStyle
 	);
 
+	const renderSection = ( { item } ) => {
+		return (
+			<TouchableWithoutFeedback accessible={ false }>
+				<FlatList
+					data={ item.list }
+					key={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.
+					numColumns={ numberOfColumns }
+					ItemSeparatorComponent={ () => (
+						<TouchableWithoutFeedback accessible={ false }>
+							<View
+								style={
+									styles[ 'block-types-list__row-separator' ]
+								}
+							/>
+						</TouchableWithoutFeedback>
+					) }
+					scrollEnabled={ false }
+					renderItem={ renderListItem }
+				/>
+			</TouchableWithoutFeedback>
+		);
+	};
+
+	const renderListItem = ( { item } ) => {
+		return (
+			<InserterButton
+				item={ item }
+				itemWidth={ itemWidth }
+				maxWidth={ maxWidth }
+				onSelect={ onSelect }
+			/>
+		);
+	};
+
+	const colorScheme = usePreferredColorScheme();
+	const sectionHeaderGradientValue =
+		colorScheme === 'light'
+			? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'
+			: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
+	const sectionHeaderTitleStyles = usePreferredColorSchemeStyle(
+		styles[ 'block-types-list__section-header-title' ],
+		styles[ 'block-types-list__section-header-title--dark' ]
+	);
+
+	const renderSectionHeader = ( { section: { metadata } } ) => {
+		if ( ! metadata?.icon || ! metadata?.title ) {
+			return null;
+		}
+
+		return (
+			<TouchableWithoutFeedback accessible={ false }>
+				<Gradient
+					gradientValue={ sectionHeaderGradientValue }
+					style={ styles[ 'block-types-list__section-header' ] }
+				>
+					{ metadata?.icon }
+					<Text style={ sectionHeaderTitleStyles }>
+						{ metadata?.title }
+					</Text>
+				</Gradient>
+			</TouchableWithoutFeedback>
+		);
+	};
+
 	return (
-		<FlatList
+		<SectionList
 			onLayout={ onLayout }
-			key={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.
 			testID={ `InserterUI-${ name }` }
 			keyboardShouldPersistTaps="always"
-			numColumns={ numberOfColumns }
-			data={ items }
+			sections={ sections }
 			initialNumToRender={ initialNumToRender }
-			ItemSeparatorComponent={ () => (
-				<TouchableWithoutFeedback accessible={ false }>
-					<View
-						style={ styles[ 'block-types-list__row-separator' ] }
-					/>
-				</TouchableWithoutFeedback>
-			) }
-			keyExtractor={ ( item ) => item.id }
-			renderItem={ ( { item } ) => (
-				<InserterButton
-					{ ...{
-						item,
-						itemWidth,
-						maxWidth,
-						onSelect,
-					} }
-				/>
-			) }
+			renderItem={ renderSection }
+			renderSectionHeader={ renderSectionHeader }
 			{ ...listProps }
 			contentContainerStyle={ {
 				...contentContainerStyle,

package/src/components/block-types-list/style.native.scss

@@ -5,3 +5,21 @@
 .block-types-list__column {
 	padding: $grid-unit-20;
 }
+
+.block-types-list__section-header {
+	align-items: center;
+	flex-direction: row;
+	justify-content: center;
+	padding-bottom: 16;
+	padding-top: 32;
+}
+
+.block-types-list__section-header-title {
+	color: $black;
+	font-size: 16px;
+	margin-left: 10px;
+}
+
+.block-types-list__section-header-title--dark {
+	color: $white;
+}

package/src/components/border-radius-control/all-input-control.js

@@ -7,14 +7,50 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getAllValue, hasMixedValues, hasDefinedValues } from './utils';
+import {
+	getAllValue,
+	getAllUnit,
+	hasMixedValues,
+	hasDefinedValues,
+} from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	selectedUnits,
+	setSelectedUnits,
+	values,
+	...props
+} ) {
+	let allValue = getAllValue( values );
+
+	if ( allValue === undefined ) {
+		// If we don't have any value set the unit to any current selection
+		// or the most common unit from the individual radii values.
+		allValue = getAllUnit( selectedUnits );
+	}
 
-export default function AllInputControl( { onChange, values, ...props } ) {
-	const allValue = getAllValue( values );
 	const hasValues = hasDefinedValues( values );
 	const isMixed = hasValues && hasMixedValues( values );
 	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
 
+	// Filter out CSS-unit-only values to prevent invalid styles.
+	const handleOnChange = ( next ) => {
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		onChange( nextValue );
+	};
+
+	// Store current unit selection for use as fallback for individual
+	// radii controls.
+	const handleOnUnitChange = ( unit ) => {
+		setSelectedUnits( {
+			topLeft: unit,
+			topRight: unit,
+			bottomLeft: unit,
+			bottomRight: unit,
+		} );
+	};
+
 	return (
 		<UnitControl
 			{ ...props }
@@ -22,7 +58,8 @@ export default function AllInputControl( { onChange, values, ...props } ) {
 			disableUnits={ isMixed }
 			isOnly
 			value={ allValue }
-			onChange={ onChange }
+			onChange={ handleOnChange }
+			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
 		/>
 	);

package/src/components/border-radius-control/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -24,10 +25,10 @@ import {
 } from './utils';
 
 const DEFAULT_VALUES = {
-	topLeft: null,
-	topRight: null,
-	bottomLeft: null,
-	bottomRight: null,
+	topLeft: undefined,
+	topRight: undefined,
+	bottomLeft: undefined,
+	bottomRight: undefined,
 };
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUES = {
@@ -50,11 +51,27 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		! hasDefinedValues( values ) || ! hasMixedValues( values )
 	);
 
+	// Tracking selected units via internal state allows filtering of CSS unit
+	// only values from being saved while maintaining preexisting unit selection
+	// behaviour. Filtering CSS unit only values prevents invalid style values.
+	const [ selectedUnits, setSelectedUnits ] = useState( {
+		flat:
+			typeof values === 'string'
+				? parseQuantityAndUnitFromRawValue( values )[ 1 ]
+				: undefined,
+		topLeft: parseQuantityAndUnitFromRawValue( values?.topLeft )[ 1 ],
+		topRight: parseQuantityAndUnitFromRawValue( values?.topRight )[ 1 ],
+		bottomLeft: parseQuantityAndUnitFromRawValue( values?.bottomLeft )[ 1 ],
+		bottomRight: parseQuantityAndUnitFromRawValue(
+			values?.bottomRight
+		)[ 1 ],
+	} );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
 
-	const unit = getAllUnit( values );
+	const unit = getAllUnit( selectedUnits );
 	const unitConfig = units && units.find( ( item ) => item.value === unit );
 	const step = unitConfig?.step || 1;
 
@@ -70,7 +87,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 
 	return (
 		<fieldset className="components-border-radius-control">
-			<legend>{ __( 'Radius' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Radius' ) }
+			</BaseControl.VisualLabel>
 			<div className="components-border-radius-control__wrapper">
 				{ isLinked ? (
 					<>
@@ -79,6 +98,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							values={ values }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							onChange={ onChange }
+							selectedUnits={ selectedUnits }
+							setSelectedUnits={ setSelectedUnits }
 							units={ units }
 						/>
 						<RangeControl
@@ -98,6 +119,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 					<InputControls
 						min={ MIN_BORDER_RADIUS_VALUE }
 						onChange={ onChange }
+						selectedUnits={ selectedUnits }
+						setSelectedUnits={ setSelectedUnits }
 						values={ values || DEFAULT_VALUES }
 						units={ units }
 					/>

package/src/components/border-radius-control/input-controls.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUnitControl as UnitControl,
 	Tooltip,
 } from '@wordpress/components';
@@ -16,6 +17,8 @@ const CORNERS = {
 
 export default function BoxInputControls( {
 	onChange,
+	selectedUnits,
+	setSelectedUnits,
 	values: valuesProp,
 	...props
 } ) {
@@ -24,12 +27,22 @@ export default function BoxInputControls( {
 			return;
 		}
 
+		// Filter out CSS-unit-only values to prevent invalid styles.
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+
 		onChange( {
 			...values,
-			[ corner ]: next ? next : undefined,
+			[ corner ]: nextValue,
 		} );
 	};
 
+	const createHandleOnUnitChange = ( side ) => ( next ) => {
+		const newUnits = { ...selectedUnits };
+		newUnits[ side ] = next;
+		setSelectedUnits( newUnits );
+	};
+
 	// For shorthand style & backwards compatibility, handle flat string value.
 	const values =
 		typeof valuesProp !== 'string'
@@ -46,18 +59,32 @@ export default function BoxInputControls( {
 	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
-			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<Tooltip text={ label } position="top" key={ key }>
-					<div className="components-border-radius-control__tooltip-wrapper">
-						<UnitControl
-							{ ...props }
-							aria-label={ label }
-							value={ values[ key ] }
-							onChange={ createHandleOnChange( key ) }
-						/>
-					</div>
-				</Tooltip>
-			) ) }
+			{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue( values[ corner ] );
+
+				const computedUnit = values[ corner ]
+					? parsedUnit
+					: selectedUnits[ corner ] || selectedUnits.flat;
+
+				return (
+					<Tooltip text={ label } position="top" key={ corner }>
+						<div className="components-border-radius-control__tooltip-wrapper">
+							<UnitControl
+								{ ...props }
+								aria-label={ label }
+								value={ [ parsedQuantity, computedUnit ].join(
+									''
+								) }
+								onChange={ createHandleOnChange( corner ) }
+								onUnitChange={ createHandleOnUnitChange(
+									corner
+								) }
+							/>
+						</div>
+					</Tooltip>
+				);
+			} ) }
 		</div>
 	);
 }