@wordpress/block-editor 9.0.0 → 9.1.0

package/src/components/block-list/test/block-list-context.native.js

@@ -0,0 +1,253 @@
+/**
+ * External dependencies
+ */
+import { cloneDeep } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_BLOCK_LIST_CONTEXT,
+	deleteBlockLayoutByClientId,
+} from '../block-list-context.native';
+import {
+	BLOCKS_LAYOUTS_DATA,
+	DEEP_NESTED_ID,
+	GROUP_BLOCK_LAYOUT_DATA,
+	NESTED_WITH_INNER_BLOCKS_ID,
+	PARAGRAPH_BLOCK_LAYOUT_DATA,
+	ROOT_LEVEL_ID,
+} from './fixtures/block-list-context.native';
+
+describe( 'findBlockLayoutByClientId', () => {
+	it( "finds a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const blockRootLevel = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		expect( blockRootLevel ).toEqual(
+			expect.objectContaining( { clientId: ROOT_LEVEL_ID } )
+		);
+	} );
+
+	it( "finds a nested block's layout data with inner blocks", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const nestedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		expect( nestedBlock ).toEqual(
+			expect.objectContaining( { clientId: NESTED_WITH_INNER_BLOCKS_ID } )
+		);
+	} );
+
+	it( "finds a deep nested block's layout data", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const deepNestedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		expect( deepNestedBlock ).toEqual(
+			expect.objectContaining( { clientId: DEEP_NESTED_ID } )
+		);
+	} );
+} );
+
+describe( 'deleteBlockLayoutByClientId', () => {
+	it( "deletes a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a nested block's layout data with inner blocks", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a deep nested block's layout data", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+} );
+
+describe( 'updateBlocksLayouts', () => {
+	it( "adds a new block's layout data at root level with an empty object", () => {
+		const {
+			blocksLayouts,
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = cloneDeep( blocksLayouts );
+		const BLOCK_CLIENT_ID = PARAGRAPH_BLOCK_LAYOUT_DATA.clientId;
+
+		updateBlocksLayouts( currentBlockLayouts, PARAGRAPH_BLOCK_LAYOUT_DATA );
+
+		const findAddedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			BLOCK_CLIENT_ID
+		);
+
+		expect( findAddedBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: BLOCK_CLIENT_ID,
+				rootClientId: undefined,
+			} )
+		);
+	} );
+
+	it( "adds a new block's layout data at root level with inner blocks", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+		const PARENT_BLOCK_CLIENT_ID = GROUP_BLOCK_LAYOUT_DATA.clientId;
+
+		// Add parent block
+		updateBlocksLayouts( currentBlockLayouts, GROUP_BLOCK_LAYOUT_DATA );
+
+		const findAddedParentBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARENT_BLOCK_CLIENT_ID
+		);
+
+		expect( findAddedParentBlock ).toEqual(
+			expect.objectContaining( { clientId: PARENT_BLOCK_CLIENT_ID } )
+		);
+
+		// Add inner block to it's parent
+		updateBlocksLayouts( currentBlockLayouts, {
+			...PARAGRAPH_BLOCK_LAYOUT_DATA,
+			rootClientId: PARENT_BLOCK_CLIENT_ID,
+		} );
+
+		const findAddedInnerBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARAGRAPH_BLOCK_LAYOUT_DATA.clientId
+		);
+
+		expect( findAddedInnerBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: PARAGRAPH_BLOCK_LAYOUT_DATA.clientId,
+				rootClientId: PARENT_BLOCK_CLIENT_ID,
+			} )
+		);
+	} );
+
+	it( "adds a new block's layout data at deep level", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		// Add block layout data to it's parents inner blocks
+		updateBlocksLayouts( currentBlockLayouts, {
+			...PARAGRAPH_BLOCK_LAYOUT_DATA,
+			rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+		} );
+
+		const findAddedInnerBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARAGRAPH_BLOCK_LAYOUT_DATA.clientId
+		);
+
+		expect( findAddedInnerBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: PARAGRAPH_BLOCK_LAYOUT_DATA.clientId,
+				rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+			} )
+		);
+	} );
+
+	it( "deletes a block's layout data at root level", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		updateBlocksLayouts( currentBlockLayouts, {
+			shouldRemove: true,
+			clientId: ROOT_LEVEL_ID,
+		} );
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			ROOT_LEVEL_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a block's layout data at a deep level", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		updateBlocksLayouts( currentBlockLayouts, {
+			shouldRemove: true,
+			clientId: DEEP_NESTED_ID,
+		} );
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			DEEP_NESTED_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+} );

