@wordpress/block-editor 15.20.0 → 15.21.1

package/build-style/content-rtl.css

@@ -153,6 +153,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout {
   position: relative;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::-moz-selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::-moz-selection {
+  background: transparent;
+}
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;
 }
@@ -222,6 +225,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;
+     -moz-user-select: text;
           user-select: text;
 }
 
@@ -254,6 +258,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
           user-select: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
@@ -521,6 +526,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .is-dragging iframe {
   pointer-events: none;
 }
+.block-editor-block-list__layout .is-dragging::-moz-selection {
+  background: transparent !important;
+}
 .block-editor-block-list__layout .is-dragging::selection {
   background: transparent !important;
 }
@@ -900,6 +908,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding: 0 2px;
 }
 
+.rich-text [contenteditable=false]::-moz-selection {
+  background-color: transparent;
+}
+
 .rich-text [contenteditable=false]::selection {
   background-color: transparent;
 }

package/build-style/content.css

@@ -153,6 +153,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout {
   position: relative;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::-moz-selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::-moz-selection {
+  background: transparent;
+}
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;
 }
@@ -222,6 +225,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;
+     -moz-user-select: text;
           user-select: text;
 }
 
@@ -254,6 +258,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
           user-select: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
@@ -522,6 +527,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .is-dragging iframe {
   pointer-events: none;
 }
+.block-editor-block-list__layout .is-dragging::-moz-selection {
+  background: transparent !important;
+}
 .block-editor-block-list__layout .is-dragging::selection {
   background: transparent !important;
 }
@@ -901,6 +909,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding: 0 2px;
 }
 
+.rich-text [contenteditable=false]::-moz-selection {
+  background-color: transparent;
+}
+
 .rich-text [contenteditable=false]::selection {
   background-color: transparent;
 }

package/build-style/style-rtl.css

@@ -777,7 +777,9 @@ iframe[name=editor-canvas] {
   padding: 0 13px;
   position: relative;
   -webkit-user-select: none;
+     -moz-user-select: none;
           user-select: none;
+  width: -moz-max-content;
   width: max-content;
 }
 .block-editor-block-draggable-chip svg {
@@ -1079,6 +1081,7 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
   min-width: auto;
+  width: -moz-max-content;
   width: max-content;
   overflow-y: visible;
 }
