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

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,

package/src/components/warning/test/__snapshots__/index.js.snap

@@ -1,25 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Warning should match snapshot 1`] = `
-<div
-  style={
-    Object {
-      "all": "initial",
-      "display": "contents",
-    }
-  }
->
+<div>
   <div
-    className="block-editor-warning"
+    style="display: contents; all: initial;"
   >
     <div
-      className="block-editor-warning__contents"
+      class="block-editor-warning"
     >
-      <p
-        className="block-editor-warning__message"
+      <div
+        class="block-editor-warning__contents"
       >
-        error
-      </p>
+        <p
+          class="block-editor-warning__message"
+        >
+          error
+        </p>
+      </div>
     </div>
   </div>
 </div>

package/src/components/warning/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,47 +11,49 @@ import Warning from '../index';
 
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
-		const wrapper = shallow( <Warning>error</Warning> );
+		const { container } = render( <Warning>error</Warning> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should have valid class', () => {
-		const wrapper = shallow( <Warning /> );
-
-		expect( wrapper.find( '.block-editor-warning' ) ).toHaveLength( 1 );
-		expect( wrapper.find( '.block-editor-warning__actions' ) ).toHaveLength(
-			0
-		);
-		expect( wrapper.find( '.block-editor-warning__hidden' ) ).toHaveLength(
-			0
-		);
-	} );
-
-	it( 'should show child error message element', () => {
-		const wrapper = shallow(
-			<Warning actions={ <button /> }>Message</Warning>
+	it( 'should show primary actions', () => {
+		render(
+			<Warning actions={ <button>Click me</button> }>Message</Warning>
 		);
 
-		const actions = wrapper.find( '.block-editor-warning__actions' );
-		const action = actions.childAt( 0 );
+		expect(
+			screen.getByRole( 'button', { name: 'Click me' } )
+		).toBeVisible();
 
-		expect( actions ).toHaveLength( 1 );
-		expect( action.hasClass( 'block-editor-warning__action' ) ).toBe(
-			true
-		);
-		expect( action.childAt( 0 ).type() ).toBe( 'button' );
+		expect(
+			screen.queryByRole( 'button', { name: 'More options' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'should show hidden actions', () => {
-		const wrapper = shallow(
+	it( 'should show hidden secondary actions', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
 			<Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>
 				Message
 			</Warning>
 		);
 
-		const actions = wrapper.find( '.block-editor-warning__secondary' );
+		const secondaryActionsBtn = screen.getByRole( 'button', {
+			name: 'More options',
+		} );
+
+		expect( secondaryActionsBtn ).toBeVisible();
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'test' } )
+		).not.toBeInTheDocument();
+
+		await user.click( secondaryActionsBtn );
 
-		expect( actions ).toHaveLength( 1 );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'test' } )
+		).toBeInTheDocument();
 	} );
 } );

package/src/components/writing-flow/index.js

@@ -51,12 +51,14 @@ export function useWritingFlow() {
 						return;
 					}
 
+					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
 
 					return () => {
+						node.classList.remove( 'has-multi-selection' );
 						node.removeAttribute( 'aria-label' );
 					};
 				},

package/src/components/writing-flow/use-select-all.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -37,28 +32,28 @@ export default function useSelectAll() {
 				return;
 			}
 
+			event.preventDefault();
+
 			const [ firstSelectedClientId ] = selectedClientIds;
 			const rootClientId = getBlockRootClientId( firstSelectedClientId );
-			let blockClientIds = getBlockOrder( rootClientId );
+			const blockClientIds = getBlockOrder( rootClientId );
 
 			// If we have selected all sibling nested blocks, try selecting up a
 			// level. See: https://github.com/WordPress/gutenberg/pull/31859/
 			if ( selectedClientIds.length === blockClientIds.length ) {
-				blockClientIds = getBlockOrder(
-					getBlockRootClientId( rootClientId )
-				);
-			}
-
-			const firstClientId = first( blockClientIds );
-			const lastClientId = last( blockClientIds );
-
-			if ( firstClientId === lastClientId ) {
-				selectBlock( firstClientId );
+				if ( rootClientId ) {
+					node.ownerDocument.defaultView
+						.getSelection()
+						.removeAllRanges();
+					selectBlock( rootClientId );
+				}
 				return;
 			}
 
-			multiSelect( firstClientId, lastClientId );
-			event.preventDefault();
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ]
+			);
 		}
 
 		node.addEventListener( 'keydown', onKeyDown );

package/src/hooks/align.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has, without } from 'lodash';
+import { without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,12 +14,14 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
+import { store as blockEditorStore } from '../store';
 
 /**
  * An array which includes all possible valid alignments,
@@ -87,7 +89,7 @@ export function getValidAlignments(
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'align', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.align ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, 'align' ) ) {
@@ -116,6 +118,7 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		const blockEdit = <BlockEdit { ...props } />;
 		const { name: blockName } = props;
 		// Compute the block valid alignments by taking into account,
 		// if the theme supports wide alignments or not and the layout's
@@ -129,6 +132,17 @@ export const withToolbarControls = createHigherOrderComponent(
 		const validAlignments = useAvailableAlignments(
 			blockAllowedAlignments
 		).map( ( { name } ) => name );
+		const isContentLocked = useSelect(
+			( select ) => {
+				return select(
+					blockEditorStore
+				).__unstableGetContentLockingParent( props.clientId );
+			},
+			[ props.clientId ]
+		);
+		if ( ! validAlignments.length || isContentLocked ) {
+			return blockEdit;
+		}
 
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
@@ -143,19 +157,14 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return (
 			<>
-				{ !! validAlignments.length && (
-					<BlockControls
-						group="block"
-						__experimentalShareWithChildBlocks
-					>
-						<BlockAlignmentControl
-							value={ props.attributes.align }
-							onChange={ updateAlignment }
-							controls={ validAlignments }
-						/>
-					</BlockControls>
-				) }
-				<BlockEdit { ...props } />
+				<BlockControls group="block" __experimentalShareWithChildBlocks>
+					<BlockAlignmentControl
+						value={ props.attributes.align }
+						onChange={ updateAlignment }
+						controls={ validAlignments }
+					/>
+				</BlockControls>
+				{ blockEdit }
 			</>
 		);
 	},

package/src/hooks/anchor.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +37,7 @@ const ANCHOR_SCHEMA = {
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, 'anchor' ) ) {

package/src/hooks/color-panel.js

@@ -26,9 +26,10 @@ export default function ColorPanel( {
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const ref = useBlockRef( clientId );
+	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
 	useEffect( () => {
-		if ( ! enableContrastChecking ) {
+		if ( ! enableContrastChecking || ! definedColors.length ) {
 			return;
 		}