@wordpress/block-editor 12.2.0 → 12.3.1

package/src/components/list-view/use-list-view-client-ids.js

@@ -16,31 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-				__unstableGetClientIdsTree,
-				getBlockEditingMode,
+				getListViewClientIdsTree,
 			} = unlock( select( blockEditorStore ) );
 
-			const removeDisabledBlocks = ( tree ) => {
-				return tree.flatMap( ( { clientId, innerBlocks, ...rest } ) => {
-					if ( getBlockEditingMode( clientId ) === 'disabled' ) {
-						return removeDisabledBlocks( innerBlocks );
-					}
-					return [
-						{
-							clientId,
-							innerBlocks: removeDisabledBlocks( innerBlocks ),
-							...rest,
-						},
-					];
-				} );
-			};
-
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: removeDisabledBlocks(
-					blocks ?? __unstableGetClientIdsTree( rootClientId )
-				),
+				clientIdsTree:
+					blocks ?? getListViewClientIdsTree( rootClientId ),
 			};
 		},
 		[ blocks, rootClientId ]

package/src/components/list-view/use-list-view-drop-zone.js

@@ -7,6 +7,7 @@ import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -71,14 +72,16 @@ export const NESTING_LEVEL_INDENTATION = 28;
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
  * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  * @return {boolean} Whether the gesture is an upward gesture.
  */
