@wordpress/block-editor 11.3.6 → 11.5.0

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

@@ -22,6 +22,20 @@ $preview-image-height: 140px;
 		width: 90vw;
 		max-width: $modal-min-width;
 	}
+
+	.show-icon-labels & {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
 }
 
 // Provides positioning context for reset button. Without this then when an
@@ -64,7 +78,6 @@ $preview-image-height: 140px;
 		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
 		padding: 11px $grid-unit-20;
-		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
 		margin: 0;
 		position: relative;
 		border: 1px solid $gray-300;
@@ -73,24 +86,15 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-error {
-	margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
+	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
 .block-editor-link-control__search-actions {
-	position: absolute;
-	/*
-	 * Actions must be positioned on top of URLInput, since the input will grow
-	 * when suggestions are rendered.
-	 *
-	 * Compensate for:
-	 *  - Border (1px)
-	 *  - Vertically, for the difference in height between the input (40px) and
-	 *    the icon buttons.
-	 *  - Horizontally, pad to the minimum of: default input padding, or the
-	 *    equivalent of the vertical padding.
-	 */
-	top: 1px + ( ( 40px - $button-size ) * 0.5 );
-	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
+	display: flex;
+	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 {
@@ -113,7 +117,7 @@ $preview-image-height: 140px;
 	}
 
 	&::before {
-		height: $grid-unit-20*0.5;
+		height: $grid-unit-20 * 0.5;
 		top: 0;
 		bottom: auto;
 	}
@@ -133,7 +137,7 @@ $preview-image-height: 140px;
 
 .block-editor-link-control__search-results {
 	margin: 0;
-	padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5;
+	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -234,7 +238,6 @@ $preview-image-height: 140px;
 		max-height: 32px;
 	}
 
-
 	.block-editor-link-control__search-item-info,
 	.block-editor-link-control__search-item-title {
 		overflow: hidden;
@@ -354,16 +357,13 @@ $preview-image-height: 140px;
 	width: 100%;
 }
 
-
 .block-editor-link-control__search-item.is-fetching {
-
 	.block-editor-link-control__search-item-description {
 		&::before,
 		&::after {
 			animation: loadingpulse 1s linear infinite;
 			animation-delay: 0.5s; // avoid animating for fast network responses
 		}
-
 	}
 
 	.block-editor-link-control__search-item-image {
@@ -413,7 +413,7 @@ $preview-image-height: 140px;
 	&::before {
 		content: "";
 		position: absolute;
-		top: -#{$block-selected-child-margin*2};
+		top: -#{$block-selected-child-margin * 2};
 		left: 0;
 		display: block;
 		width: 100%;
@@ -437,12 +437,49 @@ $preview-image-height: 140px;
 	padding: 10px;
 }
 
+.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;
-	border-top: $border-width solid $gray-300;
+	justify-content: space-between;
 	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 {
@@ -454,11 +491,6 @@ $preview-image-height: 140px;
 	flex: 1;
 	margin: 0;
 
-
-	:last-child {
-		margin-bottom: 0;
-	}
-
 	.is-alternate & {
 		border-top: $border-width solid $gray-900;
 	}
@@ -467,7 +499,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;
 	}
 }
@@ -479,14 +511,8 @@ $preview-image-height: 140px;
 		position: absolute;
 		left: auto;
 		bottom: auto;
-		/*
-		 * Position spinner to the left of the actions.
-		 *
-		 * Compensate for:
-		 *  - Input padding right ($button-size)
-		 */
 		top: calc(50% - #{$spinner-size} / 2);
-		right: $button-size;
+		right: $grid-unit-20;
 	}
 }
 

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 () => {
@@ -537,7 +657,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.getByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -555,11 +675,11 @@ describe( 'Manual link entry', () => {
 				await user.keyboard( '[Enter]' );
 
 				submitButton = screen.getByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				// Verify the UI hasn't allowed submission.
-				expect( searchInput ).toBeInTheDocument();
+				expect( searchInput ).toBeVisible();
 				expect( submitButton ).toBeDisabled();
 				expect( submitButton ).toBeVisible();
 			}
@@ -578,7 +698,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -597,17 +717,150 @@ describe( 'Manual link entry', () => {
 				await user.click( submitButton );
 
 				submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				// Verify the UI hasn't allowed submission.
-				expect( searchInput ).toBeInTheDocument();
+				expect( searchInput ).toBeVisible();
 				expect( submitButton ).toBeDisabled();
 				expect( submitButton ).toBeVisible();
 			}
 		);
 	} );
 
+	describe( 'Handling cancellation', () => {
+		it( 'should allow cancellation of the link creation process and reset any entered values', async () => {
+			const user = userEvent.setup();
+			const mockOnRemove = jest.fn();
+			const mockOnCancel = jest.fn();
+
+			render( <LinkControl onRemove={ mockOnRemove } /> );
+
+			// Search Input UI.
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'URL',
+			} );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			expect( cancelButton ).toBeEnabled();
+			expect( cancelButton ).toBeVisible();
+
+			// Simulate adding a link for a term.
+			await user.type( searchInput, 'https://www.wordpress.org' );
+
+			// Attempt to submit the empty search value in the input.
+			await user.click( cancelButton );
+
+			// Verify the consumer can handle the cancellation.
+			expect( mockOnRemove ).toHaveBeenCalled();
+
+			// Ensure optional callback is not called.
+			expect( mockOnCancel ).not.toHaveBeenCalled();
+
+			expect( searchInput ).toHaveValue( '' );
+		} );
+
+		it( 'should allow cancellation of the link editing process and reset any entered values', async () => {
+			const user = userEvent.setup();
+			const initialLink = fauxEntitySuggestions[ 0 ];
+
+			const LinkControlConsumer = () => {
+				const [ link, setLink ] = useState( initialLink );
+
+				return (
+					<LinkControl
+						value={ link }
+						onChange={ ( suggestion ) => {
+							setLink( suggestion );
+						} }
+						hasTextControl
+					/>
+				);
+			};
+
+			render( <LinkControlConsumer /> );
+
+			let linkPreview = screen.getByLabelText( 'Currently selected' );
+
+			expect( linkPreview ).toBeInTheDocument();
+
+			// Click the "Edit" button to trigger into the editing mode.
+			let editButton = screen.queryByRole( 'button', {
+				name: 'Edit',
+			} );
+
+			await user.click( editButton );
+
+			await toggleSettingsDrawer( user );
+
+			let searchInput = screen.getByRole( 'combobox', {
+				name: 'URL',
+			} );
+
+			let textInput = screen.getByRole( 'textbox', {
+				name: 'Text',
+			} );
+
+			// Make a change to the search input.
+			await user.type( searchInput, 'This URL value was changed!' );
+
+			// Make a change to the text input.
+			await user.type( textInput, 'This text value was changed!' );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			// Cancel the editing process.
+			await user.click( cancelButton );
+
+			linkPreview = screen.getByLabelText( 'Currently selected' );
+
+			expect( linkPreview ).toBeInTheDocument();
+
+			// Re-query the edit button as it's been replaced.
+			editButton = screen.queryByRole( 'button', {
+				name: 'Edit',
+			} );
+
+			await user.click( editButton );
+
+			await toggleSettingsDrawer( user );
+
+			// Re-query the inputs as they have been replaced.
+			searchInput = screen.getByRole( 'combobox', {
+				name: 'URL',
+			} );
+
+			textInput = screen.getByRole( 'textbox', {
+				name: 'Text',
+			} );
+
+			// Expect to see the original link values and **not** the changed values.
+			expect( searchInput ).toHaveValue( initialLink.url );
+			expect( textInput ).toHaveValue( initialLink.text );
+		} );
+
+		it( 'should call onCancel callback when cancelling if provided', async () => {
+			const user = userEvent.setup();
+			const mockOnCancel = jest.fn();
+
+			render( <LinkControl onCancel={ mockOnCancel } /> );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			await user.click( cancelButton );
+
+			// Verify the consumer can handle the cancellation.
+			expect( mockOnCancel ).toHaveBeenCalled();
+		} );
+	} );
+
 	describe( 'Alternative link protocols and formats', () => {
 		it.each( [
 			[ 'mailto:example123456@wordpress.org', 'mailto' ],
@@ -1405,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: '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: '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';
@@ -1412,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();
 
@@ -1449,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(
@@ -1803,6 +2121,10 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect(
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).toBeVisible();
@@ -1829,6 +2151,10 @@ describe( 'Controlling link title text', () => {
 				/>
 			);
 
+			const user = userEvent.setup();
+
+			await toggleSettingsDrawer( user );
+
 			const textInput = screen.queryByRole( 'textbox', {
 				name: 'Text',
 			} );
@@ -1851,6 +2177,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		await user.clear( textInput );
@@ -1859,7 +2187,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Submit',
+			name: 'Apply',
 		} );
 
 		await user.click( submitButton );
@@ -1885,6 +2213,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		expect( textInput ).toBeVisible();
@@ -1908,3 +2238,11 @@ describe( 'Controlling link title text', () => {
 		).not.toBeInTheDocument();
 	} );
 } );
+
+async function toggleSettingsDrawer( user ) {
+	const settingsToggle = screen.queryByRole( 'button', {
+		name: 'Link Settings',
+	} );
+
+	await user.click( settingsToggle );
+}

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

@@ -231,6 +231,10 @@ function ListViewBlock( {
 		selectedClientIds,
 	} );
 
+	// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
+	const currentlyEditingBlockInCanvas =
+		isSelected && selectedClientIds.length === 1;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -268,7 +272,9 @@ function ListViewBlock( {
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
-							tabIndex={ tabIndex }
+							tabIndex={
+								currentlyEditingBlockInCanvas ? 0 : tabIndex
+							}
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
 							selectedClientIds={ selectedClientIds }

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

@@ -19,6 +19,7 @@ export default function ListViewExpander( { onClick } ) {
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
+			data-testid="list-view-expander"
 		>
 			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>