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

package/build-style/style-rtl.css

@@ -1878,9 +1878,6 @@
 .block-editor-date-format-picker__custom-format-select-control.components-base-control {
   margin-bottom: 0;
 }
-.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
-  width: 100%;
-}
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
@@ -1900,9 +1897,6 @@
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
 }
-.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
-  margin: 16px 0 12px;
-}
 .block-editor-duotone-control__popover .components-circular-option-picker__swatches {
   display: grid;
   grid-template-columns: repeat(6, 28px);
@@ -1919,9 +1913,6 @@
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control {
-  margin-bottom: 24px;
-}
 .components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2799,14 +2790,20 @@
   width: 100%;
   transform: translateY(-50%);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
+  position: relative;
+  max-width: min(110px, 40%);
+  width: 100%;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
+  position: absolute;
+  left: 0;
+  transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
-  display: inline-block;
   padding: 2px 6px;
-  max-width: min(100px, 40%);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
@@ -2952,6 +2949,7 @@
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
+  margin: 0;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
   margin-bottom: 0;
@@ -3301,9 +3299,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover .block-editor-url-input .components-spinner,
 .block-editor-url-input .components-spinner {
   position: absolute;
-  left: 8px 8px 8px 12px;
-  bottom: 8px 8px 8px 12px8px1;
   margin: 0;
+  top: calc(50% - 16px / 2);
+  left: 8px;
 }
 
 .block-editor-url-input__input[type=text] {
@@ -3499,10 +3497,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
   margin-bottom: 0;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
-  bottom: 8px 8px 8px 12px1;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3606,7 +3600,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-appearance-control,
 .typography-block-support-panel .components-font-size-picker__controls,
 .typography-block-support-panel .block-editor-text-decoration-control__buttons,
 .typography-block-support-panel .block-editor-text-transform-control__buttons {
@@ -4226,6 +4219,108 @@ 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;
+}
+
+.component-spacing-sizes-control {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  width: 100%;
+  display: contents;
+}
+.component-spacing-sizes-control legend {
+  padding: 0;
+  grid-column: 1/1;
+  grid-row: 1/1;
+  align-self: center;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
+  grid-column: 1/1;
+  min-height: 30px;
+  justify-content: left;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
+  margin-top: 0;
+  margin-right: 0;
+}
+.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;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  grid-column: 2/2;
+  justify-self: left;
+  grid-row: 1/1;
+  align-self: center;
+  margin-right: 4px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
+  grid-column: 2/2;
+  grid-row: 1/1;
+  justify-self: end;
+  margin-left: 4px;
+  padding: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
+  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;
+}
+.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
+  grid-column: 3/3;
+  grid-row: 1/1;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
+  grid-column: span 2;
+  margin-right: 8px;
+  padding-left: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+  width: 124px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
+  grid-column: span 3;
+  padding-left: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-range-control__wrapper {
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control .components-range-control__mark {
+  height: 4px;
+  width: 3px;
+  background-color: #fff;
+  z-index: 1;
+}
+.component-spacing-sizes-control .components-range-control__marks {
+  margin-top: 17px;
+}
+.component-spacing-sizes-control .components-range-control__marks :first-child {
+  display: none;
+}
+.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+  z-index: 3;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  margin-left: 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;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/build-style/style.css

@@ -1878,9 +1878,6 @@
 .block-editor-date-format-picker__custom-format-select-control.components-base-control {
   margin-bottom: 0;
 }
-.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
-  width: 100%;
-}
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
@@ -1900,9 +1897,6 @@
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
 }
