@wordpress/block-editor 12.3.0 → 12.3.1

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 );
 }
 
@@ -158,14 +176,18 @@ function getNextNonDraggedBlock( blocksData, index ) {
  * @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 &&
-		point.y < rect.bottom
-	);
+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
@@ -177,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;
@@ -255,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,
@@ -274,7 +333,8 @@ export function getListViewDropTarget( blocksData, position ) {
 			const desiredRelativeLevel = getDesiredRelativeParentLevel(
 				position,
 				candidateRect,
-				candidateBlockParents.length
+				candidateBlockParents.length,
+				rtl
 			);
 
 			const targetParentIndex = Math.max(
@@ -321,36 +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
-			) )
-	) {
-		// 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 dropping as a sibling, but block cannot be inserted in
 	// this context, return early.
 	if ( ! candidateBlockData.canInsertDraggedBlocksAsSibling ) {
@@ -388,6 +418,8 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 
+	const rtl = isRTL();
+
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
@@ -402,6 +434,8 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 				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(
@@ -417,9 +451,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
 						nestingLevel: nestingLevel || undefined,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
+						isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
 						innerBlockCount: getBlockCount( clientId ),
 						canInsertDraggedBlocksAsSibling: isBlockDrag
 							? canInsertBlocks(
@@ -433,13 +465,24 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 					};
 				} );
 
-				const newTarget = getListViewDropTarget( blocksData, position );
+				const newTarget = getListViewDropTarget(
+					blocksData,
+					position,
+					rtl
+				);
 
 				if ( newTarget ) {
 					setTarget( newTarget );
 				}
 			},
-			[ draggedBlockClientIds ]
+			[
+				canInsertBlocks,
+				draggedBlockClientIds,
+				getBlockCount,
+				getBlockIndex,
+				getBlockRootClientId,
+				rtl,
+			]
 		),
 		200
 	);

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/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 = () => {

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	RawHTML,
 	useRef,
 	useCallback,
 	forwardRef,
@@ -46,6 +45,7 @@ import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
+import { Content } from './content';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -419,40 +419,7 @@ function RichTextWrapper(
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
 
-ForwardedRichTextContainer.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;
-};
-
+ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };

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

@@ -6,13 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RawHTML,
-	Platform,
-	useRef,
-	useCallback,
-	forwardRef,
-} from '@wordpress/element';
+import { Platform, useRef, useCallback, forwardRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	pasteHandler,
@@ -55,6 +49,7 @@ import {
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
+import { Content } from './content';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -707,32 +702,7 @@ function RichTextWrapper(
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
 
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		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;
-};
+ForwardedRichTextContainer.Content = Content;
 
 ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;