@wordpress/block-editor 12.24.0 → 12.26.0

package/src/components/link-control/search-item.js

@@ -63,7 +63,9 @@ function SearchItemIcon( { isURL, suggestion } ) {
 function addLeadingSlash( url ) {
 	const trimmedURL = url?.trim();
 
-	if ( ! trimmedURL?.length ) return url;
+	if ( ! trimmedURL?.length ) {
+		return url;
+	}
 
 	return url?.replace( /^\/?/, '/' );
 }
@@ -71,7 +73,9 @@ function addLeadingSlash( url ) {
 function removeTrailingSlash( url ) {
 	const trimmedURL = url?.trim();
 
-	if ( ! trimmedURL?.length ) return url;
+	if ( ! trimmedURL?.length ) {
+		return url;
+	}
 
 	return url?.replace( /\/$/, '' );
 }
@@ -95,7 +99,9 @@ const defaultTo = ( d ) => ( v ) => {
  * @return {string} the processed url to display.
  */
 function getURLForDisplay( url ) {
-	if ( ! url ) return url;
+	if ( ! url ) {
+		return url;
+	}
 
 	return pipe(
 		safeDecodeURI,

package/src/components/link-control/search-results.js

@@ -7,7 +7,7 @@ import { VisuallyHidden, MenuGroup } from '@wordpress/components';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -30,7 +30,7 @@ export default function LinkControlSearchResults( {
 	createSuggestionButtonText,
 	suggestionsQuery,
 } ) {
-	const resultsListClasses = classnames(
+	const resultsListClasses = clsx(
 		'block-editor-link-control__search-results',
 		{
 			'is-loading': isLoading,

package/src/components/list-view/block-contents.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -53,7 +53,7 @@ const ListViewBlockContents = forwardRef(
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
-		const className = classnames( 'block-editor-list-view-block-contents', {
+		const className = clsx( 'block-editor-list-view-block-contents', {
 			'is-dropping-before': isBlockMoveTarget,
 		} );
 

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

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	Button,
 	__experimentalHStack as HStack,
@@ -15,11 +14,9 @@ import {
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
-import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -29,9 +26,8 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
-import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
-import { useListViewContext } from './context';
+import { store as blockEditorStore } from '../../store';
 
 function ListViewBlockSelectButton(
 	{
@@ -48,7 +44,6 @@ function ListViewBlockSelectButton(
 		draggable,
 		isExpanded,
 		ariaDescribedBy,
-		updateFocusAndSelection,
 	},
 	ref
 ) {
@@ -58,27 +53,17 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const {
-		canInsertBlockType,
-		getSelectedBlockClientIds,
-		getPreviousBlockClientId,
-		getBlockRootClientId,
-		getBlockOrder,
-		getBlockParents,
-		getBlocksByClientId,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
-	const {
-		duplicateBlocks,
-		multiSelect,
-		removeBlocks,
-		insertAfterBlock,
-		insertBeforeBlock,
-	} = useDispatch( blockEditorStore );
-	const isMatch = useShortcutEventMatch();
+	const { isContentOnly } = useSelect(
+		( select ) => ( {
+			isContentOnly:
+				select( blockEditorStore ).getBlockEditingMode( clientId ) ===
+				'contentOnly',
+		} ),
+		[ clientId ]
+	);
+	const shouldShowLockIcon = isLocked && ! isContentOnly;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
-	const { collapseAll, expand, rootClientId } = useListViewContext();
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -97,256 +82,89 @@ function ListViewBlockSelectButton(
 		onDragStart?.( event );
 	};
 
-	// Determine which blocks to update:
-	// If the current (focused) block is part of the block selection, use the whole selection.
-	// If the focused block is not part of the block selection, only update the focused block.
-	function getBlocksToUpdate() {
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const isUpdatingSelectedBlocks =
-			selectedBlockClientIds.includes( clientId );
-		const firstBlockClientId = isUpdatingSelectedBlocks
-			? selectedBlockClientIds[ 0 ]
-			: clientId;
-		const firstBlockRootClientId =
-			getBlockRootClientId( firstBlockClientId );
-
-		const blocksToUpdate = isUpdatingSelectedBlocks
-			? selectedBlockClientIds
-			: [ clientId ];
-
-		return {
-			blocksToUpdate,
-			firstBlockClientId,
-			firstBlockRootClientId,
-			selectedBlockClientIds,
-		};
-	}
-
 	/**
 	 * @param {KeyboardEvent} event
 	 */
-	async function onKeyDownHandler( event ) {
+	function onKeyDown( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
 			onClick( event );
-		} else if (
-			event.keyCode === BACKSPACE ||
-			event.keyCode === DELETE ||
-			isMatch( 'core/block-editor/remove', event )
-		) {
-			const {
-				blocksToUpdate: blocksToDelete,
-				firstBlockClientId,
-				firstBlockRootClientId,
-				selectedBlockClientIds,
-			} = getBlocksToUpdate();
-
-			// Don't update the selection if the blocks cannot be deleted.
-			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
-				return;
-			}
-
-			let blockToFocus =
-				getPreviousBlockClientId( firstBlockClientId ) ??
-				// If the previous block is not found (when the first block is deleted),
-				// fallback to focus the parent block.
-				firstBlockRootClientId;
-
-			removeBlocks( blocksToDelete, false );
-
-			// Update the selection if the original selection has been removed.
-			const shouldUpdateSelection =
-				selectedBlockClientIds.length > 0 &&
-				getSelectedBlockClientIds().length === 0;
-
-			// If there's no previous block nor parent block, focus the first block.
-			if ( ! blockToFocus ) {
-				blockToFocus = getBlockOrder()[ 0 ];
-			}
-
-			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
-		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { blocksToUpdate, firstBlockRootClientId } =
-				getBlocksToUpdate();
-
-			const canDuplicate = getBlocksByClientId( blocksToUpdate ).every(
-				( block ) => {
-					return (
-						!! block &&
-						hasBlockSupport( block.name, 'multiple', true ) &&
-						canInsertBlockType( block.name, firstBlockRootClientId )
-					);
-				}
-			);
-
-			if ( canDuplicate ) {
-				const updatedBlocks = await duplicateBlocks(
-					blocksToUpdate,
-					false
-				);
-
-				if ( updatedBlocks?.length ) {
-					// If blocks have been duplicated, focus the first duplicated block.
-					updateFocusAndSelection( updatedBlocks[ 0 ], false );
-				}
-			}
-		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { blocksToUpdate } = getBlocksToUpdate();
-			await insertBeforeBlock( blocksToUpdate[ 0 ] );
-			const newlySelectedBlocks = getSelectedBlockClientIds();
-
-			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
-		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { blocksToUpdate } = getBlocksToUpdate();
-			await insertAfterBlock( blocksToUpdate.at( -1 ) );
-			const newlySelectedBlocks = getSelectedBlockClientIds();
-
-			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
-		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { firstBlockRootClientId, selectedBlockClientIds } =
-				getBlocksToUpdate();
-			const blockClientIds = getBlockOrder( firstBlockRootClientId );
-			if ( ! blockClientIds.length ) {
-				return;
-			}
-
-			// If we have selected all sibling nested blocks, try selecting up a level.
-			// This is a similar implementation to that used by `useSelectAll`.
-			// `isShallowEqual` is used for the list view instead of a length check,
-			// as the array of siblings of the currently focused block may be a different
-			// set of blocks from the current block selection if the user is focused
-			// on a different part of the list view from the block selection.
-			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
-				// Only select up a level if the first block is not the root block.
-				// This ensures that the block selection can't break out of the root block
-				// used by the list view, if the list view is only showing a partial hierarchy.
-				if (
-					firstBlockRootClientId &&
-					firstBlockRootClientId !== rootClientId
-				) {
-					updateFocusAndSelection( firstBlockRootClientId, true );
-					return;
-				}
-			}
-
-			// Select all while passing `null` to skip focusing to the editor canvas,
-			// and retain focus within the list view.
-			multiSelect(
-				blockClientIds[ 0 ],
-				blockClientIds[ blockClientIds.length - 1 ],
-				null
-			);
-		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-			const { firstBlockClientId } = getBlocksToUpdate();
-			const blockParents = getBlockParents( firstBlockClientId, false );
-			// Collapse all blocks.
-			collapseAll();
-			// Expand all parents of the current block.
-			expand( blockParents );
 		}
 	}
 
 	return (
-		<>
-			<Button
-				className={ classnames(
-					'block-editor-list-view-block-select-button',
-					className
-				) }
-				onClick={ onClick }
-				onContextMenu={ onContextMenu }
-				onKeyDown={ onKeyDownHandler }
-				onMouseDown={ onMouseDown }
-				ref={ ref }
-				tabIndex={ tabIndex }
-				onFocus={ onFocus }
-				onDragStart={ onDragStartHandler }
-				onDragEnd={ onDragEnd }
-				draggable={ draggable }
-				href={ `#block-${ clientId }` }
-				aria-describedby={ ariaDescribedBy }
-				aria-expanded={ isExpanded }
+		<Button
+			className={ clsx(
+				'block-editor-list-view-block-select-button',
+				className
+			) }
+			onClick={ onClick }
+			onContextMenu={ onContextMenu }
+			onKeyDown={ onKeyDown }
+			onMouseDown={ onMouseDown }
+			ref={ ref }
+			tabIndex={ tabIndex }
+			onFocus={ onFocus }
+			onDragStart={ onDragStartHandler }
+			onDragEnd={ onDragEnd }
+			draggable={ draggable }
+			href={ `#block-${ clientId }` }
+			aria-describedby={ ariaDescribedBy }
+			aria-expanded={ isExpanded }
+		>
+			<ListViewExpander onClick={ onToggleExpanded } />
+			<BlockIcon
+				icon={ blockInformation?.icon }
+				showColors
+				context="list-view"
+			/>
+			<HStack
+				alignment="center"
+				className="block-editor-list-view-block-select-button__label-wrapper"
+				justify="flex-start"
+				spacing={ 1 }
 			>
-				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon
-					icon={ blockInformation?.icon }
-					showColors
-					context="list-view"
-				/>
-				<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>
-					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-							<Truncate
-								className="block-editor-list-view-block-select-button__anchor"
-								ellipsizeMode="auto"
-							>
-								{ blockInformation.anchor }
-							</Truncate>
-						</span>
-					) }
-					{ positionLabel && isSticky && (
-						<Tooltip text={ positionLabel }>
-							<Icon icon={ pinSmall } />
-						</Tooltip>
-					) }
-					{ images.length ? (
-						<span
-							className="block-editor-list-view-block-select-button__images"
-							aria-hidden
+				<span className="block-editor-list-view-block-select-button__title">
+					<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
+				</span>
+				{ blockInformation?.anchor && (
+					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+						<Truncate
+							className="block-editor-list-view-block-select-button__anchor"
+							ellipsizeMode="auto"
 						>
-							{ images.map( ( image, index ) => (
-								<span
-									className="block-editor-list-view-block-select-button__image"
-									key={ image.clientId }
-									style={ {
-										backgroundImage: `url(${ image.url })`,
-										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
-									} }
-								/>
-							) ) }
-						</span>
-					) : null }
-					{ isLocked && (
-						<span className="block-editor-list-view-block-select-button__lock">
-							<Icon icon={ lock } />
-						</span>
-					) }
-				</HStack>
-			</Button>
-		</>
+							{ blockInformation.anchor }
+						</Truncate>
+					</span>
+				) }
+				{ positionLabel && isSticky && (
+					<Tooltip text={ positionLabel }>
+						<Icon icon={ pinSmall } />
+					</Tooltip>
+				) }
+				{ images.length ? (
+					<span
+						className="block-editor-list-view-block-select-button__images"
+						aria-hidden
+					>
+						{ images.map( ( image, index ) => (
+							<span
+								className="block-editor-list-view-block-select-button__image"
+								key={ image.clientId }
+								style={ {
+									backgroundImage: `url(${ image.url })`,
+									zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
+								} }
+							/>
+						) ) }
+					</span>
+				) : null }
+				{ shouldShowLockIcon && (
+					<span className="block-editor-list-view-block-select-button__lock">
+						<Icon icon={ lock } />
+					</span>
+				) }
+			</HStack>
+		</Button>
 	);
 }