@@ -1195,7 +1198,8 @@ iframe[name=editor-canvas] {
   word-break: break-all;
   white-space: normal;
   text-align: start;
-  text-align-last: center;
+  -moz-text-align-last: center;
+       text-align-last: center;
 }
 
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
@@ -1301,17 +1305,20 @@ iframe[name=editor-canvas] {
   justify-content: center;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-  column-gap: 24px;
+  -moz-column-gap: 24px;
+       column-gap: 24px;
   display: block;
   width: 100%;
   padding: 32px;
   padding-bottom: 0;
   padding-top: 0;
-  column-count: 2;
+  -moz-column-count: 2;
+       column-count: 2;
 }
 @media (min-width: 1440px) {
   .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-    column-count: 3;
+    -moz-column-count: 3;
+         column-count: 3;
   }
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
@@ -1333,7 +1340,8 @@ iframe[name=editor-canvas] {
   color: var(--wp-admin-theme-color);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
-  break-inside: avoid-column;
+  -moz-column-break-inside: avoid;
+       break-inside: avoid-column;
   margin-bottom: 24px;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
@@ -1698,7 +1706,9 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles__shadow-indicator {
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background: none;
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
@@ -2467,7 +2477,8 @@ iframe[name=editor-canvas] {
 .link-preview-button__image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   border-radius: 2px;
 }
 
@@ -3496,7 +3507,8 @@ iframe[name=editor-canvas] {
 .block-editor-content-only-controls__media-thumbnail img {
   width: 100% !important;
   height: 100% !important;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .block-editor-content-only-controls {
@@ -3557,12 +3569,18 @@ iframe[name=editor-canvas] {
   box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
   outline: 2px solid transparent;
 }
+.block-editor-content-only-controls__rich-text::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
 .block-editor-content-only-controls__rich-text::placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 .block-editor-content-only-controls__rich-text {
   border-color: #949494;
 }
+.block-editor-content-only-controls__rich-text::-moz-placeholder {
+  color: color-mix(in srgb, #1e1e1e, transparent 38%);
+}
 .block-editor-content-only-controls__rich-text::placeholder {
   color: color-mix(in srgb, #1e1e1e, transparent 38%);
 }

package/build-style/style.css

@@ -777,7 +777,9 @@ iframe[name=editor-canvas] {
   padding: 0 13px;
   position: relative;
   -webkit-user-select: none;
+     -moz-user-select: none;
           user-select: none;
+  width: -moz-max-content;
   width: max-content;
 }
 .block-editor-block-draggable-chip svg {
@@ -1079,6 +1081,7 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
   min-width: auto;
+  width: -moz-max-content;
   width: max-content;
   overflow-y: visible;
 }
@@ -1195,7 +1198,8 @@ iframe[name=editor-canvas] {
   word-break: break-all;
   white-space: normal;
   text-align: start;
-  text-align-last: center;
+  -moz-text-align-last: center;
+       text-align-last: center;
 }
 
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
@@ -1301,17 +1305,20 @@ iframe[name=editor-canvas] {
   justify-content: center;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-  column-gap: 24px;
+  -moz-column-gap: 24px;
+       column-gap: 24px;
   display: block;
   width: 100%;
   padding: 32px;
   padding-bottom: 0;
   padding-top: 0;
-  column-count: 2;
+  -moz-column-count: 2;
+       column-count: 2;
 }
 @media (min-width: 1440px) {
   .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-    column-count: 3;
+    -moz-column-count: 3;
+         column-count: 3;
   }
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
@@ -1333,7 +1340,8 @@ iframe[name=editor-canvas] {
   color: var(--wp-admin-theme-color);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
-  break-inside: avoid-column;
+  -moz-column-break-inside: avoid;
+       break-inside: avoid-column;
   margin-bottom: 24px;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
@@ -1698,7 +1706,9 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles__shadow-indicator {
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background: none;
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
@@ -2468,7 +2478,8 @@ iframe[name=editor-canvas] {
 .link-preview-button__image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   border-radius: 2px;
 }
 
@@ -3498,7 +3509,8 @@ iframe[name=editor-canvas] {
 .block-editor-content-only-controls__media-thumbnail img {
   width: 100% !important;
   height: 100% !important;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .block-editor-content-only-controls {
@@ -3559,12 +3571,18 @@ iframe[name=editor-canvas] {
   box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
   outline: 2px solid transparent;
 }
+.block-editor-content-only-controls__rich-text::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
 .block-editor-content-only-controls__rich-text::placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 .block-editor-content-only-controls__rich-text {
   border-color: #949494;
 }
+.block-editor-content-only-controls__rich-text::-moz-placeholder {
+  color: color-mix(in srgb, #1e1e1e, transparent 38%);
+}
 .block-editor-content-only-controls__rich-text::placeholder {
   color: color-mix(in srgb, #1e1e1e, transparent 38%);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.20.0",
+	"version": "15.21.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,7 +41,6 @@
 		"./package.json": "./package.json",
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptModuleExports": {
 		"./utils/fit-text-frontend": "./build-module/utils/fit-text-frontend.mjs"
@@ -61,68 +60,72 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.47.0",
-		"@wordpress/base-styles": "^9.0.0",
-		"@wordpress/blob": "^4.47.0",
-		"@wordpress/block-serialization-default-parser": "^5.47.0",
-		"@wordpress/blocks": "^15.20.0",
-		"@wordpress/commands": "^1.47.0",
-		"@wordpress/components": "^34.0.0",
-		"@wordpress/compose": "^8.0.0",
-		"@wordpress/data": "^10.47.0",
-		"@wordpress/dataviews": "^15.0.0",
-		"@wordpress/date": "^5.47.0",
-		"@wordpress/deprecated": "^4.47.0",
-		"@wordpress/dom": "^4.47.0",
-		"@wordpress/element": "^7.0.0",
-		"@wordpress/escape-html": "^3.47.0",
-		"@wordpress/global-styles-engine": "^1.14.0",
-		"@wordpress/hooks": "^4.47.0",
-		"@wordpress/html-entities": "^4.47.0",
-		"@wordpress/i18n": "^6.20.0",
-		"@wordpress/icons": "^13.2.0",
-		"@wordpress/image-cropper": "^1.11.0",
-		"@wordpress/interactivity": "^6.47.0",
-		"@wordpress/is-shallow-equal": "^5.47.0",
-		"@wordpress/keyboard-shortcuts": "^5.47.0",
-		"@wordpress/keycodes": "^4.47.0",
-		"@wordpress/notices": "^5.47.0",
-		"@wordpress/preferences": "^4.47.0",
-		"@wordpress/priority-queue": "^3.47.0",
-		"@wordpress/private-apis": "^1.47.0",
-		"@wordpress/rich-text": "^7.47.0",
-		"@wordpress/style-engine": "^2.47.0",
-		"@wordpress/token-list": "^3.47.0",
-		"@wordpress/ui": "^0.14.0",
-		"@wordpress/upload-media": "^0.32.0",
-		"@wordpress/url": "^4.47.0",
-		"@wordpress/warning": "^3.47.0",
-		"@wordpress/wordcount": "^4.47.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/a11y": "^4.48.1",
+		"@wordpress/base-styles": "^10.0.1",
+		"@wordpress/blob": "^4.48.1",
+		"@wordpress/block-serialization-default-parser": "^5.48.1",
+		"@wordpress/blocks": "^15.21.1",
+		"@wordpress/commands": "^1.48.1",
+		"@wordpress/components": "^35.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/data": "^10.48.1",
+		"@wordpress/dataviews": "^16.0.1",
+		"@wordpress/date": "^5.48.1",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/dom": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/escape-html": "^3.48.1",
+		"@wordpress/global-styles-engine": "^1.15.1",
+		"@wordpress/hooks": "^4.48.1",
+		"@wordpress/html-entities": "^4.48.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/icons": "^14.0.1",
+		"@wordpress/image-cropper": "^1.12.1",
+		"@wordpress/interactivity": "^6.48.1",
+		"@wordpress/is-shallow-equal": "^5.48.1",
+		"@wordpress/keyboard-shortcuts": "^5.48.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/notices": "^5.48.1",
+		"@wordpress/preferences": "^4.48.1",
+		"@wordpress/priority-queue": "^3.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/rich-text": "^7.48.1",
+		"@wordpress/style-engine": "^2.48.1",
+		"@wordpress/token-list": "^3.48.1",
+		"@wordpress/ui": "^0.15.1",
+		"@wordpress/upload-media": "^0.33.1",
+		"@wordpress/url": "^4.48.1",
+		"@wordpress/warning": "^3.48.1",
+		"@wordpress/wordcount": "^4.48.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
-		"colord": "^2.7.0",
-		"deepmerge": "^4.3.0",
-		"diff": "^4.0.2",
+		"colord": "^2.9.3",
+		"deepmerge": "^4.3.1",
+		"diff": "^8.0.3",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"parsel-js": "^1.1.2",
-		"postcss": "^8.4.21",
+		"postcss": "^8.4.38",
 		"postcss-prefix-selector": "^1.16.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-easy-crop": "^5.0.6",
+		"react-easy-crop": "^5.4.2",
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
 		"@ariakit/test": "^0.4.13",
-		"deep-freeze": "0.0.1"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/components/block-breadcrumb/README.md

@@ -8,9 +8,9 @@ The block breadcrumb trail displays the hierarchy of the current block selection
 
 ## Development guidelines
 
-#### Props
+### Props
 
-##### rootLabelText
+#### rootLabelText
 
 Label text for the root element (the first `<li />`) of the breadcrumb trail.
 

package/src/components/block-compare/README.md

@@ -5,37 +5,37 @@ of converting the block.
 
 A button is present on both blocks to then select one or the other.
 
-#### Props
+## Props
 
-##### block
+### block
 
 The original object to compare against
 
 -   Type: `Object`
 -   Required: Yes
 
-##### convertor
+### convertor
 
 A function that returns a new, converted, block when supplied an existing block. The conversion may fix or alter the block in a way that helps with an invalid block.
 
 -   Type: `func`
 -   Required: Yes
 
-##### convertButtonText
+### convertButtonText
 
 Text to show in the convert button
 
 -   Type: `string`
 -   Required: Yes
 
-##### onKeep
+### onKeep
 
 Callback when the original block is required
 
 -   Type: `func`
 -   Required: Yes
 
-##### onConvert
+### onConvert
 
 Callback when the converted block is required.
 

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

@@ -2,9 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
-// diff doesn't tree-shake correctly, so we import from the individual
-// module here, to avoid including too much of the library
-import { diffChars } from 'diff/lib/diff/character';
+import { diffChars } from 'diff';
 
 /**
  * WordPress dependencies

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

@@ -185,7 +185,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
-		inert: isSubtreeDisabled ? true : undefined,
+		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: clsx(
 			'block-editor-block-list__block',
 			{

package/src/components/block-patterns-list/index.js

@@ -195,8 +195,8 @@ function BlockPatternsList(
 		onHover,
 		onClickPattern,
 		orientation,
-		label = __( 'Block patterns' ),
 		category,
+		label = __( 'Patterns' ),
 		showTitlesAsTooltip,
 		pagingProps,
 	},

package/src/components/block-preview/README.md

@@ -26,7 +26,7 @@ A block instance (object) or a blocks array you would like to render a preview.
 
 Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview.
 
-`viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure make sure multiple previews will be rendered with the same scale, regardless of their content.
+`viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure multiple previews will be rendered with the same scale, regardless of their content.
 
 Set `viewportWidth` to `0` to make the viewport the same width as the container.
 

package/src/components/block-switcher/block-transformations-menu.js

@@ -88,8 +88,7 @@ const BlockTransformationsMenu = ( {
 	onSelectVariation,
 	blocks,
 } ) => {
-	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
-		useState();
+	const [ hoveredTransformItem, setHoveredTransformItem ] = useState();
 
 	const { priorityTextTransformations, restTransformations } =
 		useGroupedTransforms( possibleBlockTransformations );
@@ -101,17 +100,18 @@ const BlockTransformationsMenu = ( {
 		<RestTransformationItems
 			restTransformations={ restTransformations }
 			onSelect={ onSelect }
-			setHoveredTransformItemName={ setHoveredTransformItemName }
+			setHoveredTransformItem={ setHoveredTransformItem }
 		/>
 	);
 	return (
 		<>
 			<MenuGroup label={ __( 'Transform to' ) } className={ className }>
-				{ hoveredTransformItemName && (
+				{ hoveredTransformItem && (
 					<PreviewBlockPopover
 						blocks={ switchToBlockType(
 							blocks,
-							hoveredTransformItemName
+							hoveredTransformItem.name,
+							hoveredTransformItem.variationName
 						) }
 					/>
 				) }
@@ -126,12 +126,10 @@ const BlockTransformationsMenu = ( {
 				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTransformationItem
-						key={ item.name }
+						key={ item.id || item.name }
 						item={ item }
 						onSelect={ onSelect }
-						setHoveredTransformItemName={
-							setHoveredTransformItemName
-						}
+						setHoveredTransformItem={ setHoveredTransformItem }
 					/>
 				) ) }
 				{ ! hasBothContentTransformations && restTransformItems }
@@ -148,14 +146,14 @@ const BlockTransformationsMenu = ( {
 function RestTransformationItems( {
 	restTransformations,
 	onSelect,
-	setHoveredTransformItemName,
+	setHoveredTransformItem,
 } ) {
 	return restTransformations.map( ( item ) => (
 		<BlockTransformationItem
-			key={ item.name }
+			key={ item.id || item.name }
 			item={ item }
 			onSelect={ onSelect }
-			setHoveredTransformItemName={ setHoveredTransformItemName }
+			setHoveredTransformItem={ setHoveredTransformItem }
 		/>
 	) );
 }
@@ -163,7 +161,7 @@ function RestTransformationItems( {
 function BlockTransformationItem( {
 	item,
 	onSelect,
-	setHoveredTransformItemName,
+	setHoveredTransformItem,
 } ) {
 	const { name, icon, title, isDisabled } = item;
 	return (
@@ -171,13 +169,13 @@ function BlockTransformationItem( {
 			className={ getBlockMenuDefaultClassName( name ) }
 			onClick={ ( event ) => {
 				event.preventDefault();
-				onSelect( name );
+				onSelect( name, item.variationName );
 			} }
 			disabled={ isDisabled }
-			onMouseLeave={ () => setHoveredTransformItemName( null ) }
-			onMouseEnter={ () => setHoveredTransformItemName( name ) }
-			onFocus={ () => setHoveredTransformItemName( name ) }
-			onBlur={ () => setHoveredTransformItemName( null ) }
+			onMouseLeave={ () => setHoveredTransformItem( null ) }
+			onMouseEnter={ () => setHoveredTransformItem( item ) }
+			onFocus={ () => setHoveredTransformItem( item ) }
+			onBlur={ () => setHoveredTransformItem( null ) }
 		>
 			<BlockIcon icon={ icon } showColors />
 			{ title }

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

@@ -87,8 +87,8 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 		}
 	}
 	// Simple block transformation based on the `Block Transforms` API.
-	function onBlockTransform( name ) {
-		const newBlocks = switchToBlockType( blocks, name );
+	function onBlockTransform( name, variationName ) {
+		const newBlocks = switchToBlockType( blocks, name, variationName );
 		replaceBlocks( clientIds, newBlocks );
 		selectForMultipleBlocks( newBlocks );
 	}
@@ -166,8 +166,8 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 						blockVariationTransformations
 					}
 					blocks={ blocks }
-					onSelect={ ( name ) => {
-						onBlockTransform( name );
+					onSelect={ ( name, variationName ) => {
+						onBlockTransform( name, variationName );
 						onClose();
 					} }
 					onSelectVariation={ ( name ) => {