@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

package/src/components/inserter/media-tab/media-panel.jsx

@@ -187,7 +187,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 								),
 								attachedCount,
 								category.postTypeLabel
-						  )
+							)
 						: sprintf(
 								/* translators: %d: Number of images attached to the post. */
 								_n(
@@ -196,7 +196,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 									attachedCount
 								),
 								attachedCount
-						  ),
+							),
 					{ type: 'snackbar', id: 'inserter-notice' }
 				);
 			} catch {
@@ -227,7 +227,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 								/* translators: %s: Name of the post type e.g: "Page". */
 								__( 'Image detached from %s.' ),
 								category.postTypeLabel
-						  )
+							)
 						: __( 'Image detached from post.' ),
 					{ type: 'snackbar', id: 'inserter-notice' }
 				);
@@ -277,10 +277,10 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 				<InserterNoResults>
 					{ category.emptyMessage && ! debouncedSearch
 						? // For a source with a custom empty message (e.g.
-						  // Attachments) and no active search, an empty result
-						  // means nothing is attached yet — clearer than the
-						  // generic "no results found".
-						  category.emptyMessage
+							// Attachments) and no active search, an empty result
+							// means nothing is attached yet — clearer than the
+							// generic "no results found".
+							category.emptyMessage
 						: __( 'No results found.' ) }
 				</InserterNoResults>
 			) }
@@ -346,10 +346,10 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 										'Detach this image from the current %s? The image will remain in the Media Library.'
 									),
 									category.postTypeLabel
-							  )
+								)
 							: __(
 									'Detach this image from the current post? The image will remain in the Media Library.'
-							  ) }
+								) }
 					</p>
 					<div className={ `${ baseCssClass }-detach-actions` }>
 						<Button

package/src/components/inserter/media-tab/media-preview.jsx

@@ -69,7 +69,7 @@ function MediaPreviewOptions( { category, media, onDetach } ) {
 										/* translators: %s: Name of the post type e.g: "Page". */
 										__( 'Detach from %s' ),
 										category.postTypeLabel
-								  )
+									)
 								: __( 'Detach from post' ) }
 						</MenuItem>
 					) }

package/src/components/inserter-list-item/index.jsx

@@ -26,7 +26,7 @@ function InserterListItem( {
 		? {
 				backgroundColor: item.icon.background,
 				color: item.icon.foreground,
-		  }
+			}
 		: {};
 	const blocks = useMemo(
 		() => [

package/src/components/inserter-list-item/style.scss

@@ -44,8 +44,8 @@
 	justify-content: center;
 	cursor: var(--wpds-cursor-control);
 	background: transparent;
-	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
-	word-break: break-word;
+	word-break: normal;
+	overflow-wrap: break-word;
 	@media not ( prefers-reduced-motion ) {
 		transition: all 0.05s ease-in-out;
 	}

package/src/components/inspector-controls/list-view-content-popover.jsx

@@ -27,7 +27,7 @@ function useInspectorPopoverPlacement() {
 					offset: 35,
 					resize: false,
 				},
-		  }
+			}
 		: {};
 }
 

package/src/components/link-control/search-results.jsx

