@wordpress/block-editor 8.5.7 → 9.1.0

package/src/components/list-view/index.js

@@ -48,33 +48,17 @@ const expanded = ( state, action ) => {
 export const BLOCK_LIST_ITEM_HEIGHT = 36;
 
 /**
- * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
- * recursive component (it renders itself), so this ensures TreeGrid is only
- * present at the very top of the navigation grid.
+ * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                                          Components props.
- * @param {Array}   props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showNestedBlocks                         Flag to enable displaying nested blocks.
- * @param {boolean} props.showBlockMovers                          Flag to enable block movers
- * @param {boolean} props.__experimentalFeatures                   Flag to enable experimental features.
- * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
- * @param {boolean} props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
- * @param {string}  props.id                                       Unique identifier for the root list element (primarily for a11y purposes).
- * @param {boolean} props.expandNested                             Flag to determine whether nested levels are expanded by default.
- * @param {Object}  ref                                            Forwarded ref
+ * @param {Object}  props                 Components props.
+ * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showBlockMovers Flag to enable block movers
+ * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
+ * @param {Object}  ref                   Forwarded ref
  */
 function ListView(
-	{
-		blocks,
-		__experimentalFeatures,
-		__experimentalPersistentListViewFeatures,
-		__experimentalHideContainerBlockActions,
-		showNestedBlocks,
-		showBlockMovers,
-		id,
-		expandNested = false,
-		...props
-	},
+	{ id, blocks, showBlockMovers = false, isExpanded = false },
 	ref
 ) {
 	const {
@@ -131,7 +115,7 @@ function ListView(
 		BLOCK_LIST_ITEM_HEIGHT,
 		visibleBlockCount,
 		{
-			useWindowing: __experimentalPersistentListViewFeatures,
+			useWindowing: true,
 			windowOverscan: 40,
 		}
 	);
@@ -181,25 +165,13 @@ function ListView(
 
 	const contextValue = useMemo(
 		() => ( {
-			__experimentalFeatures,
-			__experimentalPersistentListViewFeatures,
-			__experimentalHideContainerBlockActions,
 			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
 		} ),
-		[
-			__experimentalFeatures,
-			__experimentalPersistentListViewFeatures,
-			__experimentalHideContainerBlockActions,
-			isMounted.current,
-			draggedClientIds,
-			expandedState,
-			expand,
-			collapse,
-		]
+		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
 	);
 
 	return (
@@ -221,12 +193,10 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
-						showNestedBlocks={ showNestedBlocks }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
-						expandNested={ expandNested }
-						{ ...props }
+						isExpanded={ isExpanded }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>

package/src/components/list-view/style.scss

@@ -396,10 +396,11 @@ $block-navigation-max-indent: 8;
 }
 
 // Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
 	margin-left: 0;
 	border: none;
 	box-shadow: none;
+	outline: none;
 }
 
 .block-editor-list-view-placeholder {

package/src/components/navigable-toolbar/README.md

@@ -0,0 +1,16 @@
+# NavigableToolbar
+
+A toolbar that can be navigated with a keyboard
+
+## Props
+
+The component accepts the following props. Props not included in this set will be applied to the element wrapping NavigableMenu content.
+
+## `focusOnMount`
+
+Whether to immediately focus when the component mounts.
+
+- Type: `Boolean`
+- Required: No
+- Default: false
+

package/src/components/navigable-toolbar/index.js

@@ -29,7 +29,12 @@ function hasFocusWithin( container ) {
 function focusFirstTabbableIn( container ) {
 	const [ firstTabbable ] = focus.tabbable.find( container );
 	if ( firstTabbable ) {
-		firstTabbable.focus();
+		firstTabbable.focus( {
+			// When focusing newly mounted toolbars,
+			// the position of the popover is often not right on the first render
+			// This prevents the layout shifts when focusing the dialogs.
+			preventScroll: true,
+		} );
 	}
 }
 
@@ -119,7 +124,12 @@ function useToolbarFocus(
 				const items = getAllToolbarItemsIn( ref.current );
 				const index = initialIndex || 0;
 				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
-					items[ index ].focus();
+					items[ index ].focus( {
+						// When focusing newly mounted toolbars,
+						// the position of the popover is often not right on the first render
+						// This prevents the layout shifts when focusing the dialogs.
+						preventScroll: true,
+					} );
 				}
 			} );
 		}

package/src/components/preview-options/style.scss

@@ -11,10 +11,6 @@
 }
 
 .block-editor-post-preview__dropdown-content {
-	.components-popover__content {
-		overflow-y: visible;
-	}
-
 	&.edit-post-post-preview-dropdown {
 		.components-menu-group {
 			&:first-child {

package/src/components/rich-text/format-toolbar-container.js

@@ -14,7 +14,6 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 		// Render in popover.
 		return (
 			<Popover
-				noArrow
 				position="top center"
 				focusOnMount={ false }
 				anchorRef={ anchorRef }

package/src/components/rich-text/index.js

@@ -36,7 +36,6 @@ import { useBlockEditContext } from '../block-edit';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
-import { useCaretInFormat } from './use-caret-in-format';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
 import { useInputRules } from './use-input-rules';
@@ -268,7 +267,6 @@ function RichTextWrapper(
 		onChange,
 	} );
 
-	useCaretInFormat( { value } );
 	useMarkPersistent( { html: adjustedValue, value } );
 
 	const keyboardShortcuts = useRef( new Set() );
@@ -340,7 +338,7 @@ function RichTextWrapper(
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
-					anchorRef={ anchorRef.current }
+					anchorRef={ anchorRef }
 				/>
 			) }
 			<TagName

package/src/components/rich-text/index.native.js

@@ -125,7 +125,6 @@ function RichTextWrapper(
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
-			isCaretWithinFormattedText,
 			getSelectionStart,
 			getSelectionEnd,
 			getSettings,
@@ -163,7 +162,6 @@ function RichTextWrapper(
 		}
 
 		return {
-			isCaretWithinFormattedText: isCaretWithinFormattedText(),
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
@@ -177,7 +175,6 @@ function RichTextWrapper(
 	// retrieved from the store on merge.
 	// To do: fix this somehow.
 	const {
-		isCaretWithinFormattedText,
 		selectionStart,
 		selectionEnd,
 		isSelected,
@@ -600,7 +597,6 @@ function RichTextWrapper(
 			__unstableIsSelected={ isSelected }
 			__unstableInputRule={ inputRule }
 			__unstableMultilineTag={ multilineTag }
-			__unstableIsCaretWithinFormattedText={ isCaretWithinFormattedText }
 			__unstableOnEnterFormattedText={ enterFormattedText }
 			__unstableOnExitFormattedText={ exitFormattedText }
 			__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }

package/src/components/rich-text/style.scss

@@ -42,17 +42,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		min-width: auto;
 		margin-bottom: $grid-unit-10;
 		box-shadow: none;
-
-		// Block UI appearance.
-		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
-		background-color: $white;
+		outline: none;
 	}
 
-	.components-toolbar-group,
 	.components-toolbar {
-		// The popover already provides a border.
-		border: none;
+		border-radius: $radius-block-ui;
 	}
 
 	.components-toolbar__control,

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

@@ -303,6 +303,7 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
+					event.preventDefault();
 					if ( this.props.onSubmit ) {
 						this.props.onSubmit( null, event );
 					}
@@ -350,6 +351,7 @@ class URLInput extends Component {
 				break;
 			}
 			case ENTER: {
+				event.preventDefault();
 				if ( this.state.selectedSuggestion !== null ) {
 					this.selectLink( suggestion );
 
@@ -418,7 +420,7 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
-			label,
+			label = null,
 			className,
 			isFullWidth,
 			instanceId,
@@ -435,8 +437,10 @@ class URLInput extends Component {
 			suggestionOptionIdPrefix,
 		} = this.state;
 
+		const inputId = `url-input-control-${ instanceId }`;
+
 		const controlProps = {
-			id: `url-input-control-${ instanceId }`,
+			id: inputId, // Passes attribute to label for the for attribute
 			label,
 			className: classnames( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
@@ -444,6 +448,7 @@ class URLInput extends Component {
 		};
 
 		const inputProps = {
+			id: inputId,
 			value,
 			required: true,
 			className: 'block-editor-url-input__input',
@@ -453,7 +458,7 @@ class URLInput extends Component {
 			placeholder,
 			onKeyDown: this.onKeyDown,
 			role: 'combobox',
-			'aria-label': __( 'URL' ),
+			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
 			'aria-owns': suggestionsListboxId,
@@ -533,7 +538,7 @@ class URLInput extends Component {
 			!! suggestions.length
 		) {
 			return (
-				<Popover position="bottom" noArrow focusOnMount={ false }>
+				<Popover position="bottom" focusOnMount={ false }>
 					<div
 						{ ...suggestionsListProps }
 						className={ classnames(

package/src/components/use-block-display-information/index.js

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
  * @property {string} title       Human-readable block type label.
  * @property {WPIcon} icon        Block type icon.
  * @property {string} description A detailed block type description.
+ * @property {string} anchor      HTML anchor.
  */
 
 /**
@@ -63,6 +64,7 @@ export default function useBlockDisplayInformation( clientId ) {
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
+				anchor: attributes?.anchor,
 			};
 		},
 		[ clientId ]

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

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import { useSharedValue } from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { useThrottle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockListContext } from '../block-list/block-list-context';
+import { getDistanceToNearestEdge } from '../../utils/math';
+import useOnBlockDrop from '../use-on-block-drop';
+
+/** @typedef {import('../../utils/math').WPPoint} WPPoint */
+
+/**
+ * The orientation of a block list.
+ *
+ * @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation
+ */
+
+/**
+ * Given a list of blocks layouts finds the index that a block should be dropped at.
+ *
+ * @param {Object}                 blocksLayouts Blocks layouts object.
+ * @param {WPPoint}                position      The position of the item being dragged.
+ * @param {WPBlockListOrientation} orientation   The orientation of a block list.
+ * @param {boolean}                isRTL         Check if current locale is RTL.
+ *
+ * @return {number|undefined} The block index that's closest to the drag position.
+ */
+export function getNearestBlockIndex(
+	blocksLayouts,
+	position,
+	orientation,
+	isRTL
+) {
+	const allowedEdges =
+		orientation === 'horizontal'
+			? [ 'left', 'right' ]
+			: [ 'top', 'bottom' ];
+
+	const isRightToLeft = isRTL;
+
+	let candidateIndex;
+	let candidateDistance;
+
+	// Only enabled for root level blocks.
+	blocksLayouts.forEach( ( element, index ) => {
+		const { x, y, width, height } = element;
+		const rect = {
+			x: element.x,
+			y: element.y,
+			top: y,
+			right: x + width,
+			bottom: y + height,
+			left: x,
+			width,
+			height,
+		};
+		const [ distance, edge ] = getDistanceToNearestEdge(
+			position,
+			rect,
+			allowedEdges
+		);
+
+		if ( candidateDistance === undefined || distance < candidateDistance ) {
+			// If the user is dropping to the trailing edge of the block
+			// add 1 to the index to represent dragging after.
+			// Take RTL languages into account where the left edge is
+			// the trailing edge.
+			const isTrailingEdge =
+				edge === 'bottom' ||
+				( ! isRightToLeft && edge === 'right' ) ||
+				( isRightToLeft && edge === 'left' );
+			const offset = isTrailingEdge ? 1 : 0;
+
+			// Update the currently known best candidate.
+			candidateDistance = distance;
+			candidateIndex = index + offset;
+		}
+	} );
+	return candidateIndex;
+}
+
+/**
+ * @typedef  {Object} WPBlockDropZoneConfig
+ * @property {string} rootClientId The root client id for the block list.
+ */
+
+/**
+ * A React hook that can be used to make a block list handle drag and drop.
+ *
+ * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
+ *
+ * @return {Object} An object that contains `targetBlockIndex` and the event
+ * handlers `onBlockDragOver`, `onBlockDragEnd` and `onBlockDrop`.
+ */
+export default function useBlockDropZone( {
+	// An undefined value represents a top-level block. Default to an empty
+	// string for this so that `targetRootClientId` can be easily compared to
+	// values returned by the `getRootBlockClientId` selector, which also uses
+	// an empty string to represent top-level blocks.
+	rootClientId: targetRootClientId = '',
+} = {} ) {
+	const targetBlockIndex = useSharedValue( null );
+
+	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
+	const {
+		blocksLayouts,
+		getBlockLayoutsOrderedByYCoord,
+	} = useBlockListContext();
+
+	const getSortedBlocksLayouts = useCallback( () => {
+		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
+	}, [ blocksLayouts.current ] );
+
+	const isRTL = getSettings().isRTL;
+
+	const onBlockDrop = useOnBlockDrop();
+
+	const throttled = useThrottle(
+		useCallback(
+			( event ) => {
+				const sortedBlockLayouts = getSortedBlocksLayouts();
+
+				const targetIndex = getNearestBlockIndex(
+					sortedBlockLayouts,
+					{ x: event.x, y: event.y },
+					getBlockListSettings( targetRootClientId )?.orientation,
+					isRTL
+				);
+				if ( targetIndex !== null ) {
+					targetBlockIndex.value = targetIndex ?? 0;
+				}
+			},
+			[
+				getSortedBlocksLayouts,
+				getNearestBlockIndex,
+				getBlockListSettings,
+				targetBlockIndex,
+			]
+		),
+		200
+	);
+
+	return {
+		onBlockDragOver( event ) {
+			throttled( event );
+		},
+		onBlockDragEnd() {
+			throttled.cancel();
+			targetBlockIndex.value = null;
+		},
+		onBlockDrop: ( event ) => {
+			if ( targetBlockIndex.value !== null ) {
+				onBlockDrop( {
+					...event,
+					targetRootClientId,
+					targetBlockIndex: targetBlockIndex.value,
+				} );
+			}
+		},
+		targetBlockIndex,
+	};
+}

package/src/components/use-on-block-drop/index.native.js

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneBlock } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * A function that returns an event handler function for block drop events.
+ *
+ * @param {Function} getBlockIndex             A function that gets the index of a block.
+ * @param {Function} getClientIdsOfDescendants A function that gets the client ids of descendant blocks.
+ * @param {Function} moveBlocksToPosition      A function that moves blocks.
+ * @param {Function} insertBlocks              A function that inserts blocks.
+ * @param {Function} clearSelectedBlock        A function that clears block selection.
+ * @return {Function} The event handler for a block drop event.
+ */
+export function onBlockDrop(
+	getBlockIndex,
+	getClientIdsOfDescendants,
+	moveBlocksToPosition,
+	insertBlocks,
+	clearSelectedBlock
+) {
+	return ( {
+		blocks,
+		srcClientIds: sourceClientIds,
+		srcRootClientId: sourceRootClientId,
+		targetBlockIndex,
+		targetRootClientId,
+		type: dropType,
+	} ) => {
+		// If the user is inserting a block.
+		if ( dropType === 'inserter' ) {
+			clearSelectedBlock();
+			const blocksToInsert = blocks.map( ( block ) =>
+				cloneBlock( block )
+			);
+			insertBlocks(
+				blocksToInsert,
+				targetBlockIndex,
+				targetRootClientId,
+				true,
+				null
+			);
+		}
+
+		// If the user is moving a block.
+		if ( dropType === 'block' ) {
+			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
+
+			// If the user is dropping to the same position, return early.
+			if (
+				sourceRootClientId === targetRootClientId &&
+				sourceBlockIndex === targetBlockIndex
+			) {
+				return;
+			}
+
+			// If the user is attempting to drop a block within its own
+			// nested blocks, return early as this would create infinite
+			// recursion.
+			if (
+				sourceClientIds.includes( targetRootClientId ) ||
+				getClientIdsOfDescendants( sourceClientIds ).some(
+					( id ) => id === targetRootClientId
+				)
+			) {
+				return;
+			}
+
+			const isAtSameLevel = sourceRootClientId === targetRootClientId;
+			const draggedBlockCount = sourceClientIds.length;
+
+			// If the block is kept at the same level and moved downwards,
+			// subtract to take into account that the blocks being dragged
+			// were removed from the block list above the insertion point.
+			const insertIndex =
+				isAtSameLevel && sourceBlockIndex < targetBlockIndex
+					? targetBlockIndex - draggedBlockCount
+					: targetBlockIndex;
+
+			moveBlocksToPosition(
+				sourceClientIds,
+				sourceRootClientId,
+				targetRootClientId,
+				insertIndex
+			);
+		}
+	};
+}
+
+/**
+ * A React hook for handling block drop events.
+ *
+ * @return {Function} The event handler for a block drop event.
+ */
+export default function useOnBlockDrop() {
+	const { getBlockIndex, getClientIdsOfDescendants } = useSelect(
+		blockEditorStore
+	);
+	const {
+		insertBlocks,
+		moveBlocksToPosition,
+		clearSelectedBlock,
+	} = useDispatch( blockEditorStore );
+
+	return onBlockDrop(
+		getBlockIndex,
+		getClientIdsOfDescendants,
+		moveBlocksToPosition,
+		insertBlocks,
+		clearSelectedBlock
+	);
+}