@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

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

@@ -1,88 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BlockAlignmentUI should match snapshot 1`] = `
-<ToolbarGroup
-  controls={
-    Array [
-      Object {
-        "icon": <SVG
+exports[`BlockAlignmentUI 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"
+    >
+      <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 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] = `
+<div>
+  <div
+    class="components-toolbar"
+    icon="[object Object]"
+    label="Align"
+  >
+    <div>
+      <button
+        aria-label="None"
+        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="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "None",
-      },
-      Object {
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        aria-label="Align 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 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
           />
-        </SVG>,
-        "isActive": true,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align left",
-      },
-      Object {
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        aria-label="Align 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="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align center",
-      },
-      Object {
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        aria-label="Align 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="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align right",
-      },
-    ]
-  }
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
-      />
-    </SVG>
-  }
-  isCollapsed={true}
-  label="Align"
-  popoverProps={
-    Object {
-      "isAlternate": true,
-    }
-  }
-  toggleProps={
-    Object {
-      "describedBy": "Change alignment",
-    }
-  }
-/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
 `;

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

@@ -1,61 +1,125 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import BlockAlignmentUI from '../ui';
 
-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;
-} );
-useSelect.mockImplementation( () => ( { wideControlsEnabled: false } ) );
-
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();
 
-	const wrapper = shallow(
-		<BlockAlignmentUI value={ alignment } onChange={ onChange } isToolbar />
-	);
-
-	const controls = wrapper.props().controls;
-
 	afterEach( () => {
 		onChange.mockClear();
 	} );
 
-	test( 'should match snapshot', () => {
-		expect( wrapper ).toMatchSnapshot();
+	test( 'should match snapshot when controls are hidden', () => {
+		const { container } = render(
+			<BlockAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				isToolbar
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should call onChange with undefined, when the control is already active', () => {
-		const activeControl = controls.find(
-			( { title } ) => title === 'Align left'
+	test( 'should match snapshot when controls are visible', () => {
+		const { container } = render(
+			<BlockAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				isToolbar
+				isCollapsed={ false }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should expand controls when toggled', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<BlockAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				isToolbar
+			/>
 		);
-		activeControl.onClick();
 
-		expect( activeControl.isActive ).toBe( true );
+		expect(
+			screen.queryByRole( 'menuitemradio', {
+				name: /^Align \w+$/,
+			} )
+		).not.toBeInTheDocument();
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Align',
+			} )
+		);
+
+		expect(
+			screen.getAllByRole( 'menuitemradio', {
+				name: /^Align \w+$/,
+			} )
+		).toHaveLength( 3 );
+	} );
+
+	test( 'should call onChange with undefined, when the control is already active', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<BlockAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				isToolbar
+				isCollapsed={ false }
+			/>
+		);
+
+		const activeControl = screen.getByRole( 'button', {
+			name: `Align ${ alignment }`,
+			pressed: true,
+		} );
+
+		await user.click( activeControl );
+
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call onChange with alignment value when the control is inactive', () => {
-		const inactiveCenterControl = controls.find(
-			( { title } ) => title === 'Align center'
+	test( 'should call onChange with alignment value when the control is inactive', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<BlockAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				isToolbar
+				isCollapsed={ false }
+			/>
 		);
-		inactiveCenterControl.onClick();
 
-		expect( inactiveCenterControl.isActive ).toBe( false );
+		const inactiveControl = screen.getByRole( 'button', {
+			name: 'Align center',
+			pressed: false,
+		} );
+
+		await user.click( inactiveControl );
+
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( 'center' );
 	} );

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

@@ -48,12 +48,10 @@ function BlockAlignmentUI( {
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
 	const commonProps = {
-		popoverProps: POPOVER_PROPS,
 		icon: activeAlignmentControl
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
 		label: __( 'Align' ),
-		toggleProps: { describedBy: __( 'Change alignment' ) },
 	};
 	const extraProps = isToolbar
 		? {
@@ -70,6 +68,8 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
+				toggleProps: { describedBy: __( 'Change alignment' ) },
+				popoverProps: POPOVER_PROPS,
 				children: ( { onClose } ) => {
 					return (
 						<>

package/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -1,40 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockView should match snapshot 1`] = `
-<div
-  className="class"
->
+<div>
   <div
-    className="block-editor-block-compare__content"
+    class="class"
   >
-    <h2
-      className="block-editor-block-compare__heading"
-    >
-      title
-    </h2>
     <div
-      className="block-editor-block-compare__html"
+      class="block-editor-block-compare__content"
     >
-      raw
+      <h2
+        class="block-editor-block-compare__heading"
+      >
+        title
+      </h2>
+      <div
+        class="block-editor-block-compare__html"
+      >
+        raw
+      </div>
+      <div
+        class="block-editor-block-compare__preview edit-post-visual-editor"
+      >
+        <div>
+          render
+        </div>
+      </div>
     </div>
     <div
-      className="block-editor-block-compare__preview edit-post-visual-editor"
+      class="block-editor-block-compare__action"
     >
-      <RawHTML>
-        render
-      </RawHTML>
+      <button
+        class="components-button is-secondary"
+        tabindex="0"
+        type="button"
+      >
+        action
+      </button>
     </div>
   </div>
-  <div
-    className="block-editor-block-compare__action"
-  >
-    <ForwardRef(Button)
-      onClick={[Function]}
-      tabIndex="0"
-      variant="secondary"
-    >
-      action
-    </ForwardRef(Button)>
-  </div>
 </div>
 `;

