@wordpress/block-editor 12.18.2 → 12.19.0

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

@@ -321,7 +321,7 @@ describe( 'Basic rendering', () => {
 
 			// Click the "Edit" button to trigger into the editing mode.
 			const editButton = screen.queryByRole( 'button', {
-				name: 'Edit',
+				name: 'Edit link',
 			} );
 
 			await user.click( editButton );
@@ -379,7 +379,7 @@ describe( 'Basic rendering', () => {
 			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
 			const unLinkButton = screen.queryByRole( 'button', {
-				name: 'Unlink',
+				name: 'Remove link',
 			} );
 
 			expect( unLinkButton ).not.toBeInTheDocument();
@@ -397,7 +397,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			const unLinkButton = screen.queryByRole( 'button', {
-				name: 'Unlink',
+				name: 'Remove link',
 			} );
 			expect( unLinkButton ).toBeVisible();
 
@@ -418,7 +418,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			const unLinkButton = screen.queryByRole( 'button', {
-				name: 'Unlink',
+				name: 'Remove link',
 			} );
 			expect( unLinkButton ).toBeVisible();
 
@@ -822,7 +822,7 @@ describe( 'Manual link entry', () => {
 
 			// Click the "Edit" button to trigger into the editing mode.
 			let editButton = screen.queryByRole( 'button', {
-				name: 'Edit',
+				name: 'Edit link',
 			} );
 
 			await user.click( editButton );
@@ -856,7 +856,7 @@ describe( 'Manual link entry', () => {
 
 			// Re-query the edit button as it's been replaced.
 			editButton = screen.queryByRole( 'button', {
-				name: 'Edit',
+				name: 'Edit link',
 			} );
 
 			await user.click( editButton );
@@ -1060,7 +1060,7 @@ describe( 'Default search suggestions', () => {
 		// shown.
 		const currentLinkUI = screen.getByLabelText( 'Currently selected' );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
-			name: 'Edit',
+			name: 'Edit link',
 		} );
 		await user.click( currentLinkBtn );
 
@@ -1502,7 +1502,7 @@ describe( 'Selecting links', () => {
 
 		expect( currentLink ).toBeVisible();
 		expect(
-			screen.queryByRole( 'button', { name: 'Edit' } )
+			screen.queryByRole( 'button', { name: 'Edit link' } )
 		).toBeVisible();
 		expect( currentLinkAnchor ).toBeVisible();
 	} );
@@ -1527,7 +1527,7 @@ describe( 'Selecting links', () => {
 		// Required in order to select the button below.
 		let currentLinkUI = screen.getByLabelText( 'Currently selected' );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
-			name: 'Edit',
+			name: 'Edit link',
 		} );
 
 		// Simulate searching for a term.
@@ -1597,7 +1597,7 @@ describe( 'Selecting links', () => {
 
 				// Check that this suggestion is now shown as selected.
 				expect(
-					screen.getByRole( 'button', { name: 'Edit' } )
+					screen.getByRole( 'button', { name: 'Edit link' } )
 				).toBeVisible();
 				expect( currentLinkAnchor ).toBeVisible();
 			}
@@ -1709,7 +1709,7 @@ describe( 'Selecting links', () => {
 
 				expect( currentLink ).toBeVisible();
 				expect(
-					screen.getByRole( 'button', { name: 'Edit' } )
+					screen.getByRole( 'button', { name: 'Edit link' } )
 				).toBeVisible();
 				expect( currentLinkAnchor ).toBeVisible();
 			}
@@ -1816,66 +1816,6 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
-	it( 'should allow toggling the "Opens in new tab" setting control (only) on the link preview', async () => {
-		const user = userEvent.setup();
-		const selectedLink = fauxEntitySuggestions[ 0 ];
-		const mockOnChange = jest.fn();
-
-		const customSettings = [
-			{
-				id: 'opensInNewTab',
-				title: 'Open in new tab',
-			},
-			{
-				id: 'noFollow',
-				title: 'No follow',
-			},
-		];
-
-		const LinkControlConsumer = () => {
-			const [ link, setLink ] = useState( selectedLink );
-
-			return (
-				<LinkControl
-					value={ link }
-					settings={ customSettings }
-					onChange={ ( newVal ) => {
-						mockOnChange( newVal );
-						setLink( newVal );
-					} }
-				/>
-			);
-		};
-
-		render( <LinkControlConsumer /> );
-
-		const opensInNewTabField = screen.queryByRole( 'checkbox', {
-			name: 'Open in new tab',
-			checked: false,
-		} );
-
-		expect( opensInNewTabField ).toBeInTheDocument();
-
-		// No matter which settings are passed in only the `Opens in new tab`
-		// setting should be shown on the link preview (non-editing) state.
-		const noFollowField = screen.queryByRole( 'checkbox', {
-			name: 'No follow',
-		} );
-		expect( noFollowField ).not.toBeInTheDocument();
-
-		// Check that the link value is updated immediately upon checking
-		// the checkbox.
-		await user.click( opensInNewTabField );
-
-		expect( opensInNewTabField ).toBeChecked();
-
-		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-		expect( mockOnChange ).toHaveBeenCalledWith( {
-			...selectedLink,
-			opensInNewTab: true,
-		} );
-	} );
-
 	it( 'should hide advanced link settings and toggle when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
@@ -2056,25 +1996,6 @@ describe( 'Addition Settings UI', () => {
 			} )
 		);
 	} );
-
-	it( 'should show tooltip with full URL alongside filtered display', async () => {
-		const user = userEvent.setup();
-		const url =
-			'http://www.wordpress.org/wp-content/uploads/a-document.pdf';
-		render( <LinkControl value={ { url } } /> );
-
-		const link = screen.getByRole( 'link' );
-
-		expect( link ).toHaveTextContent( 'a-document.pdf' );
-
-		await user.hover( link );
-
-		expect( await screen.findByRole( 'tooltip' ) ).toHaveTextContent( url );
-
-		await user.unhover( link );
-
-		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
-	} );
 } );
 
 describe( 'Post types', () => {

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

@@ -108,25 +108,6 @@ function ListViewBlock( {
 		blockEditingMode === 'default';
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
-	const blockPositionDescription = getBlockPositionDescription(
-		position,
-		siblingBlockCount,
-		level
-	);
-
-	const blockAriaLabel = isLocked
-		? sprintf(
-				// translators: %s: The title of the block. This string indicates a link to select the locked block.
-				__( '%s (locked)' ),
-				blockTitle
-		  )
-		: blockTitle;
-
-	const settingsAriaLabel = sprintf(
-		// translators: %s: The title of the block.
-		__( 'Options for %s' ),
-		blockTitle
-	);
 
 	const {
 		expand,
@@ -138,18 +119,6 @@ function ListViewBlock( {
 		treeGridElementRef,
 	} = useListViewContext();
 
-	const hasSiblings = siblingBlockCount > 0;
-	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
-		'block-editor-list-view-block__mover-cell',
-		{ 'is-visible': isHovered || isSelected }
-	);
-
-	const listViewBlockSettingsClassName = classnames(
-		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isFirstSelectedBlock }
-	);
-
 	// If multiple blocks are selected, deselect all blocks when the user
 	// presses the escape key.
 	const onKeyDown = ( event ) => {
@@ -187,7 +156,7 @@ function ListViewBlock( {
 				selectBlock( undefined, focusClientId, null, null );
 			}
 
-			focusListItem( focusClientId, treeGridElementRef );
+			focusListItem( focusClientId, treeGridElementRef?.current );
 		},
 		[ selectBlock, treeGridElementRef ]
 	);
@@ -256,6 +225,54 @@ function ListViewBlock( {
 		setSettingsAnchorRect( undefined );
 	}, [ setSettingsAnchorRect ] );
 
+	// Pass in a ref to the row, so that it can be scrolled
+	// into view when selected. For long lists, the placeholder for the
+	// selected block is also observed, within ListViewLeafPlaceholder.
+	useListViewScrollIntoView( {
+		isSelected,
+		rowItemRef: rowRef,
+		selectedClientIds,
+	} );
+
+	// When switching between rendering modes (such as template preview and content only),
+	// it is possible for a block to temporarily be unavailable. In this case, we should not
+	// render the leaf, to avoid errors further down the tree.
+	if ( ! block ) {
+		return null;
+	}
+
+	const blockPositionDescription = getBlockPositionDescription(
+		position,
+		siblingBlockCount,
+		level
+	);
+
+	const blockAriaLabel = isLocked
+		? sprintf(
+				// translators: %s: The title of the block. This string indicates a link to select the locked block.
+				__( '%s (locked)' ),
+				blockTitle
+		  )
+		: blockTitle;
+
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s' ),
+		blockTitle
+	);
+
+	const hasSiblings = siblingBlockCount > 0;
+	const hasRenderedMovers = showBlockMovers && hasSiblings;
+	const moverCellClassName = classnames(
+		'block-editor-list-view-block__mover-cell',
+		{ 'is-visible': isHovered || isSelected }
+	);
+
+	const listViewBlockSettingsClassName = classnames(
+		'block-editor-list-view-block__menu-cell',
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
+	);
+
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
@@ -288,15 +305,6 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
-	// Pass in a ref to the row, so that it can be scrolled
-	// into view when selected. For long lists, the placeholder for the
-	// selected block is also observed, within ListViewLeafPlaceholder.
-	useListViewScrollIntoView( {
-		isSelected,
-		rowItemRef: rowRef,
-		selectedClientIds,
-	} );
-
 	// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
 	const currentlyEditingBlockInCanvas =
 		isSelected && selectedClientIds.length === 1;

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

@@ -42,6 +42,7 @@ import useListViewExpandSelectedItem from './use-list-view-expand-selected-item'
 import { store as blockEditorStore } from '../../store';
 import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
 import { focusListItem } from './utils';
+import useClipboardHandler from './use-clipboard-handler';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -137,14 +138,6 @@ function ListViewComponent(
 
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
-	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {
-		dropZoneElement,
-		expandedState,
-		setExpandedState,
-	} );
-	const elementRef = useRef();
-	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
-
 	const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
@@ -166,11 +159,31 @@ function ListViewComponent(
 		},
 		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
+
+	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {
+		dropZoneElement,
+		expandedState,
+		setExpandedState,
+	} );
+	const elementRef = useRef();
+
+	// Allow handling of copy, cut, and paste events.
+	const clipBoardRef = useClipboardHandler( {
+		selectBlock: selectEditorBlock,
+	} );
+
+	const treeGridRef = useMergeRefs( [
+		clipBoardRef,
+		elementRef,
+		dropZoneRef,
+		ref,
+	] );
+
 	useEffect( () => {
 		// If a blocks are already selected when the list view is initially
 		// mounted, shift focus to the first selected block.
 		if ( selectedClientIds?.length ) {
-			focusListItem( selectedClientIds[ 0 ], elementRef );
+			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
 		}
 		// Disable reason: Only focus on the selected item when the list view is mounted.
 		// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/list-view/use-clipboard-handler.js

@@ -0,0 +1,199 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
+import { focusListItem } from './utils';
+import { getPasteBlocks, setClipboardBlocks } from '../writing-flow/utils';
+
+// This hook borrows from useClipboardHandler in ../writing-flow/use-clipboard-handler.js
+// and adds behaviour for the list view, while skipping partial selection.
+export default function useClipboardHandler( { selectBlock } ) {
+	const {
+		getBlockOrder,
+		getBlockRootClientId,
+		getBlocksByClientId,
+		getPreviousBlockClientId,
+		getSelectedBlockClientIds,
+		getSettings,
+		canInsertBlockType,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
+	const { flashBlock, removeBlocks, replaceBlocks, insertBlocks } =
+		useDispatch( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
+
+	return useRefEffect( ( node ) => {
+		function updateFocusAndSelection( focusClientId, shouldSelectBlock ) {
+			if ( shouldSelectBlock ) {
+				selectBlock( undefined, focusClientId, null, null );
+			}
+
+			focusListItem( focusClientId, node );
+		}
+
+		// 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( clientId ) {
+			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,
+				originallySelectedBlockClientIds: selectedBlockClientIds,
+			};
+		}
+
+		function handler( event ) {
+			if ( event.defaultPrevented ) {
+				// This was possibly already handled in rich-text/use-paste-handler.js.
+				return;
+			}
+
+			// Only handle events that occur within the list view.
+			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
+				return;
+			}
+
+			// Retrieve the block clientId associated with the focused list view row.
+			// This enables applying copy / cut / paste behavior to the focused block,
+			// rather than just the blocks that are currently selected.
+			const listViewRow =
+				event.target.ownerDocument.activeElement?.closest(
+					'[role=row]'
+				);
+			const clientId = listViewRow?.dataset?.block;
+			if ( ! clientId ) {
+				return;
+			}
+
+			const {
+				blocksToUpdate: selectedBlockClientIds,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				originallySelectedBlockClientIds,
+			} = getBlocksToUpdate( clientId );
+
+			if ( selectedBlockClientIds.length === 0 ) {
+				return;
+			}
+
+			event.preventDefault();
+
+			if ( event.type === 'copy' || event.type === 'cut' ) {
+				if ( selectedBlockClientIds.length === 1 ) {
+					flashBlock( selectedBlockClientIds[ 0 ] );
+				}
+
+				notifyCopy( event.type, selectedBlockClientIds );
+				const blocks = getBlocksByClientId( selectedBlockClientIds );
+				setClipboardBlocks( event, blocks );
+			}
+
+			if ( event.type === 'cut' ) {
+				// Don't update the selection if the blocks cannot be deleted.
+				if (
+					! canRemoveBlocks(
+						selectedBlockClientIds,
+						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;
+
+				// Remove blocks, but don't update selection, and it will be handled below.
+				removeBlocks( selectedBlockClientIds, false );
+
+				// Update the selection if the original selection has been removed.
+				const shouldUpdateSelection =
+					originallySelectedBlockClientIds.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 ( event.type === 'paste' ) {
+				const {
+					__experimentalCanUserUseUnfilteredHTML:
+						canUserUseUnfilteredHTML,
+				} = getSettings();
+				const blocks = getPasteBlocks(
+					event,
+					canUserUseUnfilteredHTML
+				);
+
+				if ( selectedBlockClientIds.length === 1 ) {
+					const [ selectedBlockClientId ] = selectedBlockClientIds;
+
+					// If a single block is focused, and the blocks to be posted can
+					// be inserted within the block, then append the pasted blocks
+					// within the focused block. For example, if you have copied a paragraph
+					// block and paste it within a single Group block, this will append
+					// the paragraph block within the Group block.
+					if (
+						blocks.every( ( block ) =>
+							canInsertBlockType(
+								block.name,
+								selectedBlockClientId
+							)
+						)
+					) {
+						insertBlocks(
+							blocks,
+							undefined,
+							selectedBlockClientId
+						);
+						updateFocusAndSelection( blocks[ 0 ]?.clientId, false );
+						return;
+					}
+				}
+
+				replaceBlocks(
+					selectedBlockClientIds,
+					blocks,
+					blocks.length - 1,
+					-1
+				);
+				updateFocusAndSelection( blocks[ 0 ]?.clientId, false );
+			}
+		}
+
+		node.ownerDocument.addEventListener( 'copy', handler );
+		node.ownerDocument.addEventListener( 'cut', handler );
+		node.ownerDocument.addEventListener( 'paste', handler );
+
+		return () => {
+			node.ownerDocument.removeEventListener( 'copy', handler );
+			node.ownerDocument.removeEventListener( 'cut', handler );
+			node.ownerDocument.removeEventListener( 'paste', handler );
+		};
+	}, [] );
+}

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

@@ -63,12 +63,12 @@ export function getCommonDepthClientIds(
  *
  * @typedef {import('@wordpress/element').RefObject} RefObject
  *
- * @param {string}                 focusClientId      The client ID of the block to focus.
- * @param {RefObject<HTMLElement>} treeGridElementRef The container element to search within.
+ * @param {string}       focusClientId   The client ID of the block to focus.
+ * @param {?HTMLElement} treeGridElement The container element to search within.
  */
-export function focusListItem( focusClientId, treeGridElementRef ) {
+export function focusListItem( focusClientId, treeGridElement ) {
 	const getFocusElement = () => {
-		const row = treeGridElementRef.current?.querySelector(
+		const row = treeGridElement?.querySelector(
 			`[role=row][data-block="${ focusClientId }"]`
 		);
 		if ( ! row ) return null;

package/src/components/media-replace-flow/style.scss

@@ -27,7 +27,7 @@
 	}
 
 	.block-editor-link-control {
-		width: 200px; // Hardcoded width avoids resizing of control when switching between preview/edit.
+		width: 300px; // Hardcoded width avoids resizing of control when switching between preview/edit.
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.

package/src/components/media-replace-flow/test/index.js

@@ -105,7 +105,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Edit',
+				name: 'Edit link',
 			} )
 		);
 

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

@@ -28,9 +28,7 @@ function hasOnlyToolbarItem( elements ) {
 
 function getAllFocusableToolbarItemsIn( container ) {
 	return Array.from(
-		container.querySelectorAll(
-			'[data-toolbar-item]:not([disabled]):not([aria-disabled="true"])'
-		)
+		container.querySelectorAll( '[data-toolbar-item]:not([disabled])' )
 	);
 }
 
@@ -144,7 +142,13 @@ function useToolbarFocus( {
 		// We have to wait for the next browser paint because block controls aren't
 		// rendered right away when the toolbar gets mounted.
 		let raf = 0;
-		if ( ! initialFocusOnMount ) {
+
+		// If the toolbar already had focus before the render, we don't want to move it.
+		// https://github.com/WordPress/gutenberg/issues/58511
+		if (
+			! initialFocusOnMount &&
+			! hasFocusWithin( navigableToolbarRef )
+		) {
 			raf = window.requestAnimationFrame( () => {
 				const items =
 					getAllFocusableToolbarItemsIn( navigableToolbarRef );

package/src/components/provider/index.js

@@ -46,7 +46,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		return (
 			<SlotFillProvider passthrough>
-				{ ! settings.__unstableIsPreviewMode && (
+				{ ! settings?.__unstableIsPreviewMode && (
 					<KeyboardShortcuts.Register />
 				) }
 				<BlockRefsProvider>{ children }</BlockRefsProvider>

package/src/components/responsive-block-control/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 
@@ -26,8 +26,7 @@ function ResponsiveBlockControl( props ) {
 		isResponsive = false,
 		defaultLabel = {
 			id: 'all',
-			/* translators: 'Label. Used to signify a layout property (eg: margin, padding) will apply uniformly to all screensizes.' */
-			label: __( 'All' ),
+			label: _x( 'All', 'screen sizes' ),
 		},
 		viewports = [
 			{
@@ -52,12 +51,11 @@ function ResponsiveBlockControl( props ) {
 	const toggleControlLabel =
 		toggleLabel ||
 		sprintf(
-			/* translators: 'Toggle control label. Should the property be the same across all screen sizes or unique per screen size.'. %s property value for the control (eg: margin, padding...etc) */
+			/* translators: %s: Property value for the control (eg: margin, padding, etc.). */
 			__( 'Use the same %s on all screensizes.' ),
 			property
 		);
 
-	/* translators: 'Help text for the responsive mode toggle control.' */
 	const toggleHelpText = __(
 		'Toggle between using the same value for all screen sizes or using a unique value per screen size.'
 	);