@wordpress/block-editor 15.9.1-next.6deb34194.0 → 15.9.1-next.738bb1424.0

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

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalTruncate as Truncate,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexItem,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Icon, chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Badge } = unlock( componentsPrivateApis );
+
+/**
+ * Link preview component that displays the current link information.
+ * This is a presentational component meant to be wrapped in a button.
+ *
+ * @param {Object}        props        - Component props
+ * @param {string}        props.title  - Display title for the link
+ * @param {string}        props.url    - Display URL for the link
+ * @param {string}        props.image  - Optional image URL for the link preview
+ * @param {Array<Object>} props.badges - Optional array of badge objects with label and intent
+ */
+export function LinkPreview( { title, url, image, badges } ) {
+	return (
+		<HStack justify="space-between" alignment="top">
+			<FlexItem className="link-preview-button__content">
+				<HStack alignment="top">
+					{ image && (
+						<FlexItem className="link-preview-button__image-container">
+							<img
+								className="link-preview-button__image"
+								src={ image }
+								alt=""
+							/>
+						</FlexItem>
+					) }
+
+					<VStack
+						className="link-preview-button__details"
+						alignment="topLeft"
+					>
+						<Truncate
+							numberOfLines={ 1 }
+							className="link-preview-button__title"
+						>
+							{ title }
+						</Truncate>
+						{ url && (
+							<Truncate
+								numberOfLines={ 1 }
+								className="link-preview-button__hint"
+							>
+								{ url }
+							</Truncate>
+						) }
+						{ badges && badges.length > 0 && (
+							<HStack
+								className="link-preview-button__badges"
+								alignment="left"
+							>
+								{ badges.map( ( badge ) => (
+									<Badge
+										key={ `${ badge.label }|${ badge.intent }` }
+										intent={ badge.intent }
+									>
+										{ badge.label }
+									</Badge>
+								) ) }
+							</HStack>
+						) }
+					</VStack>
+				</HStack>
+			</FlexItem>
+			<Icon icon={ chevronDown } className="link-preview-button__icon" />
+		</HStack>
+	);
+}

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