package/src/components/block-list/test/fixtures/block-list-context.native.js

@@ -0,0 +1,79 @@
+export const ROOT_LEVEL_ID = 'e59528f8-fb35-4ec1-aec6-5a065c236fa1';
+export const ROOT_LEVEL_WITH_INNER_BLOCKS_ID =
+	'72a9220f-4c3d-4b00-bae1-4506513f63d8';
+export const NESTED_WITH_INNER_BLOCKS_ID =
+	'9f3d1f1e-df85-485d-af63-dc8cb1b93cbc';
+export const DEEP_NESTED_ID = 'abec845a-e4de-43fb-96f7-80dc3d51ad7a';
+
+export const BLOCKS_LAYOUTS_DATA = {
+	[ ROOT_LEVEL_ID ]: {
+		clientId: ROOT_LEVEL_ID,
+		width: 390,
+		height: 54,
+		x: 0,
+		y: 83,
+		innerBlocks: {},
+	},
+	[ ROOT_LEVEL_WITH_INNER_BLOCKS_ID ]: {
+		clientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+		width: 390,
+		height: 386,
+		x: 0,
+		y: 137,
+		innerBlocks: {
+			'62839858-48b0-44ed-b834-1343a1357e54': {
+				clientId: '62839858-48b0-44ed-b834-1343a1357e54',
+				rootClientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+				width: 390,
+				height: 54,
+				x: 0,
+				y: 0,
+				innerBlocks: {},
+			},
+			[ NESTED_WITH_INNER_BLOCKS_ID ]: {
+				clientId: NESTED_WITH_INNER_BLOCKS_ID,
+				rootClientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+				width: 390,
+				height: 332,
+				x: 0,
+				y: 54,
+				innerBlocks: {
+					'435d62a4-afa7-457c-a894-b04390d7b447': {
+						clientId: '435d62a4-afa7-457c-a894-b04390d7b447',
+						rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+						width: 358,
+						height: 54,
+						x: 0,
+						y: 0,
+						innerBlocks: {},
+					},
+					[ DEEP_NESTED_ID ]: {
+						clientId: DEEP_NESTED_ID,
+						rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+						width: 358,
+						height: 98,
+						x: 0,
+						y: 54,
+						innerBlocks: {},
+					},
+				},
+			},
+		},
+	},
+};
+
+export const PARAGRAPH_BLOCK_LAYOUT_DATA = {
+	clientId: '22dda04f-4718-45b2-8cd2-36cedb9eae4d',
+	width: 390,
+	height: 98,
+	x: 0,
+	y: 83,
+};
+
+export const GROUP_BLOCK_LAYOUT_DATA = {
+	clientId: 'e18249d9-ec06-4f54-b71e-6ec59be5213e',
+	width: 390,
+	height: 164,
+	x: 0,
+	y: 83,
+};

package/src/components/block-list/use-block-props/index.js

@@ -12,7 +12,7 @@ import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
 } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useDisabled } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
@@ -50,14 +50,18 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
- * @param {Object}  props                    Optional. Props to pass to the element. Must contain
- *                                           the ref if one is defined.
- * @param {Object}  options                  Options for internal use only.
+ * @param {Object}  props                        Optional. Props to pass to the element. Must contain
+ *                                               the ref if one is defined.
+ * @param {Object}  options                      Options for internal use only.
  * @param {boolean} options.__unstableIsHtml
+ * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled.
  *
  * @return {Object} Props to pass to the element to mark as a block.
  */
-export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
+export function useBlockProps(
+	props = {},
+	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
+) {
 	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
 		BlockListBlockContext
 	);
