@wordpress/block-editor 11.3.2 → 11.4.0

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
+import { Button, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -136,6 +136,8 @@ function LinkControl( {
 	const textInputRef = useRef();
 	const isEndingEditWithFocus = useRef( false );
 
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
 	const [ internalUrlInputValue, setInternalUrlInputValue ] =
 		useInternalInputValue( value?.url || '' );
 
@@ -201,6 +203,7 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
+		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -267,7 +270,7 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettingsDrawer = !! settings?.length;
+	const showSettings = !! settings?.length;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
@@ -275,6 +278,7 @@ function LinkControl( {
 	const showTextControl = hasLinkValue && hasTextControl;
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -295,18 +299,6 @@ function LinkControl( {
 							'has-text-control': showTextControl,
 						} ) }
 					>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label="Text"
-								value={ internalTextInputValue }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
-
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -350,18 +342,26 @@ function LinkControl( {
 				/>
 			) }
 
-			<div className="block-editor-link-control__drawer">
-				{ showSettingsDrawer && (
-					<div className="block-editor-link-control__tools">
+			{ isEditing && (
+				<div className="block-editor-link-control__tools">
+					{ ( showSettings || showTextControl ) && (
 						<LinkControlSettingsDrawer
+							settingsOpen={ settingsOpen }
+							setSettingsOpen={ setSettingsOpen }
+							showTextControl={ showTextControl }
+							showSettings={ showSettings }
+							textInputRef={ textInputRef }
+							internalTextInputValue={ internalTextInputValue }
+							setInternalTextInputValue={
+								setInternalTextInputValue
+							}
+							handleSubmitWithEnter={ handleSubmitWithEnter }
 							value={ value }
 							settings={ settings }
 							onChange={ onChange }
 						/>
-					</div>
-				) }
+					) }
 
-				{ isEditing && (
 					<div className="block-editor-link-control__search-actions">
 						<Button
 							variant="primary"
@@ -375,8 +375,8 @@ function LinkControl( {
 							{ __( 'Cancel' ) }
 						</Button>
 					</div>
-				) }
-			</div>
+				</div>
+			) }
 
 			{ renderControlBottom && renderControlBottom() }
 		</div>

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

@@ -1,41 +1,96 @@
 /**
  * WordPress dependencies
  */
+import {
+	Button,
+	TextControl,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { settings as settingsIcon } from '@wordpress/icons';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
-
-const noop = () => {};
+import { Fragment } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import Settings from './settings';
 
-const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
-	if ( ! settings || ! settings.length ) {
-		return null;
-	}
+function LinkSettingsDrawer( {
+	settingsOpen,
+	setSettingsOpen,
+	showTextControl,
+	showSettings,
+	textInputRef,
+	internalTextInputValue,
+	setInternalTextInputValue,
+	handleSubmitWithEnter,
+	value,
+	settings,
+	onChange,
+} ) {
+	const prefersReducedMotion = useReducedMotion();
+	const MaybeAnimatePresence = prefersReducedMotion
+		? Fragment
+		: AnimatePresence;
+	const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div;
 
-	const handleSettingChange = ( setting ) => ( newValue ) => {
-		onChange( {
-			...value,
-			[ setting.id ]: newValue,
-		} );
-	};
+	const id = useInstanceId( LinkSettingsDrawer );
 
-	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-		/>
-	) );
+	const settingsDrawerId = `link-control-settings-drawer-${ id }`;
 
 	return (
-		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
-				{ __( 'Currently selected link settings' ) }
-			</VisuallyHidden>
-			{ theSettings }
-		</fieldset>
+		<>
+			<Button
+				className="block-editor-link-control__drawer-toggle"
+				aria-expanded={ settingsOpen }
+				onClick={ () => setSettingsOpen( ! settingsOpen ) }
+				icon={ settingsIcon }
+				label={ __( 'Toggle link settings' ) }
+				aria-controls={ settingsDrawerId }
+			/>
+			<MaybeAnimatePresence>
+				{ settingsOpen && (
+					<MaybeMotionDiv
+						className="block-editor-link-control__drawer"
+						hidden={ ! settingsOpen }
+						id={ settingsDrawerId }
+						initial="collapsed"
+						animate="open"
+						exit="collapsed"
+						variants={ {
+							open: { opacity: 1, height: 'auto' },
+							collapsed: { opacity: 0, height: 0 },
+						} }
+						transition={ {
+							duration: 0.1,
+						} }
+					>
+						<div className="block-editor-link-control__drawer-inner">
+							{ showTextControl && (
+								<TextControl
+									__nextHasNoMarginBottom
+									ref={ textInputRef }
+									className="block-editor-link-control__setting block-editor-link-control__text-content"
+									label="Text"
+									value={ internalTextInputValue }
+									onChange={ setInternalTextInputValue }
+									onKeyDown={ handleSubmitWithEnter }
+								/>
+							) }
+							{ showSettings && (
+								<Settings
+									value={ value }
+									settings={ settings }
+									onChange={ onChange }
+								/>
+							) }
+						</div>
+					</MaybeMotionDiv>
+				) }
+			</MaybeAnimatePresence>
+		</>
 	);
-};
+}
 
-export default LinkControlSettingsDrawer;
+export default LinkSettingsDrawer;

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+
+const noop = () => {};
+
+const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
+	if ( ! settings || ! settings.length ) {
+		return null;
+	}
+
+	const handleSettingChange = ( setting ) => ( newValue ) => {
+		onChange( {
+			...value,
+			[ setting.id ]: newValue,
+		} );
+	};
+
+	const theSettings = settings.map( ( setting ) => (
+		<ToggleControl
+			className="block-editor-link-control__setting"
+			key={ setting.id }
+			label={ setting.title }
+			onChange={ handleSettingChange( setting ) }
+			checked={ value ? !! value[ setting.id ] : false }
+		/>
+	) );
+
+	return (
+		<fieldset className="block-editor-link-control__settings">
+			<VisuallyHidden as="legend">
+				{ __( 'Currently selected link settings' ) }
+			</VisuallyHidden>
+			{ theSettings }
+		</fieldset>
+	);
+};
+
+export default LinkControlSettings;

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

@@ -80,6 +80,7 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
+	order: 20;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -427,12 +428,48 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__drawer {
+	display: flex; // allow for ordering.
+	order: 30;
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+}
+
+// Inner div required to avoid padding/margin
+// causing janky animation.
+.block-editor-link-control__drawer-inner {
+	display: flex; // allow for ordering.
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+	margin-top: $grid-unit-20;
+	padding-top: $grid-unit-20;
+	position: relative;
+
+	&::after {
+		content: "";
+		display: block;
+		height: 1px;
+		background-color: $gray-300;
+		position: absolute;
+		left: -$grid-unit-20;
+		right: -$grid-unit-20;
+		top: 0;
+	}
+}
+
+.block-editor-link-control__tools {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20;
+
+	// To hide the horizontal scrollbar on toggle.
+	// Margin and padding are needed to prevent cutoff of the toggle button focus outline.
+	// See: https://github.com/WordPress/gutenberg/pull/47986
+	margin-top: calc(var(--wp-admin-border-width-focus) * -1);
+	padding-top: var(--wp-admin-border-width-focus);
+	overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
@@ -444,11 +481,6 @@ $preview-image-height: 140px;
 	flex: 1;
 	margin: 0;
 
-
-	:last-child {
-		margin-bottom: 0;
-	}
-
 	.is-alternate & {
 		border-top: $border-width solid $gray-900;
 	}
@@ -457,7 +489,7 @@ $preview-image-height: 140px;
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
 
-	:last-child {
+	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}
 }

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

@@ -53,6 +53,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 
 jest.useRealTimers();
 
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useReducedMotion: jest.fn( () => true ),
+} ) );
+
 beforeEach( () => {
 	// Setup a DOM element as a render target.
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
@@ -137,7 +142,122 @@ describe( 'Basic rendering', () => {
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
-		expect( searchInput ).toBeInTheDocument();
+		expect( searchInput ).toBeVisible();
+	} );
+
+	it( 'should have aria-owns attribute to follow the ARIA 1.0 pattern', () => {
+		render( <LinkControl /> );
+
+		// Search Input UI.
+		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+
+		expect( searchInput ).toBeVisible();
+		// Make sure we use the ARIA 1.0 pattern with aria-owns.
+		// See https://github.com/WordPress/gutenberg/issues/47147
+		expect( searchInput ).not.toHaveAttribute( 'aria-controls' );
+		expect( searchInput ).toHaveAttribute( 'aria-owns' );
+	} );
+
+	it( 'should have aria-selected attribute only on the highlighted item', async () => {
+		const user = userEvent.setup();
+
+		let resolver;
+		mockFetchSearchSuggestions.mockImplementation(
+			() =>
+				new Promise( ( resolve ) => {
+					resolver = resolve;
+				} )
+		);
+
+		render( <LinkControl /> );
+
+		// Search Input UI.
+		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+
+		// Simulate searching for a term.
+		await user.type( searchInput, 'Hello' );
+
+		// Wait for the spinner SVG icon to be rendered.
+		expect( await screen.findByRole( 'presentation' ) ).toBeVisible();
+		// Check the suggestions list is not rendered yet.
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+
+		// Make the search suggestions fetch return a response.
+		resolver( fauxEntitySuggestions );
+
+		const resultsList = await screen.findByRole( 'listbox', {
+			name: 'Search results for "Hello"',
+		} );
+
+		// Check the suggestions list is rendered.
+		expect( resultsList ).toBeVisible();
+		// Check the spinner SVG icon is not rendered any longer.
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+
+		const searchResultElements =
+			within( resultsList ).getAllByRole( 'option' );
+
+		expect( searchResultElements ).toHaveLength(
+			// The fauxEntitySuggestions length plus the 'Press ENTER to add this link' button.
+			fauxEntitySuggestions.length + 1
+		);
+
+		// Step down into the search results, highlighting the first result item.
+		triggerArrowDown( searchInput );
+
+		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 ).toEqual( firstSearchSuggestion );
+
+		// Check the aria-selected attribute is set only on the highlighted item.
+		expect( firstSearchSuggestion ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+		// Check the aria-selected attribute is omitted on the non-highlighted items.
+		expect( secondSearchSuggestion ).not.toHaveAttribute( 'aria-selected' );
+
+		// Step down into the search results, highlighting the second result item.
+		triggerArrowDown( searchInput );
+
+		selectedSearchResultElement = screen.getByRole( 'option', {
+			selected: true,
+		} );
+
+		// We should have highlighted the first item using the keyboard.
+		expect( selectedSearchResultElement ).toEqual( secondSearchSuggestion );
+
+		// Check the aria-selected attribute is omitted on non-highlighted items.
+		expect( firstSearchSuggestion ).not.toHaveAttribute( 'aria-selected' );
+		// Check the aria-selected attribute is set only on the highlighted item.
+		expect( secondSearchSuggestion ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+
+		// Step up into the search results, highlighting the first result item.
+		triggerArrowUp( searchInput );
+
+		selectedSearchResultElement = screen.getByRole( 'option', {
+			selected: true,
+		} );
+
+		// We should be back to highlighting the first search result again.
+		expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+
+		// Check the aria-selected attribute is set only on the highlighted item.
+		expect( firstSearchSuggestion ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+		// Check the aria-selected attribute is omitted on non-highlighted items.
+		expect( secondSearchSuggestion ).not.toHaveAttribute( 'aria-selected' );
 	} );
 
 	it( 'should not render protocol in links', async () => {
@@ -559,7 +679,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				// Verify the UI hasn't allowed submission.
-				expect( searchInput ).toBeInTheDocument();
+				expect( searchInput ).toBeVisible();
 				expect( submitButton ).toBeDisabled();
 				expect( submitButton ).toBeVisible();
 			}
@@ -601,7 +721,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				// Verify the UI hasn't allowed submission.
-				expect( searchInput ).toBeInTheDocument();
+				expect( searchInput ).toBeVisible();
 				expect( submitButton ).toBeDisabled();
 				expect( submitButton ).toBeVisible();
 			}
@@ -674,6 +794,8 @@ describe( 'Manual link entry', () => {
 
 			await user.click( editButton );
 
+			await toggleSettingsDrawer( user );
+
 			let searchInput = screen.getByRole( 'combobox', {
 				name: 'URL',
 			} );
@@ -706,6 +828,8 @@ describe( 'Manual link entry', () => {
 
 			await user.click( editButton );
 
+			await toggleSettingsDrawer( user );
+
 			// Re-query the inputs as they have been replaced.
 			searchInput = screen.getByRole( 'combobox', {
 				name: 'URL',
@@ -1534,6 +1658,62 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
+	it( 'should not show a means to toggle the link settings when not editing a link', async () => {
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+
+		const LinkControlConsumer = () => {
+			const [ link ] = useState( selectedLink );
+
+			return <LinkControl value={ link } />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const settingsToggle = screen.queryByRole( 'button', {
+			name: 'Toggle link settings',
+			ariaControls: 'link-settings-1',
+		} );
+
+		expect( settingsToggle ).not.toBeInTheDocument();
+	} );
+	it( 'should provides a means to toggle the link settings', async () => {
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+
+		const LinkControlConsumer = () => {
+			const [ link ] = useState( selectedLink );
+
+			return <LinkControl value={ link } forceIsEditingLink />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const user = userEvent.setup();
+
+		const settingsToggle = screen.queryByRole( 'button', {
+			name: 'Toggle link settings',
+			ariaControls: 'link-settings-1',
+		} );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		expect( settingsToggle ).toBeVisible();
+
+		await user.click( settingsToggle );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'true' );
+
+		const newTabSettingInput = screen.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+
+		expect( newTabSettingInput ).toBeVisible();
+
+		await user.click( settingsToggle );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' );
+		expect( newTabSettingInput ).not.toBeVisible();
+	} );
+
 	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 		const expectedSettingText = 'Open in new tab';
@@ -1541,11 +1721,15 @@ describe( 'Addition Settings UI', () => {
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
 
-			return <LinkControl value={ link } />;
+			return <LinkControl value={ link } forceIsEditingLink />;
 		};
 
 		render( <LinkControlConsumer /> );
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		const newTabSettingLabel = screen.getByText( expectedSettingText );
 		expect( newTabSettingLabel ).toBeVisible();
 
@@ -1578,12 +1762,17 @@ describe( 'Addition Settings UI', () => {
 				<LinkControl
 					value={ { ...link, newTab: false, noFollow: true } }
 					settings={ customSettings }
+					forceIsEditingLink
 				/>
 			);
 		};
 
 		render( <LinkControlConsumer /> );
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect( screen.queryAllByRole( 'checkbox' ) ).toHaveLength( 2 );
 
 		expect(
@@ -1932,6 +2121,10 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect(
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).toBeVisible();
@@ -1958,6 +2151,10 @@ describe( 'Controlling link title text', () => {
 				/>
 			);
 
+			const user = userEvent.setup();
+
+			await toggleSettingsDrawer( user );
+
 			const textInput = screen.queryByRole( 'textbox', {
 				name: 'Text',
 			} );
@@ -1980,6 +2177,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		await user.clear( textInput );
@@ -2014,6 +2213,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		expect( textInput ).toBeVisible();
@@ -2037,3 +2238,11 @@ describe( 'Controlling link title text', () => {
 		).not.toBeInTheDocument();
 	} );
 } );
+
+async function toggleSettingsDrawer( user ) {
+	const settingsToggle = screen.queryByRole( 'button', {
+		name: 'Toggle link settings',
+	} );
+
+	await user.click( settingsToggle );
+}

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

@@ -174,6 +174,11 @@ function ListView(
 		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
 	);
 
+	// If there are no blocks to show, do not render the list view.
+	if ( ! clientIdsTree.length ) {
+		return null;
+	}
+
 	return (
 		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator