@wordpress/block-editor 11.0.0 → 11.1.0

package/src/components/off-canvas-editor/test/use-inserted-block.js

@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { useInsertedBlock } from '../use-inserted-block';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+describe( 'useInsertedBlock', () => {
+	const mockUpdateBlockAttributes = jest.fn();
+
+	it( 'returns undefined values when called without a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () => useInsertedBlock() );
+
+		const {
+			insertedBlockName,
+			insertedBlockAttributes,
+			setInsertedBlockAttributes,
+		} = result.current;
+
+		expect( insertedBlockName ).toBeUndefined();
+		expect( insertedBlockAttributes ).toBeUndefined();
+		expect(
+			setInsertedBlockAttributes( { 'some-attribute': 'new-value' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns name and attributes when called with a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () =>
+			useInsertedBlock( 'some-client-id-here' )
+		);
+
+		const { insertedBlockName, insertedBlockAttributes } = result.current;
+
+		expect( insertedBlockName ).toBe( 'core/navigation-link' );
+		expect( insertedBlockAttributes ).toEqual( {
+			'some-attribute': 'some-value',
+		} );
+	} );
+
+	it( 'dispatches updateBlockAttributes on provided client ID with new attributes when setInsertedBlockAttributes is called', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const clientId = '123456789';
+
+		const { result } = renderHook( () => useInsertedBlock( clientId ) );
+
+		const { setInsertedBlockAttributes } = result.current;
+
+		act( () => {
+			setInsertedBlockAttributes( {
+				'some-attribute': 'new-value',
+			} );
+		} );
+
+		expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith( clientId, {
+			'some-attribute': 'new-value',
+		} );
+	} );
+} );

package/src/components/off-canvas-editor/use-inserted-block.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export const useInsertedBlock = ( insertedBlockClientId ) => {
+	const { insertedBlockAttributes, insertedBlockName } = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return {
+				insertedBlockAttributes: getBlockAttributes(
+					insertedBlockClientId
+				),
+				insertedBlockName: getBlockName( insertedBlockClientId ),
+			};
+		},
+		[ insertedBlockClientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setInsertedBlockAttributes = ( _updatedAttributes ) => {
+		if ( ! insertedBlockClientId ) return;
+		updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+	};
+
+	if ( ! insertedBlockClientId ) {
+		return {
+			insertedBlockAttributes: undefined,
+			insertedBlockName: undefined,
+			setInsertedBlockAttributes,
+		};
+	}
+
+	return {
+		insertedBlockAttributes,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	};
+};

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