@@ -0,0 +1,71 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+/**
+ * Link Picker Styles
+ */
+
+.link-preview-button.components-button {
+	width: 100%;
+	height: auto;
+	padding: $grid-unit-15;
+	box-shadow: inset 0 0 0 1px $gray-600;
+	border-color: $gray-600;
+}
+
+.link-preview-button__image-container {
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	flex-shrink: 0;
+}
+
+.link-preview-button__image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: $radius-small;
+}
+
+// Fix truncation in flex layout
+.link-preview-button__content {
+	min-width: 0;
+	flex: 1;
+}
+
+.link-preview-button__details {
+	min-width: 0;
+	flex: 1;
+}
+
+.link-preview-button__title,
+.link-preview-button__hint {
+	min-width: 0;
+	display: block;
+	width: 100%;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.link-preview-button__title {
+	margin-top: $grid-unit-05;
+	font-weight: 500;
+	color: $gray-900;
+	display: block;
+}
+
+.link-preview-button__hint {
+	font-size: $helptext-font-size;
+	color: $gray-700;
+	font-weight: 400;
+}
+
+.link-preview-button__icon {
+	color: $gray-900;
+}
+
+.link-preview-button__badges {
+	margin-top: $grid-unit-10;
+}

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

@@ -0,0 +1,467 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { LinkPicker } from '../';
+
+const mockFetchSearchSuggestions = jest.fn();
+
+// Mock useSelect for search suggestions
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	const mock = jest.fn();
+	return mock;
+} );
+
+useSelect.mockImplementation( () => ( {
+	fetchSearchSuggestions: mockFetchSearchSuggestions,
+} ) );
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
+} ) );
+
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useReducedMotion: jest.fn( () => true ),
+} ) );
+
+// Helper to create mock suggestions
+function createMockSuggestions( count = 3 ) {
+	return Array.from( { length: count }, ( _, i ) => ( {
+		id: i + 1,
+		title: `Test Page ${ i + 1 }`,
+		type: 'page',
+		kind: 'post-type',
+		url: `https://example.com/page-${ i + 1 }`,
+	} ) );
+}
+
+// Helper to create mock preview data
+function createMockPreview( {
+	title = '',
+	url = '',
+	image = null,
+	badges = [],
+} = {} ) {
+	return {
+		title,
+		url,
+		image,
+		badges,
+	};
+}
+
+beforeEach( () => {
+	mockFetchSearchSuggestions.mockImplementation( () =>
+		Promise.resolve( createMockSuggestions() )
+	);
+} );
+
+afterEach( () => {
+	mockFetchSearchSuggestions.mockReset();
+} );
+
+describe( 'LinkPicker', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render a button with "Add link" text when no link is provided', () => {
+			render(
+				<LinkPicker
+					preview={ createMockPreview() }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button', {
+				name: /add link/i,
+			} );
+
+			expect( button ).toBeVisible();
+		} );
+
+		it( 'should render a button with URL when link is provided', () => {
+			render(
+				<LinkPicker
+					preview={ {
+						url: 'example.com',
+						badges: [],
+					} }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toBeVisible();
+			expect( button ).toHaveTextContent( 'example.com' );
+		} );
+
+		it( 'should render a button with title when provided', () => {
+			render(
+				<LinkPicker
+					preview={ {
+						title: 'My Page',
+						url: 'example.com',
+						badges: [ { label: 'Page', intent: 'default' } ],
+					} }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toBeVisible();
+			expect( button ).toHaveTextContent( 'My Page' );
+		} );
+
+		it( 'should render featured image when provided', () => {
+			render(
+				<LinkPicker
+					preview={ {
+						title: 'My Page',
+						url: 'example.com',
+						image: 'https://example.com/image.jpg',
+						badges: [ { label: 'Page', intent: 'default' } ],
+					} }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+			const image = within( button ).getByRole( 'img', { hidden: true } );
+
+			expect( image ).toHaveAttribute(
+				'src',
+				'https://example.com/image.jpg'
+			);
+		} );
+
+		it( 'should render label for the control', () => {
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link to"
+				/>
+			);
+
+			expect( screen.getByText( 'Link to' ) ).toBeVisible();
+		} );
+
+		it( 'should render help text when provided', () => {
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link"
+					help="Synced with the selected page."
+				/>
+			);
+
+			expect(
+				screen.getByText( 'Synced with the selected page.' )
+			).toBeVisible();
+		} );
+	} );
+
+	describe( 'Dropdown interaction', () => {
+		it( 'should open dropdown when button is clicked', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+
+			// Dropdown should not be visible initially
+			expect(
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
+			).not.toBeInTheDocument();
+
+			// Click the button
+			await user.click( button );
+
+			// Dropdown should now be visible
+			expect(
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+			).toBeVisible();
+		} );
+
+		it( 'should have proper aria attributes when dropdown is open', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+
+			// Initially aria-expanded should be false
+			expect( button ).toHaveAttribute( 'aria-expanded', 'false' );
+			expect( button ).toHaveAttribute( 'aria-haspopup', 'dialog' );
+
+			// Click to open
+			await user.click( button );
+
+			// After opening, aria-expanded should be true
+			expect( button ).toHaveAttribute( 'aria-expanded', 'true' );
+		} );
+
+		it( 'should close dropdown when preview button is clicked again', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+
+			// Click to open
+			await user.click( button );
+			expect( button ).toHaveAttribute( 'aria-expanded', 'true' );
+
+			// Verify dropdown content is visible
+			const searchInput = await screen.findByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+			expect( searchInput ).toBeVisible();
+
+			// Click the preview button again to close
+			await user.click( button );
+
+			// After clicking again, aria-expanded should be false
+			await waitFor( () => {
+				expect( button ).toHaveAttribute( 'aria-expanded', 'false' );
+			} );
+
+			// Search input should no longer be visible
+			expect(
+				screen.queryByRole( 'combobox', {
+					name: 'Search or type URL',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should display help text when provided', () => {
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link"
+					help="This is help text"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+			const helpText = screen.getByText( 'This is help text' );
+			// Help text should be visible
+			expect( helpText ).toBeVisible();
+
+			// Button should have aria-describedby for accessibility
+			expect( button ).toHaveAttribute( 'aria-describedby' );
+			// Button aria-describedby should match the ID of the description element
+			expect( button ).toHaveAttribute( 'aria-describedby', helpText.id );
+		} );
+
+		it( 'should not have aria-describedby when help is not provided', () => {
+			render(
+				<LinkPicker
+					preview={ createMockPreview( { url: 'example.com' } ) }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+
+			// Button should NOT have aria-describedby when no help text
+			expect( button ).not.toHaveAttribute( 'aria-describedby' );
+		} );
+	} );
+
+	describe( 'Selection behavior', () => {
+		it( 'should call onSelect with suggestion data when a suggestion is selected', async () => {
+			const user = userEvent.setup();
+			const onSelect = jest.fn();
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview() }
+					onSelect={ onSelect }
+					label="Link"
+				/>
+			);
+
+			// Open the dropdown
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			// Wait for search input to be visible
+			const searchInput = await screen.findByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			// Type to search
+			await user.type( searchInput, 'Test' );
+
+			// Wait for suggestions to appear
+			const suggestionsList = await screen.findByRole( 'listbox' );
+			expect( suggestionsList ).toBeVisible();
+
+			// Click on the first suggestion
+			const suggestions =
+				within( suggestionsList ).getAllByRole( 'option' );
+			await user.click( suggestions[ 0 ] );
+
+			// Verify onSelect was called with correct data
+			expect( onSelect ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: expect.any( String ),
+					kind: 'post-type',
+					type: 'page',
+					id: 1,
+					title: 'Test Page 1',
+				} )
+			);
+		} );
+
+		it( 'should close dropdown after selecting a suggestion', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview() }
+					onSelect={ jest.fn() }
+					label="Link"
+				/>
+			);
+
+			// Open the dropdown
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			// Wait for search input
+			const searchInput = await screen.findByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			// Type to search
+			await user.type( searchInput, 'Test' );
+
+			// Wait for suggestions and click first one
+			const suggestionsList = await screen.findByRole( 'listbox' );
+			const suggestions =
+				within( suggestionsList ).getAllByRole( 'option' );
+			await user.click( suggestions[ 0 ] );
+
+			// Dropdown should be closed
+			expect(
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
+			).not.toBeInTheDocument();
+
+			// Focus should return to the button
+			expect( button ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'Suggestions query', () => {
+		it( 'should accept suggestionsQuery prop for filtering', async () => {
+			const user = userEvent.setup();
+			const customQuery = {
+				type: 'post',
+				subtype: 'page',
+			};
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview() }
+					onSelect={ jest.fn() }
+					suggestionsQuery={ customQuery }
+					label="Link"
+				/>
+			);
+
+			// Open the dropdown
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			// Wait for search input
+			const searchInput = await screen.findByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			// Type to trigger search
+			await user.type( searchInput, 'Test' );
+
+			// Wait for the mock to be called
+			await waitFor( () => {
+				expect( mockFetchSearchSuggestions ).toHaveBeenCalled();
+			} );
+
+			// The suggestionsQuery prop is passed through to LinkControl
+			// which uses it to filter search results
+		} );
+	} );
+
+	describe( 'Integration scenarios', () => {
+		it( 'should handle changing from empty link to entity link', async () => {
+			const user = userEvent.setup();
+			const onSelect = jest.fn();
+
+			render(
+				<LinkPicker
+					preview={ createMockPreview() }
+					onSelect={ onSelect }
+					label="Link"
+				/>
+			);
+
+			// Open and select a page
+			await user.click( screen.getByRole( 'button' ) );
+			const searchInput = await screen.findByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+			await user.type( searchInput, 'Test' );
+
+			const suggestionsList = await screen.findByRole( 'listbox' );
+			const suggestions =
+				within( suggestionsList ).getAllByRole( 'option' );
+			await user.click( suggestions[ 0 ] );
+
+			// Verify entity link data was passed
+			expect( onSelect ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					kind: 'post-type',
+					type: 'page',
+					id: expect.any( Number ),
+				} )
+			);
+		} );
+	} );
+} );

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

