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

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+
+// By default the toolbar sets the `shift` prop. If the user scrolls the page
+// down the toolbar will stay on screen by adopting a sticky position at the
+// top of the viewport.
+const DEFAULT_PROPS = {
+	flip: false,
+	shift: true,
+};
+
+// When there isn't enough height between the top of the block and the editor
+// canvas, the `shift` prop is set to `false`, as it will cause the block to be
+// obscured. The `flip` behavior is enabled, which positions the toolbar below
+// the block. This only happens if the block is smaller than the viewport, as
+// otherwise the toolbar will be off-screen.
+const RESTRICTED_HEIGHT_PROPS = {
+	flip: true,
+	shift: false,
+};
+
+/**
+ * Get the popover props for the block toolbar, determined by the space at the top of the canvas and the toolbar height.
+ *
+ * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
+ * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ *
+ * @return {Object} The popover props used to determine the position of the toolbar.
+ */
+function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+	if ( ! contentElement || ! selectedBlockElement ) {
+		return DEFAULT_PROPS;
+	}
+
+	const blockRect = selectedBlockElement.getBoundingClientRect();
+	const contentRect = contentElement.getBoundingClientRect();
+
+	// The document element's clientHeight represents the viewport height.
+	const viewportHeight =
+		contentElement.ownerDocument.documentElement.clientHeight;
+
+	const hasSpaceForToolbarAbove =
+		blockRect.top - contentRect.top > toolbarHeight;
+	const isBlockTallerThanViewport =
+		blockRect.height > viewportHeight - toolbarHeight;
+
+	if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
+		return DEFAULT_PROPS;
+	}
+
+	return RESTRICTED_HEIGHT_PROPS;
+}
+
+/**
+ * Determines the desired popover positioning behavior, returning a set of appropriate props.
+ *
+ * @param {Object}  elements
+ * @param {Element} elements.contentElement The DOM element that represents the editor content or canvas.
+ * @param {string}  elements.clientId       The clientId of the first selected block.
+ *
+ * @return {Object} The popover props used to determine the position of the toolbar.
+ */
+export default function useBlockToolbarPopoverProps( {
+	contentElement,
+	clientId,
+} ) {
+	const selectedBlockElement = useBlockElement( clientId );
+	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
+	const [ props, setProps ] = useState( () =>
+		getProps( contentElement, selectedBlockElement, toolbarHeight )
+	);
+	const blockIndex = useSelect(
+		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+		[ clientId ]
+	);
+
+	const popoverRef = useRefEffect( ( popoverNode ) => {
+		setToolbarHeight( popoverNode.offsetHeight );
+	}, [] );
+
+	const updateProps = useCallback(
+		() =>
+			setProps(
+				getProps( contentElement, selectedBlockElement, toolbarHeight )
+			),
+		[ contentElement, selectedBlockElement, toolbarHeight ]
+	);
+
+	// Update props when the block is moved. This also ensures the props are
+	// correct on initial mount, and when the selected block or content element
+	// changes (since the callback ref will update).
+	useLayoutEffect( updateProps, [ blockIndex, updateProps ] );
+
+	// Update props when the viewport is resized or the block is resized.
+	useLayoutEffect( () => {
+		if ( ! contentElement || ! selectedBlockElement ) {
+			return;
+		}
+
+		// Update the toolbar props on viewport resize.
+		const contentView = contentElement?.ownerDocument?.defaultView;
+		contentView?.addEventHandler?.( 'resize', updateProps );
+
+		// Update the toolbar props on block resize.
+		let resizeObserver;
+		const blockView = selectedBlockElement?.ownerDocument?.defaultView;
+		if ( blockView.ResizeObserver ) {
+			resizeObserver = new blockView.ResizeObserver( updateProps );
+			resizeObserver.observe( selectedBlockElement );
+		}
+
+		return () => {
+			contentView?.removeEventHandler?.( 'resize', updateProps );
+
+			if ( resizeObserver ) {
+				resizeObserver.disconnect();
+			}
+		};
+	}, [ updateProps, contentElement, selectedBlockElement ] );
+
+	return {
+		...props,
+		ref: popoverRef,
+	};
+}

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverInbetween from '../block-popover/inbetween';
+import { store as blockEditorStore } from '../../store';
+import Inserter from '../inserter';
+
+function ZoomOutModeInserters( { __unstableContentRef } ) {
+	const [ isReady, setIsReady ] = useState( false );
+	const blockOrder = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockOrder();
+	}, [] );
+
+	// Defer the initial rendering to avoid the jumps due to the animation.
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			setIsReady( true );
+		}, 500 );
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [] );
+
+	if ( ! isReady ) {
+		return null;
+	}
+
+	return blockOrder.map( ( clientId, index ) => {
+		if ( index === blockOrder.length - 1 ) {
+			return null;
+		}
+		return (
+			<BlockPopoverInbetween
+				key={ clientId }
+				previousClientId={ clientId }
+				nextClientId={ blockOrder[ index + 1 ] }
+				__unstableContentRef={ __unstableContentRef }
+			>
+				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
+					<Inserter
+						position="bottom center"
+						clientId={ blockOrder[ index + 1 ] }
+						__experimentalIsQuick
+					/>
+				</div>
+			</BlockPopoverInbetween>
+		);
+	} );
+}
+
+export default ZoomOutModeInserters;

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/button-block-appender/style.scss

@@ -31,3 +31,26 @@
 		color: $black;
 	}
 }
+
+// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
+.block-list-appender:only-child {
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
+		pointer-events: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			pointer-events: none;
+			@include placeholder-style();
+		}
+
+		.block-editor-inserter {
+			visibility: hidden;
+		}
+	}
+}

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',