@@ -42,7 +42,7 @@ function LinkControlSearchResults( {
 				/* translators: %s: search term. */
 				__( 'Search results for "%s"' ),
 				currentInputValue
-		  );
+			);
 
 	return (
 		<div className="block-editor-link-control__search-results-wrapper">

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

@@ -233,7 +233,7 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		span {
-			font-weight: normal;
+			font-weight: 400;
 		}
 
 		.components-external-link__icon {

package/src/components/link-control/test/index.jsdom.test.jsx

@@ -31,8 +31,6 @@ import { expectValidatedInputControlDeprecationIfCalled } from '../../url-input/
 globalThis.wpVitest.mockMatchMedia();
 
 globalThis.wpVitest.mockScrollIntoView();
-globalThis.wpVitest.mockVisibleElements();
-
 const mockFetchSearchSuggestions = vi.fn();
 
 function getExpectedVisualTypeName( type ) {
@@ -1706,114 +1704,6 @@ describe( 'Selecting links', () => {
 	} );
 
 	describe( 'Selection using keyboard', () => {
-		it.each( [
-			[ 'entity', 'hello world', fauxEntitySuggestions[ 0 ] ], // Entity search.
-			[
-				'url',
-				'https://www.wordpress.org',
-				{
-					id: '1',
-					title: 'https://www.wordpress.org',
-					url: 'https://www.wordpress.org',
-					type: 'link',
-				},
-			], // Url.
-		] )(
-			'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard',
-			async ( type, searchTerm, selectedLink ) => {
-				const user = userEvent.setup();
-				const LinkControlConsumer = () => {
-					const [ link, setLink ] = useState();
-
-					return (
-						<LinkControl
-							value={ link }
-							onChange={ ( suggestion ) => setLink( suggestion ) }
-						/>
-					);
-				};
-
-				render( <LinkControlConsumer /> );
-
-				// Search Input UI.
-				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
-				} );
-
-				// Simulate searching for a term.
-				await user.type( searchInput, searchTerm );
-
-				const searchResults = await screen.findByRole( 'listbox', {
-					name: /Search results for.*/,
-				} );
-
-				// Step down into the search results, highlighting the first result item.
-				triggerArrowDown( searchInput );
-
-				const searchResultElements =
-					within( searchResults ).getAllByRole( 'option' );
-
-				const firstSearchSuggestion = searchResultElements[ 0 ];
-				const secondSearchSuggestion = searchResultElements[ 1 ];
-
-				let selectedSearchResultElement = screen.getByRole( 'option', {
-					selected: true,
-				} );
-
-				// We should have highlighted the first item using the keyboard.
-				expect( selectedSearchResultElement ).toBe(
-					firstSearchSuggestion
-				);
-
-				// Only entity searches contain more than 1 suggestion.
-				if ( type === 'entity' ) {
-					// Check we can go down again using the down arrow.
-					triggerArrowDown( searchInput );
-
-					selectedSearchResultElement = screen.getByRole( 'option', {
-						selected: true,
-					} );
-
-					// We should have highlighted the first item using the keyboard
-					expect( selectedSearchResultElement ).toBe(
-						secondSearchSuggestion
-					);
-
-					// Check we can go back up via up arrow.
-					triggerArrowUp( searchInput );
-
-					selectedSearchResultElement = screen.getByRole( 'option', {
-						selected: true,
-					} );
-
-					// We should be back to highlighting the first search result again
-					expect( selectedSearchResultElement ).toBe(
-						firstSearchSuggestion
-					);
-				}
-
-				// Submit the selected item as the current link.
-				triggerEnter( searchInput );
-
-				// Check that the suggestion selected via is now shown as selected.
-				const currentLink = screen.getByRole( 'group', {
-					name: 'Manage link',
-				} );
-				const currentLinkAnchor = screen.getByRole( 'link', {
-					name: `${ selectedLink.title } (opens in a new tab)`,
-				} );
-
-				// Make sure focus is retained after submission.
-				expect( currentLinkAnchor ).toHaveFocus();
-
-				expect( currentLink ).toBeVisible();
-				expect(
-					screen.getByRole( 'button', { name: 'Edit link' } )
-				).toBeVisible();
-				expect( currentLinkAnchor ).toBeVisible();
-			}
-		);
-
 		it( 'should allow selection of initial search results via the keyboard', async () => {
 			render( <LinkControl showInitialSuggestions /> );
 
@@ -3741,3 +3631,41 @@ describe( 'Link preview with entity data from navigation blocks', () => {
 		} );
 	} );
 } );
+
+describe( 'Front page and blog home labelling', () => {
+	it( 'should not label a term that shares the front page id as the front page', async () => {
+		const user = userEvent.setup();
+		const aCategory = {
+			id: 1,
+			title: 'Uncategorized',
+			type: 'category',
+			kind: 'taxonomy',
+			url: '/category/uncategorized',
+		};
+
+		// Posts and terms are separate tables, so a term can share an id with
+		// the page set as the front page.
+		useSelect.mockImplementation( () => ( {
+			fetchSearchSuggestions: () => Promise.resolve( [ aCategory ] ),
+			fetchRichUrlData: mockFetchRichUrlData,
+			pageOnFront: 1,
+			pageForPosts: 2,
+		} ) );
+
+		render( <LinkControl /> );
+
+		await user.type(
+			screen.getByRole( 'combobox', { name: 'Search or type URL' } ),
+			'Uncategorized'
+		);
+
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
+
+		const option = within( searchResults ).getByRole( 'option' );
+
+		expect( option ).toHaveTextContent( 'Category' );
+		expect( option ).not.toHaveTextContent( 'Front page' );
+	} );
+} );

package/src/components/link-control/test/keyboard-selection.browser.test.js

@@ -0,0 +1,110 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { page, userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+import { screen } from '@testing-library/react';
+import { SlotFillProvider } from '@wordpress/components';
+import { createElement, useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import LinkControl from '../';
+import { fauxEntitySuggestions, fetchFauxEntitySuggestions } from './fixtures';
+
+const mockFetchSearchSuggestions = vi.fn();
+
+vi.mock( import( '@wordpress/data' ), { spy: true } );
+
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useReducedMotion: () => true,
+} ) );
+
+beforeEach( () => {
+	vi.mocked( useDispatch ).mockReturnValue( {
+		saveEntityRecords: vi.fn(),
+	} );
+	useSelect.mockImplementation( () => ( {
+		fetchSearchSuggestions: mockFetchSearchSuggestions,
+		fetchRichUrlData: undefined,
+	} ) );
+	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
+} );
+
+describe( 'LinkControl keyboard selection', () => {
+	it.each( [
+		[ 'entity', 'hello world', fauxEntitySuggestions[ 0 ] ],
+		[
+			'url',
+			'https://www.wordpress.org',
+			{
+				title: 'https://www.wordpress.org',
+				url: 'https://www.wordpress.org',
+			},
+		],
+	] )(
+		'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard',
+		async ( type, searchTerm, selectedLink ) => {
+			const user = userEvent.setup();
+			function LinkControlConsumer() {
+				const [ link, setLink ] = useState();
+
+				return createElement( LinkControl, {
+					value: link,
+					onChange: ( suggestion ) => setLink( suggestion ),
+				} );
+			}
+
+			await render(
+				createElement(
+					SlotFillProvider,
+					null,
+					createElement( LinkControlConsumer )
+				)
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+			await user.type( searchInput, searchTerm );
+
+			await screen.findByRole( 'listbox', {
+				name: /Search results for.*/,
+			} );
+			const selectedOption = page.getByRole( 'option', {
+				selected: true,
+			} );
+
+			await user.keyboard( '{ArrowDown}' );
+			await expect
+				.element( selectedOption )
+				.toHaveTextContent(
+					type === 'entity'
+						? fauxEntitySuggestions[ 0 ].title
+						: searchTerm
+				);
+
+			if ( type === 'entity' ) {
+				await user.keyboard( '{ArrowDown}' );
+				await expect
+					.element( selectedOption )
+					.toHaveTextContent( fauxEntitySuggestions[ 1 ].title );
+
+				await user.keyboard( '{ArrowUp}' );
+				await expect
+					.element( selectedOption )
+					.toHaveTextContent( fauxEntitySuggestions[ 0 ].title );
+			}
+
+			await user.keyboard( '{Enter}' );
+
+			const selectedLinkName = `${ selectedLink.title } (opens in a new tab)`;
+			await expect
+				.element( page.getByRole( 'link', { name: selectedLinkName } ) )
+				.toHaveFocus();
+			await expect
+				.element( page.getByRole( 'group', { name: 'Manage link' } ) )
+				.toBeVisible();
+			await expect
+				.element( page.getByRole( 'button', { name: 'Edit link' } ) )
+				.toBeVisible();
+		}
+	);
+} );

package/src/components/link-control/use-search-handler.js

@@ -32,8 +32,13 @@ const handleEntitySearch = async (
 
 	const results = await fetchSearchSuggestions( val, suggestionsQuery );
 
-	// Identify front page and update type to match.
+	// Identify front page and update type to match. Posts, terms and media can
+	// share an id, so only pages are considered.
 	results.map( ( result ) => {
+		if ( result.type !== 'page' ) {
+			return result;
+		}
+
 		if ( Number( result.id ) === pageOnFront ) {
 			result.isFrontPage = true;
 			return result;
@@ -73,7 +78,7 @@ const handleEntitySearch = async (
 				title: val, // Must match the existing `<input>`s text value.
 				url: val, // Must match the existing `<input>`s text value.
 				type: CREATE_TYPE,
-		  } );
+			} );
 };
 
 export default function useSearchHandler(
@@ -110,7 +115,7 @@ export default function useSearchHandler(
 						withCreateSuggestion,
 						pageOnFront,
 						pageForPosts
-				  );
+					);
 		},
 		[
 			directEntryHandler,

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

@@ -163,7 +163,7 @@ function ListViewBranch( props ) {
 		const hasNestedBlocks = !! innerBlocks?.length;
 
 		const shouldExpand = hasNestedBlocks
-			? expansionState[ clientId ] ?? isExpanded
+			? ( expansionState[ clientId ] ?? isExpanded )
 			: undefined;
 
 		// Make updates to the selected or dragged blocks synchronous,

package/src/components/list-view/drop-indicator.jsx

@@ -35,7 +35,7 @@ export default function ListViewDropIndicatorPreview( {
 		const _rootBlockElement = rootClientId
 			? listViewRef.current.querySelector(
 					`[data-block="${ rootClientId }"]`
-			  )
+				)
 			: undefined;
 
 		// The clientId represents the sibling block, the dragged block will
@@ -44,7 +44,7 @@ export default function ListViewDropIndicatorPreview( {
 		const _blockElement = clientId
 			? listViewRef.current.querySelector(
 					`[data-block="${ clientId }"]`
-			  )
+				)
 			: undefined;
 
 		return [ _rootBlockElement, _blockElement ];
@@ -251,7 +251,7 @@ export default function ListViewDropIndicatorPreview( {
 					// drop indicator.
 					const scrollbarWidth = rtl
 						? scrollContainer.offsetWidth -
-						  scrollContainer.clientWidth
+							scrollContainer.clientWidth
 						: 0;
 
 					if ( left < scrollContainerRect.left + scrollbarWidth ) {

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

@@ -401,7 +401,7 @@ function ListViewComponent(
 							? `${
 									BLOCK_LIST_ITEM_HEIGHT *
 									( draggedClientIds.length - 1 )
-							  }px`
+								}px`
 							: null,
 				} }
 			>

package/src/components/list-view/style.scss

@@ -353,7 +353,7 @@
 		align-items: center;
 	}
 
-	// Keep the tap target large but the focus target small.
+	// Keep the tap target large.
 	.block-editor-block-mover-button {
 		position: relative;
 		width: $button-size;
@@ -380,14 +380,6 @@
 				top: -$grid-unit-05;
 			}
 		}
-
-		// Tweak size and position of focus ring.
-		&::before {
-			height: 16px;
-			min-width: 100%;
-			left: 0;
-			right: 0;
-		}
 	}
 
 	.block-editor-inserter__toggle {

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

@@ -506,7 +506,7 @@ export default function useListViewDropZone( {
 							? canInsertBlocks(
 									draggedBlockClientIds,
 									rootClientId
-							  )
+								)
 							: true,
 						canInsertDraggedBlocksAsChild: isBlockDrag
 							? canInsertBlocks( draggedBlockClientIds, clientId )

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

@@ -21,7 +21,7 @@ export const getBlockPropertiesDescription = ( positionLabel, isLocked ) =>
 					// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
 					__( 'Position: %s' ),
 					positionLabel
-			  ) }.`
+				) }.`
 			: undefined,
 		isLocked ? __( 'This block is locked.' ) : undefined,
 	]

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

@@ -227,7 +227,10 @@ const MediaReplaceFlow = ( {
 						{ onToggleFeaturedImage && (
 							<MenuItem
 								icon={ postFeaturedImage }
-								onClick={ onToggleFeaturedImage }
+								onClick={ () => {
+									onToggleFeaturedImage();
+									onClose();
+								} }
 								isPressed={ useFeaturedImage }
 							>
 								{ __( 'Use featured image' ) }

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

@@ -1,5 +1,6 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { act, screen, waitFor } from '@testing-library/react';
+import { render } from 'vitest-browser-react';
 import { createElement } from '@wordpress/element';
 import NavigableToolbar from '..';
 
@@ -19,13 +20,11 @@ function createToolbar( { hidden = false, extraChildren = 0 } = {} ) {
 }
 
 describe( 'NavigableToolbar', () => {
-	afterEach( cleanup );
-
 	it( 'does not reclassify a visibility-hidden toolbar when its subtree changes', async () => {
-		const { rerender } = render( createToolbar() );
+		const { rerender } = await render( createToolbar() );
 		const initialToolbar = screen.getByRole( 'toolbar' );
 
-		rerender( createToolbar( { extraChildren: 1 } ) );
+		await rerender( createToolbar( { extraChildren: 1 } ) );
 
 		await waitFor( () => {
 			expect( screen.getByRole( 'toolbar' ) ).not.toBe( initialToolbar );
@@ -33,7 +32,7 @@ describe( 'NavigableToolbar', () => {
 		expect( console ).toHaveWarned();
 		const toolbar = screen.getByRole( 'toolbar' );
 
-		rerender( createToolbar( { hidden: true, extraChildren: 2 } ) );
+		await rerender( createToolbar( { hidden: true, extraChildren: 2 } ) );
 
 		await act(
 			() =>

package/src/components/plain-text/README.md

@@ -14,9 +14,11 @@ _Required._ Function called when the text value changes.
 
 You can also pass any extra prop to the textarea rendered by this component.
 
+Automatic sizing uses CSS `field-sizing: content`. In browsers that support it, `rows` and `cols` do not set the field's size. Use CSS `min-height` and `max-height` to constrain its height. In browsers without support, the field keeps its native size and scrolls when its content overflows.
+
 ### `ref: Object`
 
-_Optional._ The component forwards the `ref` property to the `TextareaAutosize` component.
+_Optional._ The component forwards the `ref` property to the `textarea` element.
 
 ## Example
 
@@ -44,4 +46,3 @@ registerBlockType( /* ... */, {
 	},
 } );
 ```
-

package/src/components/plain-text/content.scss

@@ -7,5 +7,4 @@
 	border: none;
 	padding: 0;
 	margin: 0;
-	width: 100%;
 }

package/src/components/plain-text/index.jsx

@@ -1,4 +1,3 @@
-import TextareaAutosize from 'react-autosize-textarea';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import EditableText from '../editable-text';
@@ -37,7 +36,7 @@ import EditableText from '../editable-text';
  * @param {Object}   props          Component props.
  * @param {string}   props.value    String value of the textarea.
  * @param {Function} props.onChange Function called when the text value changes.
- * @param {Object}   [props.ref]    The component forwards the `ref` property to the `TextareaAutosize` component.
+ * @param {Object}   [props.ref]    The component forwards the `ref` property to the `textarea` element.
  * @return {Element} Plain text component
  */
 const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
@@ -48,7 +47,7 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	const { className, onChange, ...remainingProps } = props;
 
 	return (
-		<TextareaAutosize
+		<textarea
 			ref={ ref }
 			className={ clsx( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }

package/src/components/plain-text/style.scss

@@ -0,0 +1,4 @@
+.block-editor-plain-text {
+	width: 100%;
+	field-sizing: content;
+}

package/src/components/preset-input-control/index.jsx

@@ -91,7 +91,7 @@ export default function PresetInputControl( {
 	const hasPresets = marks.length > 0;
 	const showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;
 
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : placeholder ?? null;
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : ( placeholder ?? null );
 
 	const [ minValue, setMinValue ] = useState( minimumCustomValue );
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
@@ -129,7 +129,7 @@ export default function PresetInputControl( {
 			{
 				name: ! isMixed
 					? // translators: %s: A custom measurement, e.g. a number followed by a unit like 12px.
-					  sprintf( __( 'Custom (%s)' ), value )
+						sprintf( __( 'Custom (%s)' ), value )
 					: __( 'Mixed' ),
 				slug: 'custom',
 				size: value,