@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

package/src/components/block-styles/index.js

@@ -6,14 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useLayoutEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,
-	Slot,
-	Fill,
+	Popover,
 } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -21,32 +21,10 @@ import {
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
-function BlockStylesPreviewPanelSlot( { scope } ) {
-	return <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;
-}
-
-function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
-	return (
-		<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>
-			<div { ...props }>{ children }</div>
-		</Fill>
-	);
-}
-
-// Top position (in px) of the Block Styles container
-// relative to the editor pane.
-// The value is the equivalent of the container's right position.
-const DEFAULT_POSITION_TOP = 16;
-
 const noop = () => {};
 
 // Block Styles component for the Settings Sidebar.
-function BlockStyles( {
-	clientId,
-	onSwitch = noop,
-	onHoverClassName = noop,
-	scope,
-} ) {
+function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 	const {
 		onSelect,
 		stylesToRender,
@@ -58,17 +36,8 @@ function BlockStyles( {
 		onSwitch,
 	} );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
-	const [ containerScrollTop, setContainerScrollTop ] = useState( 0 );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
-	useLayoutEffect( () => {
-		const scrollContainer = document.querySelector(
-			'.interface-interface-skeleton__content'
-		);
-		const scrollTop = scrollContainer?.scrollTop || 0;
-		setContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );
-	}, [ hoveredStyle ] );
-
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
@@ -127,23 +96,31 @@ function BlockStyles( {
 				} ) }
 			</div>
 			{ hoveredStyle && ! isMobileViewport && (
-				<BlockStylesPreviewPanelFill
-					scope={ scope }
-					className="block-editor-block-styles__preview-panel"
-					style={ { top: containerScrollTop } }
-					onMouseLeave={ () => styleItemHandler( null ) }
-				>
-					<BlockStylesPreviewPanel
-						activeStyle={ activeStyle }
-						className={ previewClassName }
-						genericPreviewBlock={ genericPreviewBlock }
-						style={ hoveredStyle }
-					/>
-				</BlockStylesPreviewPanelFill>
+				<Popover placement="left-start" offset={ 20 }>
+					<div
+						className="block-editor-block-styles__preview-panel"
+						onMouseLeave={ () => styleItemHandler( null ) }
+					>
+						<BlockStylesPreviewPanel
+							activeStyle={ activeStyle }
+							className={ previewClassName }
+							genericPreviewBlock={ genericPreviewBlock }
+							style={ hoveredStyle }
+						/>
+					</div>
+				</Popover>
 			) }
 		</div>
 	);
 }
 
-BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 export default BlockStyles;
+
+BlockStyles.Slot = () => {
+	deprecated( 'BlockStyles.Slot', {
+		version: '6.4',
+		since: '6.2',
+	} );
+
+	return null;
+};

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

