@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -196,8 +196,7 @@ describe( 'Basic rendering', () => {
 			within( resultsList ).getAllByRole( 'option' );
 
 		expect( searchResultElements ).toHaveLength(
-			// The fauxEntitySuggestions length plus the 'Press ENTER to add this link' button.
-			fauxEntitySuggestions.length + 1
+			fauxEntitySuggestions.length
 		);
 
 		// Step down into the search results, highlighting the first result item.
@@ -440,44 +439,87 @@ describe( 'Searching for a link', () => {
 		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should display only search suggestions when current input value is not URL-like', async () => {
-		const user = userEvent.setup();
-		const searchTerm = 'Hello world';
-		const firstSuggestion = fauxEntitySuggestions[ 0 ];
+	it.each( [ 'With spaces', 'Uppercase', 'lowercase' ] )(
+		'should display only search suggestions (and not URL result type) when current input value (e.g. %s) is not URL-like',
+		async ( searchTerm ) => {
+			const user = userEvent.setup();
+			const firstSuggestion = fauxEntitySuggestions[ 0 ];
 
-		render( <LinkControl /> );
+			render( <LinkControl /> );
 
-		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			// Search Input UI.
+			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
-		// Simulate searching for a term.
-		await user.type( searchInput, searchTerm );
+			// Simulate searching for a term.
+			await user.type( searchInput, searchTerm );
 
-		const searchResultElements = within(
-			await screen.findByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
+			const searchResultElements = within(
+				await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).getAllByRole( 'option' );
 
-		expect( searchResultElements ).toHaveLength(
-			fauxEntitySuggestions.length
-		);
+			expect( searchResultElements ).toHaveLength(
+				fauxEntitySuggestions.length
+			);
 
-		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
+			expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		// Check that a search suggestion shows up corresponding to the data.
-		expect( searchResultElements[ 0 ] ).toHaveTextContent(
-			firstSuggestion.title
-		);
-		expect( searchResultElements[ 0 ] ).toHaveTextContent(
-			firstSuggestion.type
-		);
+			// Check that a search suggestion shows up corresponding to the data.
+			expect( searchResultElements[ 0 ] ).toHaveTextContent(
+				firstSuggestion.title
+			);
+			expect( searchResultElements[ 0 ] ).toHaveTextContent(
+				firstSuggestion.type
+			);
 
-		// The fallback URL suggestion should not be shown when input is not URL-like.
-		expect(
-			searchResultElements[ searchResultElements.length - 1 ]
-		).not.toHaveTextContent( 'URL' );
-	} );
+			// The fallback URL suggestion should not be shown when input is not URL-like.
+			expect(
+				searchResultElements[ searchResultElements.length - 1 ]
+			).not.toHaveTextContent( 'URL' );
+		}
+	);
+
+	it.each( [
+		[ 'https://wordpress.org', 'URL' ],
+		[ 'http://wordpress.org', 'URL' ],
+		[ 'www.wordpress.org', 'URL' ],
+		[ 'wordpress.org', 'URL' ],
+		[ 'ftp://wordpress.org', 'URL' ],
+		[ 'mailto:hello@wordpress.org', 'mailto' ],
+		[ 'tel:123456789', 'tel' ],
+		[ '#internal', 'internal' ],
+	] )(
+		'should display only URL result when current input value is URL-like (e.g. %s)',
+		async ( searchTerm, type ) => {
+			const user = userEvent.setup();
+
+			render( <LinkControl /> );
+
+			// Search Input UI.
+			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+
+			// Simulate searching for a term.
+			await user.type( searchInput, searchTerm );
+
+			const searchResultElement = within(
+				await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).getByRole( 'option' );
+
+			expect( searchResultElement ).toBeInTheDocument();
+
+			// Should only be the `URL` suggestion.
+			expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
+
+			expect( searchResultElement ).toHaveTextContent( searchTerm );
+			expect( searchResultElement ).toHaveTextContent( type );
+			expect( searchResultElement ).toHaveTextContent(
+				'Press ENTER to add this link'
+			);
+		}
+	);
 
 	it( 'should trim search term', async () => {
 		const user = userEvent.setup();
@@ -504,8 +546,7 @@ describe( 'Searching for a link', () => {
 			.flat()
 			.filter( Boolean );
 
-		// Given we're mocking out the results we should always have 4 mark elements.
-		expect( searchResultTextHighlightElements ).toHaveLength( 4 );
+		expect( searchResultTextHighlightElements ).toHaveLength( 3 );
 
 		// Make sure there are no `mark` elements which contain anything other
 		// than the trimmed search term (ie: no whitespace).
@@ -565,16 +606,15 @@ describe( 'Searching for a link', () => {
 			const lastSearchResultItem =
 				searchResultElements[ searchResultElements.length - 1 ];
 
-			// We should see a search result for each of the expect search suggestions
-			// plus 1 additional one for the fallback URL suggestion.
+			// We should see a search result for each of the expect search suggestions.
 			expect( searchResultElements ).toHaveLength(
-				fauxEntitySuggestions.length + 1
+				fauxEntitySuggestions.length
 			);
 
-			// The last item should be a URL search suggestion.
-			expect( lastSearchResultItem ).toHaveTextContent( searchTerm );
-			expect( lastSearchResultItem ).toHaveTextContent( 'URL' );
-			expect( lastSearchResultItem ).toHaveTextContent(
+			// The URL search suggestion should not exist.
+			expect( lastSearchResultItem ).not.toHaveTextContent( searchTerm );
+			expect( lastSearchResultItem ).not.toHaveTextContent( 'URL' );
+			expect( lastSearchResultItem ).not.toHaveTextContent(
 				'Press ENTER to add this link'
 			);
 		}
@@ -655,10 +695,13 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.getByRole( 'button', {
-					name: 'Apply',
+					name: 'Save',
 				} );
 
-				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toHaveAttribute(
+					'aria-disabled',
+					'true'
+				);
 				expect( submitButton ).toBeVisible();
 
 				if ( searchString.length ) {
@@ -673,12 +716,15 @@ describe( 'Manual link entry', () => {
 				await user.keyboard( '[Enter]' );
 
 				submitButton = screen.getByRole( 'button', {
-					name: 'Apply',
+					name: 'Save',
 				} );
 
 				// Verify the UI hasn't allowed submission.
 				expect( searchInput ).toBeVisible();
-				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toHaveAttribute(
+					'aria-disabled',
+					'true'
+				);
 				expect( submitButton ).toBeVisible();
 			}
 		);
@@ -696,10 +742,13 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.queryByRole( 'button', {
-					name: 'Apply',
+					name: 'Save',
 				} );
 
-				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toHaveAttribute(
+					'aria-disabled',
+					'true'
+				);
 				expect( submitButton ).toBeVisible();
 
 				// Simulate searching for a term.
@@ -715,12 +764,15 @@ describe( 'Manual link entry', () => {
 				await user.click( submitButton );
 
 				submitButton = screen.queryByRole( 'button', {
-					name: 'Apply',
+					name: 'Save',
 				} );
 
 				// Verify the UI hasn't allowed submission.
 				expect( searchInput ).toBeVisible();
-				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toHaveAttribute(
+					'aria-disabled',
+					'true'
+				);
 				expect( submitButton ).toBeVisible();
 			}
 		);
@@ -901,7 +953,7 @@ describe( 'Default search suggestions', () => {
 
 		expect(
 			await screen.findByRole( 'listbox', {
-				name: 'Recently updated',
+				name: 'Suggestions',
 			} )
 		).toBeVisible();
 
@@ -952,8 +1004,7 @@ describe( 'Default search suggestions', () => {
 			} )
 		).getAllByRole( 'option' );
 
-		// It should match any url that's like ?p= and also include a URL option.
-		expect( searchResultElements ).toHaveLength( 5 );
+		expect( searchResultElements ).toHaveLength( 4 );
 
 		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
@@ -991,7 +1042,7 @@ describe( 'Default search suggestions', () => {
 		expect( searchInput ).toHaveValue( '' );
 
 		const initialResultsList = await screen.findByRole( 'listbox', {
-			name: 'Recently updated',
+			name: 'Suggestions',
 		} );
 
 		expect(
@@ -1008,7 +1059,7 @@ describe( 'Default search suggestions', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
-			name: 'Recently updated',
+			name: 'Suggestions',
 		} );
 
 		expect( searchResultsField ).not.toBeInTheDocument();
@@ -1598,7 +1649,7 @@ describe( 'Selecting links', () => {
 
 			expect(
 				await screen.findByRole( 'listbox', {
-					name: 'Recently updated',
+					name: 'Suggestions',
 				} )
 			).toBeVisible();
 
@@ -1610,7 +1661,7 @@ describe( 'Selecting links', () => {
 
 			const searchResultElements = within(
 				screen.getByRole( 'listbox', {
-					name: 'Recently updated',
+					name: 'Suggestions',
 				} )
 			).getAllByRole( 'option' );
 
@@ -1784,6 +1835,63 @@ describe( 'Addition Settings UI', () => {
 			} )
 		).toBeChecked();
 	} );
+
+	it( 'should require settings changes to be submitted/applied', async () => {
+		const user = userEvent.setup();
+
+		const mockOnChange = jest.fn();
+
+		const selectedLink = {
+			...fauxEntitySuggestions[ 0 ],
+			// Including a setting here helps to assert on a potential bug
+			// whereby settings on the suggestion override the current (internal)
+			// settings values set by the user in the UI.
+			opensInNewTab: false,
+		};
+
+		render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// check that the "Apply" button is disabled by default.
+		const submitButton = screen.queryByRole( 'button', {
+			name: 'Save',
+		} );
+
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		await toggleSettingsDrawer( user );
+
+		const opensInNewTabToggle = screen.queryByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+
+		// toggle the checkbox
+		await user.click( opensInNewTabToggle );
+
+		// Check settings are **not** directly submitted
+		// which would trigger the onChange handler.
+		expect( mockOnChange ).not.toHaveBeenCalled();
+
+		// Check Apply button is now enabled because changes
+		// have been detected.
+		expect( submitButton ).toBeEnabled();
+
+		// Submit the changed setting value using the Apply button
+		await user.click( submitButton );
+
+		// Assert the value is updated.
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				opensInNewTab: true,
+			} )
+		);
+	} );
 } );
 
 describe( 'Post types', () => {
@@ -2185,7 +2293,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Apply',
+			name: 'Save',
 		} );
 
 		await user.click( submitButton );
@@ -2199,7 +2307,7 @@ describe( 'Controlling link title text', () => {
 
 	it( 'should allow `ENTER` keypress within the text field to trigger submission of value', async () => {
 		const user = userEvent.setup();
-		const textValue = 'My new text value';
+		const newTextValue = 'My new text value';
 		const mockOnChange = jest.fn();
 
 		render(
@@ -2218,14 +2326,14 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toBeVisible();
 
 		await user.clear( textInput );
-		await user.keyboard( textValue );
+		await user.keyboard( newTextValue );
 
 		// Attempt to submit the empty search value in the input.
 		triggerEnter( textInput );
 
 		expect( mockOnChange ).toHaveBeenCalledWith(
 			expect.objectContaining( {
-				title: textValue,
+				title: newTextValue,
 				url: selectedLink.url,
 			} )
 		);
@@ -2236,7 +2344,7 @@ describe( 'Controlling link title text', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'should reset state on value change', async () => {
+	it( 'should reset state upon controlled value change', async () => {
 		const user = userEvent.setup();
 		const textValue = 'My new text value';
 		const mockOnChange = jest.fn();

package/src/components/link-control/test/is-url-like.js

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import isURLLike from '../is-url-like';
+
+describe( 'isURLLike', () => {
+	it.each( [ 'https://wordpress.org', 'http://wordpress.org' ] )(
+		'returns true for a string that starts with an http(s) protocol',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
+	it.each( [
+		'hello world',
+		'https://   has spaces even though starts with protocol',
+		'www. wordpress . org',
+	] )(
+		'returns false for any string with spaces (e.g. "%s")',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( false );
+		}
+	);
+
+	it( 'returns false for a string without a protocol or a TLD', () => {
+		expect( isURLLike( 'somedirectentryhere' ) ).toBe( false );
+	} );
+
+	it( 'returns true for a string beginning with www.', () => {
+		expect( isURLLike( 'www.wordpress.org' ) ).toBe( true );
+	} );
+
+	it.each( [ 'mailto:test@wordpress.org', 'tel:123456' ] )(
+		'returns true for common protocols',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
+	it( 'returns true for internal anchor ("hash") links.', () => {
+		expect( isURLLike( '#someinternallink' ) ).toBe( true );
+	} );
+
+	// use .each to test multiple cases
+	it.each( [
+		[ true, 'http://example.com' ],
+		[ true, 'https://test.co.uk?query=param' ],
+		[ true, 'ftp://openai.ai?param=value#section' ],
+		[ true, 'example.com' ],
+		[ true, 'http://example.com?query=param#section' ],
+		[ true, 'https://test.co.uk/some/path' ],
+		[ true, 'ftp://openai.ai/some/path' ],
+		[ true, 'example.org/some/path' ],
+		[ true, 'example_test.tld' ],
+		[ true, 'example_test.com' ],
+		[ false, 'example' ],
+		[ false, '.com' ],
+		[ true, '_test.com' ],
+		[ true, 'http://example_test.com' ],
+	] )(
+		'returns %s when testing against string "%s" for a valid TLD',
+		( expected, testString ) => {
+			expect( isURLLike( testString ) ).toBe( expected );
+		}
+	);
+} );

package/src/components/link-control/use-internal-value.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+export default function useInternalValue( value ) {
+	const [ internalValue, setInternalValue ] = useState( value || {} );
+
+	// If the value prop changes, update the internal state.
+	useEffect( () => {
+		setInternalValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
+	}, [ value ] );
+
+	const setInternalURLInputValue = ( nextValue ) => {
+		setInternalValue( {
+			...internalValue,
+			url: nextValue,
+		} );
+	};
+
+	const setInternalTextInputValue = ( nextValue ) => {
+		setInternalValue( {
+			...internalValue,
+			title: nextValue,
+		} );
+	};
+
+	const createSetInternalSettingValueHandler =
+		( settingsKeys ) => ( nextValue ) => {
+			// Only apply settings values which are defined in the settings prop.
+			const settingsUpdates = Object.keys( nextValue ).reduce(
+				( acc, key ) => {
+					if ( settingsKeys.includes( key ) ) {
+						acc[ key ] = nextValue[ key ];
+					}
+					return acc;
+				},
+				{}
+			);
+
+			setInternalValue( {
+				...internalValue,
+				...settingsUpdates,
+			} );
+		};
+
+	return [
+		internalValue,
+		setInternalValue,
+		setInternalURLInputValue,
+		setInternalTextInputValue,
+		createSetInternalSettingValueHandler,
+	];
+}

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

@@ -51,23 +51,16 @@ const handleEntitySearch = async (
 	val,
 	suggestionsQuery,
 	fetchSearchSuggestions,
-	directEntryHandler,
 	withCreateSuggestion,
-	withURLSuggestion,
 	pageOnFront
 ) => {
 	const { isInitialSuggestions } = suggestionsQuery;
-	let resultsIncludeFrontPage = false;
 
-	let results = await Promise.all( [
-		fetchSearchSuggestions( val, suggestionsQuery ),
-		directEntryHandler( val ),
-	] );
+	const results = await fetchSearchSuggestions( val, suggestionsQuery );
 
 	// Identify front page and update type to match.
-	results[ 0 ] = results[ 0 ].map( ( result ) => {
+	results.map( ( result ) => {
 		if ( Number( result.id ) === pageOnFront ) {
-			resultsIncludeFrontPage = true;
 			result.isFrontPage = true;
 			return result;
 		}
@@ -75,22 +68,6 @@ const handleEntitySearch = async (
 		return result;
 	} );
 
-	const couldBeURL = ! val.includes( ' ' );
-
-	// If it's potentially a URL search then concat on a URL search suggestion
-	// just for good measure. That way once the actual results run out we always
-	// have a URL option to fallback on.
-	if (
-		! resultsIncludeFrontPage &&
-		couldBeURL &&
-		withURLSuggestion &&
-		! isInitialSuggestions
-	) {
-		results = results[ 0 ].concat( results[ 1 ] );
-	} else {
-		results = results[ 0 ];
-	}
-
 	// If displaying initial suggestions just return plain results.
 	if ( isInitialSuggestions ) {
 		return results;
@@ -150,12 +127,18 @@ export default function useSearchHandler(
 						val,
 						{ ...suggestionsQuery, isInitialSuggestions },
 						fetchSearchSuggestions,
-						directEntryHandler,
 						withCreateSuggestion,
 						withURLSuggestion,
 						pageOnFront
 				  );
 		},
-		[ directEntryHandler, fetchSearchSuggestions, withCreateSuggestion ]
+		[
+			directEntryHandler,
+			fetchSearchSuggestions,
+			pageOnFront,
+			suggestionsQuery,
+			withCreateSuggestion,
+			withURLSuggestion,
+		]
 	);
 }

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

@@ -4,7 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { forwardRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -12,11 +12,13 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useListViewContext } from './context';
 import Inserter from '../inserter';
+import AriaReferencedText from './aria-referenced-text';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
-		const [ insertedBlock, setInsertedBlock ] = useState( null );
+		const { insertedBlock, setInsertedBlock } = useListViewContext();
 
 		const instanceId = useInstanceId( Appender );
 		const { hideInserter } = useSelect(
@@ -89,12 +91,9 @@ export const Appender = forwardRef(
 						}
 					} }
 				/>
-				<div
-					className="list-view-appender__description"
-					id={ descriptionId }
-				>
+				<AriaReferencedText id={ descriptionId }>
 					{ description }
-				</div>
+				</AriaReferencedText>
 			</div>
 		);
 	}

package/src/components/list-view/aria-referenced-text.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+/**
+ * A component specifically designed to be used as an element referenced
+ * by ARIA attributes such as `aria-labelledby` or `aria-describedby`.
+ *
+ * @param {Object}                    props          Props.
+ * @param {import('react').ReactNode} props.children
+ */
+export default function AriaReferencedText( { children, ...props } ) {
+	const ref = useRef();
+
+	useEffect( () => {
+		if ( ref.current ) {
+			// This seems like a no-op, but it fixes a bug in Firefox where
+			// it fails to recompute the text when only the text node changes.
+			// @see https://github.com/WordPress/gutenberg/pull/51035
+			ref.current.textContent = ref.current.textContent;
+		}
+	}, [ children ] );
+
+	return (
+		<div hidden { ...props } ref={ ref }>
+			{ children }
+		</div>
+	);
+}

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

@@ -44,10 +44,11 @@ const ListViewBlockContents = forwardRef(
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
 				};
 			},
-			[ clientId ]
+			[]
 		);
 
-		const { renderAdditionalBlockUI } = useListViewContext();
+		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
+			useListViewContext();
 
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
@@ -66,7 +67,13 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
-				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
+				{ AdditionalBlockContent && (
+					<AdditionalBlockContent
+						block={ block }
+						insertedBlock={ insertedBlock }
+						setInsertedBlock={ setInsertedBlock }
+					/>
+				) }
 				<BlockDraggable clientIds={ draggableClientIds }>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton