@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.2.0

package/src/components/writing-flow/use-arrow-nav.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	computeCaretRect,
 	focus,
@@ -14,12 +11,14 @@ import {
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { getBlockClientId } from '../../utils/dom';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockClientId,
+	getSelectionEditableElement,
+	isInSameBlock,
+} from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -115,17 +114,26 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		// If it's a block wrapper (not itself a contenteditable editing surface)
-		// and there are nested focusable nodes, skip because there are better
-		// candidates. We must not skip contenteditable nodes that happen to
-		// contain links or other focusable inline elements, since those are the
-		// correct navigation targets.
-		//
-		// See https://github.com/WordPress/gutenberg/pull/77474
-		// TODO: Consider fixing focus.tabbable
+		// Skip if there's only one child that is content editable (and thus a
+		// better candidate).
+		if (
+			node.children.length === 1 &&
+			isInSameBlock( node, node.firstElementChild ) &&
+			node.firstElementChild.getAttribute( 'contenteditable' ) === 'true'
+		) {
+			return;
+		}
+
+		// Wrappers that merge with the text flow dissolve into it: their
+		// content is the better candidate. Any other container is a
+		// boundary the caret stops on.
+		const blockType = getBlockType( node.getAttribute( 'data-type' ) );
 		if (
 			node.contentEditable !== 'true' &&
 			getBlockClientId( node ) &&
+			blockType &&
+			( blockType.merge ||
+				hasBlockSupport( blockType, '__experimentalOnMerge' ) ) &&
 			focus.focusable
 				.find( node )
 				// Exclude form elements for now because primary+a cannot be
@@ -141,8 +149,16 @@ export function getClosestTabbable(
 			return false;
 		}
 
-		// Skip focusable elements such as links within content editable nodes.
-		if ( node.isContentEditable && node.contentEditable !== 'true' ) {
+		// Skip focusable elements such as links within content editable
+		// nodes: nodes whose closest editable host is an editable element
+		// within a block. When an editable root (e.g. the canvas wrapper)
+		// is the editing host, everything within it is content editable,
+		// but focusables like block wrappers are not text content.
+		if (
+			node.isContentEditable &&
+			node.contentEditable !== 'true' &&
+			getBlockClientId( node.closest( '[contenteditable="true"]' ) )
+		) {
 			return false;
 		}
 
@@ -167,11 +183,15 @@ export default function useArrowNav() {
 	const {
 		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
+		getNextBlockClientId,
+		getPreviousBlockClientId,
+		getSelectedBlockClientId,
+		getSelectionStart,
 		getSettings,
 		hasMultiSelection,
 		__unstableIsFullySelected,
 	} = useSelect( blockEditorStore );
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, multiSelect } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -198,8 +218,17 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
-				event;
+			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			// When the wrapper is contentEditable and holds focus (the
+			// selected block supports `editableRoot`), the event targets the
+			// wrapper; resolve the editable element containing the selection.
+			const target =
+				( event.target === node &&
+					getSelectionEditableElement(
+						node.ownerDocument.defaultView.getSelection(),
+						node
+					) ) ||
+				event.target;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -226,6 +255,32 @@ export default function useArrowNav() {
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
 				if ( shiftKey ) {
+					// A fully selected multi-selection has no native
+					// selection to extend (use-multi-selection cleared it),
+					// so grow or shrink it by one block at the focus end.
+					// Only without a usable native selection: a selection
+					// that is fully selected because it resolves to a
+					// nesting ancestor keeps its native selection, which
+					// the browser extends natively (and the observer
+					// promotes to the common level).
+					const selection = defaultView.getSelection();
+					if (
+						__unstableIsFullySelected() &&
+						( ! selection.rangeCount || selection.isCollapsed )
+					) {
+						const anchorClientId =
+							getMultiSelectedBlocksStartClientId();
+						const focusClientId =
+							getMultiSelectedBlocksEndClientId();
+						const nextClientId = isReverse
+							? getPreviousBlockClientId( focusClientId )
+							: getNextBlockClientId( focusClientId );
+
+						if ( nextClientId ) {
+							multiSelect( anchorClientId, nextClientId );
+							event.preventDefault();
+						}
+					}
 					return;
 				}
 
@@ -246,6 +301,26 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// A block selected without a text selection within it (e.g. an
+			// image or spacer) has no native selection to extend: start a
+			// block multi-selection with the adjacent block.
+			if (
+				shiftKey &&
+				getSelectedBlockClientId() &&
+				! getSelectionStart().attributeKey
+			) {
+				const selectedClientId = getSelectedBlockClientId();
+				const nextClientId = isReverse
+					? getPreviousBlockClientId( selectedClientId )
+					: getNextBlockClientId( selectedClientId );
+
+				if ( nextClientId ) {
+					multiSelect( selectedClientId, nextClientId );
+					event.preventDefault();
+				}
+				return;
+			}
+
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -271,13 +346,22 @@ export default function useArrowNav() {
 			const { keepCaretInsideBlock } = getSettings();
 
 			if ( shiftKey ) {
-				if (
-					isClosestTabbableABlock( target, isReverse ) &&
-					isNavEdge( target, isReverse )
-				) {
-					node.contentEditable = true;
-					// Firefox doesn't automatically move focus.
-					node.focus();
+				if ( isNavEdge( target, isReverse ) ) {
+					if ( isClosestTabbableABlock( target, isReverse ) ) {
+						setContentEditableWrapper( node, true );
+					} else if ( node.contentEditable === 'true' ) {
+						// There is no block to extend the selection into.
+						// Within an editable wrapper the selection could
+						// natively escape into surrounding editable elements
+						// (e.g. the post title), so keep it inside the block
+						// by extending it to the block's edge.
+						const selection = defaultView.getSelection();
+						selection.extend(
+							target,
+							isReverse ? 0 : target.childNodes.length
+						);
+						event.preventDefault();
+					}
 				}
 			} else if (
 				isVertical &&

package/src/components/writing-flow/use-click-selection.js

@@ -1,19 +1,17 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } =
-		useSelect( blockEditorStore );
+	const {
+		isSelectionEnabled,
+		getBlockSelectionStart,
+		getSelectionStart,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {
@@ -30,9 +28,53 @@ export default function useClickSelection() {
 					// When selecting a single block in a document by holding the shift key,
 					// don't mark this action as multiselection.
 					if ( startClientId && startClientId !== clickedClientId ) {
-						node.contentEditable = true;
-						// Firefox doesn't automatically move focus.
-						node.focus();
+						// When the selected block has no text selection
+						// within it (e.g. an image or spacer), there is no
+						// native selection for the wrapper to adopt when it
+						// is focused, so Safari inserts a caret at the start
+						// of the wrapper and asynchronously reveals it,
+						// scrolling a scrolled-down viewport back up, which
+						// `preventScroll` does not cover. Leave focus alone
+						// in that case: the click moves it.
+						const { clientId, attributeKey } = getSelectionStart();
+						setContentEditableWrapper( node, true, {
+							focus: !! attributeKey,
+						} );
+
+						// The browser extends the selection from the native
+						// anchor. When a block is selected without a text
+						// selection within it, there is no native anchor,
+						// and browsers synthesize one at the nearest text
+						// instead, excluding the block itself. Give the
+						// browser the right anchor before it acts on the
+						// click: the near edge of the selected block, so the
+						// whole block ends up within the extended selection.
+						const { ownerDocument } = node;
+						const selection =
+							ownerDocument.defaultView.getSelection();
+						const blockElement =
+							! attributeKey &&
+							ownerDocument.getElementById(
+								`block-${ clientId }`
+							);
+
+						if (
+							blockElement &&
+							! (
+								selection.anchorNode &&
+								blockElement.contains( selection.anchorNode )
+							)
+						) {
+							const isForward =
+								// eslint-disable-next-line no-bitwise
+								blockElement.compareDocumentPosition(
+									event.target
+								) & node.DOCUMENT_POSITION_FOLLOWING;
+							selection.setPosition(
+								blockElement,
+								isForward ? 0 : blockElement.childNodes.length
+							);
+						}
 					}
 				} else if ( hasMultiSelection() ) {
 					// Allow user to escape out of a multi-selection to a
@@ -55,6 +97,7 @@ export default function useClickSelection() {
 			selectBlock,
 			isSelectionEnabled,
 			getBlockSelectionStart,
+			getSelectionStart,
 			hasMultiSelection,
 		]
 	);

package/src/components/writing-flow/use-clipboard-handler.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	pasteHandler,
 	findTransform,
@@ -11,17 +8,39 @@ import {
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
+	isEntirelySelected,
 } from '@wordpress/dom';
 import { useDispatch, useRegistry, 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 { setClipboardBlocks } from './utils';
+import { setClipboardBlocks, setContentEditableWrapper } from './utils';
 import { getPasteEventData } from '../../utils/pasting';
+import { getBlockClientId } from '../../utils/dom';
+
+/**
+ * Whether the DOM selection entirely spans the content of the given block,
+ * and the block's editable element is the block element itself, like a
+ * heading or a paragraph, not a field within a larger block, like a caption.
+ *
+ * @param {Document} ownerDocument The block's document.
+ * @param {string}   clientId      The block's client ID.
+ *
+ * @return {boolean} Whether the block is entirely selected.
+ */
+function isBlockEntirelySelected( ownerDocument, clientId ) {
+	const selection = ownerDocument.defaultView.getSelection();
+
+	if ( getBlockClientId( selection.anchorNode ) !== clientId ) {
+		return false;
+	}
+
+	const blockElement = ownerDocument.getElementById( `block-${ clientId }` );
+
+	return (
+		!! blockElement?.isContentEditable && isEntirelySelected( blockElement )
+	);
+}
 
 export default function useClipboardHandler() {
 	const registry = useRegistry();
@@ -61,11 +80,25 @@ export default function useClipboardHandler() {
 				return;
 			}
 
+			// Whether the entire content of a block whose editable element
+			// is the block itself is selected: copying all of a heading's
+			// text should copy the heading block. Fields within a larger
+			// block, like a caption, are not the block element and keep
+			// the native copy.
+			// Whether the entire text of a single selected block is
+			// copied, in which case the block itself is copied.
+			const isWholeSingleBlockCopy =
+				event.type === 'copy' &&
+				! hasMultiSelection() &&
+				isBlockEntirelySelected(
+					event.target.ownerDocument,
+					selectedBlockClientIds[ 0 ]
+				);
+
 			// Let native copy/paste behaviour take over in input fields.
 			// But always handle multiple selected blocks.
 			if ( ! hasMultiSelection() ) {
-				const { target } = event;
-				const { ownerDocument } = target;
+				const { ownerDocument } = event.target;
 				// If copying, only consider actual text selection as selection.
 				// Otherwise, any focus on an input field is considered.
 				const hasSelection =
@@ -75,7 +108,7 @@ export default function useClipboardHandler() {
 						  ! ownerDocument.activeElement.isContentEditable;
 
 				// Let native copy behaviour take over in input fields.
-				if ( hasSelection ) {
+				if ( hasSelection && ! isWholeSingleBlockCopy ) {
 					return;
 				}
 			}
@@ -88,7 +121,9 @@ export default function useClipboardHandler() {
 
 			const isSelectionMergeable = __unstableIsSelectionMergeable();
 			const shouldHandleWholeBlocks =
-				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+				__unstableIsSelectionCollapsed() ||
+				__unstableIsFullySelected() ||
+				isWholeSingleBlockCopy;
 			const expandSelectionIsNeeded =
 				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
@@ -130,7 +165,10 @@ export default function useClipboardHandler() {
 				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
 					removeBlocks( selectedBlockClientIds );
 				} else {
-					event.target.ownerDocument.activeElement.contentEditable = false;
+					setContentEditableWrapper(
+						event.target.ownerDocument.activeElement,
+						false
+					);
 					__unstableDeleteSelection();
 				}
 			} else if ( event.type === 'paste' ) {
@@ -196,6 +234,25 @@ export default function useClipboardHandler() {
 					return;
 				}
 
+				// Pasting over an entirely selected block replaces it, the
+				// equivalent of pasting into an empty block.
+				if (
+					! hasMultiSelection() &&
+					isBlockEntirelySelected(
+						event.target.ownerDocument,
+						selectedBlockClientIds[ 0 ]
+					)
+				) {
+					replaceBlocks(
+						selectedBlockClientIds,
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					event.preventDefault();
+					return;
+				}
+
 				// If a block doesn't support splitting, let rich text paste
 				// inline.
 				if (

package/src/components/writing-flow/use-drag-selection.js

@@ -1,27 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
-
-/**
- * Sets the `contenteditable` wrapper element to `value`.
- *
- * @param {HTMLElement} node  Block element.
- * @param {boolean}     value `contentEditable` value (true or false)
- */
-function setContentEditableWrapper( node, value ) {
-	node.contentEditable = value;
-	// Firefox doesn't automatically move focus.
-	if ( value ) {
-		node.focus();
-	}
-}
+import { setContentEditableWrapper } from './utils';
 
 /**
  * Sets a multi-selection based on the native selection across blocks.