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

package/src/components/tool-selector/index.js

@@ -31,15 +31,11 @@ const selectIcon = (
 );
 
 function ToolSelector( props, ref ) {
-	const isNavigationTool = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
+	const mode = useSelect(
+		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { setNavigationMode } = useDispatch( blockEditorStore );
-
-	const onSwitchMode = ( mode ) => {
-		setNavigationMode( mode === 'edit' ? false : true );
-	};
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	return (
 		<Dropdown
@@ -47,7 +43,7 @@ function ToolSelector( props, ref ) {
 				<Button
 					{ ...props }
 					ref={ ref }
-					icon={ isNavigationTool ? selectIcon : editIcon }
+					icon={ mode === 'navigation' ? selectIcon : editIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -60,8 +56,10 @@ function ToolSelector( props, ref ) {
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
 						<MenuItemsChoice
-							value={ isNavigationTool ? 'select' : 'edit' }
-							onSelect={ onSwitchMode }
+							value={
+								mode === 'navigation' ? 'navigation' : 'edit'
+							}
+							onSelect={ __unstableSetEditorMode }
 							choices={ [
 								{
 									value: 'edit',
@@ -73,7 +71,7 @@ function ToolSelector( props, ref ) {
 									),
 								},
 								{
-									value: 'select',
+									value: 'navigation',
 									label: (
 										<>
 											{ selectIcon }

package/src/components/url-input/test/button.js

@@ -1,91 +1,165 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import TestUtils from 'react-dom/test-utils';
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
-import URLInput from '../';
 import URLInputButton from '../button';
 
-import '../../../store';
-
 describe( 'URLInputButton', () => {
-	const clickEditLink = ( wrapper ) =>
-		wrapper
-			.find( 'ForwardRef(Button).components-toolbar__control' )
-			.simulate( 'click' );
-
-	it( 'should have a valid class name in the wrapper tag', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.hasClass( 'block-editor-url-input__button' ) ).toBe(
-			true
-		);
-	} );
-	it( 'should have isPressed props set to false when url prop not defined', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.find( 'ForwardRef(Button)' ).prop( 'isPressed' ) ).toBe(
-			false
-		);
-	} );
-	it( 'should have isPressed prop set to true if url prop defined', () => {
-		const wrapper = shallow( <URLInputButton url="https://example.com" /> );
-		expect( wrapper.find( 'ForwardRef(Button)' ).prop( 'isPressed' ) ).toBe(
-			true
-		);
+	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
+		render( <URLInputButton /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Edit link',
+				pressed: true,
+			} )
+		).not.toBeInTheDocument();
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		).toBeVisible();
 	} );
-	it( 'should have hidden form by default', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.find( 'form' ) ).toHaveLength( 0 );
-		expect( wrapper.state().expanded ).toBe( false );
+
+	it( 'should render an `Edit link` button and be pressed when `url` is provided', () => {
+		render( <URLInputButton url="https://example.com" /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		).not.toBeInTheDocument();
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Edit link',
+				pressed: true,
+			} )
+		).toBeVisible();
 	} );
-	it( 'should have visible form when Edit Link button clicked', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		clickEditLink( wrapper );
-		expect( wrapper.find( 'form' ) ).toHaveLength( 1 );
-		expect( wrapper.state().expanded ).toBe( true );
+
+	it( 'should not render a form by default', () => {
+		render( <URLInputButton /> );
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Submit' } )
+		).not.toBeInTheDocument();
 	} );
-	it( 'should call onChange function once when value changes once', () => {
-		const onChangeMock = jest.fn();
-		const wrapper = shallow( <URLInputButton onChange={ onChangeMock } /> );
-		clickEditLink( wrapper );
-		wrapper.find( URLInput ).simulate( 'change' );
-		expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+
+	it( 'should render a form when `Insert link` button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render( <URLInputButton /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit' } )
+		).toBeVisible();
 	} );
-	it( 'should call onChange function twice when value changes twice', () => {
+
+	it( 'should call `onChange` function once per each value change', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onChangeMock = jest.fn();
-		const wrapper = shallow( <URLInputButton onChange={ onChangeMock } /> );
-		clickEditLink( wrapper );
-		wrapper.find( URLInput ).simulate( 'change' );
-		wrapper.find( URLInput ).simulate( 'change' );
-		expect( onChangeMock ).toHaveBeenCalledTimes( 2 );
+
+		render( <URLInputButton onChange={ onChangeMock } /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		);
+
+		// Type something into the URL field.
+		const urlField = screen.getByRole( 'combobox' );
+		const val1 = 'foo';
+		const val2 = 'barbaz';
+		await user.type( urlField, val1 );
+		await user.type( urlField, val2 );
+
+		expect( onChangeMock ).toHaveBeenCalledTimes(
+			val1.length + val2.length
+		);
 	} );
-	it( 'should close the form when user clicks Close button', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		clickEditLink( wrapper );
-		expect( wrapper.state().expanded ).toBe( true );
-		wrapper.find( '.block-editor-url-input__back' ).simulate( 'click' );
-		expect( wrapper.state().expanded ).toBe( false );
+
+	it( 'should close the form when the user clicks the `Close` button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render( <URLInputButton /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit' } )
+		).toBeVisible();
+
+		// Click the button to close the form.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Close',
+			} )
+		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Submit' } )
+		).not.toBeInTheDocument();
 	} );
