@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/recursion-provider/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -19,12 +19,12 @@ function Edit( { attributes: { uniqueId } } ) {
 	const hasRecursion = useHasRecursion( uniqueId );
 
 	if ( hasRecursion ) {
-		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;
+		return <div data-testid={ `wp-block__${ name }--halted` }>Halt</div>;
 	}
 
 	return (
 		<RecursionProvider uniqueId={ uniqueId }>
-			<div className={ `wp-block__${ name }` }>
+			<div data-testid={ `wp-block__${ name }` }>
 				{ uniqueId === 'SIMPLE' && <p>Done</p> }
 				{ uniqueId === 'SINGLY-RECURSIVE' && (
 					<Edit attributes={ { uniqueId } } />
@@ -51,76 +51,74 @@ describe( 'useHasRecursion/RecursionProvider', () => {
 	const context = { name: 'reusable-block' };
 
 	it( 'allows a single block to render', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 0 );
+			screen.queryByTestId( 'wp-block__reusable-block--halted' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'allows equal but sibling blocks to render', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
+			screen.getAllByTestId( 'wp-block__reusable-block' )
 		).toHaveLength( 2 );
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 0 );
+			screen.queryByTestId( 'wp-block__reusable-block--halted' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'prevents a block from rendering itself', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SINGLY-RECURSIVE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block--halted' )
+		).toBeVisible();
 	} );
 
 	it( 'prevents a block from rendering itself only when the same block type', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'ANOTHER-BLOCK-SAME-ID' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
+		expect( screen.getByTestId( 'wp-block__another-block' ) ).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__another-block' )
-		).toHaveLength( 1 );
-		expect(
-			container.querySelectorAll( '.wp-block__another-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__another-block--halted' )
+		).toBeVisible();
 	} );
 
 	it( 'prevents mutual recursion between two blocks', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'MUTUALLY-RECURSIVE-1' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
+			screen.getAllByTestId( 'wp-block__reusable-block' )
 		).toHaveLength( 2 );
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block--halted' )
+		).toBeVisible();
 	} );
 } );

package/src/components/responsive-block-control/label.js

@@ -4,7 +4,6 @@
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 export default function ResponsiveBlockControlLabel( {
 	property,
@@ -24,13 +23,13 @@ export default function ResponsiveBlockControlLabel( {
 			viewport.label
 		);
 	return (
-		<Fragment>
+		<>
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
 			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
 			</VisuallyHidden>
-		</Fragment>
+		</>
 	);
 }

package/src/components/responsive-block-control/test/index.js

@@ -15,6 +15,8 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
+jest.useFakeTimers();
+
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -38,13 +40,13 @@ const sizeOptions = [
 
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
-		<Fragment>
+		<>
 			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.
 			</p>
-		</Fragment>
+		</>
 	);
 };
 

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

@@ -0,0 +1,42 @@
+.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;
+}
+
+[data-rich-text-script] {
+	display: inline;
+
+	&::before {
+		content: "</>";
+		background: rgb(255, 255, 0);
+	}
+}

package/src/components/rich-text/format-edit.js

@@ -6,10 +6,6 @@ import {
 	getActiveObject,
 	isCollapsed,
 } from '@wordpress/rich-text';
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -40,13 +36,13 @@ export default function FormatEdit( {
 		if ( name === 'core/link' && ! isCollapsed( value ) ) {
 			const formats = value.formats;
 
-			const linkFormatAtStart = find( formats[ value.start ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtStart = formats[ value.start ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
-			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
 			if (
 				! linkFormatAtStart ||

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 =
@@ -369,6 +368,7 @@ function RichTextWrapper(
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
+
 							<FormatEdit
 								value={ value }
 								onChange={ onChange }
@@ -408,6 +408,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-paste-handler.js

@@ -4,7 +4,11 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import { pasteHandler } from '@wordpress/blocks';
+import {
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+} from '@wordpress/blocks';
 import {
 	isEmpty,
 	insert,
@@ -17,7 +21,6 @@ import { isURL } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
 import { shouldDismissPastedFiles } from '../../utils/pasting';
@@ -155,6 +158,12 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
+			if ( files?.length ) {
+				// Allows us to ask for this information when we get a report.
+				// eslint-disable-next-line no-console
+				window.console.log( 'Received items:\n\n', files );
+			}
+
 			// Process any attached files, unless we infer that the files in
 			// question are redundant "screenshots" of the actual HTML payload,
 			// as created by certain office-type programs.
@@ -164,23 +173,33 @@ export function usePasteHandler( props ) {
 				files?.length &&
 				! shouldDismissPastedFiles( files, html, plainText )
 			) {
-				const content = pasteHandler( {
-					HTML: filePasteHandler( files ),
-					mode: 'BLOCKS',
-					tagName,
-					preserveWhiteSpace,
-				} );
-
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
-				window.console.log( 'Received items:\n\n', files );
+				const fromTransforms = getBlockTransforms( 'from' );
+				const blocks = files
+					.reduce( ( accumulator, file ) => {
+						const transformation = findTransform(
+							fromTransforms,
+							( transform ) =>
+								transform.type === 'files' &&
+								transform.isMatch( [ file ] )
+						);
+						if ( transformation ) {
+							accumulator.push(
+								transformation.transform( [ file ] )
+							);
+						}
+						return accumulator;
+					}, [] )
+					.flat();
+				if ( ! blocks.length ) {
+					return;
+				}
 
 				if ( onReplace && isEmpty( value ) ) {
-					onReplace( content );
+					onReplace( blocks );
 				} else {
 					splitValue( {
 						value,
-						pastedBlocks: content,
+						pastedBlocks: blocks,
 						onReplace,
 						onSplit,
 						onSplitMiddle,

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/index.js

@@ -78,7 +78,6 @@ export default function SpacingSizesControl( {
 
 	return (
 		<fieldset
-			role="region"
 			className={ classnames( 'component-spacing-sizes-control', {
 				'is-unlinked': ! isLinked,
 			} ) }

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/spacing-sizes-control/utils.js

@@ -96,7 +96,7 @@ export function getSpacingPresetCssVar( value ) {
  *
  * @param {string} value Value to extract slug from.
  *
- * @return {number} The int value of the slug from given spacing preset.
+ * @return {string|undefined} The int value of the slug from given spacing preset.
  */
 export function getSpacingPresetSlug( value ) {
 	if ( ! value ) {

package/src/components/typewriter/index.js

@@ -105,7 +105,9 @@ export function useTypewriter() {
 					return;
 				}
 
-				const windowScroll = scrollContainer === ownerDocument.body;
+				const windowScroll =
+					scrollContainer === ownerDocument.body ||
+					scrollContainer === ownerDocument.documentElement;
 				const scrollY = windowScroll
 					? defaultView.scrollY
 					: scrollContainer.scrollTop;

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,