@wordpress/block-editor 10.4.0 → 11.0.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/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -48,6 +48,20 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	);
 };
 
+function getDefaultControlGroup( container ) {
+	// TODO: Use a user-facing query to fetch this.
+	return container.querySelector(
+		'.block-editor-responsive-block-control__group:not(.is-responsive)'
+	);
+}
+
+function getResponsiveControlGroup( container ) {
+	// TODO: Use a user-facing query to fetch this.
+	return container.querySelector(
+		'.block-editor-responsive-block-control__group.is-responsive'
+	);
+}
+
 describe( 'Basic rendering', () => {
 	it( 'should render with required props', () => {
 		const { container } = render(
@@ -58,48 +72,30 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const activePropertyLabel = Array.from(
-			container.querySelectorAll( 'legend' )
-		).find( ( legend ) => legend.innerHTML === 'Padding' );
-
-		const activeViewportLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) => label.innerHTML.includes( 'All' ) );
-
-		const defaultControl = container.querySelector(
-			`#${ activeViewportLabel.getAttribute( 'for' ) }`
-		);
-
-		const toggleLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).filter( ( label ) =>
-			label.innerHTML.includes(
-				'Use the same padding on all screensizes'
-			)
-		);
+		const activePropertyLabel = screen.getByRole( 'group', {
+			name: 'Padding',
+		} );
 
-		const toggleState = container.querySelector(
-			'input[type="checkbox"]'
-		).checked;
+		const defaultControl = screen.getByRole( 'combobox', {
+			name: 'All Controls the padding property for All viewports.',
+		} );
 
-		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
+		const toggleState = screen.getByRole( 'checkbox', {
+			name: 'Use the same padding on all screensizes.',
+			checked: true,
+		} );
 
-		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		const defaultControlGroup = getDefaultControlGroup( container );
+		const responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( container ).not.toBeEmptyDOMElement();
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
 
-		expect( activeViewportLabel ).not.toBeNull();
-		expect( activePropertyLabel ).not.toBeNull();
-		expect( defaultControl ).not.toBeNull();
-		expect( toggleLabel ).not.toBeNull();
-		expect( toggleState ).toBe( true );
+		expect( activePropertyLabel ).toBeVisible();
+		expect( defaultControl ).toBeVisible();
+		expect( toggleState ).toBeVisible();
 	} );
 
 	it( 'should not render without valid legend', () => {
@@ -135,7 +131,7 @@ describe( 'Basic rendering', () => {
 	it( 'should render with custom label for toggle control when provided', () => {
 		const customToggleLabel =
 			'Utilise a matching padding value on all viewports';
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -144,17 +140,21 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const actualToggleLabel = container.querySelector(
-			'label.components-toggle-control__label'
-		).innerHTML;
-
-		expect( actualToggleLabel ).toEqual( customToggleLabel );
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: customToggleLabel,
+				checked: true,
+			} )
+		).toBeVisible();
 	} );
 
 	it( 'should pass custom label for default control group to the renderDefaultControl function when provided', () => {
-		const customDefaultControlGroupLabel = 'Everything';
+		const customDefaultControlGroupLabel = {
+			id: 'everything',
+			label: 'Everything',
+		};
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -163,11 +163,11 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const defaultControlLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) => label.innerHTML.includes( 'Everything' ) );
+		const defaultControlLabel = screen.getByRole( 'combobox', {
+			name: 'Everything Controls the padding property for Everything viewports.',
+		} );
 
-		expect( defaultControlLabel ).not.toBeNull();
+		expect( defaultControlLabel ).toBeVisible();
 	} );
 } );
 
@@ -182,12 +182,8 @@ describe( 'Default and Responsive modes', () => {
 			/>
 		);
 
-		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		const defaultControlGroup = getDefaultControlGroup( container );
+		const responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -217,7 +213,7 @@ describe( 'Default and Responsive modes', () => {
 			renderTestDefaultControlComponent
 		);
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -230,13 +226,12 @@ describe( 'Default and Responsive modes', () => {
 		const defaultRenderControlCall = 1;
 
 		// Get array of labels which match those in the custom viewports provided
-		const responsiveViewportsLabels = Array.from(
-			container.querySelectorAll( 'label' )
-		).filter( ( label ) => {
-			const labelText = label.innerHTML;
-			// Is the label one of those in the custom device set?
-			return !! customViewportSet.find( ( deviceName ) =>
-				labelText.includes( deviceName.label )
+		const responsiveViewportsLabels = [];
+		customViewportSet.forEach( ( { label } ) => {
+			responsiveViewportsLabels.push(
+				screen.getByRole( 'combobox', {
+					name: `${ label } Controls the padding property for ${ label } viewports.`,
+				} )
 			);
 		} );
 
@@ -270,24 +265,14 @@ describe( 'Default and Responsive modes', () => {
 
 		const { container } = render( <ResponsiveBlockControlConsumer /> );
 
-		let defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		let responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		let defaultControlGroup = getDefaultControlGroup( container );
+		let responsiveControlGroup = getResponsiveControlGroup( container );
 
 		// Select elements based on what the user can see.
-		const toggleLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) =>
-			label.innerHTML.includes(
-				'Use the same padding on all screensizes'
-			)
-		);
-		const toggleInput = container.querySelector(
-			`#${ toggleLabel.getAttribute( 'for' ) }`
-		);
+		const toggleInput = screen.getByRole( 'checkbox', {
+			name: 'Use the same padding on all screensizes.',
+			checked: true,
+		} );
 
 		// Initial mode (default)
 		expect( defaultControlGroup ).not.toBeNull();
@@ -296,12 +281,8 @@ describe( 'Default and Responsive modes', () => {
 		// Toggle to "responsive" mode.
 		await user.click( toggleInput );
 
-		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		defaultControlGroup = getDefaultControlGroup( container );
+		responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -309,12 +290,8 @@ describe( 'Default and Responsive modes', () => {
 		// Toggle back to "default" mode.
 		await user.click( toggleInput );
 
-		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		defaultControlGroup = getDefaultControlGroup( container );
+		responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
@@ -340,7 +317,7 @@ describe( 'Default and Responsive modes', () => {
 			} );
 		} );
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -351,9 +328,9 @@ describe( 'Default and Responsive modes', () => {
 		);
 
 		// The user should see "range" controls so we can legitimately query for them here.
-		const customControls = Array.from(
-			container.querySelectorAll( 'input[type="range"]' )
-		);
+		const customControls = screen.getAllByRole( 'slider', {
+			name: /\w+ screens$/,
+		} );
 
 		// Also called because default control rendeer function is always called
 		// (for convenience) even though it's not displayed in output.

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-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 = [];