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

package/build-style/style.css

@@ -1764,10 +1764,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1777,7 +1777,7 @@
   pointer-events: none;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1788,7 +1788,7 @@
   background: currentColor;
   opacity: 0.1;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 
@@ -4335,7 +4335,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .tools-panel-item-spacing {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-row-gap: 4px;
+  align-items: center;
+  grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4350,19 +4351,28 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-row: 1/1;
   align-self: center;
 }
+.component-spacing-sizes-control .components-base-control__label {
+  margin-bottom: 0;
+  height: 16px;
+}
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  min-height: 30px;
   justify-content: left;
+  height: 16px;
+  margin-top: 12px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
-  margin-top: 0;
-  margin-left: 0;
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  grid-column: 1/1;
+  justify-self: left;
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control {
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   color: #757575;
-  font-size: 12px;
+  margin-bottom: 0;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
@@ -4377,6 +4387,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   justify-self: end;
   padding: 0;
 }
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+  height: 16px;
+}
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-right: 4px;
 }
@@ -4384,10 +4399,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 3/3;
   justify-self: end;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
   padding: 0;
   min-width: 24px;
+  height: 16px;
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
@@ -4397,7 +4413,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-left: 8px;
-  padding-right: 8px;
   height: 30px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
@@ -4405,11 +4420,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  padding-right: 8px;
-  height: 30px;
-}
-.component-spacing-sizes-control .components-range-control__wrapper {
-  margin-bottom: 0;
+  height: 40px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4426,12 +4437,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  margin-right: 4px;
-  grid-column: 1/1;
-  justify-self: left;
-  font-size: 12px;
-}
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.1.1-next.4d3b314fd5.0",
+	"version": "10.2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,33 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
-		"@wordpress/blob": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
-		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
-		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
-		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
-		"@wordpress/is-shallow-equal": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/shortcode": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/style-engine": "^1.1.1-next.4d3b314fd5.0",
-		"@wordpress/token-list": "^2.18.1-next.4d3b314fd5.0",
-		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
-		"@wordpress/warning": "^2.18.1-next.4d3b314fd5.0",
-		"@wordpress/wordcount": "^3.18.1-next.4d3b314fd5.0",
-		"change-case": "^4.1.2",
+		"@wordpress/a11y": "^3.19.0",
+		"@wordpress/api-fetch": "^6.16.0",
+		"@wordpress/blob": "^3.19.0",
+		"@wordpress/blocks": "^11.18.0",
+		"@wordpress/components": "^21.2.0",
+		"@wordpress/compose": "^5.17.0",
+		"@wordpress/data": "^7.3.0",
+		"@wordpress/date": "^4.19.0",
+		"@wordpress/deprecated": "^3.19.0",
+		"@wordpress/dom": "^3.19.0",
+		"@wordpress/element": "^4.17.0",
+		"@wordpress/hooks": "^3.19.0",
+		"@wordpress/html-entities": "^3.19.0",
+		"@wordpress/i18n": "^4.19.0",
+		"@wordpress/icons": "^9.10.0",
+		"@wordpress/is-shallow-equal": "^4.19.0",
+		"@wordpress/keyboard-shortcuts": "^3.17.0",
+		"@wordpress/keycodes": "^3.19.0",
+		"@wordpress/notices": "^3.19.0",
+		"@wordpress/rich-text": "^5.17.0",
+		"@wordpress/shortcode": "^3.19.0",
+		"@wordpress/style-engine": "^1.2.0",
+		"@wordpress/token-list": "^2.19.0",
+		"@wordpress/url": "^3.20.0",
+		"@wordpress/warning": "^2.19.0",
+		"@wordpress/wordcount": "^3.19.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -79,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

package/src/components/block-controls/slot.js

