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

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

@@ -1,16 +1,16 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-import { create } from '@wordpress/rich-text';
+import {
+	create,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { isSelectionForward } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
+import { setContentEditableWrapper } from './utils';
+import { unlock } from '../../lock-unlock';
+
+const { ownsSelection } = unlock( richTextPrivateApis );
 
 /**
  * Extract the selection start node from the selection. When the anchor node is
@@ -39,11 +39,13 @@ function extractSelectionStartNode( selection ) {
  * a text node, the selection offset is the index of a child node. The selection
  * reaches up to but excluding that child node.
  *
- * @param {Selection} selection The selection.
+ * @param {Selection} selection     The selection.
+ * @param {boolean}   isTripleClick Whether the selection comes from a triple
+ *                                  click.
  *
  * @return {Element} The selection start node.
  */
-function extractSelectionEndNode( selection ) {
+function extractSelectionEndNode( selection, isTripleClick ) {
 	const { focusNode, focusOffset } = selection;
 
 	if ( focusNode.nodeType === focusNode.TEXT_NODE ) {
@@ -54,11 +56,18 @@ function extractSelectionEndNode( selection ) {
 		return focusNode;
 	}
 
-	// When the selection is forward (the selection ends with the focus node),
-	// the selection may extend into the next element with an offset of 0. This
-	// may trigger multi selection even though the selection does not visually
-	// end in the next block.
-	if ( focusOffset === 0 && isSelectionForward( selection ) ) {
+	// A triple click selects the paragraph, but the browser extends the
+	// forward selection into the next element at an offset of 0. This may
+	// trigger multi selection even though the selection does not visually end
+	// in the next block. Keyboard selections that legitimately extend to the
+	// same boundary (e.g. Shift+ArrowDown into a focusable block, where the
+	// browser reports the boundary at the element instead of its first text
+	// position) must not be corrected, so only do this for triple clicks.
+	if (
+		focusOffset === 0 &&
+		isSelectionForward( selection ) &&
+		isTripleClick
+	) {
 		return focusNode.previousSibling ?? focusNode.parentElement;
 	}
 
@@ -75,26 +84,6 @@ function findDepth( a, b ) {
 	return depth;
 }
 
-/**
- * Sets the `contenteditable` wrapper element to `value`.
- *
- * @param {HTMLElement} node  Block element.
- * @param {boolean}     value `contentEditable` value (true or false)
- */
-function setContentEditableWrapper( node, value ) {
-	// Since we are calling this on every selection change, check if the value
-	// needs to be updated first because it trigger the browser to recalculate
-	// style.
-	if ( node.contentEditable !== String( value ) ) {
-		node.contentEditable = value;
-
-		// Firefox doesn't automatically move focus.
-		if ( value ) {
-			node.focus();
-		}
-	}
-}
-
 function getRichTextElement( node ) {
 	const element =
 		node.nodeType === node.ELEMENT_NODE ? node : node.parentElement;
@@ -105,15 +94,45 @@ function getRichTextElement( node ) {
  * Sets a multi-selection based on the native selection across blocks.
  */
 export default function useSelectionObserver() {
-	const { multiSelect, selectBlock, selectionChange } =
-		useDispatch( blockEditorStore );
-	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
-		useSelect( blockEditorStore );
+	const {
+		multiSelect,
+		selectBlock,
+		selectionChange,
+		startMultiSelect,
+		stopMultiSelect,
+	} = useDispatch( blockEditorStore );
+	const {
+		getBlockParents,
+		getBlockSelectionStart,
+		isMultiSelecting,
+		getSelectionStart,
+		getSelectionEnd,
+		getSelectedBlockClientId,
+		canHostEditableRoot,
+	} = unlock( useSelect( blockEditorStore ) );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			let isTripleClick = false;
+
+			function onMouseDown( event ) {
+				isTripleClick = event.detail === 3;
+				// A shift+click makes a multi-selection: mark the gesture as
+				// in progress so the clicked block's focus handler does not
+				// select it (collapsing the native range being made), and so
+				// use-multi-selection does not clear the native selection.
+				// The selection is built on mouseup.
+				if ( event.shiftKey ) {
+					startMultiSelect();
+				}
+			}
+
+			function onKeyDown() {
+				isTripleClick = false;
+			}
+
 			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
 
@@ -122,7 +141,10 @@ export default function useSelectionObserver() {
 				}
 
 				const startNode = extractSelectionStartNode( selection );
-				const endNode = extractSelectionEndNode( selection );
+				const endNode = extractSelectionEndNode(
+					selection,
+					isTripleClick
+				);
 
 				if (
 					! node.contains( startNode ) ||
@@ -139,6 +161,46 @@ export default function useSelectionObserver() {
 				// For now we check if the event is a `mouse` event.
 				const isClickShift = event.shiftKey && event.type === 'mouseup';
 				if ( selection.isCollapsed && ! isClickShift ) {
+					const collapsedClientId = getBlockClientId( startNode );
+
+					// If the block supports an editable root, keep (or make)
+					// the wrapper contentEditable so the native selection can
+					// extend across blocks. The wrapper holds focus, so rich
+					// text instances don't sync the selection; do it here.
+					if (
+						! isMultiSelecting() &&
+						collapsedClientId &&
+						// Only keep the wrapper editable when the collapsed
+						// selection is in the block that is actually selected.
+						// A stale native selection may linger in a previously
+						// selected editable root block (e.g. Firefox does not
+						// always move it), which must not re-enable the wrapper
+						// after another block has been selected.
+						collapsedClientId === getSelectedBlockClientId() &&
+						canHostEditableRoot( collapsedClientId )
+					) {
+						setContentEditableWrapper( node, true );
+
+						// While the wrapper is editable it must hold focus: a
+						// nested editable element cannot retain it (the first
+						// DOM mutation moves focus to the host, inconsistently
+						// across browsers). Don't steal focus from UI elements
+						// (e.g. buttons) or editables outside the block (e.g.
+						// the post title). The rich text instance owning the
+						// selection syncs it to the store itself.
+						const { activeElement } = ownerDocument;
+						if (
+							activeElement !== node &&
+							activeElement?.isContentEditable &&
+							node.contains( activeElement ) &&
+							getBlockClientId( activeElement ) ===
+								collapsedClientId
+						) {
+							node.focus();
+						}
+						return;
+					}
+
 					if (
 						node.contentEditable === 'true' &&
 						! isMultiSelecting()
@@ -210,7 +272,6 @@ export default function useSelectionObserver() {
 						return;
 					}
 				}
-
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
@@ -226,7 +287,16 @@ export default function useSelectionObserver() {
 
 						if (
 							richTextElement &&
-							ownerDocument.activeElement !== richTextElement
+							// The rich text instance syncs the selection
+							// itself when its element is editable and owns the
+							// selection (also through a focused editing host).
+							// It may be temporarily non-editable while a drag
+							// that started outside it is in progress (see
+							// rich-text's preventFocusCapture).
+							( richTextElement.contentEditable !== 'true' ||
+								( ownerDocument.activeElement !==
+									richTextElement &&
+									! ownsSelection( richTextElement ) ) )
 						) {
 							const range = selection.getRangeAt( 0 );
 							const richTextData = create( {
@@ -234,7 +304,7 @@ export default function useSelectionObserver() {
 								range,
 								__unstableIsEditableTree: true,
 							} );
-							selectionChange( {
+							const selectionUpdate = {
 								start: {
 									clientId: startClientId,
 									attributeKey:
@@ -247,9 +317,34 @@ export default function useSelectionObserver() {
 									attributeKey:
 										richTextElement.dataset
 											.wpBlockAttributeKey,
-									offset: richTextData.end,
+									// Clamp the end offset to the element. A
+									// forward selection can overshoot past the
+									// rich text (e.g. a triple click extends
+									// into the next block at offset 0), leaving
+									// `end` undefined; that means the selection
+									// reaches through the end of this element's
+									// content.
+									offset:
+										richTextData.end ??
+										richTextData.text.length,
 								},
-							} );
+							};
+							const { start, end } = selectionUpdate;
+							const selectionStart = getSelectionStart();
+							const selectionEnd = getSelectionEnd();
+
+							// Skip the dispatch when the store already holds
+							// the same selection.
+							if (
+								selectionStart.clientId !== start.clientId ||
+								selectionEnd.clientId !== end.clientId ||
+								selectionStart.attributeKey !==
+									start.attributeKey ||
+								selectionStart.offset !== start.offset ||
+								selectionEnd.offset !== end.offset
+							) {
+								selectionChange( selectionUpdate );
+							}
 						} else {
 							selectBlock( startClientId );
 						}
@@ -267,9 +362,19 @@ export default function useSelectionObserver() {
 					];
 					const depth = findDepth( startPath, endPath );
 
+					// If one path ends before they diverge, one block
+					// contains the other, so there are no sibling blocks
+					// to promote the selection to. Record the selection as
+					// is: it resolves to the outer block, which is treated
+					// as fully selected. See `getSelectionNestingAncestor`
+					// in the store.
+					const isAncestorDescendant =
+						depth >= startPath.length || depth >= endPath.length;
+
 					if (
-						startPath[ depth ] !== startClientId ||
-						endPath[ depth ] !== endClientId
+						! isAncestorDescendant &&
+						( startPath[ depth ] !== startClientId ||
+							endPath[ depth ] !== endClientId )
 					) {
 						multiSelect( startPath[ depth ], endPath[ depth ] );
 						return;
@@ -318,17 +423,81 @@ export default function useSelectionObserver() {
 				}
 			}
 
+			// Native `selectionchange` events are asynchronous: a clipboard
+			// event may fire before the store has been updated with a cross
+			// block selection that was just made. Sync it before the clipboard
+			// handlers (bubble phase) read the store.
+			function ensureMultiBlockSelectionSync( event ) {
+				const selection = defaultView.getSelection();
+
+				if ( ! selection.rangeCount || selection.isCollapsed ) {
+					return;
+				}
+
+				// Only a selection across different blocks needs to be synced
+				// here; rich text owns selections within a single block.
+				const startClientId = getBlockClientId(
+					extractSelectionStartNode( selection )
+				);
+				const endClientId = getBlockClientId(
+					extractSelectionEndNode( selection, isTripleClick )
+				);
+
+				if ( startClientId !== endClientId ) {
+					onSelectionChange( event );
+				}
+			}
+
 			ownerDocument.addEventListener(
 				'selectionchange',
 				onSelectionChange
 			);
-			defaultView.addEventListener( 'mouseup', onSelectionChange );
+			function onMouseUp( event ) {
+				onSelectionChange( event );
+				stopMultiSelect();
+			}
+
+			defaultView.addEventListener( 'mouseup', onMouseUp );
+			node.addEventListener( 'mousedown', onMouseDown );
+			node.addEventListener( 'keydown', onKeyDown );
+			ownerDocument.addEventListener(
+				'copy',
+				ensureMultiBlockSelectionSync,
+				true
+			);
+			ownerDocument.addEventListener(
+				'cut',
+				ensureMultiBlockSelectionSync,
+				true
+			);
+			ownerDocument.addEventListener(
+				'paste',
+				ensureMultiBlockSelectionSync,
+				true
+			);
 			return () => {
 				ownerDocument.removeEventListener(
 					'selectionchange',
 					onSelectionChange
 				);
-				defaultView.removeEventListener( 'mouseup', onSelectionChange );
+				defaultView.removeEventListener( 'mouseup', onMouseUp );
+				node.removeEventListener( 'mousedown', onMouseDown );
+				node.removeEventListener( 'keydown', onKeyDown );
+				ownerDocument.removeEventListener(
+					'copy',
+					ensureMultiBlockSelectionSync,
+					true
+				);
+				ownerDocument.removeEventListener(
+					'cut',
+					ensureMultiBlockSelectionSync,
+					true
+				);
+				ownerDocument.removeEventListener(
+					'paste',
+					ensureMultiBlockSelectionSync,
+					true
+				);
 			};
 		},
 		[ multiSelect, selectBlock, selectionChange, getBlockParents ]

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

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { focus, isFormElement } from '@wordpress/dom';
 import { TAB } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
 import { unlock } from '../../lock-unlock';
@@ -176,7 +169,13 @@ export default function useTabNav() {
 		}
 
 		function onFocusOut( event ) {
-			setLastFocus( { ...getLastFocus(), current: event.target } );
+			// `focusout` also fires when focus moves between elements within the
+			// canvas, but only the element focus left the canvas from is of
+			// interest. `contains` is false for a null `relatedTarget`, which is
+			// what focus moving to another document reports.
+			if ( ! node.contains( event.relatedTarget ) ) {
+				setLastFocus( { current: event.target } );
+			}
 
 			const { ownerDocument } = node;
 

package/src/components/writing-flow/utils.js

@@ -1,6 +1,4 @@
-/**
- * WordPress dependencies
- */
+import { __ } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import {
 	serialize,
@@ -10,10 +8,6 @@ import {
 	getBlockTransforms,
 	store as blocksStore,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { getPasteEventData } from '../../utils/pasting';
 import { store as blockEditorStore } from '../../store';
 
@@ -116,3 +110,64 @@ function toPlainText( html ) {
 	// Merge any consecutive line breaks
 	return plainText.replace( /\n\n+/g, '\n\n' );
 }
+
+/**
+ * Makes the wrapper element an editing host, or stops it from being one. The
+ * ARIA attributes travel with the editability: while the wrapper is the
+ * active editing host it must present as a named multiline textbox, per the
+ * WAI-ARIA textbox role, which requires an accessible name.
+ *
+ * @param {HTMLElement} node          Wrapper element.
+ * @param {boolean}     value         Whether the wrapper should be an
+ *                                    editing host.
+ * @param {Object}      options
+ * @param {boolean}     options.focus Move focus to the wrapper when it
+ *                                    becomes an editing host (Firefox does
+ *                                    not automatically move it). Default
+ *                                    true.
+ *
+ * @return {boolean} Whether the wrapper is an editing host now.
+ */
+export function setContentEditableWrapper(
+	node,
+	value,
+	{ focus = true } = {}
+) {
+	// Check first: this is called on every selection change, and setting
+	// contentEditable triggers a style recalculation.
+	if ( node.contentEditable === String( value ) ) {
+		return value;
+	}
+
+	node.contentEditable = value;
+
+	if ( ! value ) {
+		node.removeAttribute( 'role' );
+		node.removeAttribute( 'aria-multiline' );
+		node.removeAttribute( 'aria-label' );
+		return false;
+	}
+
+	// Only act as an editing host if the environment supports it (JSDOM
+	// does not implement contentEditable): without editing host semantics
+	// the wrapper must not claim focus or textbox semantics.
+	if ( ! node.isContentEditable ) {
+		node.removeAttribute( 'contenteditable' );
+		return false;
+	}
+
+	// Expose the host as a named multiline textbox so it has a role and
+	// accessible name once it takes focus. The label is generic because the
+	// host can span several blocks.
+	node.setAttribute( 'role', 'textbox' );
+	node.setAttribute( 'aria-multiline', 'true' );
+	node.setAttribute( 'aria-label', __( 'Editor canvas' ) );
+
+	if ( focus ) {
+		// Without preventScroll, focusing the wrapper scrolls the
+		// viewport to the top of the wrapper.
+		node.focus( { preventScroll: true } );
+	}
+
+	return true;
+}

package/src/components/writing-mode-control/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
 import {

package/src/components/writing-mode-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import WritingModeControl from '../';
 
 const meta = {

package/src/elements/test/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __experimentalGetElementClassName } from '@wordpress/block-editor';
 
 describe( 'element class names', () => {

package/src/hooks/align.js

@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
 import { useBlockEditingMode } from '../components/block-editing-mode';

package/src/hooks/allowed-blocks.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { PrivateInspectorControlsAllowedBlocks } from '../components/inspector-controls/groups';
 import BlockAllowedBlocksControl from '../components/block-allowed-blocks/allowed-blocks-control';
 import { useBlockEditingMode } from '../components/block-editing-mode';

package/src/hooks/anchor.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { InspectorControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 

package/src/hooks/aria-label.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { shouldSkipSerialization } from './utils';
 
 /**

package/src/hooks/auto-inspector-controls.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { DataForm } from '@wordpress/dataviews';
 import { useContext, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { store as blockEditorStore } from '../store';