-function isUpGesture( point, rect, nestingLevel = 1 ) {
+function isUpGesture( point, rect, nestingLevel = 1, rtl = false ) {
 	// If the block is nested, and the user is dragging to the bottom
-	// left of the block, then it is an upward gesture.
-	const blockIndentPosition =
-		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
-	return point.x < blockIndentPosition;
+	// left of the block (or bottom right in RTL languages), then it is an upward gesture.
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return rtl ? point.x > blockIndentPosition : point.x < blockIndentPosition;
 }
 
 /**
@@ -96,14 +99,29 @@ function isUpGesture( point, rect, nestingLevel = 1 ) {
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
  * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  * @return {number} The desired relative parent level.
  */
-function getDesiredRelativeParentLevel( point, rect, nestingLevel = 1 ) {
-	const blockIndentPosition =
-		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+function getDesiredRelativeParentLevel(
+	point,
+	rect,
+	nestingLevel = 1,
+	rtl = false
+) {
+	// In RTL languages, the block indent position is from the right edge of the block.
+	// In LTR languages, the block indent position is from the left edge of the block.
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+
+	const distanceBetweenPointAndBlockIndentPosition = rtl
+		? blockIndentPosition - point.x
+		: point.x - blockIndentPosition;
+
 	const desiredParentLevel = Math.round(
-		( point.x - blockIndentPosition ) / NESTING_LEVEL_INDENTATION
+		distanceBetweenPointAndBlockIndentPosition / NESTING_LEVEL_INDENTATION
 	);
+
 	return Math.abs( desiredParentLevel );
 }
 
@@ -152,16 +170,24 @@ function getNextNonDraggedBlock( blocksData, index ) {
  * inner block.
  *
  * Determined based on nesting level indentation of the current block, plus
- * the indentation of the next level of nesting.
+ * the indentation of the next level of nesting. The vertical position of the
+ * cursor must also be within the block.
  *
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
  * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  */
-function isNestingGesture( point, rect, nestingLevel = 1 ) {
-	const blockIndentPosition =
-		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
-	return point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
+function isNestingGesture( point, rect, nestingLevel = 1, rtl = false ) {
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+
+	const isNestingHorizontalGesture = rtl
+		? point.x < blockIndentPosition - NESTING_LEVEL_INDENTATION
+		: point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
+
+	return isNestingHorizontalGesture && point.y < rect.bottom;
 }
 
 // Block navigation is always a vertical list, so only allow dropping
@@ -173,10 +199,11 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  *
  * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
  * @param {WPPoint}                  position   The point representing the cursor position when dragging.
+ * @param {boolean}                  rtl        Whether the editor is in RTL mode.
  *
  * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
-export function getListViewDropTarget( blocksData, position ) {
+export function getListViewDropTarget( blocksData, position, rtl = false ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
@@ -251,12 +278,48 @@ export function getListViewDropTarget( blocksData, position ) {
 
 	const isDraggingBelow = candidateEdge === 'bottom';
 
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be trying to nest the block as a child.
+	// If the block already has inner blocks, and is expanded, this should be treated
+	// as nesting since the next block in the tree will be the first child.
+	// However, if the block is collapsed, dragging beneath the block should
+	// still be allowed, as the next visible block in the tree will be a sibling.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.canInsertDraggedBlocksAsChild &&
+		( ( candidateBlockData.innerBlockCount > 0 &&
+			candidateBlockData.isExpanded ) ||
+			isNestingGesture(
+				position,
+				candidateRect,
+				candidateBlockParents.length,
+				rtl
+			) )
+	) {
+		// If the block is expanded, insert the block as the first child.
+		// Otherwise, for collapsed blocks, insert the block as the last child.
+		const newBlockIndex = candidateBlockData.isExpanded
+			? 0
+			: candidateBlockData.innerBlockCount || 0;
+
+		return {
+			rootClientId: candidateBlockData.clientId,
+			blockIndex: newBlockIndex,
+			dropPosition: 'inside',
+		};
+	}
+
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to move the block to be at a parent level.
 	if (
 		isDraggingBelow &&
 		candidateBlockData.rootClientId &&
-		isUpGesture( position, candidateRect, candidateBlockParents.length )
+		isUpGesture(
+			position,
+			candidateRect,
+			candidateBlockParents.length,
+			rtl
+		)
 	) {
 		const nextBlock = getNextNonDraggedBlock(
 			blocksData,
@@ -270,7 +333,8 @@ export function getListViewDropTarget( blocksData, position ) {
 			const desiredRelativeLevel = getDesiredRelativeParentLevel(
 				position,
 				candidateRect,
-				candidateBlockParents.length
+				candidateBlockParents.length,
+				rtl
 			);
 
 			const targetParentIndex = Math.max(
@@ -317,30 +381,6 @@ export function getListViewDropTarget( blocksData, position ) {
 		}
 	}
 
-	// If the user is dragging towards the bottom of the block check whether
-	// they might be trying to nest the block as a child.
-	// If the block already has inner blocks, and is expanded, this should be treated
-	// as nesting since the next block in the tree will be the first child.
-	// However, if the block is collapsed, dragging beneath the block should
-	// still be allowed, as the next visible block in the tree will be a sibling.
-	if (
-		isDraggingBelow &&
-		candidateBlockData.canInsertDraggedBlocksAsChild &&
-		( ( candidateBlockData.innerBlockCount > 0 &&
-			candidateBlockData.isExpanded ) ||
-			isNestingGesture(
-				position,
-				candidateRect,
-				candidateBlockParents.length
-			) )
-	) {
-		return {
-			rootClientId: candidateBlockData.clientId,
-			blockIndex: 0,
-			dropPosition: 'inside',
-		};
-	}
-
 	// If dropping as a sibling, but block cannot be inserted in
 	// this context, return early.
 	if ( ! candidateBlockData.canInsertDraggedBlocksAsSibling ) {
@@ -359,9 +399,12 @@ export function getListViewDropTarget( blocksData, position ) {
 /**
  * A react hook for implementing a drop zone in list view.
  *
+ * @param {Object}       props                   Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
+ *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone() {
+export default function useListViewDropZone( { dropZoneElement } ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -375,6 +418,8 @@ export default function useListViewDropZone() {
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 
+	const rtl = isRTL();
+
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
@@ -389,6 +434,8 @@ export default function useListViewDropZone() {
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
 					const isExpanded = blockElement.dataset.expanded === 'true';
+					const isDraggedBlock =
+						blockElement.classList.contains( 'is-dragging' );
 
 					// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
 					const nestingLevel = parseInt(
@@ -404,9 +451,7 @@ export default function useListViewDropZone() {
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
 						nestingLevel: nestingLevel || undefined,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
+						isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
 						innerBlockCount: getBlockCount( clientId ),
 						canInsertDraggedBlocksAsSibling: isBlockDrag
 							? canInsertBlocks(
@@ -420,19 +465,35 @@ export default function useListViewDropZone() {
 					};
 				} );
 
-				const newTarget = getListViewDropTarget( blocksData, position );
+				const newTarget = getListViewDropTarget(
+					blocksData,
+					position,
+					rtl
+				);
 
 				if ( newTarget ) {
 					setTarget( newTarget );
 				}
 			},
-			[ draggedBlockClientIds ]
+			[
+				canInsertBlocks,
+				draggedBlockClientIds,
+				getBlockCount,
+				getBlockIndex,
+				getBlockRootClientId,
+				rtl,
+			]
 		),
 		200
 	);
 
 	const ref = useDropZone( {
+		dropZoneElement,
 		onDrop: onBlockDrop,
+		onDragLeave() {
+			throttled.cancel();
+			setTarget( null );
+		},
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
 			// handled, so get it now and pass it to the thottled function.

package/src/components/media-placeholder/index.js

@@ -30,8 +30,14 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
-	<URLPopover onClose={ onClose }>
+const InsertFromURLPopover = ( {
+	src,
+	onChange,
+	onSubmit,
+	onClose,
+	popoverAnchor,
+} ) => (
+	<URLPopover anchor={ popoverAnchor } onClose={ onClose }>
 		<form
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
@@ -54,6 +60,44 @@ const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 	</URLPopover>
 );
 
+const URLSelectionUI = ( {
+	isURLInputVisible,
+	src,
+	onChangeSrc,
+	onSubmitSrc,
+	openURLInput,
+	closeURLInput,
+} ) => {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+
+	return (
+		<div
+			className="block-editor-media-placeholder__url-input-container"
+			ref={ setPopoverAnchor }
+		>
+			<Button
+				className="block-editor-media-placeholder__button"
+				onClick={ openURLInput }
+				isPressed={ isURLInputVisible }
+				variant="tertiary"
+			>
+				{ __( 'Insert from URL' ) }
+			</Button>
+			{ isURLInputVisible && (
+				<InsertFromURLPopover
+					src={ src }
+					onChange={ onChangeSrc }
+					onSubmit={ onSubmitSrc }
+					onClose={ closeURLInput }
+					popoverAnchor={ popoverAnchor }
+				/>
+			) }
+		</div>
+	);
+};
+
 export function MediaPlaceholder( {
 	value = {},
 	allowedTypes,
@@ -359,24 +403,14 @@ export function MediaPlaceholder( {
 	const renderUrlSelectionUI = () => {
 		return (
 			onSelectURL && (
-				<div className="block-editor-media-placeholder__url-input-container">
-					<Button
-						className="block-editor-media-placeholder__button"
-						onClick={ openURLInput }
-						isPressed={ isURLInputVisible }
-						variant="tertiary"
-					>
-						{ __( 'Insert from URL' ) }
-					</Button>
-					{ isURLInputVisible && (
-						<InsertFromURLPopover
-							src={ src }
-							onChange={ onChangeSrc }
-							onSubmit={ onSubmitSrc }
-							onClose={ closeURLInput }
-						/>
-					) }
-				</div>
+				<URLSelectionUI
+					isURLInputVisible={ isURLInputVisible }
+					src={ src }
+					onChangeSrc={ onChangeSrc }
+					onSubmitSrc={ onSubmitSrc }
+					openURLInput={ openURLInput }
+					closeURLInput={ closeURLInput }
+				/>
 			)
 		);
 	};

package/src/components/media-replace-flow/index.js

@@ -59,9 +59,7 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
-	popoverProps = {
-		variant: 'toolbar',
-	},
+	popoverProps,
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;

package/src/components/media-replace-flow/test/index.js

@@ -137,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Apply',
+				name: 'Save',
 			} )
 		);
 

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

@@ -120,16 +120,18 @@ function useToolbarFocus(
 	}, [ isAccessibleToolbar, initialFocusOnMount, focusToolbar ] );
 
 	useEffect( () => {
+		// Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
+		const navigableToolbarRef = ref.current;
 		// If initialIndex is passed, we focus on that toolbar item when the
 		// toolbar gets mounted and initial focus is not forced.
 		// We have to wait for the next browser paint because block controls aren't
 		// rendered right away when the toolbar gets mounted.
 		let raf = 0;
-		if ( initialIndex && ! initialFocusOnMount ) {
+		if ( ! initialFocusOnMount ) {
 			raf = window.requestAnimationFrame( () => {
-				const items = getAllToolbarItemsIn( ref.current );
+				const items = getAllToolbarItemsIn( navigableToolbarRef );
 				const index = initialIndex || 0;
-				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
+				if ( items[ index ] && hasFocusWithin( navigableToolbarRef ) ) {
 					items[ index ].focus( {
 						// When focusing newly mounted toolbars,
 						// the position of the popover is often not right on the first render
@@ -141,10 +143,10 @@ function useToolbarFocus(
 		}
 		return () => {
 			window.cancelAnimationFrame( raf );
-			if ( ! onIndexChange || ! ref.current ) return;
+			if ( ! onIndexChange || ! navigableToolbarRef ) return;
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
-			const items = getAllToolbarItemsIn( ref.current );
+			const items = getAllToolbarItemsIn( navigableToolbarRef );
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};

package/src/components/preview-options/index.js

@@ -18,6 +18,7 @@ export default function PreviewOptions( {
 	isEnabled = true,
 	deviceType,
 	setDeviceType,
+	label,
 } ) {
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -27,10 +28,9 @@ export default function PreviewOptions( {
 			className,
 			'block-editor-post-preview__dropdown-content'
 		),
-		position: 'bottom left',
+		placement: 'bottom-end',
 	};
 	const toggleProps = {
-		variant: 'tertiary',
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
 		children: viewLabel,
@@ -52,6 +52,7 @@ export default function PreviewOptions( {
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			label={ label || __( 'Preview' ) }
 		>
 			{ () => (
 				<>

package/src/components/provider/test/experimental-provider.js

@@ -29,18 +29,21 @@ describe( 'BlockEditorProvider', () => {
 	beforeEach( () => {
 		registry = undefined;
 	} );
-	it( 'should strip experimental settings', async () => {
+	it( 'should not allow updating experimental settings', async () => {
 		render(
 			<BlockEditorProvider
 				settings={ {
-					inserterMediaCategories: true,
+					blockInspectorAnimation: true,
 				} }
 			>
 				<HasEditorSetting setRegistry={ setRegistry } />
 			</BlockEditorProvider>
 		);
 		const settings = registry.select( blockEditorStore ).getSettings();
-		expect( settings ).not.toHaveProperty( 'inserterMediaCategories' );
+		// `blockInspectorAnimation` setting is one of the block editor's
+		// default settings, so it has a value. We're testing that its
+		// value was not updated.
+		expect( settings.blockInspectorAnimation ).not.toBe( true );
 	} );
 	it( 'should preserve stable settings', async () => {
 		render(
@@ -65,18 +68,18 @@ describe( 'ExperimentalBlockEditorProvider', () => {
 	beforeEach( () => {
 		registry = undefined;
 	} );
-	it( 'should preserve experimental settings', async () => {
+	it( 'should allow updating/adding experimental settings', async () => {
 		render(
 			<ExperimentalBlockEditorProvider
 				settings={ {
-					inserterMediaCategories: true,
+					blockInspectorAnimation: true,
 				} }
 			>
 				<HasEditorSetting setRegistry={ setRegistry } />
 			</ExperimentalBlockEditorProvider>
 		);
 		const settings = registry.select( blockEditorStore ).getSettings();
-		expect( settings ).toHaveProperty( 'inserterMediaCategories' );
+		expect( settings.blockInspectorAnimation ).toBe( true );
 	} );
 	it( 'should preserve stable settings', async () => {
 		render(

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

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import {
+	children as childrenSource,
+	getSaveElement,
+	__unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getMultilineTag } from './utils';
+
+export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+	// Handle deprecated `children` and `node` sources.
+	if ( Array.isArray( value ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+
+		value = childrenSource.toHTML( value );
+	}
+
+	const MultilineTag = getMultilineTag( multiline );
+
+	if ( ! value && MultilineTag ) {
+		value = `<${ MultilineTag }></${ MultilineTag }>`;
+	}
+
+	const content = <RawHTML>{ value }</RawHTML>;
+
+	if ( Tag ) {
+		const { format, ...restProps } = props;
+		return <Tag { ...restProps }>{ content }</Tag>;
+	}
+
+	return content;
+};
+
+Content.__unstableIsRichTextContent = {};
+
+function findContent( blocks, richTextValues = [] ) {
+	if ( ! Array.isArray( blocks ) ) {
+		blocks = [ blocks ];
+	}
+
+	for ( const block of blocks ) {
+		if (
+			block?.type?.__unstableIsRichTextContent ===
+			Content.__unstableIsRichTextContent
+		) {
+			richTextValues.push( block.props.value );
+			continue;
+		}
+
+		if ( block?.props?.children ) {
+			findContent( block.props.children, richTextValues );
+		}
+	}
+
+	return richTextValues;
+}
+
+function _getSaveElement( { name, attributes, innerBlocks } ) {
+	return getSaveElement(
+		name,
+		attributes,
+		innerBlocks.map( _getSaveElement )
+	);
+}
+
+export function getRichTextValues( blocks = [] ) {
+	getBlockProps.skipFilters = true;
+	const values = findContent(
+		( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )
+	);
+	getBlockProps.skipFilters = false;
+	return values;
+}

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

@@ -16,8 +16,7 @@ import { chevronDown } from '@wordpress/icons';
 import { orderBy } from '../../../utils/sorting';
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const FormatToolbar = () => {