-	it( 'should close the form when user submits it', () => {
-		const wrapper = TestUtils.renderIntoDocument( <URLInputButton /> );
-		const buttonElement = () =>
-			TestUtils.scryRenderedDOMComponentsWithClass(
-				wrapper,
-				'components-toolbar__control'
-			);
-		const formElement = () =>
-			TestUtils.scryRenderedDOMComponentsWithTag( wrapper, 'form' );
-		TestUtils.Simulate.click( buttonElement().shift() );
-		expect( wrapper.state.expanded ).toBe( true );
-		TestUtils.Simulate.submit( formElement().shift() );
-		expect( wrapper.state.expanded ).toBe( false );
-		ReactDOM.unmountComponentAtNode(
-			// eslint-disable-next-line react/no-find-dom-node
-			ReactDOM.findDOMNode( wrapper ).parentNode
+
+	it( 'should close the form when user submits it', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const onChangeMock = jest.fn();
+
+		render( <URLInputButton onChange={ onChangeMock } /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
 		);
+
+		// Type something into the URL field.
+		await user.type( screen.getByRole( 'combobox' ), 'foo' );
+
+		// Submit the form.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Submit',
+			} )
+		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Submit' } )
+		).not.toBeInTheDocument();
 	} );
 } );

package/src/components/url-popover/index.js