@@ -1,43 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockSwitcherDropdownMenu should render disabled block switcher with multi block of different types when no transforms 1`] = `
-<ToolbarGroup>
-  <ForwardRef(ToolbarButton)
-    className="block-editor-block-switcher__no-switcher-icon"
-    disabled={true}
-    icon={
-      <React.Fragment>
-        <Memo(BlockIcon)
-          icon={
-            <SVG
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <Path
-                d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
-              />
-            </SVG>
-          }
-          showColors={true}
-        />
-      </React.Fragment>
-    }
-  />
-</ToolbarGroup>
+<div>
+  <div
+    class="components-toolbar"
+  >
+    <div>
+      <button
+        aria-label="Block Name"
+        class="components-button components-toolbar__control block-editor-block-switcher__no-switcher-icon has-icon"
+        data-toolbar-item="true"
+        disabled=""
+        type="button"
+      >
+        <span
+          class="block-editor-block-icon has-colors"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`BlockSwitcherDropdownMenu should render enabled block switcher with multi block when transforms exist 1`] = `
-<ToolbarGroup>
-  <ForwardRef(ToolbarItem)>
-    <Component />
-  </ForwardRef(ToolbarItem)>
-</ToolbarGroup>
+<div>
+  <div
+    class="components-toolbar"
+  >
+    <div
+      class="components-dropdown components-dropdown-menu block-editor-block-switcher"
+      tabindex="-1"
+    >
+      <button
+        aria-describedby="components-button__description-2"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Block Name"
+        class="components-button components-dropdown-menu__toggle has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <span
+          class="block-editor-block-icon block-editor-block-switcher__toggle has-colors"
+        />
+      </button>
+      <div
+        class="components-visually-hidden emotion-0 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="VisuallyHidden"
+        style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+      >
+        <span
+          id="components-button__description-2"
+        >
+          Change type of 2 blocks
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`BlockSwitcherDropdownMenu should render switcher with blocks 1`] = `
-<ToolbarGroup>
-  <ForwardRef(ToolbarItem)>
-    <Component />
-  </ForwardRef(ToolbarItem)>
-</ToolbarGroup>
+<div>
+  <div
+    class="components-toolbar"
+  >
+    <div
+      class="components-dropdown components-dropdown-menu block-editor-block-switcher"
+      tabindex="-1"
+    >
+      <button
+        aria-describedby="components-button__description-0"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Block Name"
+        class="components-button components-dropdown-menu__toggle has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <span
+          class="block-editor-block-icon block-editor-block-switcher__toggle has-colors"
+        />
+      </button>
+      <div
+        class="components-visually-hidden emotion-0 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="VisuallyHidden"
+        style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+      >
+        <span
+          id="components-button__description-0"
+        >
+          Block Name: Change block type or style
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/components/block-switcher/test/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
 import { copy } from '@wordpress/icons';
 
 /**
@@ -17,23 +17,25 @@ import { copy } from '@wordpress/icons';
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () =>
+	jest.fn().mockReturnValue( 'Block Name' )
+);
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {
 		useSelect.mockImplementation( () => ( {} ) );
-		const wrapper = shallow( <BlockSwitcher /> );
-		expect( wrapper.html() ).toBeNull();
+		const { container } = render( <BlockSwitcher /> );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should not render block switcher with null blocks', () => {
 		useSelect.mockImplementation( () => ( { blocks: [ null ] } ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcher
 				clientIds={ [ 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9' ] }
 			/>
 		);
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 } );
 describe( 'BlockSwitcherDropdownMenu', () => {
@@ -122,10 +124,10 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			],
 			canRemove: true,
 		} ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
@@ -133,12 +135,12 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			possibleBlockTransformations: [],
 			icon: copy,
 		} ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcherDropdownMenu
 				blocks={ [ headingBlock1, textBlock ] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render enabled block switcher with multi block when transforms exist', () => {
@@ -149,12 +151,12 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			],
 			canRemove: true,
 		} ) );
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockSwitcherDropdownMenu
 				blocks={ [ headingBlock1, headingBlock2 ] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'Dropdown', () => {
@@ -166,70 +168,128 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				canRemove: true,
 			} ) );
 		} );
-		const getDropdown = () =>
-			mount(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			).find( 'Dropdown' );
 
 		test( 'should dropdown exist', () => {
-			expect( getDropdown() ).toHaveLength( 1 );
-		} );
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
 
-		describe( '.renderToggle', () => {
-			const onToggleStub = jest.fn();
-			const mockKeyDown = {
-				preventDefault: () => {},
-				code: 'ArrowDown',
-			};
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			).toBeVisible();
+		} );
 
-			afterEach( () => {
-				onToggleStub.mockReset();
+		test( 'should simulate a keydown event, which should open transform toggle.', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
 
-			test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => {
-				const toggleClosed = mount(
-					getDropdown().props().renderToggle( {
-						onToggle: onToggleStub,
-						isOpen: false,
-					} )
-				);
-				const iconButtonClosed = toggleClosed.find( Button );
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'menu', {
+					name: 'Block Name',
+				} )
+			).not.toBeInTheDocument();
+
+			await user.type(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} ),
+				'[ArrowDown]'
+			);
 
-				iconButtonClosed.simulate( 'keydown', mockKeyDown );
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: true,
+				} )
+			).toBeVisible();
 
-				expect( onToggleStub ).toHaveBeenCalledTimes( 1 );
+			const menu = screen.getByRole( 'menu', {
+				name: 'Block Name',
 			} );
+			expect( menu ).toBeInTheDocument();
+			expect( menu ).not.toBeVisible();
+		} );
 
-			test( 'should simulate a click event, which should call onToggle.', () => {
-				const toggleOpen = mount(
-					getDropdown().props().renderToggle( {
-						onToggle: onToggleStub,
-						isOpen: true,
-					} )
-				);
-				const iconButtonOpen = toggleOpen.find( Button );
+		test( 'should simulate a click event, which should call onToggle.', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'menu', {
+					name: 'Block Name',
+				} )
+			).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			);
 
-				iconButtonOpen.simulate( 'keydown', mockKeyDown );
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: true,
+				} )
+			).toBeVisible();
 
-				expect( onToggleStub ).toHaveBeenCalledTimes( 0 );
+			const menu = screen.getByRole( 'menu', {
+				name: 'Block Name',
 			} );
+			expect( menu ).toBeInTheDocument();
+			expect( menu ).not.toBeVisible();
 		} );
 
-		describe( '.renderContent', () => {
-			test( 'should create the transform items for the chosen block. A heading block will have 3 items', () => {
-				const onCloseStub = jest.fn();
-				const content = shallow(
-					<div>
-						{ getDropdown()
-							.props()
-							.renderContent( { onClose: onCloseStub } ) }
-					</div>
-				);
-				const blockList = content.find( 'BlockTransformationsMenu' );
-				expect(
-					blockList.prop( 'possibleBlockTransformations' )
-				).toHaveLength( 1 );
+		test( 'should create the transform items for the chosen block.', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
+
+			render(
+				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: false,
+				} )
+			);
+
+			expect(
+				within(
+					screen.getByRole( 'menu', {
+						name: 'Block Name',
+					} )
+				).getByRole( 'menuitem' )
+			).toBeInTheDocument();
 		} );
 	} );
 } );

package/src/components/block-toolbar/index.js

@@ -34,7 +34,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		blockClientId,
 		blockType,
 		hasFixedToolbar,
-		hasReducedUI,
+		isDistractionFree,
 		isValid,
 		isVisual,
 		isContentLocked,
@@ -60,7 +60,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
 			hasFixedToolbar: settings.hasFixedToolbar,
-			hasReducedUI: settings.hasReducedUI,
+			isDistractionFree: settings.isDistractionFree,
 			rootClientId: blockRootClientId,
 			isValid: selectedBlockClientIds.every( ( id ) =>
 				isBlockValid( id )
@@ -82,7 +82,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		{
 			ref: nodeRef,
 			onChange( isFocused ) {
-				if ( isFocused && hasReducedUI ) {
+				if ( isFocused && isDistractionFree ) {
 					return;
 				}
 				toggleBlockHighlight( blockClientId, isFocused );
@@ -132,9 +132,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 							) }
 							<BlockMover
 								clientIds={ blockClientIds }
-								hideDragHandle={
-									hideDragHandle || hasReducedUI
-								}
+								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
 					) }

package/src/components/block-toolbar/style.scss

@@ -137,15 +137,6 @@
 		padding-right: 6px;
 	}
 
-	// Switcher overrides.
-	.block-editor-block-switcher {
-		border-right: 1px solid $gray-900;
-
-		.components-dropdown-menu__toggle {
-			margin-left: 0;
-		}
-	}
-
 	.block-editor-block-switcher .components-dropdown-menu__toggle,
 	.block-editor-block-switcher__no-switcher-icon {
 		.block-editor-block-icon {
@@ -162,12 +153,22 @@
 		}
 	}
 
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+		width: auto;
+	}
+
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		margin-left: 0;
+		border-left: 1px solid $gray-900;
+		margin-left: 6px;
+		margin-right: -6px;
 		white-space: nowrap;
 	}
 
+	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+		border-left-color: $gray-200;
+	}
+
 	.block-editor-block-mover-button {
 		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
 		padding-left: $grid-unit !important;
@@ -175,17 +176,40 @@
 	}
 
 	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 6px !important;
-		padding-right: 6px !important;
-		border-right: 1px solid $gray-900;
+		padding-left: 12px !important;
+		padding-right: 12px !important;
+	}
+
+	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
+		border-width: 0;
 	}
 
 	@include break-small() {
 		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
 		.is-up-button.is-up-button.is-up-button {
-			border-bottom: 1px solid $gray-900;
 			margin-right: 0;
 			border-radius: 0;
+			order: 1;
+		}
+
+		.block-editor-block-mover__move-button-container {
+			border-left: 1px solid $gray-900;
+
+			&::before {
+				content: "";
+				display: block;
+				height: 1px;
+				background: $gray-900;
+				order: 2;
+			}
+		}
+
+		.is-down-button.is-down-button.is-down-button {
+			order: 3;
+		}
+
+		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
+			background: $gray-300;
 		}
 	}
 

package/src/components/block-tools/back-compat.js

@@ -23,6 +23,7 @@ export default function BlockToolsBackCompat( { children } ) {
 	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
 		alternative: 'wp.blockEditor.BlockTools',
 		since: '5.8',
+		version: '6.3',
 	} );
 
 	return (