@@ -5,7 +5,7 @@ import { useContext } from '@wordpress/element';
 import {
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 
 /**
@@ -16,8 +16,8 @@ import groups from './groups';
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ].Slot;
-	const slot = useSlot( Slot.__unstableName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( Slot.__unstableName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

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

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import {
 	PanelBody,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -143,7 +143,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
-			getTemplateLock,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -157,12 +156,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock:
-				getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
-					? _selectedBlockClientId
-					: __unstableGetContentLockingParent(
-							_selectedBlockClientId
-					  ),
+			topLevelLockedBlock: __unstableGetContentLockingParent(
+				_selectedBlockClientId
+			),
 		};
 	}, [] );
 
@@ -284,8 +280,8 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 };
 
 const AdvancedControls = () => {
-	const slot = useSlot( InspectorAdvancedControls.slotName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

package/src/components/block-parent-selector/index.js

@@ -83,10 +83,10 @@ export default function BlockParentSelector() {
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select %s' ),
-					blockInformation.title
+					blockInformation?.title
 				) }
 				showTooltip
-				icon={ <BlockIcon icon={ blockInformation.icon } /> }
+				icon={ <BlockIcon icon={ blockInformation?.icon } /> }
 			/>
 		</div>
 	);

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

@@ -226,7 +226,7 @@ function BlockPopoverInbetween( {
 			forcePopoverRecompute
 		);
 		return () => {
-			previousElement.ownerDocument.defaultView.removeEventListener(
+			previousElement.ownerDocument.defaultView?.removeEventListener(
 				'resize',
 				forcePopoverRecompute
 			);

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

@@ -42,24 +42,15 @@ function BlockPopover(
 		ref,
 		usePopoverScroll( __unstableContentRef ),
 	] );
-	const style = useMemo( () => {
-		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
-	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
-		useReducer(
-			// Module is there to make sure that the counter doesn't overflow.
-			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
-			0
-		);
+	const [
+		popoverDimensionsRecomputeCounter,
+		forceRecomputePopoverDimensions,
+	] = useReducer(
+		// Module is there to make sure that the counter doesn't overflow.
+		( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+		0
+	);
 
 	// When blocks are moved up/down, they are animated to their new position by
 	// updating the `transform` property manually (i.e. without using CSS
@@ -74,7 +65,7 @@ function BlockPopover(
 		}
 
 		const observer = new window.MutationObserver(
-			forceRecomputePopoverAnchor
+			forceRecomputePopoverDimensions
 		);
 		observer.observe( selectedElement, { attributes: true } );
 
@@ -83,12 +74,36 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const style = useMemo( () => {
+		if (
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverDimensionsRecomputeCounter < 0 ||
+			! selectedElement ||
+			lastSelectedElement !== selectedElement
+		) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [
+		selectedElement,
+		lastSelectedElement,
+		__unstableRefreshSize,
+		popoverDimensionsRecomputeCounter,
+	] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
-			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
-			popoverAnchorRecomputeCounter < 0 ||
+			popoverDimensionsRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -132,7 +147,7 @@ function BlockPopover(
 		bottomClientId,
 		lastSelectedElement,
 		selectedElement,
-		popoverAnchorRecomputeCounter,
+		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
@@ -148,6 +163,7 @@ function BlockPopover(
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
+			placement="top-start"
 			resize={ false }
 			flip={ false }
 			shift

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, flow } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ import {
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -241,7 +241,7 @@ export function BlockSettingsDropdown( {
 								/>
 								{ canDuplicate && (
 									<MenuItem
-										onClick={ flow(
+										onClick={ pipe(
 											onClose,
 											onDuplicate,
 											updateSelectionAfterDuplicate
@@ -254,7 +254,7 @@ export function BlockSettingsDropdown( {
 								{ canInsertDefaultBlock && (
 									<>
 										<MenuItem
-											onClick={ flow(
+											onClick={ pipe(
 												onClose,
 												onInsertBefore
 											) }
@@ -263,7 +263,7 @@ export function BlockSettingsDropdown( {
 											{ __( 'Insert before' ) }
 										</MenuItem>
 										<MenuItem
-											onClick={ flow(
+											onClick={ pipe(
 												onClose,
 												onInsertAfter
 											) }
@@ -275,7 +275,7 @@ export function BlockSettingsDropdown( {
 								) }
 								{ canMove && ! onlyBlock && (
 									<MenuItem
-										onClick={ flow( onClose, onMoveTo ) }
+										onClick={ pipe( onClose, onMoveTo ) }
 									>
 										{ __( 'Move to' ) }
 									</MenuItem>
@@ -302,7 +302,7 @@ export function BlockSettingsDropdown( {
 							{ canRemove && (
 								<MenuGroup>
 									<MenuItem
-										onClick={ flow(
+										onClick={ pipe(
 											onClose,
 											onRemove,
 											updateSelectionAfterRemove

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>
 `;