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

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

@@ -45,7 +45,6 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 			// If render property is not provided, use CheckboxControl
 			return (
 				<CheckboxControl
-					__nextHasNoMarginBottom
 					className="block-editor-link-control__setting"
 					key={ setting.id }
 					label={ setting.title }

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

@@ -39,7 +39,7 @@ $block-editor-link-control-number-of-actions: 1;
 			}
 		}
 
-		.block-editor-link-control__search-item-top {
+		.block-editor-link-control__preview {
 			gap: $grid-unit-05;
 			flex-wrap: wrap;
 
@@ -47,11 +47,11 @@ $block-editor-link-control-number-of-actions: 1;
 				width: auto;
 				padding: $grid-unit-05;
 			}
-		}
 
-		.is-preview .block-editor-link-control__search-item-header {
-			min-width: 100%;
-			margin-right: 0;
+			.block-editor-link-control_link-information {
+				min-width: 100%;
+				margin-right: 0;
+			}
 		}
 	}
 }
@@ -163,22 +163,15 @@ $block-editor-link-control-number-of-actions: 1;
 	&[aria-selected] {
 		background: $gray-100;
 	}
+}
 
-	&.is-current {
-		flex-direction: column; // allow for stacking.
-		background: transparent;
-		border: 0;
-		width: 100%;
-		cursor: default;
-		padding: $grid-unit-20;
-	}
+.block-editor-link-control__preview {
+	background: transparent;
+	border: 0;
+	padding: $grid-unit-20;
 
-	.block-editor-link-control__search-item-header {
-		display: block;
-		flex-direction: row;
-		align-items: center;
+	.block-editor-link-control__link-information {
 		margin-right: $grid-unit-10;
-		gap: $grid-unit-10;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -186,7 +179,7 @@ $block-editor-link-control-number-of-actions: 1;
 		white-space: pre-wrap;
 		overflow-wrap: break-word;
 
-		.block-editor-link-control__search-item-info {
+		.block-editor-link-control__preview-info {
 			color: $gray-700;
 			line-height: 1.1;
 			font-size: $helptext-font-size;
@@ -194,56 +187,33 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 	}
 
-	&.is-preview .block-editor-link-control__search-item-header {
-		display: flex;
-		flex: 1; // Fill available space.
-	}
-
-	&.is-error .block-editor-link-control__search-item-header {
-		align-items: center;
-	}
-
-	&.is-url-title .block-editor-link-control__search-item-title {
+	&.is-url-title .block-editor-link-control__preview-title {
 		// To prevent overflow when the title is a URL
 		word-break: break-all;
 	}
 
-	.block-editor-link-control__search-item-details {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		gap: $grid-unit-05;
-	}
-
-	.block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+	.block-editor-link-control__preview-icon {
+		position: relative;
+		flex-shrink: 0;
 		background-color: $gray-100;
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		border-radius: $radius-small;
-	}
-
-	.block-editor-link-control__search-item-icon {
-		position: relative;
-		flex-shrink: 0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
 
 		img {
 			width: $grid-unit-20; // favicons often have a source of 32px
 		}
 	}
 
-	&.is-error .block-editor-link-control__search-item-icon {
+	&.is-error .block-editor-link-control__preview-icon {
 		top: 0;
 		width: 32px;
 		max-height: 32px;
 	}
 
-	.block-editor-link-control__search-item-title {
+	.block-editor-link-control__preview-title {
 		line-height: 1.1;
 
-
 		&:focus {
 			box-shadow: none;
 		}
@@ -276,16 +246,9 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 }
 
-.block-editor-link-control__search-item-top {
-	display: flex;
-	flex-direction: row;
-	width: 100%; // clip.
-	align-items: center;
-}
-
-.block-editor-link-control__search-item.is-fetching {
+.block-editor-link-control__preview.is-fetching {
 
-	.block-editor-link-control__search-item-icon {
+	.block-editor-link-control__preview-icon {
 		svg,
 		img {
 			opacity: 0;
@@ -339,7 +302,7 @@ $block-editor-link-control-number-of-actions: 1;
 .block-editor-link-control__search-create {
 	align-items: center; // align text with icon.
 
-	.block-editor-link-control__search-item-title {
+	.block-editor-link-control__preview-title {
 		margin-bottom: 0;
 	}
 

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

@@ -1621,7 +1621,7 @@ describe( 'Selecting links', () => {
 					id: '1',
 					title: 'https://www.wordpress.org',
 					url: 'https://www.wordpress.org',
-					type: 'URL',
+					type: 'link',
 				},
 			], // Url.
 		] )(
@@ -1683,7 +1683,7 @@ describe( 'Selecting links', () => {
 					id: '1',
 					title: 'https://www.wordpress.org',
 					url: 'https://www.wordpress.org',
-					type: 'URL',
+					type: 'link',
 				},
 			], // Url.
 		] )(
@@ -2135,7 +2135,7 @@ describe( 'Rich link previews', () => {
 		id: '1',
 		title: 'WordPress.org', // Customize this for differentiation in assertions.
 		url: 'https://www.wordpress.org',
-		type: 'URL',
+		type: 'link',
 	};
 
 	beforeAll( () => {
@@ -2212,13 +2212,13 @@ describe( 'Rich link previews', () => {
 		// Todo: refactor to use user-facing queries.
 		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichImagePreview = linkPreview.querySelector(
-			'.block-editor-link-control__search-item-image'
+			'.block-editor-link-control__preview-image'
 		);
 
 		// Todo: refactor to use user-facing queries.
 		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichDescriptionPreview = linkPreview.querySelector(
-			'.block-editor-link-control__search-item-description'
+			'.block-editor-link-control__preview-description'
 		);
 
 		expect( hasRichImagePreview ).not.toBeInTheDocument();
@@ -2247,7 +2247,7 @@ describe( 'Rich link previews', () => {
 
 		// eslint-disable-next-line testing-library/no-node-access
 		expect( titlePreview.parentElement.parentElement ).toHaveClass(
-			'block-editor-link-control__search-item-title'
+			'block-editor-link-control__preview-title'
 		);
 	} );
 
@@ -2271,7 +2271,7 @@ describe( 'Rich link previews', () => {
 
 		// eslint-disable-next-line testing-library/no-node-access
 		const iconPreview = linkPreview.querySelector(
-			`.block-editor-link-control__search-item-icon`
+			`.block-editor-link-control__preview-icon`
 		);
 
 		// eslint-disable-next-line testing-library/no-node-access
@@ -2310,7 +2310,7 @@ describe( 'Rich link previews', () => {
 
 			// eslint-disable-next-line testing-library/no-node-access
 			const missingDataItem = linkPreview.querySelector(
-				`.block-editor-link-control__search-item-${ dataItem }`
+				`.block-editor-link-control__preview-${ dataItem }`
 			);
 
 			expect( missingDataItem ).not.toBeInTheDocument();
@@ -2800,14 +2800,153 @@ describe( 'Entity handling', () => {
 		} );
 		await user.click( applyButton );
 
-		// Verify that onChange was called with the entity link severed
-		// id, kind, and type should be undefined to indicate it's no longer an entity
+		// Verify that onChange was called with entity metadata cleared.
+		// Kind should be undefined (no longer an entity).
+		// Note: Currently when clicking Apply (vs selecting a suggestion),
+		// type and id are also undefined - that's a separate issue with the
+		// TODO: Apply button handler not processing URLs through handleDirectEntry,
+		// so the shape of the data for a custom link can be different depending on
+		// how it was submitted.
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.objectContaining( {
-				url: customUrl,
-				id: undefined,
+				url: 'www.wordpress.org',
 				kind: undefined,
+			} )
+		);
+	} );
+
+	it( 'should clear entity metadata (type/kind) when changing from page link to custom link via suggestion', async () => {
+		const user = userEvent.setup();
+
+		// Start with an entity link that has type and kind
+		const pageLink = {
+			id: 123,
+			url: 'https://example.com/page',
+			title: 'Test Page',
+			type: 'page',
+			kind: 'post-type',
+		};
+
+		const onChange = jest.fn();
+
+		// Mock search suggestions to return a custom URL
+		// URL suggestions have an id and type but no 'kind' (which indicates entity metadata)
+		mockFetchSearchSuggestions.mockImplementation( ( searchTerm ) => {
+			const suggestions = [
+				{
+					id: uniqueId(),
+					title: searchTerm,
+					url: searchTerm,
+					type: 'link', // URL suggestions have type 'link'
+					// Importantly: no 'kind' property (entities have kind)
+				},
+			];
+			return Promise.resolve( suggestions );
+		} );
+
+		render(
+			<LinkControl
+				value={ pageLink }
+				handleEntities
+				forceIsEditingLink
+				onChange={ onChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		// Initially should be disabled because it's an entity
+		expect( searchInput ).toBeDisabled();
+
+		// Click the unsync button to enable editing
+		const unlinkButton = screen.getByRole( 'button', {
+			name: 'Unsync and edit',
+		} );
+		await user.click( unlinkButton );
+
+		// Input should now be enabled and value should be cleared
+		expect( searchInput ).toBeEnabled();
+		expect( searchInput ).toHaveValue( '' );
+
+		// Type a custom URL
+		await user.type( searchInput, 'https://custom-url.com' );
+
+		// Wait for suggestions to appear
+		const suggestionsList = await screen.findByRole( 'listbox' );
+		expect( suggestionsList ).toBeVisible();
+
+		// Select the custom URL suggestion (not clicking Apply button)
+		const urlSuggestion = screen.getByRole( 'option', {
+			name: /https:\/\/custom-url\.com/,
+		} );
+		await user.click( urlSuggestion );
+
+		// Verify that onChange was called with id, type and kind explicitly set to undefined
+		// This is the critical fix - when selecting a custom URL suggestion after unlinking,
+		// entity metadata (type/kind) should be cleared (not just when using the Apply button)
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				url: 'https://custom-url.com',
+				type: 'link',
+				kind: undefined,
+			} )
+		);
+	} );
+
+	it( 'should clear entity metadata when pressing Enter for direct entry (without clicking suggestion)', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		const pageLink = {
+			id: 123,
+			url: 'https://example.com/page',
+			title: 'Test Page',
+			type: 'page',
+			kind: 'post-type',
+		};
+
+		render(
+			<LinkControl
+				value={ pageLink }
+				handleEntities
+				forceIsEditingLink
+				onChange={ onChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		// Initially should be disabled because it's an entity
+		expect( searchInput ).toBeDisabled();
+
+		// Click the unsync button to enable editing
+		const unlinkButton = screen.getByRole( 'button', {
+			name: 'Unsync and edit',
+		} );
+		await user.click( unlinkButton );
+
+		// Input should now be enabled and value should be cleared
+		expect( searchInput ).toBeEnabled();
+		expect( searchInput ).toHaveValue( '' );
+
+		// Type a custom URL
+		await user.type( searchInput, 'https://direct-entry.com' );
+
+		// Press Enter WITHOUT clicking the suggestion (direct entry path)
+		triggerEnter( searchInput );
+
+		// Verify that onChange was called with type and kind explicitly set to undefined
+		// This tests the direct entry path in onSubmit (lines 157-165 in search-input.js)
+		// where the user types a URL and presses Enter without selecting from suggestions
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				url: 'https://direct-entry.com',
 				type: undefined,
+				kind: undefined,
 			} )
 		);
 	} );

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

@@ -0,0 +1 @@
+export { LinkPicker } from './link-picker';

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

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BaseControl,
+	Button,
+	Popover,
+	VisuallyHidden,
+	useBaseControlProps,
+} from '@wordpress/components';
+import { useState, useId, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../link-control';
+import { LinkPreview } from './link-preview';
+
+/**
+ * @typedef {Object} LinkPickerPreview
+ * @property {string}        title           - Display title for the link
+ * @property {string}        url             - Display URL for the link
+ * @property {string}        [image]         - Optional image URL for the link preview
+ * @property {Array<Object>} [badges]        - Optional array of badge objects with label and intent
+ * @property {string}        badges[].label  - Badge label text
+ * @property {string}        badges[].intent - Badge intent/style
+ */
+
+/**
+ * LinkPicker component that combines the preview button and search input.
+ * Shows a preview button as a trigger, and opens a popover with search input when clicked.
+ *
+ * @param {Object}            props                  - Component props
+ * @param {LinkPickerPreview} props.preview          - Preview data object
+ * @param {Function}          props.onSelect         - Callback when a suggestion is selected
+ * @param {Object}            props.suggestionsQuery - Query parameters for suggestions
+ * @param {string}            props.label            - Label for the control
+ * @param {string}            props.help             - Help text for the control
+ */
+export function LinkPicker( {
+	preview,
+	onSelect,
+	suggestionsQuery,
+	label,
+	help,
+} ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const instanceId = useId();
+	const dialogTitleId = `link-picker-title-${ instanceId }`;
+	const dialogDescriptionId = `link-picker-description-${ instanceId }`;
+	const anchorRef = useRef( null );
+
+	// Use the proper BaseControl pattern for associating help text
+	const { baseControlProps, controlProps } = useBaseControlProps( {
+		help,
+	} );
+
+	const handleChange = ( newValue ) => {
+		// Close the popover immediately
+		setIsOpen( false );
+
+		// When a link is selected in LinkControl
+		if ( newValue ) {
+			const suggestion = {
+				url: newValue.url,
+				kind: newValue.kind,
+				type: newValue.type,
+				id: newValue.id,
+				title: newValue.title,
+			};
+			onSelect( suggestion );
+		}
+	};
+
+	return (
+		<BaseControl { ...baseControlProps }>
+			<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
+			<Button
+				ref={ anchorRef }
+				onClick={ () => setIsOpen( ! isOpen ) }
+				aria-haspopup="dialog"
+				aria-expanded={ isOpen }
+				aria-describedby={ controlProps[ 'aria-describedby' ] }
+				variant="secondary"
+				__next40pxDefaultSize
+				className="link-preview-button"
+			>
+				{ label && <VisuallyHidden>{ label }:</VisuallyHidden> }
+				<LinkPreview
+					title={ preview.title || __( 'Add link' ) }
+					url={ preview.url }
+					image={ preview.image }
+					badges={ preview.badges }
+				/>
+			</Button>
+			{ isOpen && (
+				<Popover
+					anchor={ anchorRef.current }
+					onClose={ () => setIsOpen( false ) }
+					placement="left-start"
+					offset={ 36 }
+					shift
+				>
+					<div
+						role="dialog"
+						aria-labelledby={ dialogTitleId }
+						aria-describedby={ dialogDescriptionId }
+					>
+						<VisuallyHidden>
+							<h2 id={ dialogTitleId }>
+								{ __( 'Select a link' ) }
+							</h2>
+							<p id={ dialogDescriptionId }>
+								{ __(
+									'Search for and add a link to the navigation item.'
+								) }
+							</p>
+						</VisuallyHidden>
+						<LinkControl
+							value={ null }
+							onChange={ handleChange }
+							suggestionsQuery={ suggestionsQuery }
+							showInitialSuggestions
+							forceIsEditingLink
+							settings={ [] }
+						/>
+					</div>
+				</Popover>
+			) }
+		</BaseControl>
+	);
+}

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;
+}