@wordpress/block-editor 11.5.0 → 11.7.0

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -58,6 +63,7 @@ const MediaReplaceFlow = ( {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
+	const canUpload = !! mediaUpload;
 	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
@@ -152,7 +158,7 @@ const MediaReplaceFlow = ( {
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
-						<>
+						<MediaUploadCheck>
 							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
@@ -171,28 +177,26 @@ const MediaReplaceFlow = ( {
 									</MenuItem>
 								) }
 							/>
-							<MediaUploadCheck>
-								<FormFileUpload
-									onChange={ ( event ) => {
-										uploadFiles( event, onClose );
-									} }
-									accept={ accept }
-									multiple={ multiple }
-									render={ ( { openFileDialog } ) => {
-										return (
-											<MenuItem
-												icon={ upload }
-												onClick={ () => {
-													openFileDialog();
-												} }
-											>
-												{ __( 'Upload' ) }
-											</MenuItem>
-										);
-									} }
-								/>
-							</MediaUploadCheck>
-						</>
+							<FormFileUpload
+								onChange={ ( event ) => {
+									uploadFiles( event, onClose );
+								} }
+								accept={ accept }
+								multiple={ multiple }
+								render={ ( { openFileDialog } ) => {
+									return (
+										<MenuItem
+											icon={ upload }
+											onClick={ () => {
+												openFileDialog();
+											} }
+										>
+											{ __( 'Upload' ) }
+										</MenuItem>
+									);
+								} }
+							/>
+						</MediaUploadCheck>
 						{ onToggleFeaturedImage && (
 							<MenuItem
 								icon={ postFeaturedImage }
@@ -206,7 +210,15 @@ const MediaReplaceFlow = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form className="block-editor-media-flow__url-input">
+						<form
+							className={ classnames(
+								'block-editor-media-flow__url-input',
+								{
+									'has-siblings':
+										canUpload || onToggleFeaturedImage,
+								}
+							) }
+						>
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>

package/src/components/media-replace-flow/style.scss

@@ -10,12 +10,15 @@
 }
 
 .block-editor-media-flow__url-input {
-	border-top: $border-width solid $gray-900;
-	margin-top: $grid-unit-10;
 	margin-right: -$grid-unit-10;
 	margin-left: -$grid-unit-10;
 	padding: $grid-unit-20;
 
+	&.has-siblings {
+		border-top: $border-width solid $gray-900;
+		margin-top: $grid-unit-10;
+	}
+
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
 		top: $grid-unit-20;

package/src/components/off-canvas-editor/appender.js

@@ -4,7 +4,12 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -12,7 +17,14 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import Inserter from '../inserter';
+
+import { unlock } from '../../lock-unlock';
+import { privateApis as blockEditorPrivateApis } from '../../private-apis';
+
+const prioritizedInserterBlocks = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
@@ -58,10 +70,23 @@ export const Appender = forwardRef(
 			);
 		}, [ insertedBlockTitle ] );
 
+		const orderInitialBlockItems = useCallback( ( items ) => {
+			items.sort( ( { id: aName }, { id: bName } ) => {
+				// Sort block items according to `prioritizedInserterBlocks`.
+				let aIndex = prioritizedInserterBlocks.indexOf( aName );
+				let bIndex = prioritizedInserterBlocks.indexOf( bName );
+				// All other block items should come after that.
+				if ( aIndex < 0 ) aIndex = prioritizedInserterBlocks.length;
+				if ( bIndex < 0 ) bIndex = prioritizedInserterBlocks.length;
+				return aIndex - bIndex;
+			} );
+			return items;
+		}, [] );
+
 		if ( hideInserter ) {
 			return null;
 		}
-
+		const { PrivateInserter } = unlock( blockEditorPrivateApis );
 		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
 		const description = sprintf(
 			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
@@ -73,11 +98,11 @@ export const Appender = forwardRef(
 
 		return (
 			<div className="offcanvas-editor-appender">
-				<Inserter
+				<PrivateInserter
 					ref={ ref }
 					rootClientId={ clientId }
 					position="bottom right"
-					isAppender={ true }
+					isAppender
 					selectBlockOnInsert={ false }
 					shouldDirectInsert={ false }
 					__experimentalIsQuick
@@ -88,6 +113,7 @@ export const Appender = forwardRef(
 							setInsertedBlock( maybeInsertedBlock );
 						}
 					} }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 				<div
 					className="offcanvas-editor-appender__description"

package/src/components/off-canvas-editor/branch.js

@@ -97,6 +97,7 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		showAppender: showAppenderProp = true,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -117,7 +118,7 @@ function ListViewBranch( props ) {
 	}
 
 	// Only show the appender at the first level.
-	const showAppender = level === 1;
+	const showAppender = showAppenderProp && level === 1;
 
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
@@ -205,6 +206,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								showAppender={ showAppenderProp }
 							/>
 						) }
 					</AsyncModeProvider>

package/src/components/off-canvas-editor/index.js

@@ -56,20 +56,24 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  *
  * @param {Object}  props                 Components props.
  * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {string}  props.parentClientId  The client id of the parent block.
  * @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}  props.LeafMoreMenu    Optional more menu substitution.
  * @param {string}  props.description     Optional accessible description for the tree grid component.
  * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
+ * @param {string}  props.showAppender    Flag to show or hide the block appender.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
 	{
 		id,
+		parentClientId,
 		blocks,
 		showBlockMovers = false,
 		isExpanded = false,
+		showAppender = true,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
@@ -80,10 +84,9 @@ function OffCanvasEditor(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
-	const { visibleBlockCount, shouldShowInnerBlocks, parentId } = useSelect(
+	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
-				getBlockRootClientId,
 				getGlobalBlockCount,
 				getClientIdsOfDescendants,
 				__unstableGetEditorMode,
@@ -95,10 +98,6 @@ function OffCanvasEditor(
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
 				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
-				parentId:
-					blocks.length > 0
-						? getBlockRootClientId( blocks[ 0 ].clientId )
-						: undefined,
 			};
 		},
 		[ draggedClientIds, blocks ]
@@ -232,7 +231,7 @@ function OffCanvasEditor(
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch
-							parentId={ parentId }
+							parentId={ parentClientId }
 							blocks={ clientIdsTree }
 							selectBlock={ selectEditorBlock }
 							showBlockMovers={ showBlockMovers }
@@ -240,6 +239,7 @@ function OffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
+							showAppender={ showAppender }
 						/>
 						<TreeGridRow
 							level={ 1 }

package/src/components/off-canvas-editor/link-ui.js

@@ -137,7 +137,6 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
-			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl

package/src/components/provider/use-block-sync.js

@@ -76,10 +76,18 @@ export default function useBlockSync( {
 		resetBlocks,
 		resetSelection,
 		replaceInnerBlocks,
+		selectBlock,
 		setHasControlledInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
-	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const {
+		hasSelectedBlock,
+		getBlockName,
+		getBlocks,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlock,
+	} = registry.select( blockEditorStore );
 	const isControlled = useSelect(
 		( select ) => {
 			return (
@@ -159,6 +167,9 @@ export default function useBlockSync( {
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
 			pendingChanges.current.outgoing = [];
+			const hadSelecton = hasSelectedBlock();
+			const selectionAnchor = getSelectionStart();
+			const selectionFocus = getSelectionEnd();
 			setControlledBlocks();
 
 			if ( controlledSelection ) {
@@ -167,6 +178,15 @@ export default function useBlockSync( {
 					controlledSelection.selectionEnd,
 					controlledSelection.initialPosition
 				);
+			} else {
+				const selectionStillExists = getBlock(
+					selectionAnchor.clientId
+				);
+				if ( hadSelecton && ! selectionStillExists ) {
+					selectBlock( clientId );
+				} else {
+					resetSelection( selectionAnchor, selectionFocus );
+				}
 			}
 		}
 	}, [ controlledBlocks, clientId ] );
@@ -182,8 +202,6 @@ export default function useBlockSync( {
 
 	useEffect( () => {
 		const {
-			getSelectionStart,
-			getSelectionEnd,
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
@@ -220,7 +238,6 @@ export default function useBlockSync( {
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;
-
 			if (
 				areBlocksDifferent &&
 				( pendingChanges.current.incoming ||

package/src/components/rich-text/format-edit.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	getActiveFormat,
-	getActiveObject,
-	isCollapsed,
-} from '@wordpress/rich-text';
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -22,37 +18,11 @@ export default function FormatEdit( {
 		}
 
 		const activeFormat = getActiveFormat( value, name );
-		let isActive = activeFormat !== undefined;
+		const isActive = activeFormat !== undefined;
 		const activeObject = getActiveObject( value );
 		const isObjectActive =
 			activeObject !== undefined && activeObject.type === name;
 
-		// Edge case: un-collapsed link formats.
-		// If there is a missing link format at either end of the selection
-		// then we shouldn't show the Edit UI because the selection has exceeded
-		// the bounds of the link format.
-		// Also if the format objects don't match then we're dealing with two separate
-		// links so we should not allow the link to be modified over the top.
-		if ( name === 'core/link' && ! isCollapsed( value ) ) {
-			const formats = value.formats;
-
-			const linkFormatAtStart = formats[ value.start ]?.find(
-				( { type } ) => type === 'core/link'
-			);
-
-			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
-				( { type } ) => type === 'core/link'
-			);
-
-			if (
-				! linkFormatAtStart ||
-				! linkFormatAtEnd ||
-				linkFormatAtStart !== linkFormatAtEnd
-			) {
-				isActive = false;
-			}
-		}
-
 		return (
 			<Edit
 				key={ name }

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

@@ -19,11 +19,7 @@ import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-function InlineSelectionToolbar( {
-	value,
-	editableContentElement,
-	activeFormats,
-} ) {
+function InlineSelectionToolbar( { editableContentElement, activeFormats } ) {
 	const lastFormat = activeFormats[ activeFormats.length - 1 ];
 	const lastFormatType = lastFormat?.type;
 	const settings = useSelect(
@@ -32,7 +28,6 @@ function InlineSelectionToolbar( {
 	);
 	const popoverAnchor = useAnchor( {
 		editableContentElement,
-		value,
 		settings,
 	} );
 
@@ -85,7 +80,6 @@ const FormatToolbarContainer = ( {
 		return (
 			<InlineSelectionToolbar
 				editableContentElement={ editableContentElement }
-				value={ value }
 				activeFormats={ activeFormats }
 			/>
 		);

package/src/components/url-popover/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import URLPopover from '../';
 
-jest.useRealTimers();
-
 /**
  * Returns the first found popover element up the DOM tree.
  *

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

@@ -31,11 +31,10 @@ export default function useInput() {
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
-			if ( ! hasMultiSelection() ) {
-				return;
-			}
-			// Prevent the browser to format something when we have multiselection.
-			if ( event.inputType?.startsWith( 'format' ) ) {
+			// If writing flow is editable, NEVER allow the browser to alter the
+			// DOM. This will cause React errors (and the DOM should only be
+			// altered in a controlled fashion).
+			if ( node.contentEditable === 'true' ) {
 				event.preventDefault();
 			}
 		}