@wordpress/block-editor 14.5.0 → 14.7.0

package/src/components/inserter/hooks/use-block-types-state.js

@@ -94,7 +94,12 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 				destinationClientId
 			);
 		},
-		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
+		[
+			getClosestAllowedInsertionPoint,
+			rootClientId,
+			onInsert,
+			createErrorNotice,
+		]
 	);
 
 	return [ items, categories, collections, onSelectItem ];

package/src/components/inserter/hooks/use-patterns-paging.js

@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import { useMemo, useState, useEffect } from '@wordpress/element';
-import { useAsyncList, usePrevious } from '@wordpress/compose';
+import { usePrevious } from '@wordpress/compose';
 import { getScrollContainer } from '@wordpress/dom';
 
 const PAGE_SIZE = 20;
-const INITIAL_INSERTER_RESULTS = 5;
 
 /**
  * Supplies values needed to page the patterns list client side.
@@ -42,9 +41,6 @@ export default function usePatternsPaging(
 			pageIndex * PAGE_SIZE + PAGE_SIZE
 		);
 	}, [ pageIndex, currentCategoryPatterns ] );
-	const categoryPatternsAsyncList = useAsyncList( categoryPatterns, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
 	const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
 	const changePage = ( page ) => {
 		const scrollContainer = getScrollContainer(
@@ -68,7 +64,6 @@ export default function usePatternsPaging(
 	return {
 		totalItems,
 		categoryPatterns,
-		categoryPatternsAsyncList,
 		numPages,
 		changePage,
 		currentPage,

package/src/components/inserter/menu.js

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { unlock } from '../../lock-unlock';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -54,8 +55,7 @@ function InserterMenu(
 	ref
 ) {
 	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
@@ -67,6 +67,8 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
+	const isLargeViewport = useViewportMatch( 'large' );
+
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
 			return __experimentalInitialTab;
@@ -80,7 +82,7 @@ function InserterMenu(
 
 	const shouldUseZoomOut =
 		selectedTab === 'patterns' || selectedTab === 'media';
-	useZoomOut( shouldUseZoomOut );
+	useZoomOut( shouldUseZoomOut && isLargeViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {

package/src/components/inserter/search-results.js

@@ -159,11 +159,6 @@ function InserterSearchResults( {
 	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
 		step: INITIAL_INSERTER_RESULTS,
 	} );
-	const currentShownPatterns = useAsyncList(
-		currentShownBlockTypes.length === filteredBlockTypes.length
-			? filteredBlockPatterns
-			: EMPTY_ARRAY
-	);
 
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
@@ -190,7 +185,6 @@ function InserterSearchResults( {
 		>
 			<div className="block-editor-inserter__quick-inserter-patterns">
 				<BlockPatternsList
-					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onClickPattern }
 					onHover={ onHoverPattern }

package/src/components/inserter/style.scss

@@ -123,6 +123,12 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-header {
+	// Use `position: relative` to ensure any absolute positioned child elements are
+	// positioned relative to the panel header.
+	// This makes the overflow rule of the panel work correctly, particularly when the
+	// `VisuallyHidden` component is used within the inserter UI.
+	position: relative;
+
 	display: inline-flex;
 	align-items: center;
 	padding: $grid-unit-20 $grid-unit-20 0;
@@ -260,6 +266,13 @@ $block-inserter-tabs-height: 44px;
 	margin-top: $grid-unit-30;
 }
 
+.block-editor-inserter__patterns-filter-help {
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
+	color: $gray-700;
+	min-width: 280px;
+}
+
 .block-editor-inserter__media-list,
 .block-editor-block-patterns-list {
 	overflow-y: auto;

package/src/components/inserter-button/index.native.js

@@ -54,7 +54,7 @@ class MenuItem extends Component {
 		const accessibilityLabelFormat = blockIsNew
 			? // translators: Newly available block name. %s: The localized block name
 			  __( '%s block, newly available' )
-			: // translators: Block name. %s: The localized block name
+			: // translators: %s: Block name e.g. "Image block"
 			  __( '%s block' );
 		const accessibilityLabel = sprintf(
 			accessibilityLabelFormat,

package/src/components/inspector-controls-tabs/index.js

@@ -46,18 +46,13 @@ export default function InspectorControlsTabs( {
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) =>
 						showIconLabels ? (
-							<Tabs.Tab
-								key={ tab.name }
-								tabId={ tab.name }
-								className={ tab.className }
-							>
+							<Tabs.Tab key={ tab.name } tabId={ tab.name }>
 								{ tab.title }
 							</Tabs.Tab>
 						) : (
 							<Tooltip text={ tab.title } key={ tab.name }>
 								<Tabs.Tab
 									tabId={ tab.name }
-									className={ tab.className }
 									aria-label={ tab.title }
 								>
 									<Icon icon={ tab.icon } />

package/src/components/inspector-controls-tabs/utils.js

@@ -9,7 +9,6 @@ export const TAB_SETTINGS = {
 	title: __( 'Settings' ),
 	value: 'settings',
 	icon: cog,
-	className: 'block-editor-block-inspector__tab-item',
 };
 
 export const TAB_STYLES = {
@@ -17,7 +16,6 @@ export const TAB_STYLES = {
 	title: __( 'Styles' ),
 	value: 'styles',
 	icon: styles,
-	className: 'block-editor-block-inspector__tab-item',
 };
 
 export const TAB_LIST_VIEW = {
@@ -25,5 +23,4 @@ export const TAB_LIST_VIEW = {
 	title: __( 'List View' ),
 	value: 'list-view',
 	icon: listView,
-	className: 'block-editor-block-inspector__tab-item',
 };

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	ExternalLink,
@@ -96,7 +96,8 @@ export default function LinkPreview( {
 
 	return (
 		<div
-			aria-label={ __( 'Currently selected' ) }
+			role="group"
+			aria-label={ __( 'Manage link' ) }
 			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
@@ -107,7 +108,14 @@ export default function LinkPreview( {
 			} ) }
 		>
 			<div className="block-editor-link-control__search-item-top">
-				<span className="block-editor-link-control__search-item-header">
+				<span
+					className="block-editor-link-control__search-item-header"
+					role="figure"
+					aria-label={
+						/* translators: Accessibility text for the link preview when editing a link. */
+						__( 'Link information' )
+					}
+				>
 					<span
 						className={ clsx(
 							'block-editor-link-control__search-item-icon',
@@ -149,6 +157,7 @@ export default function LinkPreview( {
 					label={ __( 'Edit link' ) }
 					onClick={ onEditClick }
 					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				{ hasUnlinkControl && (
 					<Button
@@ -156,19 +165,17 @@ export default function LinkPreview( {
 						label={ __( 'Remove link' ) }
 						onClick={ onRemove }
 						size="compact"
+						showTooltip={ ! showIconLabels }
 					/>
 				) }
 				<Button
 					icon={ copySmall }
-					label={ sprintf(
-						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
-						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL || showIconLabels ? '' : ': ' + value.url
-					) }
+					label={ __( 'Copy link' ) }
 					ref={ ref }
 					accessibleWhenDisabled
 					disabled={ isEmptyURL }
 					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				<ViewerSlot fillProps={ value } />
 			</div>

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

@@ -373,7 +373,9 @@ describe( 'Basic rendering', () => {
 				/>
 			);
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			const isPreviewError = linkPreview.classList.contains( 'is-error' );
 			expect( isPreviewError ).toBe( true );
@@ -834,7 +836,9 @@ describe( 'Manual link entry', () => {
 
 			render( <LinkControlConsumer /> );
 
-			let linkPreview = screen.getByLabelText( 'Currently selected' );
+			let linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( linkPreview ).toBeInTheDocument();
 
@@ -868,7 +872,9 @@ describe( 'Manual link entry', () => {
 			// Cancel the editing process.
 			await user.click( cancelButton );
 
-			linkPreview = screen.getByLabelText( 'Currently selected' );
+			linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( linkPreview ).toBeInTheDocument();
 
@@ -1076,7 +1082,9 @@ describe( 'Default search suggestions', () => {
 
 		// Click the "Edit/Change" button and check initial suggestions are not
 		// shown.
-		const currentLinkUI = screen.getByLabelText( 'Currently selected' );
+		const currentLinkUI = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
 			name: 'Edit link',
 		} );
@@ -1230,8 +1238,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Check for loading indicator.
 			const loadingIndicator = screen.getByText( 'Creating…' );
-			const currentLinkLabel =
-				screen.queryByLabelText( 'Currently selected' );
+			const currentLinkLabel = screen.queryByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( currentLinkLabel ).not.toBeInTheDocument();
 			expect( loadingIndicator ).toBeVisible();
@@ -1242,8 +1251,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			// Resolve the `createSuggestion` promise.
 			resolver();
 
-			const currentLink =
-				await screen.findByLabelText( 'Currently selected' );
+			const currentLink = await screen.findByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( currentLink ).toHaveTextContent( entityNameText );
 			expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -1291,7 +1301,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		await user.click( createButton );
 
-		const currentLink = screen.getByLabelText( 'Currently selected' );
+		const currentLink = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( currentLink ).toHaveTextContent( 'Some new page to create' );
 		expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -1350,7 +1362,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		triggerEnter( searchInput );
 
 		expect(
-			await screen.findByLabelText( 'Currently selected' )
+			await screen.findByRole( 'group', {
+				name: 'Manage link',
+			} )
 		).toHaveTextContent( entityNameText );
 	} );
 
@@ -1529,7 +1543,9 @@ describe( 'Selecting links', () => {
 
 		render( <LinkControlConsumer /> );
 
-		const currentLink = screen.getByLabelText( 'Currently selected' );
+		const currentLink = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkAnchor = screen.getByRole( 'link', {
 			name: `${ selectedLink.title } (opens in a new tab)`,
 		} );
@@ -1559,7 +1575,9 @@ describe( 'Selecting links', () => {
 		render( <LinkControlConsumer /> );
 
 		// Required in order to select the button below.
-		let currentLinkUI = screen.getByLabelText( 'Currently selected' );
+		let currentLinkUI = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
 			name: 'Edit link',
 		} );
@@ -1570,7 +1588,9 @@ describe( 'Selecting links', () => {
 		const searchInput = screen.getByRole( 'combobox', {
 			name: 'Search or type URL',
 		} );
-		currentLinkUI = screen.queryByLabelText( 'Currently selected' );
+		currentLinkUI = screen.queryByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		// We should be back to showing the search input.
 		expect( searchInput ).toBeVisible();
@@ -1733,8 +1753,9 @@ describe( 'Selecting links', () => {
 				triggerEnter( searchInput );
 
 				// Check that the suggestion selected via is now shown as selected.
-				const currentLink =
-					screen.getByLabelText( 'Currently selected' );
+				const currentLink = screen.getByRole( 'group', {
+					name: 'Manage link',
+				} );
 				const currentLinkAnchor = screen.getByRole( 'link', {
 					name: `${ selectedLink.title } (opens in a new tab)`,
 				} );
@@ -2127,7 +2148,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 
@@ -2148,7 +2171,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 	} );
@@ -2165,7 +2190,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
@@ -2197,7 +2224,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
@@ -2221,7 +2250,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
@@ -2256,7 +2287,9 @@ describe( 'Rich link previews', () => {
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			await waitFor( () =>
 				expect( linkPreview ).toHaveClass( 'is-rich' )
@@ -2281,7 +2314,9 @@ describe( 'Rich link previews', () => {
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( linkPreview ).toHaveClass( 'is-fetching' );
 
@@ -2300,7 +2335,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( linkPreview ).toHaveClass( 'is-fetching' );
 		expect( linkPreview ).not.toHaveClass( 'is-rich' );
@@ -2313,7 +2350,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( linkPreview ).toHaveClass( 'is-fetching' );
 

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

@@ -15,6 +15,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useListViewContext } from './context';
 import Inserter from '../inserter';
 import AriaReferencedText from './aria-referenced-text';
+import { unlock } from '../../lock-unlock';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
@@ -23,13 +24,11 @@ export const Appender = forwardRef(
 		const instanceId = useInstanceId( Appender );
 		const hideInserter = useSelect(
 			( select ) => {
-				const { getTemplateLock, __unstableGetEditorMode } =
-					select( blockEditorStore );
-
-				return (
-					!! getTemplateLock( clientId ) ||
-					__unstableGetEditorMode() === 'zoom-out'
+				const { getTemplateLock, isZoomOut } = unlock(
+					select( blockEditorStore )
 				);
+
+				return !! getTemplateLock( clientId ) || isZoomOut();
 			},
 			[ clientId ]
 		);

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

@@ -5,7 +5,7 @@ import {
 	__experimentalTreeGridRow as TreeGridRow,
 	__experimentalTreeGridCell as TreeGridCell,
 } from '@wordpress/components';
-import { memo } from '@wordpress/element';
+import { memo, useRef } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 /**
@@ -123,6 +123,8 @@ function ListViewBranch( props ) {
 		draggedClientIds,
 	} = useListViewContext();
 
+	const nextPositionRef = useRef();
+
 	if ( ! canParentExpand ) {
 		return null;
 	}
@@ -133,7 +135,7 @@ function ListViewBranch( props ) {
 	const blockCount = filteredBlocks.length;
 	// The appender means an extra row in List View, so add 1 to the row count.
 	const rowCount = showAppender ? blockCount + 1 : blockCount;
-	let nextPosition = listPosition;
+	nextPositionRef.current = listPosition;
 
 	return (
 		<>
@@ -141,7 +143,7 @@ function ListViewBranch( props ) {
 				const { clientId, innerBlocks } = block;
 
 				if ( index > 0 ) {
-					nextPosition += countBlocks(
+					nextPositionRef.current += countBlocks(
 						filteredBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
@@ -165,7 +167,7 @@ function ListViewBranch( props ) {
 					} );
 
 				const { itemInView } = fixedListWindow;
-				const blockInView = itemInView( nextPosition );
+				const blockInView = itemInView( nextPositionRef.current );
 
 				const position = index + 1;
 				const updatedPath =
@@ -218,7 +220,7 @@ function ListViewBranch( props ) {
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
 								isExpanded={ isDragged ? false : shouldExpand }
-								listPosition={ nextPosition }
+								listPosition={ nextPositionRef.current }
 								selectedClientIds={ selectedClientIds }
 								isSyncedBranch={ syncedBranch }
 								displacement={ displacement }
@@ -239,7 +241,7 @@ function ListViewBranch( props ) {
 								showBlockMovers={ showBlockMovers }
 								level={ level + 1 }
 								path={ updatedPath }
-								listPosition={ nextPosition + 1 }
+								listPosition={ nextPositionRef.current + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }

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

@@ -185,8 +185,7 @@ function ListViewComponent(
 		if ( selectedClientIds?.length ) {
 			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
 		}
-		// Disable reason: Only focus on the selected item when the list view is mounted.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Only focus on the selected item when the list view is mounted.
 	}, [] );
 
 	const expand = useCallback(

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

@@ -317,20 +317,20 @@ export function MediaPlaceholder( {
 
 			if ( instructions === undefined && mediaUpload ) {
 				instructions = __(
-					'Upload a media file or pick one from your media library.'
+					'Drag and drop an image or video, upload, or choose from your library.'
 				);
 
 				if ( isAudio ) {
 					instructions = __(
-						'Upload or drag an audio file here, or pick one from your library.'
+						'Drag and drop an audio file, upload, or choose from your library.'
 					);
 				} else if ( isImage ) {
 					instructions = __(
-						'Upload or drag an image file here, or pick one from your library.'
+						'Drag and drop an image, upload, or choose from your library.'
 					);
 				} else if ( isVideo ) {
 					instructions = __(
-						'Upload or drag a video file here, or pick one from your library.'
+						'Drag and drop a video, upload, or choose from your library.'
 					);
 				}
 			}

package/src/components/provider/index.js

@@ -46,9 +46,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		return (
 			<SlotFillProvider passthrough>
-				{ ! settings?.__unstableIsPreviewMode && (
-					<KeyboardShortcuts.Register />
-				) }
+				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);