@@ -125,6 +129,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
+		useDisabled( { isDisabled: ! __unstableIsDisabled } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();

package/src/components/block-list/use-in-between-inserter.js

@@ -110,7 +110,7 @@ export function useInBetweenInserter() {
 				// Don't show the insertion point if a parent block has an "overlay"
 				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
 				const parentOverlay = element.parentElement?.closest(
-					'.block-editor-block-content-overlay.overlay-active'
+					'.block-editor-block-content-overlay'
 				);
 				if ( parentOverlay ) {
 					return;

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

@@ -15,6 +15,7 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import styles from './style.scss';
 import BlockMover from '../block-mover';
+import BlockDraggable from '../block-draggable';
 import BlockActionsMenu from './block-actions-menu';
 import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
@@ -33,6 +34,7 @@ const BlockMobileToolbar = ( {
 	blockWidth,
 	anchorNodeRef,
 	isFullWidth,
+	draggingClientId,
 } ) => {
 	const [ fillsLength, setFillsLength ] = useState( null );
 	const [ appenderWidth, setAppenderWidth ] = useState( 0 );
@@ -73,7 +75,12 @@ const BlockMobileToolbar = ( {
 				/>
 			) }
 
-			<View style={ styles.spacer } />
+			<BlockDraggable
+				clientId={ clientId }
+				draggingClientId={ draggingClientId }
+			>
+				{ () => <View style={ styles.spacer } /> }
+			</BlockDraggable>
 
 			<BlockSettingsButton.Slot>
 				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }

package/src/components/block-mover/index.native.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Picker, ToolbarButton } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -36,6 +36,7 @@ export const BlockMover = ( {
 	isStackedHorizontally,
 } ) => {
 	const pickerRef = useRef();
+	const [ shouldPresentPicker, setShouldPresentPicker ] = useState( false );
 	const [ blockPageMoverState, setBlockPageMoverState ] = useState(
 		undefined
 	);
@@ -46,9 +47,17 @@ export const BlockMover = ( {
 		}
 
 		setBlockPageMoverState( direction );
-		pickerRef.current.presentPicker();
+		setShouldPresentPicker( true );
 	};
 
+	// Ensure that the picker is only presented after state updates.
+	useEffect( () => {
+		if ( shouldPresentPicker ) {
+			pickerRef.current?.presentPicker();
+			setShouldPresentPicker( false );
+		}
+	}, [ shouldPresentPicker ] );
+
 	const {
 		description: {
 			backwardButtonHint,
@@ -86,6 +95,15 @@ export const BlockMover = ( {
 		if ( option && option.onSelect ) option.onSelect();
 	};
 
+	const onLongPressMoveUp = useCallback(
+		showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ),
+		[]
+	);
+	const onLongPressMoveDown = useCallback(
+		showBlockPageMover( BLOCK_MOVER_DIRECTION_BOTTOM ),
+		[]
+	);
+
 	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
@@ -96,7 +114,7 @@ export const BlockMover = ( {
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
 				onClick={ onMoveUp }
-				onLongPress={ showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ) }
+				onLongPress={ onLongPressMoveUp }
 				icon={ backwardButtonIcon }
 				extraProps={ { hint: backwardButtonHint } }
 			/>
@@ -105,9 +123,7 @@ export const BlockMover = ( {
 				title={ ! isLast ? forwardButtonTitle : lastBlockTitle }
 				isDisabled={ isLast }
 				onClick={ onMoveDown }
-				onLongPress={ showBlockPageMover(
-					BLOCK_MOVER_DIRECTION_BOTTOM
-				) }
+				onLongPress={ onLongPressMoveDown }
 				icon={ forwardButtonIcon }
 				extraProps={ {
 					hint: forwardButtonHint,

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

@@ -34,6 +34,9 @@ Array [
       }
     >
       <View
+        collapsable={false}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         style={
           Object {
             "alignItems": "center",
@@ -89,6 +92,9 @@ Array [
       }
     >
       <View
+        collapsable={false}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         style={
           Object {
             "alignItems": "center",

package/src/components/block-popover/inbetween.js

@@ -107,6 +107,8 @@ function BlockPopoverInbetween( {
 					left: previousRect ? previousRect.right : nextRect.right,
 					right: previousRect ? previousRect.left : nextRect.left,
 					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					height: 0,
+					width: 0,
 					ownerDocument,
 				};
 			}
@@ -116,6 +118,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.left,
 				right: previousRect ? previousRect.right : nextRect.right,
 				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -126,6 +130,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.right,
 				right: nextRect ? nextRect.right : previousRect.left,
 				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -135,6 +141,8 @@ function BlockPopoverInbetween( {
 			left: previousRect ? previousRect.right : nextRect.left,
 			right: nextRect ? nextRect.left : previousRect.right,
 			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+			height: 0,
+			width: 0,
 			ownerDocument,
 		};
 	}, [ previousElement, nextElement ] );
@@ -155,7 +163,6 @@ function BlockPopoverInbetween( {
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
@@ -170,6 +177,7 @@ function BlockPopoverInbetween( {
 				'block-editor-block-popover',
 				props.className
 			) }
+			__unstableForcePosition
 		>
 			<div style={ style }>{ children }</div>
 		</Popover>

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Popover } from '@wordpress/components';
-import { getScrollContainer } from '@wordpress/dom';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -50,33 +49,19 @@ export default function BlockPopover( {
 		bottom: lastSelectedElement,
 	};
 
-	const { ownerDocument } = selectedElement;
-	const stickyBoundaryElement =
-		ownerDocument.defaultView.frameElement ||
-		getScrollContainer( selectedElement ) ||
-		ownerDocument.body;
-
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
-			__unstableStickyBoundaryElement={
-				__unstableCoverTarget ? undefined : stickyBoundaryElement
-			}
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableBoundaryParent
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
-			// Used to safeguard sticky position behavior against cases where it would permanently
-			// obscure specific sections of a block.
-			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
-			__unstableForcePosition={ __unstableCoverTarget }
+			__unstableForcePosition
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

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

@@ -12,6 +12,7 @@
 		width: max-content;
 		background: none;
 		border: none;
+		outline: none;
 		box-shadow: none;
 		overflow-y: visible;
 

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

@@ -7,10 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseDisabled as useDisabled,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
 

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

@@ -39,11 +39,6 @@
 	font-size: 14px;
 }
 
-// Indent the popover to match the button position.
-.block-editor-block-switcher__popover {
-	margin-left: 6px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
 
@@ -93,43 +88,11 @@
 	min-width: 300px;
 }
 
-// We keep the min width the same for the border to work.
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
-	min-width: auto;
-	display: flex;
-	background: $white;
-	padding: 0;
-
-	.components-menu-group {
-		margin: 0;
-	}
-}
-
-.block-editor-block-switcher__popover .components-popover__content {
-
-	.block-editor-block-styles {
-		margin: 0 -3px; // Remove the panel body padding while keeping it for the title.
-	}
-
-	// Hide the bottom border on the last panel so it stacks with the popover.
-	.components-panel__body {
-		border: 0;
-
-		// Elevate this so the hover style is visible.
-		position: relative;
-		z-index: 1;
-	}
-
-	.components-panel__body + .components-panel__body {
-		border-top: $border-width solid $gray-200;
-	}
-}
-
 .block-editor-block-switcher__popover__preview__parent {
 	.block-editor-block-switcher__popover__preview__container {
 		position: absolute;
 		top: -$grid-unit-15;
-		left: calc(100% + #{$grid-unit-40});
+		left: calc(100% + #{$grid-unit-20});
 	}
 }
 
@@ -138,7 +101,6 @@
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
-		margin-left: $grid-unit-05;
 		margin-top: $grid-unit-15 - $border-width;
 	}
 
@@ -151,6 +113,7 @@
 		border: $border-width solid $gray-900;
 		background: $white;
 		border-radius: $radius-block-ui;
+		outline: none;
 	}
 
 	.block-editor-block-switcher__preview {