@wordpress/block-editor 16.1.0 → 16.2.0

package/src/components/text-alignment-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import TextAlignmentControl from '../';
 
 const meta = {

package/src/components/text-decoration-control/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import {

package/src/components/text-decoration-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import TextDecorationControl from '../';
 
 const meta = {

package/src/components/text-indent-control/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -13,10 +10,6 @@ import {
 	BaseControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../../components/use-settings';
 
 /**

package/src/components/text-transform-control/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	reset,

package/src/components/text-transform-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import TextTransformControl from '../';
 
 const meta = {

package/src/components/tool-selector/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 

package/src/components/typewriter/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect } from '@wordpress/compose';
 import { computeCaretRect, getScrollContainer } from '@wordpress/dom';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';

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

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as BaseUnitControl,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 
 export default function UnitControl( { units: unitsProp, ...props } ) {

package/src/components/unit-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import UnitControl from '../';
 
 const meta = {

package/src/components/url-input/button.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import {
@@ -8,10 +5,6 @@ import {
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import URLInput from './';
 
 /**

package/src/components/url-input/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { speak } from '@wordpress/a11y';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { useEffect, useRef, useState } from '@wordpress/element';
@@ -21,10 +14,6 @@ import {
 import { useDebounce, useEvent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -87,6 +76,7 @@ export default function URLInput( props ) {
 	const [ isSuggestionsListOpen, setIsSuggestionsListOpen ] =
 		useState( false );
 	const [ isLoading, setIsLoading ] = useState( false );
+	const [ isComposing, setIsComposing ] = useState( false );
 
 	const fallbackInputRef = useRef();
 	const suggestionNodesRef = useRef( [] );
@@ -199,15 +189,19 @@ export default function URLInput( props ) {
 
 	// Keep the suggestions in sync with the value being searched for. An empty
 	// value requests the initial suggestions, when those are enabled.
+	// Composition state is a dependency, so the composed value is picked up
+	// whether the browser reports it before or after `compositionend`.
 	useEffect( () => {
 		if (
 			! disableSuggestions &&
+			! isComposing &&
 			( value.length || showInitialSuggestions )
 		) {
 			debouncedUpdateSuggestions( value );
 		}
 	}, [
 		value,
+		isComposing,
 		disableSuggestions,
 		showInitialSuggestions,
 		debouncedUpdateSuggestions,
@@ -256,6 +250,17 @@ export default function URLInput( props ) {
 		onChange( newValue );
 	}
 
+	function handleCompositionStart() {
+		setIsComposing( true );
+		// Cancel any debounced suggestions update scheduled before the
+		// composition started so no request fires while composing.
+		debouncedUpdateSuggestions.cancel();
+	}
+
+	function handleCompositionEnd() {
+		setIsComposing( false );
+	}
+
 	function handleFocus() {
 		// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value
 		// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)
@@ -273,96 +278,69 @@ export default function URLInput( props ) {
 	function handleKeyDown( event ) {
 		onKeyDown?.( event );
 
-		// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
-		// We shouldn't preventDefault to allow block arrow keys navigation.
+		// Unless the list can consume them, the keys must reach the editor for
+		// block navigation, so they mustn't be prevented.
 		if ( ! showSuggestions || ! suggestions.length || isLoading ) {
-			// In the Windows version of Firefox the up and down arrows don't move the caret
-			// within an input field like they do for Mac Firefox/Chrome/Safari. This causes
-			// a form of focus trapping that is disruptive to the user experience. This disruption
-			// only happens if the caret is not in the first or last position in the text input.
-			// See: https://github.com/WordPress/gutenberg/issues/5693#issuecomment-436684747
-			switch ( event.keyCode ) {
-				// When UP is pressed, if the caret is at the start of the text, move it to the 0
-				// position.
-				case UP: {
-					if ( 0 !== event.target.selectionStart ) {
-						event.preventDefault();
-
-						// Set the input caret to position 0.
-						event.target.setSelectionRange( 0, 0 );
-					}
-					break;
-				}
-				// When DOWN is pressed, if the caret is not at the end of the text, move it to the
-				// last position.
-				case DOWN: {
-					if ( value.length !== event.target.selectionStart ) {
-						event.preventDefault();
-
-						// Set the input caret to the last position.
-						event.target.setSelectionRange(
-							value.length,
-							value.length
-						);
-					}
-					break;
-				}
-
-				// Submitting while loading should trigger onSubmit.
-				case ENTER: {
-					if ( onSubmit ) {
-						event.preventDefault();
-						onSubmit( null, event );
-					}
-					break;
+			// Holding Shift extends the selection, which the browser handles.
+			if (
+				! event.shiftKey &&
+				( event.keyCode === UP || event.keyCode === DOWN )
+			) {
+				// Firefox on Windows leaves the caret in place, trapping focus,
+				// since the editor only navigates away from an edge.
+				// See: https://github.com/WordPress/gutenberg/issues/5693#issuecomment-436684747
+				const caret =
+					event.keyCode === UP ? 0 : event.target.value.length;
+
+				// UP moves the caret to the start of the text, DOWN to the end.
+				// Once it is already there, with nothing selected, the key is
+				// left to the editor to navigate out of the field.
+				if (
+					event.target.selectionStart !== caret ||
+					event.target.selectionEnd !== caret
+				) {
+					event.preventDefault();
+					event.target.setSelectionRange( caret, caret );
 				}
+			} else if ( event.keyCode === ENTER && onSubmit ) {
+				event.preventDefault();
+				onSubmit( null, event );
 			}
 
 			return;
 		}
 
-		const suggestion = suggestions[ selectedSuggestion ];
+		const suggestion = suggestions[ selectedSuggestion ] ?? null;
 
 		switch ( event.keyCode ) {
-			case UP: {
-				event.preventDefault();
-				setSelectedSuggestion(
-					! selectedSuggestion
-						? suggestions.length - 1
-						: selectedSuggestion - 1
-				);
-				break;
-			}
+			case UP:
 			case DOWN: {
 				event.preventDefault();
+
+				const offset = event.keyCode === UP ? -1 : 1;
+				// An unselected list is entered from the end nearest the key,
+				// and the ends wrap into each other.
+				const from = selectedSuggestion ?? ( offset === -1 ? 0 : -1 );
+
 				setSelectedSuggestion(
-					selectedSuggestion === null ||
-						selectedSuggestion === suggestions.length - 1
-						? 0
-						: selectedSuggestion + 1
+					( from + offset + suggestions.length ) % suggestions.length
 				);
 				break;
 			}
 			case TAB: {
-				if ( selectedSuggestion !== null ) {
+				if ( suggestion ) {
 					selectLink( suggestion );
-					// Announce a link has been selected when tabbing away from the input field.
 					speak( __( 'Link selected.' ) );
 				}
 				break;
 			}
 			case ENTER: {
 				event.preventDefault();
-				if ( selectedSuggestion !== null ) {
+				if ( suggestion ) {
 					selectLink( suggestion );
-
-					if ( onSubmit ) {
-						onSubmit( suggestion, event );
-					}
-				} else if ( onSubmit ) {
-					onSubmit( null, event );
 				}
 
+				onSubmit?.( suggestion, event );
 				break;
 			}
 		}
@@ -385,6 +363,8 @@ export default function URLInput( props ) {
 		name: inputId,
 		autoComplete: 'off',
 		onChange: disabled ? noop : handleChange,
+		onCompositionStart: disabled ? noop : handleCompositionStart,
+		onCompositionEnd: disabled ? noop : handleCompositionEnd,
 		onFocus: disabled ? noop : handleFocus,
 		onKeyDown: disabled ? noop : handleKeyDown,
 		placeholder,

package/src/components/url-input/test/button.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import URLInputButton from '../button';
 
 describe( 'URLInputButton', () => {

package/src/components/url-input/test/index.js

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { speak } from '@wordpress/a11y';
 import { useState } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import URLInput from '../';
 import { store as blockEditorStore } from '../../../store';
 
@@ -336,6 +325,62 @@ describe( 'URLInput', () => {
 		} );
 	} );
 
+	describe( 'IME composition', () => {
+		it( 'should not fetch suggestions for the intermediate values of an IME composition', async () => {
+			const { input } = renderURLInput();
+
+			fireEvent.compositionStart( input );
+			fireEvent.change( input, { target: { value: 'ほ' } } );
+			fireEvent.change( input, { target: { value: 'ほん' } } );
+			fireEvent.change( input, { target: { value: 'ほんだ' } } );
+			await flushDebounce();
+
+			expect( fetchLinkSuggestions ).not.toHaveBeenCalled();
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not fetch suggestions for a value superseded by an IME composition', async () => {
+			const { user, input } = renderURLInput();
+
+			await user.type( input, 'ab' );
+			fireEvent.compositionStart( input );
+			fireEvent.change( input, { target: { value: 'abほ' } } );
+			await flushDebounce();
+
+			expect( fetchLinkSuggestions ).not.toHaveBeenCalled();
+		} );
+
+		// Firefox reports the confirmed value of a composition after
+		// `compositionend`, Chrome and Safari before it.
+		// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1305387
+		it.each( [ 'before', 'after' ] )(
+			'should fetch suggestions for a composed value reported %s the composition ends',
+			async ( order ) => {
+				const { input } = renderURLInput();
+
+				fireEvent.compositionStart( input );
+				fireEvent.change( input, { target: { value: 'ほんだ' } } );
+				// Compositions outlast the debounce, so the confirmed value is
+				// the only one a request is made for.
+				await flushDebounce();
+
+				if ( order === 'before' ) {
+					fireEvent.change( input, { target: { value: 'ホンダ' } } );
+					fireEvent.compositionEnd( input );
+				} else {
+					fireEvent.compositionEnd( input );
+					fireEvent.change( input, { target: { value: 'ホンダ' } } );
+				}
+
+				expect( await screen.findByRole( 'listbox' ) ).toBeVisible();
+				expect( fetchLinkSuggestions ).toHaveBeenCalledTimes( 1 );
+				expect( fetchLinkSuggestions ).toHaveBeenCalledWith( 'ホンダ', {
+					isInitialSuggestions: false,
+				} );
+			}
+		);
+	} );
+
 	describe( 'announcements', () => {
 		it( 'should announce the number of results', async () => {
 			await renderWithSuggestions();
@@ -415,6 +460,13 @@ describe( 'URLInput', () => {
 				'aria-activedescendant',
 				firstOption.id
 			);
+
+			fireEvent.keyDown( input, KEY_EVENTS.up );
+
+			expect( input ).toHaveAttribute(
+				'aria-activedescendant',
+				secondOption.id
+			);
 		} );
 
 		it( 'should select and submit the active suggestion when pressing Enter', async () => {
@@ -490,6 +542,28 @@ describe( 'URLInput', () => {
 
 			fireEvent.keyDown( input, KEY_EVENTS.down );
 			expect( input.selectionStart ).toBe( 5 );
+
+			// A selection reaching an end is collapsed to it first.
+			input.setSelectionRange( 0, 5 );
+			fireEvent.keyDown( input, KEY_EVENTS.up );
+			expect( input.selectionEnd ).toBe( 0 );
+		} );
+
+		it( 'should leave a selection being extended with the shift key alone', async () => {
+			const { user, input } = renderURLInput( {
+				disableSuggestions: true,
+			} );
+
+			await user.type( input, 'hello' );
+			input.setSelectionRange( 0, 5 );
+
+			fireEvent.keyDown( input, {
+				...KEY_EVENTS.up,
+				shiftKey: true,
+			} );
+
+			expect( input.selectionStart ).toBe( 0 );
+			expect( input.selectionEnd ).toBe( 5 );
 		} );
 	} );
 

package/src/components/url-popover/image-url-input-ui.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	useRef,
@@ -28,10 +25,6 @@ import {
 	linkOff,
 } from '@wordpress/icons';
 import { prependHTTPS } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import URLPopover from './index';
 
 const LINK_DESTINATION_NONE = 'none';
@@ -295,7 +288,7 @@ const ImageURLInputUI = ( {
 		} else if ( ! url || isEditingLink ) {
 			return (
 				<URLPopover.LinkEditor
-					className="block-editor-format-toolbar__link-container-content"
+					className="block-editor-url-popover__link-container-content"
 					value={ linkEditorValue }
 					onChangeInputValue={ setUrlInput }
 					onSubmit={ onSubmitLinkChange() }
@@ -306,7 +299,7 @@ const ImageURLInputUI = ( {
 			return (
 				<>
 					<URLPopover.LinkViewer
-						className="block-editor-format-toolbar__link-container-content"
+						className="block-editor-url-popover__link-container-content"
 						url={ url }
 						onEditLinkClick={ startEditLink }
 						urlLabel={ urlLabel }

package/src/components/url-popover/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { forwardRef, useState } from '@wordpress/element';
 import {
@@ -10,10 +7,6 @@ import {
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
 import { unlock } from '../../lock-unlock';

package/src/components/url-popover/link-editor.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { keyboardReturn } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import URLInput from '../url-input';
 
 export default function LinkEditor( {

package/src/components/url-popover/link-viewer-url.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { ExternalLink } from '@wordpress/components';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 

package/src/components/url-popover/link-viewer.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { pencil } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import LinkViewerURL from './link-viewer-url';
 
 export default function LinkViewer( {

package/src/components/url-popover/stories/index.story.jsx

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { Button, ToggleControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import URLPopover from '../';
 
 export default { title: 'BlockEditor/URLPopover' };

package/src/components/url-popover/style.scss

@@ -48,6 +48,11 @@
 	border-top: $border-width solid $gray-900;
 }
 
+.block-editor-url-popover__link-container-content {
+	display: flex;
+	align-items: center;
+}
+
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;

package/src/components/use-block-commands/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	hasBlockSupport,
@@ -20,11 +17,8 @@ import {
 	unseen,
 	blockDefault as blockDefaultIcon,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
+import { groupBlocks } from '../../utils/group-blocks';
 import { unlock } from '../../lock-unlock';
 
 const getTransformCommands = () =>
@@ -202,8 +196,7 @@ const getQuickActionsCommands = () =>
 
 			const groupingBlockName = getGroupingBlockName();
 
-			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = groupBlocks( blocks, groupingBlockName );
 
 			if ( ! newBlocks ) {
 				return;