@wordpress/block-editor 9.4.0 → 9.7.0

package/src/components/block-pattern-setup/style.scss

@@ -17,6 +17,8 @@
 			display: block;
 			width: 100%;
 			padding: $grid-unit-40;
+			padding-bottom: 0;
+			padding-top: 0;
 			column-count: 2;
 
 			@include break-huge() {
@@ -53,8 +55,9 @@
 		text-align: left;
 		margin: 0;
 		color: $gray-900;
+		position: absolute;
+		bottom: 0;
 		// Block UI appearance.
-		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
 		display: flex;
 		flex-direction: row;
@@ -129,5 +132,4 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
 	width: 100%;
-	overflow-y: auto;
 }

package/src/components/block-popover/inbetween.js

@@ -172,7 +172,7 @@ function BlockPopoverInbetween( {
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.
@@ -180,6 +180,7 @@ function BlockPopoverInbetween( {
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
+				'block-editor-block-popover__inbetween',
 				props.className
 			) }
 			__unstableForcePosition

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

@@ -57,7 +57,7 @@ export default function BlockPopover( {
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }

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

@@ -18,11 +18,34 @@
 
 		// Allow clicking through the toolbar holder.
 		pointer-events: none;
+	}
 
-		// Position the block toolbar.
-		> * {
+	// Enable pointer events for the toolbar's content.
+	&:not(.block-editor-block-popover__inbetween) .components-popover__content {
+		* {
 			pointer-events: all;
 		}
 	}
 }
 
+.components-popover.block-editor-block-popover__inbetween {
+	// Disable pointer events for dragging and dropping.
+	// Without this the insertion point interferes with the
+	// drop zone.
+	pointer-events: none;
+
+	* {
+		pointer-events: none;
+	}
+
+	// Re-enable pointer events when the inbetween inserter has a '+' button.
+	//
+	// Needs specificity, do not simplify.
+	.is-with-inserter {
+		pointer-events: all;
+
+		* {
+			pointer-events: all;
+		}
+	}
+}

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -22,6 +22,7 @@ export function BlockModeToggle( {
 	isCodeEditingEnabled = true,
 } ) {
 	if (
+		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
 		! isCodeEditingEnabled
 	) {

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -125,7 +125,10 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: firstBlockClientId,
+		maximumLength: 25,
+	} );
 
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock

package/src/components/block-settings-menu-controls/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { compact, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: map(
-					compact( getBlocksByClientId( ids ) ),
+					getBlocksByClientId( ids ).filter( Boolean ),
 					( block ) => block.name
 				),
 				selectedClientIds: ids,

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

@@ -10,6 +10,7 @@ import {
 	Easing,
 	Image,
 } from 'react-native';
+
 /**
  * WordPress dependencies
  */

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

@@ -98,8 +98,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	// Pattern transformation through the `Patterns` API.
 	const onPatternTransform = ( transformedBlocks ) =>
 		replaceBlocks( clientIds, transformedBlocks );
+
+	/**
+	 * The `isTemplate` check is a stopgap solution here.
+	 * Ideally, the Transforms API should handle this
+	 * by allowing to exclude blocks from wildcard transformations.
+	 */
 	const hasPossibleBlockTransformations =
-		!! possibleBlockTransformations.length && canRemove;
+		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
 	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 		return (

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

@@ -17,9 +17,10 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @param {Object}           props
  * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  *
  * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId, maximumLength } ) {
-	return useBlockDisplayTitle( clientId, maximumLength );
+export default function BlockTitle( { clientId, maximumLength, context } ) {
+	return useBlockDisplayTitle( { clientId, maximumLength, context } );
 }

package/src/components/block-title/use-block-display-title.js

@@ -21,14 +21,20 @@ import { store as blockEditorStore } from '../../store';
  * @example
  *
  * ```js
- * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
+ * useBlockDisplayTitle( { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', maximumLength: 17 } );
  * ```
  *
- * @param {string}           clientId      Client ID of block.
- * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
+ * @param {Object}           props
+ * @param {string}           props.clientId      Client ID of block.
+ * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle( clientId, maximumLength ) {
+export default function useBlockDisplayTitle( {
+	clientId,
+	maximumLength,
+	context,
+} ) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
@@ -63,7 +69,7 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	}
 	const blockType = getBlockType( name );
 	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes )
+		? getBlockLabel( blockType, attributes, context )
 		: null;
 
 	const label = reusableBlockTitle || blockLabel;

package/src/components/block-tools/block-contextual-toolbar.js

@@ -36,11 +36,13 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					getBlockType( getBlockName( selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
+					parentBlockType &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
 						true
-					) && selectedBlockClientIds.length <= 1,
+					) &&
+					selectedBlockClientIds.length <= 1,
 			};
 		},
 		[]

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/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -70,7 +71,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 ? (
 					<>
@@ -82,6 +85,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							label={ __( 'Border radius' ) }
+							hideLabelFromVision
 							className="components-border-radius-control__range-control"
 							value={ allValue ?? '' }
 							min={ MIN_BORDER_RADIUS_VALUE }