@wordpress/block-editor 10.5.0 → 11.0.0

package/src/components/rich-text/format-toolbar/index.js

@@ -1,18 +1,20 @@
 /**
  * External dependencies
  */
-
-import { orderBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
 import { ToolbarItem, DropdownMenu, Slot } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { orderBy } from '../../../utils/sorting';
+
 const POPOVER_PROPS = {
 	position: 'bottom right',
 	variant: 'toolbar',
@@ -21,7 +23,7 @@ const POPOVER_PROPS = {
 const FormatToolbar = () => {
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
+			{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
 					key={ format }

package/src/components/rich-text/index.js

@@ -44,6 +44,7 @@ import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
 import { useShortcuts } from './use-shortcuts';
 import { useInputEvents } from './use-input-events';
+import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
@@ -97,7 +98,6 @@ function RichTextWrapper(
 		onReplace,
 		placeholder,
 		allowedFormats,
-		formattingControls,
 		withoutInteractiveFormatting,
 		onRemove,
 		onMerge,
@@ -165,7 +165,6 @@ function RichTextWrapper(
 	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
-		formattingControls,
 		disableFormats,
 	} );
 	const hasFormats =
@@ -408,6 +407,7 @@ function RichTextWrapper(
 						onReplace,
 						selectionChange,
 					} ),
+					useInsertReplacementText(),
 					useRemoveBrowserShortcuts(),
 					useShortcuts( keyboardShortcuts ),
 					useInputEvents( inputEvents ),

package/src/components/rich-text/index.native.js

@@ -75,7 +75,6 @@ function RichTextWrapper(
 		onReplace,
 		placeholder,
 		allowedFormats,
-		formattingControls,
 		withoutInteractiveFormatting,
 		onRemove,
 		onMerge,
@@ -194,7 +193,6 @@ function RichTextWrapper(
 	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
-		formattingControls,
 		disableFormats,
 	} );
 	const hasFormats =

package/src/components/rich-text/style.scss

@@ -1,37 +1,3 @@
-.rich-text {
-	[data-rich-text-placeholder] {
-		pointer-events: none;
-	}
-
-	[data-rich-text-placeholder]::after {
-		content: attr(data-rich-text-placeholder);
-		// Use opacity to work in various editor styles.
-		// We don't specify the color here, because blocks or editor styles might provide their own.
-		opacity: 0.62;
-	}
-
-	&:focus {
-		// Removes outline added by the browser.
-		outline: none;
-
-		[data-rich-text-format-boundary] {
-			border-radius: 2px;
-		}
-	}
-}
-
-.block-editor-rich-text__editable {
-	> p:first-child {
-		margin-top: 0;
-	}
-}
-
-// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
-// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
-figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
-	opacity: 0.8;
-}
-
 .components-popover.block-editor-rich-text__inline-format-toolbar {
 	// Set z-index as if it's displayed on the bottom, otherwise the block
 	// switcher popover might overlap if displayed on the bottom.
@@ -80,12 +46,3 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		}
 	}
 }
-
-[data-rich-text-script] {
-	display: inline;
-
-	&::before {
-		content: "</>";
-		background: rgb(255, 255, 0);
-	}
-}

package/src/components/rich-text/use-insert-replacement-text.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * When the browser is about to auto correct, add an undo level so the user can
+ * revert the change.
+ */
+export function useInsertReplacementText() {
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			if ( event.inputType === 'insertReplacementText' ) {
+				__unstableMarkLastChangeAsPersistent();
+			}
+		}
+
+		element.addEventListener( 'beforeinput', onInput );
+		return () => {
+			element.removeEventListener( 'beforeinput', onInput );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-undo-automatic-change.js

@@ -28,12 +28,18 @@ export function useUndoAutomaticChange() {
 				return;
 			}
 
+			const { __experimentalUndo } = getSettings();
+
+			if ( ! __experimentalUndo ) {
+				return;
+			}
+
 			if ( ! didAutomaticChange() ) {
 				return;
 			}
 
 			event.preventDefault();
-			getSettings().__experimentalUndo();
+			__experimentalUndo();
 		}
 
 		element.addEventListener( 'keydown', onKeyDown );

package/src/components/rich-text/utils.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { regexp } from '@wordpress/shortcode';
-import deprecated from '@wordpress/deprecated';
 import { renderToString } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 
@@ -34,30 +33,12 @@ export function getMultilineTag( multiline ) {
 	return multiline === true ? 'p' : multiline;
 }
 
-export function getAllowedFormats( {
-	allowedFormats,
-	formattingControls,
-	disableFormats,
-} ) {
+export function getAllowedFormats( { allowedFormats, disableFormats } ) {
 	if ( disableFormats ) {
 		return getAllowedFormats.EMPTY_ARRAY;
 	}
 
-	if ( ! allowedFormats && ! formattingControls ) {
-		return;
-	}
-
-	if ( allowedFormats ) {
-		return allowedFormats;
-	}
-
-	deprecated( 'wp.blockEditor.RichText formattingControls prop', {
-		since: '5.4',
-		alternative: 'allowedFormats',
-		version: '6.2',
-	} );
-
-	return formattingControls.map( ( name ) => `core/${ name }` );
+	return allowedFormats;
 }
 
 getAllowedFormats.EMPTY_ARRAY = [];

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -222,6 +222,8 @@ export default function SpacingInputControl( {
 					<UnitControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
 						onChange={ ( newSize ) =>
 							onChange( getNewCustomValue( newSize ) )
 						}
@@ -239,6 +241,8 @@ export default function SpacingInputControl( {
 					<RangeControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
 						value={ customRangeValue }
 						min={ 0 }
 						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
@@ -248,6 +252,7 @@ export default function SpacingInputControl( {
 						withInputField={ false }
 						onChange={ handleCustomValueSliderChange }
 						className="components-spacing-sizes-control__custom-value-range"
+						__nextHasNoMarginBottom
 					/>
 				</>
 			) }
@@ -277,6 +282,8 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextHasNoMarginBottom={ true }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (
@@ -302,6 +309,8 @@ export default function SpacingInputControl( {
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 		</>

package/src/components/ungroup-button/index.native.js

@@ -14,6 +14,7 @@ import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
+const EMPTY_BLOCKS_LIST = [];
 
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
@@ -45,9 +46,12 @@ export default compose( [
 		const isUngroupable =
 			selectedBlock &&
 			selectedBlock.innerBlocks &&
-			!! selectedBlock.innerBlocks.length &&
+			selectedBlock.innerBlocks.length > 0 &&
 			selectedBlock.name === groupingBlockName;
-		const innerBlocks = isUngroupable ? selectedBlock.innerBlocks : [];
+
+		const innerBlocks = isUngroupable
+			? selectedBlock.innerBlocks
+			: EMPTY_BLOCKS_LIST;
 
 		return {
 			isUngroupable,

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

@@ -60,13 +60,14 @@ class URLInput extends Component {
 
 		this.suggestionNodes = [];
 
-		this.isUpdatingSuggestions = false;
+		this.suggestionsRequest = null;
 
 		this.state = {
 			suggestions: [],
 			showSuggestions: false,
+			isUpdatingSuggestions: false,
+			suggestionsValue: null,
 			selectedSuggestion: null,
-
 			suggestionsListboxId: '',
 			suggestionOptionIdPrefix: '',
 		};
@@ -103,7 +104,7 @@ class URLInput extends Component {
 		if (
 			prevProps.value !== value &&
 			! this.props.disableSuggestions &&
-			! this.isUpdatingSuggestions
+			! this.state.isUpdatingSuggestions
 		) {
 			if ( value?.length ) {
 				// If the new value is not empty we need to update with suggestions for it.
@@ -123,7 +124,7 @@ class URLInput extends Component {
 
 	componentWillUnmount() {
 		this.suggestionsRequest?.cancel?.();
-		delete this.suggestionsRequest;
+		this.suggestionsRequest = null;
 	}
 
 	bindSuggestionNode( index ) {
@@ -133,14 +134,10 @@ class URLInput extends Component {
 	}
 
 	shouldShowInitialSuggestions() {
-		const { suggestions } = this.state;
 		const { __experimentalShowInitialSuggestions = false, value } =
 			this.props;
 		return (
-			! this.isUpdatingSuggestions &&
-			__experimentalShowInitialSuggestions &&
-			! ( value && value.length ) &&
-			! ( suggestions && suggestions.length )
+			__experimentalShowInitialSuggestions && ! ( value && value.length )
 		);
 	}
 
@@ -170,8 +167,13 @@ class URLInput extends Component {
 			! isInitialSuggestions &&
 			( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) )
 		) {
+			this.suggestionsRequest?.cancel?.();
+			this.suggestionsRequest = null;
+
 			this.setState( {
+				suggestions: [],
 				showSuggestions: false,
+				suggestionsValue: value,
 				selectedSuggestion: null,
 				loading: false,
 			} );
@@ -179,9 +181,8 @@ class URLInput extends Component {
 			return;
 		}
 
-		this.isUpdatingSuggestions = true;
-
 		this.setState( {
+			isUpdatingSuggestions: true,
 			selectedSuggestion: null,
 			loading: true,
 		} );
@@ -201,6 +202,8 @@ class URLInput extends Component {
 
 				this.setState( {
 					suggestions,
+					isUpdatingSuggestions: false,
+					suggestionsValue: value,
 					loading: false,
 					showSuggestions: !! suggestions.length,
 				} );
@@ -224,15 +227,16 @@ class URLInput extends Component {
 						'assertive'
 					);
 				}
-				this.isUpdatingSuggestions = false;
 			} )
 			.catch( () => {
-				if ( this.suggestionsRequest === request ) {
-					this.setState( {
-						loading: false,
-					} );
-					this.isUpdatingSuggestions = false;
+				if ( this.suggestionsRequest !== request ) {
+					return;
 				}
+
+				this.setState( {
+					isUpdatingSuggestions: false,
+					loading: false,
+				} );
 			} );
 
 		// Note that this assignment is handled *before* the async search request
@@ -241,12 +245,7 @@ class URLInput extends Component {
 	}
 
 	onChange( event ) {
-		const inputValue = event.target.value;
-
-		this.props.onChange( inputValue );
-		if ( ! this.props.disableSuggestions ) {
-			this.updateSuggestions( inputValue );
-		}
+		this.props.onChange( event.target.value );
 	}
 
 	onFocus() {
@@ -258,7 +257,7 @@ class URLInput extends Component {
 		if (
 			value &&
 			! disableSuggestions &&
-			! this.isUpdatingSuggestions &&
+			! this.state.isUpdatingSuggestions &&
 			! ( suggestions && suggestions.length )
 		) {
 			// Ensure the suggestions are updated with the current input value.
@@ -490,19 +489,22 @@ class URLInput extends Component {
 		const {
 			className,
 			__experimentalRenderSuggestions: renderSuggestions,
-			value = '',
-			__experimentalShowInitialSuggestions = false,
 		} = this.props;
 
 		const {
 			showSuggestions,
 			suggestions,
+			suggestionsValue,
 			selectedSuggestion,
 			suggestionsListboxId,
 			suggestionOptionIdPrefix,
 			loading,
 		} = this.state;
 
+		if ( ! showSuggestions || suggestions.length === 0 ) {
+			return null;
+		}
+
 		const suggestionsListProps = {
 			id: suggestionsListboxId,
 			ref: this.autocompleteRef,
@@ -519,11 +521,7 @@ class URLInput extends Component {
 			};
 		};
 
-		if (
-			isFunction( renderSuggestions ) &&
-			showSuggestions &&
-			!! suggestions.length
-		) {
+		if ( isFunction( renderSuggestions ) ) {
 			return renderSuggestions( {
 				suggestions,
 				selectedSuggestion,
@@ -531,52 +529,38 @@ class URLInput extends Component {
 				buildSuggestionItemProps,
 				isLoading: loading,
 				handleSuggestionClick: this.handleOnClick,
-				isInitialSuggestions:
-					__experimentalShowInitialSuggestions &&
-					! ( value && value.length ),
+				isInitialSuggestions: ! suggestionsValue?.length,
+				currentInputValue: suggestionsValue,
 			} );
 		}
 
-		if (
-			! isFunction( renderSuggestions ) &&
-			showSuggestions &&
-			!! suggestions.length
-		) {
-			return (
-				<Popover placement="bottom" focusOnMount={ false }>
-					<div
-						{ ...suggestionsListProps }
-						className={ classnames(
-							'block-editor-url-input__suggestions',
-							`${ className }__suggestions`
-						) }
-					>
-						{ suggestions.map( ( suggestion, index ) => (
-							<Button
-								{ ...buildSuggestionItemProps(
-									suggestion,
-									index
-								) }
-								key={ suggestion.id }
-								className={ classnames(
-									'block-editor-url-input__suggestion',
-									{
-										'is-selected':
-											index === selectedSuggestion,
-									}
-								) }
-								onClick={ () =>
-									this.handleOnClick( suggestion )
+		return (
+			<Popover placement="bottom" focusOnMount={ false }>
+				<div
+					{ ...suggestionsListProps }
+					className={ classnames(
+						'block-editor-url-input__suggestions',
+						`${ className }__suggestions`
+					) }
+				>
+					{ suggestions.map( ( suggestion, index ) => (
+						<Button
+							{ ...buildSuggestionItemProps( suggestion, index ) }
+							key={ suggestion.id }
+							className={ classnames(
+								'block-editor-url-input__suggestion',
+								{
+									'is-selected': index === selectedSuggestion,
 								}
-							>
-								{ suggestion.title }
-							</Button>
-						) ) }
-					</div>
-				</Popover>
-			);
-		}
-		return null;
+							) }
+							onClick={ () => this.handleOnClick( suggestion ) }
+						>
+							{ suggestion.title }
+						</Button>
+					) ) }
+				</div>
+			</Popover>
+		);
 	}
 }
 

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -4,12 +4,13 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
+      class="components-popover block-editor-url-popover is-positioned"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
         class="components-popover__content"
+        style="max-height: 0px; overflow: auto;"
       >
         <div
           class="block-editor-url-popover__input-container"
@@ -51,8 +52,8 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0; left: 0px; top: 0px;"
+      class="components-popover block-editor-url-popover is-positioned"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -106,12 +107,13 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
+      class="components-popover block-editor-url-popover is-positioned"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
         class="components-popover__content"
+        style="max-height: 0px; overflow: auto;"
       >
         <div
           class="block-editor-url-popover__input-container"

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,23 +9,32 @@ import userEvent from '@testing-library/user-event';
  */
 import URLPopover from '../';
 
+jest.useRealTimers();
+
 describe( 'URLPopover', () => {
-	it( 'matches the snapshot in its default state', () => {
+	it( 'matches the snapshot in its default state', async () => {
 		const { container } = render(
-			<URLPopover renderSettings={ () => <div>Settings</div> }>
+			<URLPopover
+				animate={ false }
+				renderSettings={ () => <div>Settings</div> }
+			>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
+		// wait for `Popover` effects to finish
+		await act( () => Promise.resolve() );
+
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'matches the snapshot when the settings are toggled open', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const { container } = render(
-			<URLPopover renderSettings={ () => <div>Settings</div> }>
+			<URLPopover
+				animate={ false }
+				renderSettings={ () => <div>Settings</div> }
+			>
 				<div>Editor</div>
 			</URLPopover>
 		);
@@ -37,13 +46,16 @@ describe( 'URLPopover', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'matches the snapshot when there are no settings', () => {
+	it( 'matches the snapshot when there are no settings', async () => {
 		const { container } = render(
-			<URLPopover>
+			<URLPopover animate={ false }>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
+		// wait for `Popover` effects to finish
+		await act( () => Promise.resolve() );
+
 		expect( container ).toMatchSnapshot();
 	} );
 } );