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

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,10 @@ import { isSelectionForward } from '@wordpress/dom';
  */
 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 +46,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 +63,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 +91,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 +101,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 +148,10 @@ export default function useSelectionObserver() {
 				}
 
 				const startNode = extractSelectionStartNode( selection );
-				const endNode = extractSelectionEndNode( selection );
+				const endNode = extractSelectionEndNode(
+					selection,
+					isTripleClick
+				);
 
 				if (
 					! node.contains( startNode ) ||
@@ -139,6 +168,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 +279,6 @@ export default function useSelectionObserver() {
 						return;
 					}
 				}
-
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
@@ -226,7 +294,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 +311,7 @@ export default function useSelectionObserver() {
 								range,
 								__unstableIsEditableTree: true,
 							} );
-							selectionChange( {
+							const selectionUpdate = {
 								start: {
 									clientId: startClientId,
 									attributeKey:
@@ -247,9 +324,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 +369,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 +430,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/utils.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import {
 	serialize,
@@ -116,3 +117,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/hooks/background.js

@@ -24,13 +24,13 @@ import {
 	hasBackgroundImageValue,
 	hasBackgroundGradientValue,
 } from '../components/global-styles/background-panel';
-import { globalStylesDataKey } from '../store/private-keys';
 import {
 	getStyleForState,
 	isDefaultBlockStyleState,
 	setStyleForState,
 	useBlockStyleState,
 } from './block-style-state';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -179,24 +179,25 @@ export function BackgroundImagePanel( {
 	asWrapper,
 } ) {
 	const selectedState = useBlockStyleState();
-	const { style, className, backgroundColor, gradient, inheritedValue } =
-		useSelect(
-			( select ) => {
-				const { getBlockAttributes, getSettings } =
-					select( blockEditorStore );
-				const _settings = getSettings();
-				const blockAttributes = getBlockAttributes( clientId );
-				return {
-					style: blockAttributes?.style,
-					className: blockAttributes?.className,
-					backgroundColor: blockAttributes?.backgroundColor,
-					gradient: blockAttributes?.gradient,
-					inheritedValue:
-						_settings[ globalStylesDataKey ]?.blocks?.[ name ],
-				};
-			},
-			[ clientId, name ]
-		);
+	const { style, className, backgroundColor, gradient } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+			const blockAttributes = getBlockAttributes( clientId );
+			return {
+				style: blockAttributes?.style,
+				className: blockAttributes?.className,
+				backgroundColor: blockAttributes?.backgroundColor,
+				gradient: blockAttributes?.gradient,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
 
 	const backgroundGradientSupported = hasBackgroundSupport(
 		name,
@@ -234,13 +235,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' ] );
 
@@ -379,7 +382,6 @@ export function BackgroundImagePanel( {
 
 	return (
 		<StylesBackgroundPanel
-			inheritedValue={ inheritedValue }
 			as={ Wrapper }
 			panelId={ clientId }
 			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
@@ -392,6 +394,7 @@ export function BackgroundImagePanel( {
 					: styleValue
 			}
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

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 {

package/src/hooks/block-fields/rich-text/index.js

@@ -13,13 +13,10 @@ import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { getAllowedFormats } from '../../../components/rich-text/utils';
 import { useEventListeners } from '../../../components/rich-text/event-listeners';
 import FormatEdit from '../../../components/rich-text/format-edit';
-import {
-	keyboardShortcutContext,
-	inputEventContext,
-} from '../../../components/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { useRichText } = unlock( richTextPrivateApis );
+const { useRichText, KeyboardShortcutContext, InputEventContext } =
+	unlock( richTextPrivateApis );
 
 export default function RichTextControl( {
 	data,
@@ -84,8 +81,8 @@ export default function RichTextControl( {
 	return (
 		<>
 			{ isSelected && (
-				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
-					<inputEventContext.Provider value={ inputEvents }>
+				<KeyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<InputEventContext.Provider value={ inputEvents }>
 						<div>
 							<FormatEdit
 								value={ value }
@@ -96,8 +93,8 @@ export default function RichTextControl( {
 								isVisible={ false }
 							/>
 						</div>
-					</inputEventContext.Provider>
-				</keyboardShortcutContext.Provider>
+					</InputEventContext.Provider>
+				</KeyboardShortcutContext.Provider>
 			) }
 			<BaseControl { ...baseControlProps }>
 				<div

package/src/hooks/block-fields/rich-text/styles.scss

@@ -8,7 +8,7 @@
 	margin: 0;
 	background: $white;
 	color: $gray-900;
-	@include input-control( var(--wp-admin-theme-color, #3858e9) );
+	@include input-control;
 	border-color: $gray-600;
 
 	&::placeholder {