@@ -368,6 +368,7 @@ function RichTextWrapper(
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
+
 							<FormatEdit
 								value={ value }
 								onChange={ onChange }

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/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/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/url-input/test/button.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import URLInputButton from '../button';
 
+jest.useFakeTimers();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -189,7 +189,7 @@ const ImageURLInputUI = ( {
 			linkDestinationInput = LINK_DESTINATION_NONE;
 		} else {
 			linkDestinationInput = (
-				find( linkDestinations, ( destination ) => {
+				linkDestinations.find( ( destination ) => {
 					return destination.url === value;
 				} ) || { linkDestination: LINK_DESTINATION_CUSTOM }
 			).linkDestination;
@@ -236,8 +236,9 @@ const ImageURLInputUI = ( {
 	const linkEditorValue = urlInput !== null ? urlInput : url;
 
 	const urlLabel = (
-		find( getLinkDestinations(), [ 'linkDestination', linkDestination ] ) ||
-		{}
+		getLinkDestinations().find(
+			( destination ) => destination.linkDestination === linkDestination
+		) || {}
 	).title;
 
 	return (

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -11,6 +11,16 @@ import URLPopover from '../';
 
 jest.useRealTimers();
 
+/**
+ * Returns the first found popover element up the DOM tree.
+ *
+ * @param {HTMLElement} element Element to start with.
+ * @return {HTMLElement|null} Popover element, or `null` if not found.
+ */
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'URLPopover', () => {
 	it( 'matches the snapshot in its default state', async () => {
 		const { container } = render(
@@ -22,8 +32,11 @@ describe( 'URLPopover', () => {
 			</URLPopover>
 		);
 
-		// wait for `Popover` effects to finish
-		await act( () => Promise.resolve() );
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );
@@ -53,8 +66,11 @@ describe( 'URLPopover', () => {
 			</URLPopover>
 		);
 
-		// wait for `Popover` effects to finish
-		await act( () => Promise.resolve() );
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );

package/src/components/warning/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
+jest.useFakeTimers();
+
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );

package/src/components/writing-flow/index.js

@@ -44,7 +44,7 @@ export function useWritingFlow() {
 			useArrowNav(),
 			useRefEffect(
 				( node ) => {
-					node.tabIndex = -1;
+					node.tabIndex = 0;
 					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {

package/src/hooks/border.js

@@ -274,7 +274,6 @@ export function BorderPanel( props ) {
 						popoverPlacement="left-start"
 						size="__unstable-large"
 						value={ hydratedBorder }
-						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>

package/src/hooks/color-panel.js

@@ -81,7 +81,6 @@ export default function ColorPanel( {
 				panelId={ clientId }
 				settings={ settings }
 				__experimentalIsItemGroup={ false }
-				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 				{ ...colorGradientSettings }
 			/>

package/src/hooks/color.js

@@ -522,8 +522,6 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable:
-									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
 								resetAllFilter: resetAllLinkFilter,
 							},

package/src/hooks/font-family.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,12 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find(
-		fontFamilies,
+	const value = fontFamilies?.find(
 		( { slug } ) => fontFamily === slug
 	)?.fontFamily;
 
 	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
+		const predefinedFontFamily = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {

package/src/hooks/font-size.js

@@ -324,13 +324,22 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const isFluidTypographyEnabled =
-			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+		const fluidTypographyConfig =
+			select( blockEditorStore ).getSettings().__experimentalFeatures
 				?.typography?.fluid;
 
+		const fluidTypographySettings =
+			typeof fluidTypographyConfig === 'object'
+				? fluidTypographyConfig
+				: {};
+
 		const newFontSize =
-			fontSize && isFluidTypographyEnabled
-				? getComputedFluidTypographyValue( { fontSize } )
+			fontSize && !! fluidTypographyConfig
+				? getComputedFluidTypographyValue( {
+						fontSize,
+						minimumFontSizeLimit:
+							fluidTypographySettings?.minFontSize,
+				  } )
 				: null;
 
 		if ( newFontSize === null ) {

package/src/hooks/test/use-typography-props.js

@@ -47,4 +47,30 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return configured fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				minFontSize: '1rem',
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

package/src/hooks/use-typography-props.js

@@ -19,23 +19,31 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}  attributes            Block attributes.
- * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
+ * @param {Object}         attributes              Block attributes.
+ * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
+ *                                                 otherwise an object containing theme fluid typography settings.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles(
 	attributes,
-	isFluidFontSizeActive
+	fluidTypographySettings
 ) {
 	let typographyStyles = attributes?.style?.typography || {};
 
-	if ( isFluidFontSizeActive ) {
+	if (
+		!! fluidTypographySettings &&
+		( true === fluidTypographySettings ||
+			Object.keys( fluidTypographySettings ).length !== 0 )
+	) {
+		const newFontSize =
+			getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,
-			fontSize: getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-			} ),
+			fontSize: newFontSize,
 		};
 	}
 

package/src/store/reducer.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { omit, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -113,7 +112,10 @@ function getFlattenedClientIds( blocks ) {
  * @return {Array} Flattened block attributes object.
  */
 function getFlattenedBlocksWithoutAttributes( blocks ) {
-	return flattenBlocks( blocks, ( block ) => omit( block, 'attributes' ) );
+	return flattenBlocks( blocks, ( block ) => {
+		const { attributes, ...restBlock } = block;
+		return restBlock;
+	} );
 }
 
 /**
@@ -782,8 +784,8 @@ export const blocks = pipe(
 				}
 
 				// Do nothing if only attributes change.
-				const changes = omit( action.updates, 'attributes' );
-				if ( isEmpty( changes ) ) {
+				const { attributes, ...changes } = action.updates;
+				if ( Object.values( changes ).length === 0 ) {
 					return state;
 				}
 
@@ -1641,13 +1643,18 @@ export const blockListSettings = ( state = {}, action ) => {
 		// should correct the state.
 		case 'REPLACE_BLOCKS':
 		case 'REMOVE_BLOCKS': {
-			return omit( state, action.clientIds );
+			return Object.fromEntries(
+				Object.entries( state ).filter(
+					( [ id ] ) => ! action.clientIds.includes( id )
+				)
+			);
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
 			const { clientId } = action;
 			if ( ! action.settings ) {
 				if ( state.hasOwnProperty( clientId ) ) {
-					return omit( state, clientId );
+					const { [ clientId ]: removedBlock, ...restBlocks } = state;
+					return restBlocks;
 				}
 
 				return state;