@wordpress/block-editor 14.1.0 → 14.2.1-next.1f6eadc42.0

package/src/components/spacing-sizes-control/utils.js

@@ -364,6 +364,11 @@ export function getInitialView( values = {}, sides ) {
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
 
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 ) {
+		return sides[ 0 ];
+	}
+
 	if (
 		hasAxisSupport( sides ) &&
 		( hasMatchingAxialValues || hasNoValuesAndBalancedSides )
@@ -371,24 +376,6 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
-	// Single side.
-	// - Ensure the side returned is the first side that has a value.
-	if ( sideValues.length === 1 ) {
-		let side;
-
-		Object.entries( values ).some( ( [ key, value ] ) => {
-			side = key;
-			return value !== undefined;
-		} );
-
-		return side;
-	}
-
-	// Only single side supported and no value defined.
-	if ( sides?.length === 1 && ! sideValues.length ) {
-		return sides[ 0 ];
-	}
-
 	// Default to the Custom (separated sides) view.
 	return VIEWS.custom;
 }

package/src/components/tool-selector/index.js

@@ -41,6 +41,8 @@ function ToolSelector( props, ref ) {
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					{ ...props }
 					ref={ ref }
 					icon={ mode === 'navigation' ? selectIcon : editIcon }

package/src/components/url-input/button.js

@@ -38,6 +38,8 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -51,6 +53,8 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -61,6 +65,8 @@ class URLInputButton extends Component {
 								onChange={ onChange }
 							/>
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								icon={ keyboardReturn }
 								label={ __( 'Submit' ) }
 								type="submit"

package/src/components/url-input/index.js

@@ -539,6 +539,8 @@ class URLInput extends Component {
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
 							className={ clsx(

package/src/components/url-popover/stories/index.story.js

@@ -22,7 +22,12 @@ const TestURLPopover = () => {
 
 	return (
 		<>
-			<Button onClick={ () => setVisiblility( true ) }>Edit URL</Button>
+			<Button
+				__next40pxDefaultSize
+				onClick={ () => setVisiblility( true ) }
+			>
+				Edit URL
+			</Button>
 			{ isVisible && (
 				<URLPopover
 					onClose={ close }
@@ -37,6 +42,7 @@ const TestURLPopover = () => {
 					<form onSubmit={ close }>
 						<input type="url" value={ url } onChange={ setUrl } />
 						<Button
+							__next40pxDefaultSize
 							icon={ keyboardReturn }
 							label={ __( 'Apply' ) }
 							type="submit"

package/src/components/use-block-drop-zone/index.js

@@ -274,6 +274,23 @@ export function isDropTargetValid(
 	return areBlocksAllowed && targetMatchesDraggedBlockParents;
 }
 
+/**
+ * Checks if the given element is an insertion point.
+ *
+ * @param {EventTarget|null} targetToCheck - The element to check.
+ * @param {Document}         ownerDocument - The owner document of the element.
+ * @return {boolean} True if the element is a insertion point, false otherwise.
+ */
+function isInsertionPoint( targetToCheck, ownerDocument ) {
+	const { defaultView } = ownerDocument;
+
+	return !! (
+		defaultView &&
+		targetToCheck instanceof defaultView.HTMLElement &&
+		targetToCheck.dataset.isInsertionPoint
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
@@ -313,8 +330,8 @@ export default function useBlockDropZone( {
 		getAllowedBlocks,
 		isDragging,
 		isGroupable,
-		getSettings,
 		isZoomOutMode,
+		getSectionRootClientId,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -360,7 +377,7 @@ export default function useBlockDropZone( {
 					return;
 				}
 
-				const { sectionRootClientId } = unlock( getSettings() );
+				const sectionRootClientId = getSectionRootClientId();
 
 				// In Zoom Out mode, if the target is not the section root provided by settings then
 				// do not allow dropping as the drop target is not within the root (that which is
@@ -422,6 +439,10 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation, nearestSide ] =
 					dropTargetPosition;
 
+				if ( isZoomOutMode() && operation !== 'insert' ) {
+					return;
+				}
+
 				if ( operation === 'group' ) {
 					const targetBlock = blocks[ targetIndex ];
 					const areAllImages = [
@@ -492,6 +513,8 @@ export default function useBlockDropZone( {
 				getBlockNamesByClientId,
 				getDraggedBlockClientIds,
 				getBlockType,
+				getSectionRootClientId,
+				isZoomOutMode,
 				getBlocks,
 				getBlockListSettings,
 				dropZoneElement,
@@ -504,8 +527,6 @@ export default function useBlockDropZone( {
 				isGroupable,
 				getBlockVariations,
 				getGroupingBlockName,
-				getSettings,
-				isZoomOutMode,
 			]
 		),
 		200
@@ -521,7 +542,18 @@ export default function useBlockDropZone( {
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget.ownerDocument );
 		},
-		onDragLeave() {
+		onDragLeave( event ) {
+			const { ownerDocument } = event.currentTarget;
+
+			// If the drag event is leaving the drop zone and entering an insertion point,
+			// do not hide the insertion point as it is conceptually within the dropzone.
+			if (
+				isInsertionPoint( event.relatedTarget, ownerDocument ) ||
+				isInsertionPoint( event.target, ownerDocument )
+			) {
+				return;
+			}
+
 			throttled.cancel();
 			hideInsertionPoint();
 		},

package/src/components/warning/content.scss

@@ -7,7 +7,7 @@
 
 	// Block UI appearance.
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $white;
 
 	.block-editor-warning__message {
@@ -30,21 +30,14 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		width: 100%;
+		gap: $grid-unit-15;
 	}
 
 	.block-editor-warning__actions {
 		align-items: center;
 		display: flex;
-		margin-top: 1em;
+		gap: $grid-unit-10;
 	}
-
-	.block-editor-warning__action {
-		margin: 0 $grid-unit-10 0 0;
-	}
-}
-
-.block-editor-warning__secondary {
-	margin: auto 0 auto $grid-unit-10;
 }
 
 .components-popover.block-editor-warning__dropdown {

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

@@ -23,6 +23,7 @@ import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
 import useClipboardHandler from './use-clipboard-handler';
+import useEventRedirect from './use-event-redirect';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -65,6 +66,7 @@ export function useWritingFlow() {
 				},
 				[ hasMultiSelection ]
 			),
+			useEventRedirect(),
 		] ),
 		after,
 	];

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

@@ -19,6 +19,7 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { getBlockClientId, isInSameBlock } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
+import { getSelectionRoot } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -190,8 +191,7 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
-				event;
+			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -233,6 +233,11 @@ export default function useArrowNav() {
 				return;
 			}
 
+			const target =
+				ownerDocument.activeElement === node
+					? getSelectionRoot( ownerDocument )
+					: event.target;
+
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -274,6 +279,7 @@ export default function useArrowNav() {
 				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
+				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverse,
@@ -297,6 +303,7 @@ export default function useArrowNav() {
 				isHorizontalEdge( target, isReverseDir ) &&
 				! keepCaretInsideBlock
 			) {
+				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverseDir,

package/src/components/writing-flow/use-event-redirect.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getSelectionRoot } from './utils';
+
+/**
+ * Whenever content editable is enabled on writing flow, it will have focus, so
+ * we need to dispatch some events to the root of the selection to ensure
+ * compatibility with rich text. In the future, perhaps the rich text event
+ * handlers should be attached to the window instead.
+ *
+ * Alternatively, we could try to find a way to always maintain rich text focus.
+ */
+export default function useEventRedirect() {
+	return useRefEffect( ( node ) => {
+		function onInput( event ) {
+			if ( event.target !== node ) {
+				return;
+			}
+
+			const { ownerDocument } = node;
+			const { defaultView } = ownerDocument;
+			const prototype = Object.getPrototypeOf( event );
+			const constructorName = prototype.constructor.name;
+			const Constructor = defaultView[ constructorName ];
+			const root = getSelectionRoot( ownerDocument );
+
+			if ( ! root || root === node ) {
+				return;
+			}
+
+			const init = {};
+
+			for ( const key in event ) {
+				init[ key ] = event[ key ];
+			}
+
+			init.bubbles = false;
+
+			const newEvent = new Constructor( event.type, init );
+			const cancelled = ! root.dispatchEvent( newEvent );
+
+			if ( cancelled ) {
+				event.preventDefault();
+			}
+		}
+
+		const events = [
+			'beforeinput',
+			'input',
+			'compositionstart',
+			'compositionend',
+			'compositionupdate',
+			'keydown',
+		];
+
+		events.forEach( ( eventType ) => {
+			node.addEventListener( eventType, onInput );
+		} );
+
+		return () => {
+			events.forEach( ( eventType ) => {
+				node.removeEventListener( eventType, onInput );
+			} );
+		};
+	}, [] );
+}

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

@@ -16,6 +16,7 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { getSelectionRoot } from './utils';
 
 /**
  * Handles input for selections across blocks.
@@ -49,7 +50,24 @@ export default function useInput() {
 			// DOM. This will cause React errors (and the DOM should only be
 			// altered in a controlled fashion).
 			if ( node.contentEditable === 'true' ) {
-				event.preventDefault();
+				const selection = node.ownerDocument.defaultView.getSelection();
+				const range = selection.rangeCount
+					? selection.getRangeAt( 0 )
+					: null;
+				const root = getSelectionRoot( node.ownerDocument );
+
+				// If selection is contained within a nested editable, allow
+				// input. We need to ensure that selection is maintained.
+				if ( root ) {
+					node.contentEditable = false;
+					root.focus();
+					selection.removeAllRanges();
+					if ( range ) {
+						selection.addRange( range );
+					}
+				} else {
+					event.preventDefault();
+				}
 			}
 		}
 
@@ -59,6 +77,23 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
+				const { ownerDocument } = node;
+				if ( node === ownerDocument.activeElement ) {
+					if ( event.key === 'End' || event.key === 'Home' ) {
+						const selectionRoot = getSelectionRoot( ownerDocument );
+						const selection =
+							ownerDocument.defaultView.getSelection();
+						selection.selectAllChildren( selectionRoot );
+						const method =
+							event.key === 'End'
+								? 'collapseToEnd'
+								: 'collapseToStart';
+						selection[ method ]();
+						event.preventDefault();
+						return;
+					}
+				}
+
 				if ( event.keyCode === ENTER ) {
 					if ( event.shiftKey || __unstableIsFullySelected() ) {
 						return;

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

@@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { getSelectionRoot } from './utils';
 
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -23,12 +24,27 @@ export default function useSelectAll() {
 				return;
 			}
 
+			const selectionRoot = getSelectionRoot( node.ownerDocument );
 			const selectedClientIds = getSelectedBlockClientIds();
 
+			// Abort if there is selection, but it is not within a block.
+			if ( selectionRoot && ! selectedClientIds.length ) {
+				return;
+			}
+
 			if (
+				selectionRoot &&
 				selectedClientIds.length < 2 &&
-				! isEntirelySelected( event.target )
+				! isEntirelySelected( selectionRoot )
 			) {
+				if ( node === node.ownerDocument.activeElement ) {
+					event.preventDefault();
+					node.ownerDocument.defaultView
+						.getSelection()
+						.selectAllChildren( selectionRoot );
+					return;
+				}
+
 				return;
 			}
 
@@ -45,6 +61,7 @@ export default function useSelectAll() {
 					node.ownerDocument.defaultView
 						.getSelection()
 						.removeAllRanges();
+					node.contentEditable = 'false';
 					selectBlock( rootClientId );
 				}
 				return;

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

@@ -4,6 +4,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { create } from '@wordpress/rich-text';
+import { isSelectionForward } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -53,6 +54,14 @@ 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 ) ) {
+		return focusNode.previousSibling ?? focusNode.parentElement;
+	}
+
 	return focusNode.childNodes[ focusOffset ];
 }
 
@@ -98,8 +107,12 @@ function getRichTextElement( node ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockParents,
+		getBlockSelectionStart,
+		isMultiSelecting,
+		getSelectedBlockClientId,
+	} = useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -182,10 +195,17 @@ export default function useSelectionObserver() {
 					return;
 				}
 
+				setContentEditableWrapper(
+					node,
+					!! ( startClientId && endClientId )
+				);
+
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
-						selectBlock( startClientId );
+						if ( getSelectedBlockClientId() !== startClientId ) {
+							selectBlock( startClientId );
+						}
 					} else {
 						multiSelect( startClientId, startClientId );
 					}

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

@@ -36,12 +36,12 @@ export default function useTabNav() {
 
 	// Reference that holds the a flag for enabling or disabling
 	// capturing on the focus capture elements.
-	const noCapture = useRef();
+	const noCaptureRef = useRef();
 
 	function onFocusCapture( event ) {
 		// Do not capture incoming focus if set by us in WritingFlow.
-		if ( noCapture.current ) {
-			noCapture.current = null;
+		if ( noCaptureRef.current ) {
+			noCaptureRef.current = null;
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
@@ -165,7 +165,7 @@ export default function useTabNav() {
 			// Disable focus capturing on the focus capture element, so it
 			// doesn't refocus this block and so it allows default behaviour
 			// (moving focus to the next tabbable element).
-			noCapture.current = true;
+			noCaptureRef.current = true;
 
 			// Focusing the focus capture element, which is located above and
 			// below the editor, should not scroll the page all the way up or

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

@@ -116,3 +116,33 @@ function toPlainText( html ) {
 	// Merge any consecutive line breaks
 	return plainText.replace( /\n\n+/g, '\n\n' );
 }
+
+/**
+ * Gets the current content editable root element based on the selection.
+ * @param {Document} ownerDocument
+ * @return {Element|undefined} The content editable root element.
+ */
+export function getSelectionRoot( ownerDocument ) {
+	const { defaultView } = ownerDocument;
+	const { anchorNode, focusNode } = defaultView.getSelection();
+
+	if ( ! anchorNode || ! focusNode ) {
+		return;
+	}
+
+	const anchorElement = (
+		anchorNode.nodeType === anchorNode.ELEMENT_NODE
+			? anchorNode
+			: anchorNode.parentElement
+	).closest( '[contenteditable]' );
+
+	if ( ! anchorElement ) {
+		return;
+	}
+
+	if ( ! anchorElement.contains( focusNode ) ) {
+		return;
+	}
+
+	return anchorElement;
+}