@@ -27,7 +27,7 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { speak } from '@wordpress/a11y';
 

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

@@ -42,7 +42,7 @@
 			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
 		}
 
-		.block-editor-link-control__search-item.is-current {
+		.block-editor-link-control__preview.is-current {
 			width: auto;
 			padding: 0;
 		}

package/src/components/preset-input-control/constants.js

@@ -0,0 +1,32 @@
+export const ICON_SIZE = 24;
+export const RANGE_CONTROL_MAX_SIZE = 8;
+export const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 300, steps: 1 },
+	'%': { max: 100, steps: 1 },
+	vw: { max: 100, steps: 1 },
+	vh: { max: 100, steps: 1 },
+	em: { max: 10, steps: 0.1 },
+	rem: { max: 10, steps: 0.1 },
+	svw: { max: 100, steps: 1 },
+	lvw: { max: 100, steps: 1 },
+	dvw: { max: 100, steps: 1 },
+	svh: { max: 100, steps: 1 },
+	lvh: { max: 100, steps: 1 },
+	dvh: { max: 100, steps: 1 },
+	vi: { max: 100, steps: 1 },
+	svi: { max: 100, steps: 1 },
+	lvi: { max: 100, steps: 1 },
+	dvi: { max: 100, steps: 1 },
+	vb: { max: 100, steps: 1 },
+	svb: { max: 100, steps: 1 },
+	lvb: { max: 100, steps: 1 },
+	dvb: { max: 100, steps: 1 },
+	vmin: { max: 100, steps: 1 },
+	svmin: { max: 100, steps: 1 },
+	lvmin: { max: 100, steps: 1 },
+	dvmin: { max: 100, steps: 1 },
+	vmax: { max: 100, steps: 1 },
+	svmax: { max: 100, steps: 1 },
+	lvmax: { max: 100, steps: 1 },
+	dvmax: { max: 100, steps: 1 },
+};