@wordpress/block-editor 15.9.1-next.8b30e05b0.0 → 15.10.0

package/src/components/inspector-controls-tabs/content-tab.js

@@ -15,14 +15,18 @@ const ContentTab = ( { rootClientId, contentClientIds } ) => {
 		return null;
 	}
 
+	const shouldShowContentOnlyControls =
+		window?.__experimentalContentOnlyPatternInsertion &&
+		window?.__experimentalContentOnlyInspectorFields;
+
 	return (
 		<>
-			{ ! window?.__experimentalContentOnlyPatternInsertion && (
+			{ ! shouldShowContentOnlyControls && (
 				<PanelBody title={ __( 'Content' ) }>
 					<BlockQuickNavigation clientIds={ contentClientIds } />
 				</PanelBody>
 			) }
-			{ window?.__experimentalContentOnlyPatternInsertion && (
+			{ shouldShowContentOnlyControls && (
 				<ContentOnlyControls rootClientId={ rootClientId } />
 			) }
 		</>

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

@@ -23,6 +23,7 @@ import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { keyboardReturn, linkOff } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -35,7 +36,6 @@ import useCreatePage from './use-create-page';
 import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Default properties associated with a link control value.

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

@@ -3,6 +3,7 @@
  */
 import { forwardRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -11,7 +12,6 @@ import { URLInput } from '../';
 import LinkControlSearchResults from './search-results';
 import { CREATE_TYPE } from './constants';
 import useSearchHandler from './use-search-handler';
-import deprecated from '@wordpress/deprecated';
 
 // Must be a function as otherwise URLInput will default
 // to the fetchLinkSuggestions passed in block editor settings
@@ -106,7 +106,13 @@ const LinkControlSearchInput = forwardRef(
 				allowDirectEntry ||
 				( suggestion && Object.keys( suggestion ).length >= 1 )
 			) {
-				const { id, url, ...restLinkProps } = currentLink ?? {};
+				// Strip out id, url, kind, and type from the current link to prevent
+				// entity metadata from persisting when switching to a different link type.
+				// For example, when changing from an entity link (kind: 'post-type', type: 'page')
+				// to a custom URL (type: 'link', no kind), we need to ensure the old 'kind'
+				// doesn't carry over. We do want to preserve other properites like title, though.
+				const { id, url, kind, type, ...restLinkProps } =
+					currentLink ?? {};
 				onSelect(
 					// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
 					{ ...restLinkProps, ...suggestion },

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( () => {
@@ -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/hooks/block-bindings.js

@@ -1,25 +1,12 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	getBlockBindingsSource,
-	getBlockType,
-	store as blockStore,
-} from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalText as Text,
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
@@ -28,29 +15,15 @@ import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { useBlockBindingsUtils } from '../utils/block-bindings';
+import {
+	BlockBindingsAttributeControl,
+	useBlockBindingsUtils,
+} from '../components/block-bindings';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
-import { useBlockEditContext } from '../components/block-edit';
 import { store as blockEditorStore } from '../store';
 
-const { Menu } = unlock( componentsPrivateApis );
-
-/**
- * Get the normalized attribute type for block bindings.
- * Converts 'rich-text' to 'string' since rich-text is stored as string.
- *
- * @param {string} blockName The block name.
- * @param {string} attribute The attribute name.
- * @return {string} The normalized attribute type.
- */
-const getAttributeType = ( blockName, attribute ) => {
-	const _attributeType =
-		getBlockType( blockName ).attributes?.[ attribute ]?.type;
-	return _attributeType === 'rich-text' ? 'string' : _attributeType;
-};
-
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
@@ -64,295 +37,35 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
-	const { clientId } = useBlockEditContext();
-	const { updateBlockBindings } = useBlockBindingsUtils();
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const blockContext = useContext( BlockContext );
-	const { attributeType, select } = useSelect(
-		( _select ) => {
-			const { name: blockName } =
-				_select( blockEditorStore ).getBlock( clientId );
-			return {
-				attributeType: getAttributeType( blockName, attribute ),
-				select: _select,
-			};
-		},
-		[ clientId, attribute ]
-	);
-	return (
-		<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-			{ Object.entries( sources ).map( ( [ sourceKey, data ] ) => {
-				// Only show sources that have compatible data for this specific attribute.
-				const sourceDataItems = data.filter(
-					( item ) => item.type === attributeType
-				);
-
-				const noItemsAvailable =
-					! sourceDataItems || sourceDataItems.length === 0;
-
-				if ( noItemsAvailable ) {
-					return null;
-				}
-
-				const source = getBlockBindingsSource( sourceKey );
-
-				return (
-					<Menu
-						key={ sourceKey }
-						placement={ isMobile ? 'bottom-start' : 'left-start' }
-					>
-						<Menu.SubmenuTriggerItem>
-							<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
-						</Menu.SubmenuTriggerItem>
-						<Menu.Popover gutter={ 8 }>
-							<Menu.Group>
-								{ sourceDataItems.map( ( item ) => {
-									const itemBindings = {
-										source: sourceKey,
-										args: item.args || {
-											key: item.key,
-										},
-									};
-									let values = {};
-									try {
-										values = source.getValues( {
-											select,
-											context: blockContext,
-											bindings: {
-												[ attribute ]: itemBindings,
-											},
-										} );
-									} catch ( e ) {}
-
-									return (
-										<Menu.CheckboxItem
-											key={
-												sourceKey +
-													JSON.stringify(
-														item.args
-													) || item.key
-											}
-											onChange={ () => {
-												const isCurrentlySelected =
-													fastDeepEqual(
-														binding?.args,
-														item.args
-													) ??
-													// Deprecate key dependency in 7.0.
-													item.key ===
-														binding?.args?.key;
-
-												if ( isCurrentlySelected ) {
-													// Unset if the same item is selected again.
-													updateBlockBindings( {
-														[ attribute ]:
-															undefined,
-													} );
-												} else {
-													updateBlockBindings( {
-														[ attribute ]:
-															itemBindings,
-													} );
-												}
-											} }
-											name={ attribute + '-binding' }
-											value={ values[ attribute ] }
-											checked={
-												fastDeepEqual(
-													binding?.args,
-													item.args
-												) ??
-												// Deprecate key dependency in 7.0.
-												item.key === binding?.args?.key
-											}
-										>
-											<Menu.ItemLabel>
-												{ item.label }
-											</Menu.ItemLabel>
-											<Menu.ItemHelpText>
-												{ values[ attribute ] }
-											</Menu.ItemHelpText>
-										</Menu.CheckboxItem>
-									);
-								} ) }
-							</Menu.Group>
-						</Menu.Popover>
-					</Menu>
-				);
-			} ) }
-		</Menu>
-	);
-}
-
-function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
-	const { source: sourceName, args } = binding || {};
-	const data = sources?.[ sourceName ];
-	const source = getBlockBindingsSource( sourceName );
-
-	let displayText;
-	let isValid = true;
-	const isNotBound = binding === undefined;
-
-	if ( isNotBound ) {
-		// Check if there are any compatible sources for this attribute type.
-		const attributeType = getAttributeType( blockName, attribute );
-
-		const hasCompatibleSources = Object.values( sources ).some( ( items ) =>
-			items.some( ( item ) => item.type === attributeType )
-		);
-
-		if ( ! hasCompatibleSources ) {
-			displayText = __( 'No sources available' );
-		} else {
-			displayText = __( 'Not connected' );
-		}
-		isValid = true;
-	} else if ( ! source ) {
-		// If there's a binding but the source is not found, it's invalid.
-		isValid = false;
-		displayText = __( 'Source not registered' );
-	} else {
-		displayText =
-			data?.find( ( item ) => fastDeepEqual( item.args, args ) )?.label ||
-			source?.label ||
-			sourceName;
-	}
-
-	return (
-		<VStack className="block-editor-bindings__item" spacing={ 0 }>
-			<Text truncate>{ attribute }</Text>
-			<Text
-				truncate
-				variant={ isValid ? 'muted' : undefined }
-				isDestructive={ ! isValid }
-			>
-				{ displayText }
-			</Text>
-		</VStack>
-	);
-}
-
-function ReadOnlyBlockBindingsPanelItem( {
-	attribute,
-	binding,
-	sources,
-	blockName,
-} ) {
-	const isMobile = useViewportMatch( 'medium', '<' );
-
-	return (
-		<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>
-			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-				<Menu.TriggerButton render={ <Item /> } disabled>
-					<BlockBindingsAttribute
-						attribute={ attribute }
-						binding={ binding }
-						sources={ sources }
-						blockName={ blockName }
-					/>
-				</Menu.TriggerButton>
-			</Menu>
-		</ToolsPanelItem>
-	);
-}
-
-function EditableBlockBindingsPanelItem( {
-	attribute,
-	binding,
-	sources,
-	blockName,
-} ) {
-	const { updateBlockBindings } = useBlockBindingsUtils();
-	const isMobile = useViewportMatch( 'medium', '<' );
-
-	return (
-		<ToolsPanelItem
-			hasValue={ () => !! binding }
-			label={ attribute }
-			onDeselect={ () => {
-				updateBlockBindings( {
-					[ attribute ]: undefined,
-				} );
-			} }
-		>
-			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-				<Menu.TriggerButton render={ <Item /> }>
-					<BlockBindingsAttribute
-						attribute={ attribute }
-						binding={ binding }
-						sources={ sources }
-						blockName={ blockName }
-					/>
-				</Menu.TriggerButton>
-				<Menu.Popover gutter={ isMobile ? 8 : 36 }>
-					<BlockBindingsPanelMenuContent
-						attribute={ attribute }
-						binding={ binding }
-						sources={ sources }
-					/>
-				</Menu.Popover>
-			</Menu>
-		</ToolsPanelItem>
-	);
-}
-
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const blockContext = useContext( BlockContext );
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// Use useSelect to ensure sources are updated whenever there are updates in block context
-	// or when underlying data changes.
-	const { canUpdateBlockBindings, bindableAttributes } = useSelect(
+	const { bindableAttributes, hasCompatibleFields } = useSelect(
 		( select ) => {
 			const { __experimentalBlockBindingsSupportedAttributes } =
 				select( blockEditorStore ).getSettings();
+			const {
+				getAllBlockBindingsSources,
+				getBlockBindingsSourceFieldsList,
+			} = unlock( select( blocksStore ) );
 
 			return {
-				canUpdateBlockBindings:
-					select( blockEditorStore ).getSettings()
-						.canUpdateBlockBindings,
 				bindableAttributes:
 					__experimentalBlockBindingsSupportedAttributes?.[
 						blockName
 					],
+				hasCompatibleFields: Object.values(
+					getAllBlockBindingsSources()
+				).some(
+					( source ) =>
+						getBlockBindingsSourceFieldsList( source, blockContext )
+							?.length > 0
+				),
 			};
 		},
-		[ blockName ]
-	);
-
-	const sources = useSelect(
-		( select ) => {
-			const { getAllBlockBindingsSources } = unlock(
-				select( blockStore )
-			);
-			const data = {};
-			Object.entries( getAllBlockBindingsSources() ).forEach(
-				( [ sourceName, source ] ) => {
-					if ( ! source.getFieldsList ) {
-						return;
-					}
-
-					const context = {};
-					if ( source.usesContext?.length ) {
-						for ( const key of source.usesContext ) {
-							context[ key ] = blockContext[ key ];
-						}
-					}
-
-					const items = source.getFieldsList( {
-						select,
-						context,
-					} );
-					if ( items?.length ) {
-						data[ sourceName ] = items;
-					}
-				}
-			);
-			return data;
-		},
-		[ blockContext ]
+		[ blockName, blockContext ]
 	);
 
 	// Return early if there are no bindable attributes.
@@ -362,12 +75,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	const { bindings } = metadata || {};
 
-	const hasCompatibleData = Object.keys( sources ).length > 0;
-
-	// Lock the UI when the user can't update bindings or there are no fields to connect to.
-	const readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;
-
-	if ( bindings === undefined && ! hasCompatibleData ) {
+	if ( bindings === undefined && ! hasCompatibleFields ) {
 		return null;
 	}
 
@@ -382,42 +90,14 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 				className="block-editor-bindings__panel"
 			>
 				<ItemGroup isBordered isSeparated>
-					{ bindableAttributes.map( ( attribute ) => {
-						const binding = bindings?.[ attribute ];
-
-						// Check if this specific attribute has compatible data from any source.
-						const attributeType = getAttributeType(
-							blockName,
-							attribute
-						);
-
-						const hasCompatibleDataForAttribute = Object.values(
-							sources
-						).some( ( data ) =>
-							data.some( ( item ) => item.type === attributeType )
-						);
-
-						const isAttributeReadOnly =
-							readOnly || ! hasCompatibleDataForAttribute;
-
-						return isAttributeReadOnly ? (
-							<ReadOnlyBlockBindingsPanelItem
-								key={ attribute }
-								attribute={ attribute }
-								binding={ binding }
-								sources={ sources }
-								blockName={ blockName }
-							/>
-						) : (
-							<EditableBlockBindingsPanelItem
-								key={ attribute }
-								attribute={ attribute }
-								binding={ binding }
-								sources={ sources }
-								blockName={ blockName }
-							/>
-						);
-					} ) }
+					{ bindableAttributes.map( ( attribute ) => (
+						<BlockBindingsAttributeControl
+							key={ attribute }
+							attribute={ attribute }
+							blockName={ blockName }
+							binding={ bindings?.[ attribute ] }
+						/>
+					) ) }
 				</ItemGroup>
 				{ /*
 					Use a div element to make the ToolsPanelHiddenInnerWrapper