@wordpress/block-editor 15.22.1 → 16.0.0

package/src/components/writing-flow/use-input.js

@@ -16,6 +16,8 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
+import { getSelectionEditableElement } from '../../utils/dom';
 
 /**
  * Handles input for selections across blocks.
@@ -45,10 +47,25 @@ export default function useInput() {
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
-			// If writing flow is editable, NEVER allow the browser to alter the
-			// DOM. This will cause React errors (and the DOM should only be
-			// altered in a controlled fashion).
-			if ( node.contentEditable === 'true' ) {
+			// If writing flow is editable, never allow the browser to alter
+			// the DOM outside of an editable element within a block. This
+			// will cause React errors (and the DOM should only be altered in
+			// a controlled fashion). The wrapper can be contentEditable with
+			// a single selection when the selected block supports
+			// `editableRoot`; in that case edits within the block's editable
+			// element are handled by its rich text instance.
+			if ( node.contentEditable !== 'true' ) {
+				return;
+			}
+
+			if ( hasMultiSelection() ) {
+				event.preventDefault();
+				return;
+			}
+
+			const selection = node.ownerDocument.defaultView.getSelection();
+
+			if ( ! getSelectionEditableElement( selection, node ) ) {
 				event.preventDefault();
 			}
 		}
@@ -127,7 +144,7 @@ export default function useInput() {
 			}
 
 			if ( event.keyCode === ENTER ) {
-				node.contentEditable = false;
+				setContentEditableWrapper( node, false );
 				event.preventDefault();
 				if ( __unstableIsFullySelected() ) {
 					replaceBlocks(
@@ -141,7 +158,7 @@ export default function useInput() {
 				event.keyCode === BACKSPACE ||
 				event.keyCode === DELETE
 			) {
-				node.contentEditable = false;
+				setContentEditableWrapper( node, false );
 				event.preventDefault();
 				if ( __unstableIsFullySelected() ) {
 					removeBlocks( getSelectedBlockClientIds() );
@@ -156,7 +173,7 @@ export default function useInput() {
 				event.key.length === 1 &&
 				! ( event.metaKey || event.ctrlKey )
 			) {
-				node.contentEditable = false;
+				setContentEditableWrapper( node, false );
 				if ( __unstableIsSelectionMergeable() ) {
 					__unstableDeleteSelection( event.keyCode === DELETE );
 				} else {
@@ -176,7 +193,7 @@ export default function useInput() {
 				return;
 			}
 
-			node.contentEditable = false;
+			setContentEditableWrapper( node, false );
 
 			if ( __unstableIsSelectionMergeable() ) {
 				__unstableDeleteSelection();

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

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 
 function selector( select ) {
 	const {
@@ -73,11 +74,9 @@ export default function useMultiSelection() {
 			// all content editable. We can't rely on using the store and
 			// React because re-rending happens too slowly. We need to be
 			// able to select across instances immediately.
-			node.contentEditable = true;
-
 			// For some browsers, like Safari, it is important that focus
 			// happens BEFORE selection removal.
-			node.focus();
+			setContentEditableWrapper( node, true );
 
 			defaultView.getSelection().removeAllRanges();
 		},

package/src/components/writing-flow/use-select-all.js

@@ -10,7 +10,11 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { isInsideRootBlock, getBlockClientId } from '../../utils/dom';
+import {
+	isInsideRootBlock,
+	getBlockClientId,
+	getSelectionEditableElement,
+} from '../../utils/dom';
 
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -25,17 +29,43 @@ export default function useSelectAll() {
 			}
 
 			const selectedClientIds = getSelectedBlockClientIds();
+			const { ownerDocument } = node;
+			const selection = ownerDocument.defaultView.getSelection();
+			// 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 editable =
+				( event.target === node &&
+					getSelectionEditableElement( selection, node ) ) ||
+				event.target;
 
 			if (
 				selectedClientIds.length < 2 &&
-				! isEntirelySelected( event.target )
+				! isEntirelySelected( editable )
 			) {
+				// While the wrapper is contentEditable, the browser default
+				// would select the entire canvas. Select the contents of the
+				// editable element instead, like the default does when the
+				// element itself holds focus.
+				if ( event.target === node && editable !== node ) {
+					event.preventDefault();
+					const range = ownerDocument.createRange();
+					range.selectNodeContents( editable );
+					selection.removeAllRanges();
+					selection.addRange( range );
+					// The native `selectionchange` event is asynchronous;
+					// dispatch it synchronously so that listeners depending
+					// on it (e.g. the rich text internal record sync) run
+					// before any event following this one.
+					ownerDocument.dispatchEvent(
+						new Event( 'selectionchange' )
+					);
+				}
 				return;
 			}
 
 			event.preventDefault();
 
-			const { ownerDocument } = event.target;
 			const [ firstSelectedClientId ] = selectedClientIds;
 			const activeClientId = getBlockClientId(
 				ownerDocument.activeElement

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

@@ -3,7 +3,10 @@
  */
 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';
 
 /**
@@ -11,6 +14,11 @@ import { isSelectionForward } from '@wordpress/dom';
  */
 import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