-.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
-  margin: 16px 0 12px;
-}
 .block-editor-duotone-control__popover .components-circular-option-picker__swatches {
   display: grid;
   grid-template-columns: repeat(6, 28px);
@@ -1919,9 +1913,6 @@
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control {
-  margin-bottom: 24px;
-}
 .components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2799,14 +2790,20 @@
   width: 100%;
   transform: translateY(-50%);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
+  position: relative;
+  max-width: min(110px, 40%);
+  width: 100%;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
-  display: inline-block;
   padding: 2px 6px;
-  max-width: min(100px, 40%);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
@@ -2952,6 +2949,7 @@
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
+  margin: 0;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
   margin-bottom: 0;
@@ -3301,9 +3299,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover .block-editor-url-input .components-spinner,
 .block-editor-url-input .components-spinner {
   position: absolute;
-  right: 8px 8px 8px 12px;
-  bottom: 8px 8px 8px 12px8px1;
   margin: 0;
+  top: calc(50% - 16px / 2);
+  right: 8px;
 }
 
 .block-editor-url-input__input[type=text] {
@@ -3499,10 +3497,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
   margin-bottom: 0;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
-  bottom: 8px 8px 8px 12px1;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3606,7 +3600,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-appearance-control,
 .typography-block-support-panel .components-font-size-picker__controls,
 .typography-block-support-panel .block-editor-text-decoration-control__buttons,
 .typography-block-support-panel .block-editor-text-transform-control__buttons {
@@ -4226,6 +4219,108 @@ 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;
+}
+
+.component-spacing-sizes-control {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  width: 100%;
+  display: contents;
+}
+.component-spacing-sizes-control legend {
+  padding: 0;
+  grid-column: 1/1;
+  grid-row: 1/1;
+  align-self: center;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
+  grid-column: 1/1;
+  min-height: 30px;
+  justify-content: left;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.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;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  grid-column: 2/2;
+  justify-self: left;
+  grid-row: 1/1;
+  align-self: center;
+  margin-left: 4px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
+  grid-column: 2/2;
+  grid-row: 1/1;
+  justify-self: end;
+  margin-right: 4px;
+  padding: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
+  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;
+}
+.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
+  grid-column: 3/3;
+  grid-row: 1/1;
+  justify-self: end;
+}
+.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 {
+  width: 124px;
+}
+.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;
+}
+.component-spacing-sizes-control .components-range-control__mark {
+  height: 4px;
+  width: 3px;
+  background-color: #fff;
+  z-index: 1;
+}
+.component-spacing-sizes-control .components-range-control__marks {
+  margin-top: 17px;
+}
+.component-spacing-sizes-control .components-range-control__marks :first-child {
+  display: none;
+}
+.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;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.7.0",
+	"version": "9.7.1-next.d6164808d3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.15.0",
-		"@wordpress/api-fetch": "^6.12.0",
-		"@wordpress/blob": "^3.15.0",
-		"@wordpress/blocks": "^11.14.0",
-		"@wordpress/components": "^19.17.0",
-		"@wordpress/compose": "^5.13.0",
-		"@wordpress/data": "^6.15.0",
-		"@wordpress/date": "^4.15.0",
-		"@wordpress/deprecated": "^3.15.0",
-		"@wordpress/dom": "^3.15.0",
-		"@wordpress/element": "^4.13.0",
-		"@wordpress/hooks": "^3.15.0",
-		"@wordpress/html-entities": "^3.15.0",
-		"@wordpress/i18n": "^4.15.0",
-		"@wordpress/icons": "^9.6.0",
-		"@wordpress/is-shallow-equal": "^4.15.0",
-		"@wordpress/keyboard-shortcuts": "^3.13.0",
-		"@wordpress/keycodes": "^3.15.0",
-		"@wordpress/notices": "^3.15.0",
-		"@wordpress/rich-text": "^5.13.0",
-		"@wordpress/shortcode": "^3.15.0",
-		"@wordpress/style-engine": "^0.14.0",
-		"@wordpress/token-list": "^2.15.0",
-		"@wordpress/url": "^3.16.0",
-		"@wordpress/warning": "^2.15.0",
-		"@wordpress/wordcount": "^3.15.0",
+		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/api-fetch": "^6.12.1-next.d6164808d3.0",
+		"@wordpress/blob": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/blocks": "^11.14.1-next.d6164808d3.0",
+		"@wordpress/components": "^20.0.1-next.d6164808d3.0",
+		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/data": "^7.0.1-next.d6164808d3.0",
+		"@wordpress/date": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/dom": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/html-entities": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
+		"@wordpress/is-shallow-equal": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/keyboard-shortcuts": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/notices": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/rich-text": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/shortcode": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/style-engine": "^0.14.1-next.d6164808d3.0",
+		"@wordpress/token-list": "^2.15.1-next.d6164808d3.0",
+		"@wordpress/url": "^3.16.1-next.d6164808d3.0",
+		"@wordpress/warning": "^2.15.1-next.d6164808d3.0",
+		"@wordpress/wordcount": "^3.15.1-next.d6164808d3.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -68,6 +69,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
 		"rememo": "^4.0.0",
