@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -1,140 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
-<ToolbarGroup
-  controls={
-    Array [
-      Object {
-        "align": "custom-left",
-        "icon": <SVG
+<div>
+  <div
+    class="components-toolbar"
+    icon="[object Object]"
+    label="Align"
+  >
+    <div>
+      <button
+        align="custom-left"
+        aria-label="My custom left"
+        aria-pressed="false"
+        class="components-button components-toolbar__control has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "My custom left",
-      },
-      Object {
-        "align": "custom-right",
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        align="custom-right"
+        aria-label="My custom right"
+        aria-pressed="true"
+        class="components-button components-toolbar__control is-pressed has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
           />
-        </SVG>,
-        "isActive": true,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "My custom right",
-      },
-    ]
-  }
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
+<div>
+  <div
+    class="components-dropdown components-dropdown-menu components-toolbar"
+    tabindex="-1"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Align"
+      class="components-button components-dropdown-menu__toggle has-icon"
+      data-toolbar-item="true"
+      type="button"
     >
-      <Path
-        d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
-      />
-    </SVG>
-  }
-  isCollapsed={true}
-  label="Align"
-  popoverProps={
-    Object {
-      "isAlternate": true,
-      "position": "bottom right",
-    }
-  }
-  toggleProps={
-    Object {
-      "describedBy": "Change text alignment",
-    }
-  }
-/>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
 `;
 
-exports[`AlignmentUI should match snapshot 1`] = `
-<ToolbarGroup
-  controls={
-    Array [
-      Object {
-        "align": "left",
-        "icon": <SVG
+exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
+<div>
+  <div
+    class="components-toolbar"
+    icon="[object Object]"
+    label="Align"
+  >
+    <div>
+      <button
+        align="left"
+        aria-label="Align text left"
+        aria-pressed="true"
+        class="components-button components-toolbar__control is-pressed has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
           />
-        </SVG>,
-        "isActive": true,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align text left",
-      },
-      Object {
-        "align": "center",
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        align="center"
+        aria-label="Align text center"
+        aria-pressed="false"
+        class="components-button components-toolbar__control has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align text center",
-      },
-      Object {
-        "align": "right",
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        align="right"
+        aria-label="Align text right"
+        aria-pressed="false"
+        class="components-button components-toolbar__control has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align text right",
-      },
-    ]
-  }
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
-      />
-    </SVG>
-  }
-  isCollapsed={true}
-  label="Align"
-  popoverProps={
-    Object {
-      "isAlternate": true,
-      "position": "bottom right",
-    }
-  }
-  toggleProps={
-    Object {
-      "describedBy": "Change text alignment",
-    }
-  }
-/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
 `;

package/src/components/alignment-control/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -17,46 +18,129 @@ describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
 
-	const wrapper = shallow(
-		<AlignmentUI isToolbar value={ alignment } onChange={ onChangeSpy } />
-	);
-
-	const controls = wrapper.props().controls;
-
 	afterEach( () => {
 		onChangeSpy.mockClear();
 	} );
 
-	test( 'should match snapshot', () => {
-		expect( wrapper ).toMatchSnapshot();
+	test( 'should match snapshot when controls are hidden', () => {
+		const { container } = render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should match snapshot when controls are visible', () => {
+		const { container } = render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+				isCollapsed={ false }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should expand controls when toggled', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		expect(
+			screen.queryByRole( 'menuitemradio', {
+				name: /^Align text \w+$/,
+			} )
+		).not.toBeInTheDocument();
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Align',
+			} )
+		);
+
+		expect(
+			screen.getAllByRole( 'menuitemradio', {
+				name: /^Align text \w+$/,
+			} )
+		).toHaveLength( 3 );
 	} );
 
-	test( 'should call on change with undefined when a control is already active', () => {
-		const activeControl = controls.find( ( { isActive } ) => isActive );
-		activeControl.onClick();
+	test( 'should call on change with undefined when a control is already active', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		expect( activeControl.align ).toBe( alignment );
+		render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+				isCollapsed={ false }
+			/>
+		);
+
+		const activeControl = screen.getByRole( 'button', {
+			name: /^Align text \w+$/,
+			pressed: true,
+		} );
+
+		await user.click( activeControl );
+
+		expect( activeControl ).toHaveAttribute( 'align', alignment );
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call on change a new value when the control is not active', () => {
-		const inactiveControl = controls.find(
-			( { align } ) => align === 'center'
+	test( 'should call on change a new value when the control is not active', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+				isCollapsed={ false }
+			/>
 		);
-		inactiveControl.onClick();
 
-		expect( inactiveControl.isActive ).toBe( false );
+		const inactiveControl = screen.getByRole( 'button', {
+			name: 'Align text center',
+			pressed: false,
+		} );
+
+		await user.click( inactiveControl );
+
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'center' );
 	} );
 
-	test( 'should allow custom alignment controls to be specified', () => {
-		const wrapperCustomControls = shallow(
+	test( 'should allow custom alignment controls to be specified', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const { container } = render(
 			<AlignmentUI
 				isToolbar
 				value={ 'custom-right' }
 				onChange={ onChangeSpy }
+				isCollapsed={ false }
 				alignmentControls={ [
 					{
 						icon: alignLeft,
@@ -71,26 +155,33 @@ describe( 'AlignmentUI', () => {
 				] }
 			/>
 		);
-		expect( wrapperCustomControls ).toMatchSnapshot();
-		const customControls = wrapperCustomControls.props().controls;
-		expect( customControls ).toHaveLength( 2 );
+
+		expect( container ).toMatchSnapshot();
+
+		expect(
+			screen.getAllByRole( 'button', {
+				name: /^My custom \w+$/,
+			} )
+		).toHaveLength( 2 );
 
 		// Should correctly call on change when right alignment is pressed (active alignment)
-		const rightControl = customControls.find(
-			( { align } ) => align === 'custom-right'
-		);
-		expect( rightControl.title ).toBe( 'My custom right' );
-		rightControl.onClick();
+		const rightControl = screen.getByRole( 'button', {
+			name: 'My custom right',
+		} );
+
+		await user.click( rightControl );
+
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 		onChangeSpy.mockClear();
 
 		// Should correctly call on change when right alignment is pressed (inactive alignment)
-		const leftControl = customControls.find(
-			( { align } ) => align === 'custom-left'
-		);
-		expect( leftControl.title ).toBe( 'My custom left' );
-		leftControl.onClick();
+		const leftControl = screen.getByRole( 'button', {
+			name: 'My custom left',
+		} );
+
+		await user.click( leftControl );
+
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'custom-left' );
 	} );

package/src/components/alignment-control/ui.js

@@ -57,14 +57,19 @@ function AlignmentUI( {
 	}
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar
+		? { isCollapsed }
+		: {
+				toggleProps: {
+					describedBy,
+				},
+				popoverProps: POPOVER_PROPS,
+		  };
 
 	return (
 		<UIComponent
 			icon={ setIcon() }
 			label={ label }
-			toggleProps={ { describedBy } }
-			popoverProps={ POPOVER_PROPS }
 			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;
 				const isActive = value === align;

package/src/components/autocomplete/index.js

@@ -32,16 +32,13 @@ const EMPTY_ARRAY = [];
 function useCompleters( { completers = EMPTY_ARRAY } ) {
 	const { name } = useBlockEditContext();
 	return useMemo( () => {
-		let filteredCompleters = completers;
+		let filteredCompleters = [ ...completers, linkAutocompleter ];
 
 		if (
 			name === getDefaultBlockName() ||
 			getBlockSupport( name, '__experimentalSlashInserter', false )
 		) {
-			filteredCompleters = filteredCompleters.concat( [
-				blockAutocompleter,
-				linkAutocompleter,
-			] );
+			filteredCompleters = [ ...filteredCompleters, blockAutocompleter ];
 		}
 
 		if ( hasFilter( 'editor.Autocomplete.completers' ) ) {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, first, last, every } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -36,7 +31,7 @@ export default function BlockActions( {
 
 	const blocks = getBlocksByClientId( clientIds );
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-	const canDuplicate = every( blocks, ( block ) => {
+	const canDuplicate = blocks.every( ( block ) => {
 		return (
 			!! block &&
 			hasBlockSupport( block.name, 'multiple', true ) &&
@@ -80,10 +75,16 @@ export default function BlockActions( {
 			return removeBlocks( clientIds, updateSelection );
 		},
 		onInsertBefore() {
-			insertBeforeBlock( first( castArray( clientIds ) ) );
+			const clientId = Array.isArray( clientIds )
+				? clientIds[ 0 ]
+				: clientId;
+			insertBeforeBlock( clientId );
 		},
 		onInsertAfter() {
-			insertAfterBlock( last( castArray( clientIds ) ) );
+			const clientId = Array.isArray( clientIds )
+				? clientIds[ clientIds.length - 1 ]
+				: clientId;
+			insertAfterBlock( clientId );
 		},
 		onMoveTo() {
 			setNavigationMode( true );