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

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

@@ -1,69 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BlockVerticalAlignmentUI should match snapshot 1`] = `
-<ToolbarGroup
-  controls={
-    Array [
-      Object {
-        "icon": <SVG
+exports[`BlockVerticalAlignmentUI 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="Change vertical alignment"
+      class="components-button components-dropdown-menu__toggle 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
+          d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`BlockVerticalAlignmentUI should match snapshot when controls are visible 1`] = `
+<div>
+  <div
+    class="components-toolbar"
+    icon="[object Object]"
+    label="Change vertical alignment"
+  >
+    <div>
+      <button
+        aria-label="Align top"
+        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="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
           />
-        </SVG>,
-        "isActive": true,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align top",
-      },
-      Object {
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        aria-label="Align middle"
+        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="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align middle",
-      },
-      Object {
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        aria-label="Align bottom"
+        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="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align bottom",
-      },
-    ]
-  }
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
-      />
-    </SVG>
-  }
-  isCollapsed={true}
-  label="Change vertical alignment"
-  popoverProps={
-    Object {
-      "isAlternate": true,
-    }
-  }
-/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
 `;

package/src/components/block-vertical-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';
 
 /**
  * Internal dependencies
@@ -12,44 +13,112 @@ describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();
 
-	const wrapper = shallow(
-		<BlockVerticalAlignmentUI
-			isToolbar
-			value={ alignment }
-			onChange={ onChange }
-		/>
-	);
-
-	const controls = wrapper.props().controls;
-
 	afterEach( () => {
 		onChange.mockClear();
 	} );
 
-	it( 'should match snapshot', () => {
-		expect( wrapper ).toMatchSnapshot();
+	test( 'should match snapshot when controls are hidden', () => {
+		const { container } = render(
+			<BlockVerticalAlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChange }
+			/>
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should match snapshot when controls are visible', () => {
+		const { container } = render(
+			<BlockVerticalAlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChange }
+				isCollapsed={ false }
+			/>
+		);
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should call onChange with undefined, when the control is already active', () => {
-		const activeControl = controls.find( ( { title } ) =>
-			title.toLowerCase().includes( alignment )
+	test( 'should expand controls when toggled', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<BlockVerticalAlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.queryByRole( 'menuitemradio', {
+				name: /^Align \w+$/,
+			} )
+		).not.toBeInTheDocument();
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Change vertical alignment',
+			} )
 		);
-		activeControl.onClick();
 
-		expect( activeControl.isActive ).toBe( true );
+		expect(
+			screen.getAllByRole( 'menuitemradio', {
+				name: /^Align \w+$/,
+			} )
+		).toHaveLength( 3 );
+	} );
+
+	it( 'should call onChange with undefined, when the control is already active', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<BlockVerticalAlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChange }
+				isCollapsed={ false }
+			/>
+		);
+
+		const activeControl = screen.getByRole( 'button', {
+			name: `Align ${ alignment }`,
+			pressed: true,
+		} );
+
+		await user.click( activeControl );
+
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	it( 'should call onChange with alignment value when the control is inactive', () => {
+	it( 'should call onChange with alignment value when the control is inactive', async () => {
 		// note "middle" alias for "center"
-		const inactiveCenterControl = controls.find( ( { title } ) =>
-			title.toLowerCase().includes( 'middle' )
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<BlockVerticalAlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChange }
+				isCollapsed={ false }
+			/>
 		);
 
-		inactiveCenterControl.onClick();
+		const inactiveControl = screen.getByRole( 'button', {
+			name: 'Align middle',
+			pressed: false,
+		} );
+
+		await user.click( inactiveControl );
 
-		expect( inactiveCenterControl.isActive ).toBe( false );
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( 'center' );
 	} );

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

@@ -47,11 +47,12 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar
+		? { isCollapsed }
+		: { popoverProps: { POPOVER_PROPS } };
 
 	return (
 		<UIComponent
-			popoverProps={ POPOVER_PROPS }
 			icon={
 				activeAlignment
 					? activeAlignment.icon

package/src/components/border-radius-control/linked-button.js

@@ -6,20 +6,21 @@ import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 export default function LinkedButton( { isLinked, ...props } ) {
-	const label = isLinked ? __( 'Unlink Radii' ) : __( 'Link Radii' );
+	const label = isLinked ? __( 'Unlink radii' ) : __( 'Link radii' );
 
+	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
 		<Tooltip text={ label }>
-			<Button
-				{ ...props }
-				className="component-border-radius-control__linked-button"
-				isPrimary={ isLinked }
-				isSecondary={ ! isLinked }
-				isSmall
-				icon={ isLinked ? link : linkOff }
-				iconSize={ 16 }
-				aria-label={ label }
-			/>
+			<span>
+				<Button
+					{ ...props }
+					className="component-border-radius-control__linked-button"
+					isSmall
+					icon={ isLinked ? link : linkOff }
+					iconSize={ 24 }
+					aria-label={ label }
+				/>
+			</span>
 		</Tooltip>
 	);
 }

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -29,15 +29,12 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 1);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-4>*+*:not( marquee ) {
-  margin-top: calc(4px * 1);
-}
-
 .emotion-4>* {
   min-height: 0;
 }
@@ -64,15 +61,12 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 3);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-8>*+*:not( marquee ) {
-  margin-top: calc(4px * 3);
-}
-
 .emotion-8>* {
   min-height: 0;
 }
@@ -89,16 +83,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-10>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-10>* {
   min-width: 0;
 }

package/src/components/colors/test/with-colors.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -13,18 +14,37 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors( 'backgroundColor' )( () => (
-			<div />
-		) );
+		const BaseComponent = jest.fn( () => <div /> );
+		const EnhancedComponent =
+			withCustomColors( 'backgroundColor' )( BaseComponent );
 
-		const wrapper = shallow(
+		render(
 			<EnhancedComponent attributes={ { backgroundColor: null } } />
 		);
 
-		expect( wrapper.dive() ).toMatchSnapshot();
+		expect( BaseComponent ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				attributes: {
+					backgroundColor: null,
+				},
+				backgroundColor: {
+					class: undefined,
+					color: undefined,
+				},
+				colorUtils: {
+					getMostReadableColor: expect.any( Function ),
+				},
+				colors: undefined,
+				setBackgroundColor: expect.any( Function ),
+			} ),
+			expect.anything()
+		);
 	} );
 
-	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', () => {
+	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -38,21 +58,25 @@ describe( 'createCustomColorsHOC', () => {
 
 		const setAttributes = jest.fn();
 
-		const wrapper = mount(
+		render(
 			<EnhancedComponent
 				attributes={ { backgroundColor: null } }
 				setAttributes={ setAttributes }
 			/>
 		);
 
-		wrapper.find( 'button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button' ) );
+
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			backgroundColor: 'red',
 			customBackgroundColor: undefined,
 		} );
 	} );
 
-	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', () => {
+	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -66,14 +90,15 @@ describe( 'createCustomColorsHOC', () => {
 
 		const setAttributes = jest.fn();
 
-		const wrapper = mount(
+		render(
 			<EnhancedComponent
 				attributes={ { backgroundColor: null } }
 				setAttributes={ setAttributes }
 			/>
 		);
 
-		wrapper.find( 'button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button' ) );
+
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			backgroundColor: undefined,
 			customBackgroundColor: '000000',

package/src/components/colors-gradients/dropdown.js

@@ -120,7 +120,7 @@ export default function ColorGradientSettingsDropdown( {
 		popoverProps = {
 			placement: 'left-start',
 			offset: 36,
-			__unstableShift: true,
+			shift: true,
 		};
 	}