+		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

package/src/components/block-alignment-control/use-available-alignments.js

@@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
-	if ( layoutType.name !== 'default' ) {
+	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;

package/src/components/block-edit-visually-button/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds } ) {
+	// Edit visually only works for single block selection.
+	const clientId = clientIds.length === 1 ? clientIds[ 0 ] : undefined;
+	const canEditVisually = useSelect(
+		( select ) =>
+			!! clientId &&
+			select( blockEditorStore ).getBlockMode( clientId ) === 'html',
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
+	if ( ! canEditVisually ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ () => {
+					toggleBlockMode( clientId );
+				} }
+			>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

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

@@ -154,7 +154,10 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement || ! isVisible ) {
+	// If there's either a previous or a next element, show the inbetween popover.
+	// Note that drag and drop uses the inbetween popover to show the drop indicator
+	// before the first block and after the last block.
+	if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 		return null;
 	}
 

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

@@ -7,24 +7,20 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<>
-			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
-			<ToolbarGroup>
-				<ToolbarItem>
-					{ ( toggleProps ) => (
-						<BlockSettingsDropdown
-							clientIds={ clientIds }
-							toggleProps={ toggleProps }
-							{ ...props }
-						/>
-					) }
-				</ToolbarItem>
-			</ToolbarGroup>
-		</>
+		<ToolbarGroup>
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<BlockSettingsDropdown
+						clientIds={ clientIds }
+						toggleProps={ toggleProps }
+						{ ...props }
+					/>
+				) }
+			</ToolbarItem>
+		</ToolbarGroup>
 	);
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, uniq } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,10 +28,10 @@ import { copy } from '@wordpress/icons';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import BlockTitle from '../block-title';
 import BlockTransformationsMenu from './block-transformations-menu';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -41,7 +41,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		canRemove,
 		hasBlockStyles,
 		icon,
-		blockTitle,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -64,7 +63,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				_icon = blockInformation?.icon; // Take into account active block variations.
 			} else {
 				const isSelectionOfSameType =
-					uniq( blocks.map( ( { name } ) => name ) ).length === 1;
+					new Set( blocks.map( ( { name } ) => name ) ).size === 1;
 				// When selection consists of blocks of multiple types, display an
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType
@@ -79,7 +78,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -89,6 +87,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
 
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
+		maximumLength: 35,
+	} );
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
@@ -119,10 +121,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 							<BlockIcon icon={ icon } showColors />
 							{ ( isReusable || isTemplate ) && (
 								<span className="block-editor-block-switcher__toggle-text">
-									<BlockTitle
-										clientId={ clientIds }
-										maximumLength={ 35 }
-									/>
+									{ blockTitle }
 								</span>
 							) }
 						</>
@@ -176,10 +175,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								/>
 								{ ( isReusable || isTemplate ) && (
 									<span className="block-editor-block-switcher__toggle-text">
-										<BlockTitle
-											clientId={ clientIds }
-											maximumLength={ 35 }
-										/>
+										{ blockTitle }
 									</span>
 								) }
 							</>

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

@@ -18,6 +18,7 @@ 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() );
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {

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

@@ -23,6 +23,7 @@ import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
+import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
@@ -159,6 +160,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 					</__unstableBlockNameContext.Provider>
 				</>
 			) }
+			<BlockEditVisuallyButton clientIds={ blockClientIds } />
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);