@wordpress/block-editor 11.4.0 → 11.6.0

package/src/components/inspector-controls/fill.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +24,7 @@ export default function InspectorControlsFill( {
 	children,
 	group = 'default',
 	__experimentalGroup,
+	resetAllFilter,
 } ) {
 	if ( __experimentalGroup ) {
 		deprecated(
@@ -50,18 +52,40 @@ export default function InspectorControlsFill( {
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to InspectorControlsFill will not have
-					// access to any React Context whose Provider is part of
-					// the InspectorControlsSlot tree. So we re-create the
-					// Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
 					return (
-						<ToolsPanelContext.Provider value={ value }>
-							{ children }
-						</ToolsPanelContext.Provider>
+						<ToolsPanelInspectorControl
+							fillProps={ fillProps }
+							children={ children }
+							resetAllFilter={ resetAllFilter }
+						/>
 					);
 				} }
 			</Fill>
 		</StyleProvider>
 	);
 }
+
+function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
+	const { registerResetAllFilter, deregisterResetAllFilter } = fillProps;
+	useEffect( () => {
+		if ( resetAllFilter && registerResetAllFilter ) {
+			registerResetAllFilter( resetAllFilter );
+		}
+		return () => {
+			if ( resetAllFilter && deregisterResetAllFilter ) {
+				deregisterResetAllFilter( resetAllFilter );
+			}
+		};
+	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+
+	// Children passed to InspectorControlsFill will not have
+	// access to any React Context whose Provider is part of
+	// the InspectorControlsSlot tree. So we re-create the
+	// Provider in this subtree.
+	const value = ! isEmpty( fillProps ) ? fillProps : null;
+	return (
+		<ToolsPanelContext.Provider value={ value }>
+			{ children }
+		</ToolsPanelContext.Provider>
+	);
+}

package/src/components/link-control/index.js

@@ -366,7 +366,7 @@ function LinkControl( {
 						<Button
 							variant="primary"
 							onClick={ handleSubmit }
-							className="xblock-editor-link-control__search-submit"
+							className="block-editor-link-control__search-submit"
 							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
 						>
 							{ __( 'Apply' ) }

package/src/components/link-control/search-item.js

@@ -18,6 +18,7 @@ import {
 	category,
 	file,
 } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 const ICONS_MAP = {
 	post: postList,
@@ -72,7 +73,8 @@ export const LinkControlSearchItem = ( {
 			<span className="block-editor-link-control__search-item-header">
 				<span className="block-editor-link-control__search-item-title">
 					<TextHighlight
-						text={ suggestion.title }
+						// The component expects a plain text string.
+						text={ stripHTML( suggestion.title ) }
 						highlight={ searchTerm }
 					/>
 				</span>

package/src/components/link-control/settings-drawer.js

@@ -11,6 +11,7 @@ import { settings as settingsIcon } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -46,7 +47,7 @@ function LinkSettingsDrawer( {
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
 				icon={ settingsIcon }
-				label={ __( 'Toggle link settings' ) }
+				label={ __( 'Link Settings' ) }
 				aria-controls={ settingsDrawerId }
 			/>
 			<MaybeAnimatePresence>

package/src/components/link-control/settings.js

@@ -20,6 +20,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	const theSettings = settings.map( ( setting ) => (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			className="block-editor-link-control__setting"
 			key={ setting.id }
 			label={ setting.title }

package/src/components/link-control/style.scss

@@ -22,6 +22,20 @@ $preview-image-height: 140px;
 		width: 90vw;
 		max-width: $modal-min-width;
 	}
+
+	.show-icon-labels & {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
 }
 
 // Provides positioning context for reset button. Without this then when an
@@ -72,7 +86,7 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-error {
-	margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
+	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
 .block-editor-link-control__search-actions {
@@ -83,10 +97,6 @@ $preview-image-height: 140px;
 	order: 20;
 }
 
-.components-button .block-editor-link-control__search-submit .has-icon {
-	margin: -1px;
-}
-
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
 	margin-top: -$grid-unit-20 + 1px;
@@ -103,7 +113,7 @@ $preview-image-height: 140px;
 	}
 
 	&::before {
-		height: $grid-unit-20*0.5;
+		height: $grid-unit-20 * 0.5;
 		top: 0;
 		bottom: auto;
 	}
@@ -123,7 +133,7 @@ $preview-image-height: 140px;
 
 .block-editor-link-control__search-results {
 	margin: 0;
-	padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5;
+	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -224,7 +234,6 @@ $preview-image-height: 140px;
 		max-height: 32px;
 	}
 
-
 	.block-editor-link-control__search-item-info,
 	.block-editor-link-control__search-item-title {
 		overflow: hidden;
@@ -344,16 +353,13 @@ $preview-image-height: 140px;
 	width: 100%;
 }
 
-
 .block-editor-link-control__search-item.is-fetching {
-
 	.block-editor-link-control__search-item-description {
 		&::before,
 		&::after {
 			animation: loadingpulse 1s linear infinite;
 			animation-delay: 0.5s; // avoid animating for fast network responses
 		}
-
 	}
 
 	.block-editor-link-control__search-item-image {
@@ -403,7 +409,7 @@ $preview-image-height: 140px;
 	&::before {
 		content: "";
 		position: absolute;
-		top: -#{$block-selected-child-margin*2};
+		top: -#{$block-selected-child-margin * 2};
 		left: 0;
 		display: block;
 		width: 100%;

package/src/components/link-control/test/index.js

@@ -51,8 +51,6 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
 } ) );
 
-jest.useRealTimers();
-
 jest.mock( '@wordpress/compose', () => ( {
 	...jest.requireActual( '@wordpress/compose' ),
 	useReducedMotion: jest.fn( () => true ),
@@ -1670,7 +1668,7 @@ describe( 'Addition Settings UI', () => {
 		render( <LinkControlConsumer /> );
 
 		const settingsToggle = screen.queryByRole( 'button', {
-			name: 'Toggle link settings',
+			name: 'Link Settings',
 			ariaControls: 'link-settings-1',
 		} );
 
@@ -1690,7 +1688,7 @@ describe( 'Addition Settings UI', () => {
 		const user = userEvent.setup();
 
 		const settingsToggle = screen.queryByRole( 'button', {
-			name: 'Toggle link settings',
+			name: 'Link Settings',
 			ariaControls: 'link-settings-1',
 		} );
 
@@ -2241,7 +2239,7 @@ describe( 'Controlling link title text', () => {
 
 async function toggleSettingsDrawer( user ) {
 	const settingsToggle = screen.queryByRole( 'button', {
-		name: 'Toggle link settings',
+		name: 'Link Settings',
 	} );
 
 	await user.click( settingsToggle );

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

@@ -27,6 +27,7 @@ import { sprintf, __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ListViewLeaf from './leaf';
+import useListViewScrollIntoView from './use-list-view-scroll-into-view';
 import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
@@ -57,6 +58,7 @@ function ListViewBlock( {
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
+	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
 
@@ -220,6 +222,19 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	// Pass in a ref to the row, so that it can be scrolled
+	// into view when selected. For long lists, the placeholder for the
+	// selected block is also observed, within ListViewLeafPlaceholder.
+	useListViewScrollIntoView( {
+		isSelected,
+		rowItemRef: rowRef,
+		selectedClientIds,
+	} );
+
+	// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
+	const currentlyEditingBlockInCanvas =
+		isSelected && selectedClientIds.length === 1;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -235,6 +250,7 @@ function ListViewBlock( {
 			data-block={ clientId }
 			isExpanded={ canExpand ? isExpanded : undefined }
 			aria-selected={ !! isSelected || forceSelectionContentLock }
+			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
@@ -256,7 +272,9 @@ function ListViewBlock( {
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
-							tabIndex={ tabIndex }
+							tabIndex={
+								currentlyEditingBlockInCanvas ? 0 : tabIndex
+							}
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
 							selectedClientIds={ selectedClientIds }

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

@@ -155,8 +155,6 @@ function ListViewBranch( props ) {
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
 
-				const showBlock = isDragged || blockInView;
-
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
 				const isSelected = isClientIdSelected(
@@ -165,6 +163,7 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
+				const showBlock = isDragged || blockInView || isSelected;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

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

@@ -19,6 +19,7 @@ export default function ListViewExpander( { onClick } ) {
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
+			data-testid="list-view-expander"
 		>
 			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>

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

@@ -8,6 +8,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,33 +18,45 @@ import useMovingAnimation from '../use-moving-animation';
 
 const AnimatedTreeGridRow = animated( TreeGridRow );
 
-export default function ListViewLeaf( {
-	isSelected,
-	position,
-	level,
-	rowCount,
-	children,
-	className,
-	path,
-	...props
-} ) {
-	const ref = useMovingAnimation( {
-		isSelected,
-		adjustScrolling: false,
-		enableAnimation: true,
-		triggerAnimationOnChange: path,
-	} );
+const ListViewLeaf = forwardRef(
+	(
+		{
+			isSelected,
+			position,
+			level,
+			rowCount,
+			children,
+			className,
+			path,
+			...props
+		},
+		ref
+	) => {
+		const animationRef = useMovingAnimation( {
+			isSelected,
+			adjustScrolling: false,
+			enableAnimation: true,
+			triggerAnimationOnChange: path,
+		} );
 
-	return (
-		<AnimatedTreeGridRow
-			ref={ ref }
-			className={ classnames( 'block-editor-list-view-leaf', className ) }
-			level={ level }
-			positionInSet={ position }
-			setSize={ rowCount }
-			{ ...props }
-		>
-			{ children }
-		</AnimatedTreeGridRow>
-	);
-}
+		const mergedRef = useMergeRefs( [ ref, animationRef ] );
+
+		return (
+			<AnimatedTreeGridRow
+				ref={ mergedRef }
+				className={ classnames(
+					'block-editor-list-view-leaf',
+					className
+				) }
+				level={ level }
+				positionInSet={ position }
+				setSize={ rowCount }
+				{ ...props }
+			>
+				{ children }
+			</AnimatedTreeGridRow>
+		);
+	}
+);
+
+export default ListViewLeaf;

package/src/components/list-view/use-block-selection.js

@@ -21,7 +21,6 @@ export default function useBlockSelection() {
 		getBlockName,
 		getBlockParents,
 		getBlockSelectionStart,
-		getBlockSelectionEnd,
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		hasSelectedBlock,
@@ -154,7 +153,6 @@ export default function useBlockSelection() {
 			getBlockType,
 			getBlockParents,
 			getBlockSelectionStart,
-			getBlockSelectionEnd,
 			getSelectedBlockClientIds,
 			hasMultiSelection,
 			hasSelectedBlock,

package/src/components/list-view/use-list-view-scroll-into-view.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { getScrollContainer } from '@wordpress/dom';
+import { useLayoutEffect } from '@wordpress/element';
+
+export default function useListViewScrollIntoView( {
+	isSelected,
+	selectedClientIds,
+	rowItemRef,
+} ) {
+	const isSingleSelection = selectedClientIds.length === 1;
+
+	useLayoutEffect( () => {
+		// Skip scrolling into view if this particular block isn't selected,
+		// or if more than one block is selected overall. This is to avoid
+		// scrolling the view in a multi selection where the user has intentionally
+		// selected multiple blocks within the list view, but the initially
+		// selected block may be out of view.
+		if ( ! isSelected || ! isSingleSelection || ! rowItemRef.current ) {
+			return;
+		}
+
+		const scrollContainer = getScrollContainer( rowItemRef.current );
+		const { ownerDocument } = rowItemRef.current;
+
+		const windowScroll =
+			scrollContainer === ownerDocument.body ||
+			scrollContainer === ownerDocument.documentElement;
+
+		// If the there is no scroll container, of if the scroll container is the window,
+		// do not scroll into view, as the block is already in view.
+		if ( windowScroll || ! scrollContainer ) {
+			return;
+		}
+
+		const rowRect = rowItemRef.current.getBoundingClientRect();
+		const scrollContainerRect = scrollContainer.getBoundingClientRect();
+
+		// If the selected block is not currently visible, scroll to it.
+		if (
+			rowRect.top < scrollContainerRect.top ||
+			rowRect.bottom > scrollContainerRect.bottom
+		) {
+			rowItemRef.current.scrollIntoView();
+		}
+	}, [ isSelected, isSingleSelection, rowItemRef ] );
+}

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

@@ -23,24 +23,22 @@
 	}
 
 	.block-editor-link-control {
-		width: 220px; // Hardcoded width avoids resizing of control when switching between preview/edit.
+		width: 300px; // Hardcoded width avoids resizing of control when switching between preview/edit.
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.
 			margin: 0; // Reset default LinkControl margins.
 		}
 
-		.components-base-control .components-base-control__field {
-			margin-bottom: 0;
-		}
-
-		.block-editor-link-control__search-item-title {
-			max-width: 180px;
+		.block-editor-link-control__search-item-title,
+		.block-editor-link-control__search-item-info {
+			max-width: 200px;
 			white-space: nowrap;
 		}
 
-		.block-editor-link-control__search-item-info {
-			white-space: nowrap;
+		.block-editor-link-control__tools {
+			justify-content: flex-end;
+			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
 		}
 
 		.block-editor-link-control__search-item.is-current {

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,29 +17,33 @@ 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, ...props }, ref ) => {
+	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
 		const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 		const instanceId = useInstanceId( Appender );
-		const { hideInserter, clientId } = useSelect( ( select ) => {
-			const {
-				getTemplateLock,
-				__unstableGetEditorMode,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
+		const { hideInserter } = useSelect(
+			( select ) => {
+				const { getTemplateLock, __unstableGetEditorMode } =
+					select( blockEditorStore );
 
-			const _clientId = getSelectedBlockClientId();
-
-			return {
-				clientId: getSelectedBlockClientId(),
-				hideInserter:
-					!! getTemplateLock( _clientId ) ||
-					__unstableGetEditorMode() === 'zoom-out',
-			};
-		}, [] );
+				return {
+					hideInserter:
+						!! getTemplateLock( clientId ) ||
+						__unstableGetEditorMode() === 'zoom-out',
+				};
+			},
+			[ clientId ]
+		);
 
 		const blockTitle = useBlockDisplayTitle( {
 			clientId,
@@ -61,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. */
@@ -76,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
@@ -91,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>
@@ -220,6 +222,7 @@ function ListViewBranch( props ) {
 					<TreeGridCell>
 						{ ( treeGridCellProps ) => (
 							<Appender
+								clientId={ parentId }
 								nestingLevel={ level }
 								blockCount={ blockCount }
 								{ ...treeGridCellProps }