@@ -33,7 +33,7 @@ function URLPopover( {
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
 			position={ position }
-			__unstableShift
+			shift
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -1,103 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`URLPopover matches the snapshot in its default state 1`] = `
-<ForwardRef(Popover)
-  __unstableShift={true}
-  className="block-editor-url-popover"
-  focusOnMount="firstElement"
-  position="bottom center"
->
-  <div
-    className="block-editor-url-popover__input-container"
-  >
+<div>
+  <span>
     <div
-      className="block-editor-url-popover__row"
+      class="components-popover block-editor-url-popover"
+      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
+      tabindex="-1"
     >
-      <div>
-        Editor
-      </div>
-      <ForwardRef(Button)
-        aria-expanded={false}
-        className="block-editor-url-popover__settings-toggle"
-        icon={
-          <SVG
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="components-popover__content"
+      >
+        <div
+          class="block-editor-url-popover__input-container"
+        >
+          <div
+            class="block-editor-url-popover__row"
           >
-            <Path
-              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-            />
-          </SVG>
-        }
-        label="Link settings"
-        onClick={[Function]}
-      />
+            <div>
+              Editor
+            </div>
+            <button
+              aria-expanded="false"
+              aria-label="Link settings"
+              class="components-button block-editor-url-popover__settings-toggle has-icon"
+              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="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-</ForwardRef(Popover)>
+  </span>
+</div>
 `;
 
 exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
-<ForwardRef(Popover)
-  __unstableShift={true}
-  className="block-editor-url-popover"
-  focusOnMount="firstElement"
-  position="bottom center"
->
-  <div
-    className="block-editor-url-popover__input-container"
-  >
+<div>
+  <span>
     <div
-      className="block-editor-url-popover__row"
+      class="components-popover block-editor-url-popover"
+      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0; left: 0px; top: 0px;"
+      tabindex="-1"
     >
-      <div>
-        Editor
-      </div>
-      <ForwardRef(Button)
-        aria-expanded={true}
-        className="block-editor-url-popover__settings-toggle"
-        icon={
-          <SVG
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="components-popover__content"
+        style="max-height: 0px; overflow: auto;"
+      >
+        <div
+          class="block-editor-url-popover__input-container"
+        >
+          <div
+            class="block-editor-url-popover__row"
           >
-            <Path
-              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-            />
-          </SVG>
-        }
-        label="Link settings"
-        onClick={[Function]}
-      />
-    </div>
-    <div
-      className="block-editor-url-popover__row block-editor-url-popover__settings"
-    >
-      <div>
-        Settings
+            <div>
+              Editor
+            </div>
+            <button
+              aria-expanded="true"
+              aria-label="Link settings"
+              class="components-button block-editor-url-popover__settings-toggle has-icon"
+              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="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
+                />
+              </svg>
+            </button>
+          </div>
+          <div
+            class="block-editor-url-popover__row block-editor-url-popover__settings"
+          >
+            <div>
+              Settings
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</ForwardRef(Popover)>
+  </span>
+</div>
 `;
 
 exports[`URLPopover matches the snapshot when there are no settings 1`] = `
-<ForwardRef(Popover)
-  __unstableShift={true}
-  className="block-editor-url-popover"
-  focusOnMount="firstElement"
-  position="bottom center"
->
-  <div
-    className="block-editor-url-popover__input-container"
-  >
+<div>
+  <span>
     <div
-      className="block-editor-url-popover__row"
+      class="components-popover block-editor-url-popover"
+      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
+      tabindex="-1"
     >
-      <div>
-        Editor
+      <div
+        class="components-popover__content"
+      >
+        <div
+          class="block-editor-url-popover__input-container"
+        >
+          <div
+            class="block-editor-url-popover__row"
+          >
+            <div>
+              Editor
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</ForwardRef(Popover)>
+  </span>
+</div>
 `;

package/src/components/url-popover/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
@@ -10,38 +11,39 @@ import URLPopover from '../';
 
 describe( 'URLPopover', () => {
 	it( 'matches the snapshot in its default state', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<URLPopover renderSettings={ () => <div>Settings</div> }>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'matches the snapshot when the settings are toggled open', () => {
-		const wrapper = shallow(
+	it( 'matches the snapshot when the settings are toggled open', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const { container } = render(
 			<URLPopover renderSettings={ () => <div>Settings</div> }>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
-		const toggleButton = wrapper.find(
-			'.block-editor-url-popover__settings-toggle'
+		await user.click(
+			screen.getByRole( 'button', { name: 'Link settings' } )
 		);
-		expect( toggleButton ).toHaveLength( 1 );
-		toggleButton.simulate( 'click' );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'matches the snapshot when there are no settings', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<URLPopover>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/use-block-drop-zone/index.js

@@ -92,10 +92,21 @@ export default function useBlockDropZone( {
 } = {} ) {
 	const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
 
-	const isLockedAll = useSelect(
+	const isDisabled = useSelect(
 		( select ) => {
-			const { getTemplateLock } = select( blockEditorStore );
-			return getTemplateLock( targetRootClientId ) === 'all';
+			const {
+				getTemplateLock,
+				__unstableIsWithinBlockOverlay,
+				__unstableHasActiveBlockOverlayActive,
+			} = select( blockEditorStore );
+			const templateLock = getTemplateLock( targetRootClientId );
+			return (
+				[ 'all', 'noContent' ].some(
+					( lock ) => lock === templateLock
+				) ||
+				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
+				__unstableIsWithinBlockOverlay( targetRootClientId )
+			);
 		},
 		[ targetRootClientId ]
 	);
@@ -127,7 +138,7 @@ export default function useBlockDropZone( {
 	);
 
 	return useDropZone( {
-		isDisabled: isLockedAll,
+		isDisabled,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being

package/src/components/use-moving-animation/index.js

@@ -109,7 +109,7 @@ function useMovingAnimation( {
 			return;
 		}
 
-		ref.current.style.transform = '';
+		ref.current.style.transform = undefined;
 		const destination = getAbsolutePosition( ref.current );
 
 		triggerAnimation();
@@ -119,38 +119,23 @@ function useMovingAnimation( {
 		} );
 	}, [ triggerAnimationOnChange ] );
 
-	// Only called when either the x or y value changes.
-	function onFrameChange( { x, y } ) {
+	function onChange( { value } ) {
 		if ( ! ref.current ) {
 			return;
 		}
-
-		const isMoving = x === 0 && y === 0;
-		ref.current.style.transformOrigin = isMoving ? '' : 'center';
-		ref.current.style.transform = isMoving
-			? ''
-			: `translate3d(${ x }px,${ y }px,0)`;
-		ref.current.style.zIndex = ! isSelected || isMoving ? '' : '1';
-
-		preserveScrollPosition();
-	}
-
-	// Called for every frame computed by useSpring.
-	function onChange( { value } ) {
 		let { x, y } = value;
 		x = Math.round( x );
 		y = Math.round( y );
+		const finishedMoving = x === 0 && y === 0;
+		ref.current.style.transformOrigin = 'center center';
+		ref.current.style.transform = finishedMoving
+			? undefined
+			: `translate3d(${ x }px,${ y }px,0)`;
+		ref.current.style.zIndex = isSelected ? '1' : '';
 
-		if ( x !== onChange.x || y !== onChange.y ) {
-			onFrameChange( { x, y } );
-			onChange.x = x;
-			onChange.y = y;
-		}
+		preserveScrollPosition();
 	}
 
-	onChange.x = 0;
-	onChange.y = 0;
-
 	useSpring( {
 		from: {
 			x: transform.x,