@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.2.0

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/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/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;
 	}