@wordpress/block-editor 10.1.0 → 10.2.0

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, flow } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ import {
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -241,7 +241,7 @@ export function BlockSettingsDropdown( {
 								/>
 								{ canDuplicate && (
 									<MenuItem
-										onClick={ flow(
+										onClick={ pipe(
 											onClose,
 											onDuplicate,
 											updateSelectionAfterDuplicate
@@ -254,7 +254,7 @@ export function BlockSettingsDropdown( {
 								{ canInsertDefaultBlock && (
 									<>
 										<MenuItem
-											onClick={ flow(
+											onClick={ pipe(
 												onClose,
 												onInsertBefore
 											) }
@@ -263,7 +263,7 @@ export function BlockSettingsDropdown( {
 											{ __( 'Insert before' ) }
 										</MenuItem>
 										<MenuItem
-											onClick={ flow(
+											onClick={ pipe(
 												onClose,
 												onInsertAfter
 											) }
@@ -275,7 +275,7 @@ export function BlockSettingsDropdown( {
 								) }
 								{ canMove && ! onlyBlock && (
 									<MenuItem
-										onClick={ flow( onClose, onMoveTo ) }
+										onClick={ pipe( onClose, onMoveTo ) }
 									>
 										{ __( 'Move to' ) }
 									</MenuItem>
@@ -302,7 +302,7 @@ export function BlockSettingsDropdown( {
 							{ canRemove && (
 								<MenuGroup>
 									<MenuItem
-										onClick={ flow(
+										onClick={ pipe(
 											onClose,
 											onRemove,
 											updateSelectionAfterRemove

package/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -1,43 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockSwitcherDropdownMenu should render disabled block switcher with multi block of different types when no transforms 1`] = `
-<ToolbarGroup>
-  <ForwardRef(ToolbarButton)
-    className="block-editor-block-switcher__no-switcher-icon"
-    disabled={true}
-    icon={
-      <React.Fragment>
-        <Memo(BlockIcon)
-          icon={
-            <SVG
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <Path
-                d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
-              />
-            </SVG>
-          }
-          showColors={true}
-        />
-      </React.Fragment>
-    }
-  />
-</ToolbarGroup>
+<div>
+  <div
+    class="components-toolbar"
+  >
+    <div>
+      <button
+        aria-label="Block Name"
+        class="components-button components-toolbar__control block-editor-block-switcher__no-switcher-icon has-icon"
+        data-toolbar-item="true"
+        disabled=""
+        type="button"
+      >
+        <span
+          class="block-editor-block-icon has-colors"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`BlockSwitcherDropdownMenu should render enabled block switcher with multi block when transforms exist 1`] = `
-<ToolbarGroup>
-  <ForwardRef(ToolbarItem)>
-    <Component />
-  </ForwardRef(ToolbarItem)>
-</ToolbarGroup>
+<div>
+  <div
+    class="components-toolbar"
+  >
+    <div
+      class="components-dropdown components-dropdown-menu block-editor-block-switcher"
+      tabindex="-1"
+    >
+      <button
+        aria-describedby="components-button__description-2"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Block Name"
+        class="components-button components-dropdown-menu__toggle has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <span
+          class="block-editor-block-icon block-editor-block-switcher__toggle has-colors"
+        />
+      </button>
+      <div
+        class="components-visually-hidden emotion-0 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="VisuallyHidden"
+        style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+      >
+        <span
+          id="components-button__description-2"
+        >
+          Change type of 2 blocks
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`BlockSwitcherDropdownMenu should render switcher with blocks 1`] = `
-<ToolbarGroup>
-  <ForwardRef(ToolbarItem)>
-    <Component />
-  </ForwardRef(ToolbarItem)>
-</ToolbarGroup>
+<div>
+  <div
+    class="components-toolbar"
+  >
+    <div
+      class="components-dropdown components-dropdown-menu block-editor-block-switcher"
+      tabindex="-1"
+    >
+      <button
+        aria-describedby="components-button__description-0"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Block Name"
+        class="components-button components-dropdown-menu__toggle has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <span
+          class="block-editor-block-icon block-editor-block-switcher__toggle has-colors"
+        />
+      </button>
+      <div
+        class="components-visually-hidden emotion-0 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="VisuallyHidden"
+        style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+      >
+        <span
+          id="components-button__description-0"
+        >
+          Block Name: Change block type or style
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/components/block-switcher/test/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
 import { copy } from '@wordpress/icons';
 
 /**
@@ -17,23 +17,25 @@ import { copy } from '@wordpress/icons';
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () =>
+	jest.fn().mockReturnValue( 'Block Name' )
+);
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {
 		useSelect.mockImplementation( () => ( {} ) );
-		const wrapper = shallow( <BlockSwitcher /> );
-		expect( wrapper.html() ).toBeNull();
+		const { container } = render( <BlockSwitcher /> );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should not render block switcher with null blocks', () => {
 		useSelect.mockImplementation( () => ( { blocks: [ null ] } ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcher
 				clientIds={ [ 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9' ] }
 			/>
 		);
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 } );
 describe( 'BlockSwitcherDropdownMenu', () => {
@@ -122,10 +124,10 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			],
 			canRemove: true,
 		} ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
@@ -133,12 +135,12 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			possibleBlockTransformations: [],
 			icon: copy,
 		} ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcherDropdownMenu
 				blocks={ [ headingBlock1, textBlock ] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render enabled block switcher with multi block when transforms exist', () => {
@@ -149,12 +151,12 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			],
 			canRemove: true,
 		} ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcherDropdownMenu
 				blocks={ [ headingBlock1, headingBlock2 ] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'Dropdown', () => {
@@ -166,70 +168,128 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				canRemove: true,
 			} ) );
 		} );
-		const getDropdown = () =>
-			mount(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			).find( 'Dropdown' );
 
 		test( 'should dropdown exist', () => {
-			expect( getDropdown() ).toHaveLength( 1 );
-		} );
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
 
-		describe( '.renderToggle', () => {
-			const onToggleStub = jest.fn();
-			const mockKeyDown = {
-				preventDefault: () => {},
-				code: 'ArrowDown',
-			};
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			).toBeVisible();
+		} );
 
-			afterEach( () => {
-				onToggleStub.mockReset();
+		test( 'should simulate a keydown event, which should open transform toggle.', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
 
-			test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => {
-				const toggleClosed = mount(
-					getDropdown().props().renderToggle( {
-						onToggle: onToggleStub,
-						isOpen: false,
-					} )
-				);
-				const iconButtonClosed = toggleClosed.find( Button );
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'menu', {
+					name: 'Block Name',
+				} )
+			).not.toBeInTheDocument();
+
+			await user.type(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} ),
+				'[ArrowDown]'
+			);
 
-				iconButtonClosed.simulate( 'keydown', mockKeyDown );
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: true,
+				} )
+			).toBeVisible();
 
-				expect( onToggleStub ).toHaveBeenCalledTimes( 1 );
+			const menu = screen.getByRole( 'menu', {
+				name: 'Block Name',
 			} );
+			expect( menu ).toBeInTheDocument();
+			expect( menu ).not.toBeVisible();
+		} );
 
-			test( 'should simulate a click event, which should call onToggle.', () => {
-				const toggleOpen = mount(
-					getDropdown().props().renderToggle( {
-						onToggle: onToggleStub,
-						isOpen: true,
-					} )
-				);
-				const iconButtonOpen = toggleOpen.find( Button );
+		test( 'should simulate a click event, which should call onToggle.', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'menu', {
+					name: 'Block Name',
+				} )
+			).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			);
 
-				iconButtonOpen.simulate( 'keydown', mockKeyDown );
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: true,
+				} )
+			).toBeVisible();
 
-				expect( onToggleStub ).toHaveBeenCalledTimes( 0 );
+			const menu = screen.getByRole( 'menu', {
+				name: 'Block Name',
 			} );
+			expect( menu ).toBeInTheDocument();
+			expect( menu ).not.toBeVisible();
 		} );
 
-		describe( '.renderContent', () => {
-			test( 'should create the transform items for the chosen block. A heading block will have 3 items', () => {
-				const onCloseStub = jest.fn();
-				const content = shallow(
-					<div>
-						{ getDropdown()
-							.props()
-							.renderContent( { onClose: onCloseStub } ) }
-					</div>
-				);
-				const blockList = content.find( 'BlockTransformationsMenu' );
-				expect(
-					blockList.prop( 'possibleBlockTransformations' )
-				).toHaveLength( 1 );
+		test( 'should create the transform items for the chosen block.', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
+
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			);
+
+			expect(
+				within(
+					screen.getByRole( 'menu', {
+						name: 'Block Name',
+					} )
+				).getAllByRole( 'menuitem' )
+			).toHaveLength( 1 );
 		} );
 	} );
 } );

package/src/components/block-tools/index.js

@@ -124,7 +124,7 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isTyping && ! isZoomOutMode && (
+				{ ! isTyping && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -11,10 +11,15 @@ import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 
+const COMMON_PROPS = {
+	placement: 'top-start',
+};
+
 // By default the toolbar sets the `shift` prop. If the user scrolls the page
 // down the toolbar will stay on screen by adopting a sticky position at the
 // top of the viewport.
 const DEFAULT_PROPS = {
+	...COMMON_PROPS,
 	flip: false,
 	shift: true,
 };
@@ -25,6 +30,7 @@ const DEFAULT_PROPS = {
 // the block. This only happens if the block is smaller than the viewport, as
 // otherwise the toolbar will be off-screen.
 const RESTRICTED_HEIGHT_PROPS = {
+	...COMMON_PROPS,
 	flip: true,
 	shift: false,
 };

package/src/components/button-block-appender/style.scss

@@ -35,7 +35,9 @@
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > & {
 		pointer-events: none;
 
 		&::after {

package/src/components/image-editor/use-transform-image.js

@@ -41,7 +41,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		if ( angle === 0 ) {
 			setEditedUrl();
 			setRotation( angle );
-			setAspect( 1 / aspect );
+			setAspect( naturalWidth / naturalHeight );
 			setPosition( {
 				x: -( position.y * naturalAspectRatio ),
 				y: position.x * naturalAspectRatio,
@@ -80,7 +80,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 			canvas.toBlob( ( blob ) => {
 				setEditedUrl( URL.createObjectURL( blob ) );
 				setRotation( angle );
-				setAspect( 1 / aspect );
+				setAspect( canvas.width / canvas.height );
 				setPosition( {
 					x: -( position.y * naturalAspectRatio ),
 					y: position.x * naturalAspectRatio,

package/src/components/index.js

@@ -155,6 +155,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { default as __experimentalUseOnBlockDrop } from './use-on-block-drop';
 
 /*
  * State Related Components

package/src/components/inserter/block-types-tab.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { map, flow, groupBy, orderBy } from 'lodash';
+import { map, groupBy, orderBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import { useMemo, useEffect } from '@wordpress/element';
-import { useAsyncList } from '@wordpress/compose';
+import { pipe, useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -53,7 +53,7 @@ export function BlockTypesTab( {
 	}, [ items ] );
 
 	const itemsPerCategory = useMemo( () => {
-		return flow(
+		return pipe(
 			( itemList ) =>
 				itemList.filter(
 					( item ) => item.category && item.category !== 'reusable'

package/src/components/inserter/search-items.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { noCase } from 'change-case';
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
+import { find, words } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -36,17 +35,6 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
-/**
- * Extracts words from an input string.
- *
- * @param {string} input The input string.
- *
- * @return {Array} Words, extracted from the input string.
- */
-function extractWords( input = '' ) {
-	return noCase( input ).split( ' ' ).filter( Boolean );
-}
-
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -55,7 +43,7 @@ function extractWords( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return words( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -162,7 +150,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const normalizedSearchTerms = words( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms

package/src/components/inserter/test/search-items.js

@@ -42,6 +42,10 @@ describe( 'getNormalizedSearchTerms', () => {
 			getNormalizedSearchTerms( '  Média  &   Text Tag-Cloud > 123' )
 		).toEqual( [ 'media', 'text', 'tag', 'cloud', '123' ] );
 	} );
+
+	it( 'should support non-latin letters', () => {
+		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+	} );
 } );
 
 describe( 'getItemSearchRank', () => {

package/src/components/inspector-controls/slot.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseSlot as useSlot } from '@wordpress/components';
+import {
+	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -18,12 +21,13 @@ export default function InspectorControlsSlot( {
 } ) {
 	const Slot = groups[ group ]?.Slot;
 	const slot = useSlot( Slot?.__unstableName );
+	const fills = useSlotFills( Slot?.__unstableName );
 	if ( ! Slot || ! slot ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
 
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const hasFills = Boolean( fills && fills.length );
 	if ( ! hasFills ) {
 		return null;
 	}