+import { canHostEditableRoot } from './use-editable-root';
+import { setContentEditableWrapper, setShiftClickInProgress } 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 +47,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 +64,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 +92,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;
@@ -107,13 +104,32 @@ function getRichTextElement( node ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
-		useSelect( blockEditorStore );
+	const blockEditorSelectors = useSelect( blockEditorStore );
+	const {
+		getBlockParents,
+		getBlockSelectionStart,
+		isMultiSelecting,
+		getSelectionStart,
+		getSelectionEnd,
+		getSelectedBlockClientId,
+	} = blockEditorSelectors;
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			let isTripleClick = false;
+
+			function onMouseDown( event ) {
+				isTripleClick = event.detail === 3;
+				setShiftClickInProgress( event.shiftKey );
+			}
+
+			function onKeyDown() {
+				isTripleClick = false;
+				setShiftClickInProgress( false );
+			}
+
 			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
 
@@ -122,7 +138,10 @@ export default function useSelectionObserver() {
 				}
 
 				const startNode = extractSelectionStartNode( selection );
-				const endNode = extractSelectionEndNode( selection );
+				const endNode = extractSelectionEndNode(
+					selection,
+					isTripleClick
+				);
 
 				if (
 					! node.contains( startNode ) ||
@@ -139,6 +158,49 @@ 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(
+							blockEditorSelectors,
+							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 );
 						}
@@ -318,17 +413,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 );
+				setShiftClickInProgress( false );
+			}
+
+			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/utils.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import {
 	serialize,
@@ -116,3 +117,85 @@ function toPlainText( html ) {
 	// Merge any consecutive line breaks
 	return plainText.replace( /\n\n+/g, '\n\n' );
 }
+
+let shiftClickInProgress = false;
+
+/**
+ * Tracks whether a shift+click gesture is in progress, from the shift held
+ * mousedown until its mouseup. Maintained by the selection observer; read by
+ * the block focus handler, since the focus event fired between the two
+ * carries no modifier keys.
+ *
+ * @param {boolean} value Whether a shift+click gesture is in progress.
+ */
+export function setShiftClickInProgress( value ) {
+	shiftClickInProgress = value;
+}
+
+/**
+ * Returns whether a shift+click gesture is in progress.
+ *
+ * @return {boolean} Whether a shift+click gesture is in progress.
+ */
+export function isShiftClickInProgress() {
+	return shiftClickInProgress;
+}
+
+/**
+ * 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 ) {
+		node.focus();
+	}
+
+	return true;
+}

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

@@ -40,7 +40,6 @@ export default function WritingModeControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }

package/src/hooks/background.js

@@ -234,13 +234,15 @@ export function BackgroundImagePanel( {
 			},
 		} ),
 	};
+	const value = isStateSelected
+		? getStyleForState( style, selectedState )
+		: styleValue;
 
 	// Skipped for gradients, which can't be reliably evaluated for contrast.
 	const enableContrastChecking =
-		! isStateSelected &&
-		! styleValue?.color?.gradient &&
-		! styleValue?.background?.gradient &&
-		!! styleValue?.color?.background &&
+		! value?.color?.gradient &&
+		! value?.background?.gradient &&
+		!! value?.color?.background &&
 		( settings?.color?.text || settings?.color?.link ) &&
 		false !== getBlockSupport( name, [ 'color', 'enableContrastChecker' ] );
 
@@ -386,11 +388,7 @@ export function BackgroundImagePanel( {
 			settings={ updatedSettings }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
-			value={
-				isStateSelected
-					? getStyleForState( style, selectedState )
-					: styleValue
-			}
+			value={ value }
 			contrastWarning={ contrastWarning }
 		/>
 	);

package/src/hooks/block-fields/link/styles.scss

@@ -3,12 +3,7 @@
 
 .block-editor-content-only-controls__link {
 	width: 100%;
-	box-shadow: inset 0 0 0 $border-width $gray-400;
-
-	&:focus:not(:disabled) {
-		// Allow smooth transition between focused and unfocused box-shadow states.
-		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
+	border-color: $gray-400;
 }
 
 .block-editor-content-only-controls__link-row {

package/src/hooks/block-fields/media/styles.scss

@@ -3,13 +3,8 @@
 
 .block-editor-content-only-controls__media {
 	width: 100%;
-	box-shadow: inset 0 0 0 $border-width $gray-400;
+	border-color: $gray-400;
 	padding-right: $grid-unit-40;
-
-	&:focus:not(:disabled) {
-		// Allow smooth transition between focused and unfocused box-shadow states.
-		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
 }
 
 .block-editor-content-only-controls__media-replace-flow {