package/src/components/block-compare/test/block-view.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,7 +12,7 @@ const noop = () => {};
 
 describe( 'BlockView', () => {
 	test( 'should match snapshot', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockView
 				title="title"
 				rawContent="raw"
@@ -23,6 +23,6 @@ describe( 'BlockView', () => {
 			/>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/block-content-overlay/index.js

@@ -11,14 +11,10 @@ import { store as blockEditorStore } from '../../store';
 export default function useBlockOverlayActive( clientId ) {
 	return useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } =
+			const { __unstableHasActiveBlockOverlayActive } =
 				select( blockEditorStore );
 
-			return (
-				! canEditBlock( clientId ) ||
-				( ! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) )
-			);
+			return __unstableHasActiveBlockOverlayActive( clientId );
 		},
 		[ clientId ]
 	);

package/src/components/block-content-overlay/style.scss

@@ -1,4 +1,6 @@
-.block-editor-block-content-overlay {
+.block-editor-block-list__block.has-block-overlay {
+	cursor: default;
+
 	&::before {
 		content: "";
 		position: absolute;
@@ -9,11 +11,30 @@
 		background: transparent;
 		border: none;
 		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-content-overlay__overlay");
+		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
+	}
+
+	&::after {
+		content: none !important;
 	}
 
 	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
+	}
+
+	&.is-selected:not(.is-dragging-blocks)::before {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
+
+	.block-editor-block-list__block {
+		pointer-events: none;
+	}
+
+	.block-editor-iframe__body.is-zoomed-out &::before {
+		// Unfortunately because of the vw unit, this is not always going to be exact
+		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
+		width: calc(100vw);
+		left: calc(( 100% - 100vw ) / 2);
+	}
 }

package/src/components/block-draggable/draggable-chip.js

@@ -13,7 +13,10 @@ import BlockIcon from '../block-icon';
 export default function BlockDraggableChip( { count, icon } ) {
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
-			<div className="block-editor-block-draggable-chip">
+			<div
+				className="block-editor-block-draggable-chip"
+				data-testid="block-draggable-chip"
+			>
 				<Flex
 					justify="center"
 					className="block-editor-block-draggable-chip__content"

package/src/components/block-edit/edit.js

@@ -59,7 +59,11 @@ export const Edit = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames( generatedClassName, attributes.className );
+	const className = classnames(
+		generatedClassName,
+		attributes.className,
+		props.className
+	);
 
 	return (
 		<Component { ...props } context={ context } className={ className } />

package/src/components/block-edit/test/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -28,13 +28,14 @@ describe( 'Edit', () => {
 	} );
 
 	it( 'should return null if block type not defined', () => {
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		const { container } = render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should use edit implementation of block', () => {
-		const edit = () => <div />;
+		const edit = () => <div data-testid="foo-bar" />;
+
 		registerBlockType( 'core/test-block', {
 			save: noop,
 			category: 'text',
@@ -42,29 +43,33 @@ describe( 'Edit', () => {
 			edit,
 		} );
 
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.exists( edit ) ).toBe( true );
+		expect( screen.getByTestId( 'foo-bar' ) ).toBeVisible();
 	} );
 
 	it( 'should use save implementation of block as fallback', () => {
-		const save = () => <div />;
+		const save = () => <div data-testid="foo-bar" />;
+
 		registerBlockType( 'core/test-block', {
 			save,
 			category: 'text',
 			title: 'block title',
 		} );
 
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.exists( save ) ).toBe( true );
+		expect( screen.getByTestId( 'foo-bar' ) ).toBeVisible();
 	} );
 
 	it( 'should combine the default class name with a custom one', () => {
-		const edit = ( { className } ) => <div className={ className } />;
+		const edit = ( { className } ) => (
+			<div data-testid="foo-bar" className={ className } />
+		);
 		const attributes = {
 			className: 'my-class',
 		};
+
 		registerBlockType( 'core/test-block', {
 			edit,
 			save: noop,
@@ -72,14 +77,11 @@ describe( 'Edit', () => {
 			title: 'block title',
 		} );
 
-		const wrapper = shallow(
-			<Edit name="core/test-block" attributes={ attributes } />
-		);
+		render( <Edit name="core/test-block" attributes={ attributes } /> );
 
-		expect( wrapper.find( edit ).hasClass( 'wp-block-test-block' ) ).toBe(
-			true
-		);
-		expect( wrapper.find( edit ).hasClass( 'my-class' ) ).toBe( true );
+		const editElement = screen.getByTestId( 'foo-bar' );
+		expect( editElement ).toHaveClass( 'wp-block-test-block' );
+		expect( editElement ).toHaveClass( 'my-class' );
 	} );
 
 	it( 'should assign context', () => {
@@ -92,13 +94,13 @@ describe( 'Edit', () => {
 			save: noop,
 		} );
 
-		const wrapper = mount(
+		const { container } = render(
 			<BlockContextProvider value={ { value: 'Ok' } }>
 				<Edit name="core/test-block" />
 			</BlockContextProvider>
 		);
 
-		expect( wrapper.html() ).toBe( 'Ok' );
+		expect( container ).toHaveTextContent( 'Ok' );
 	} );
 
 	describe( 'light wrapper', () => {
@@ -113,13 +115,13 @@ describe( 'Edit', () => {
 				save: noop,
 			} );
 
-			const wrapper = mount(
+			const { container } = render(
 				<BlockContextProvider value={ { value: 'Ok' } }>
 					<Edit name="core/test-block" />
 				</BlockContextProvider>
 			);
 
-			expect( wrapper.html() ).toBe( 'Ok' );
+			expect( container ).toHaveTextContent( 'Ok' );
 		} );
 	} );
 } );