@wordpress/block-editor 14.3.6 → 14.3.7

package/build-style/content-rtl.css

@@ -500,13 +500,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
-  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
+  font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;
@@ -803,26 +804,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border: 0.01px solid transparent;
 }
 
-.block-editor-iframe__container {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-  width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-  margin-right: calc(-1 * (var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2);
-}
-
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -830,9 +814,19 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
     transition-delay: 0s;
   }
 }
+.block-editor-iframe__html.zoom-out-animation {
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-iframe__html.zoom-out-animation {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 
 .block-editor-iframe__html.is-zoomed-out {
-  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale))));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale);
   background-color: #ddd;
   margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
   padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));

package/build-style/content.css

@@ -500,13 +500,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
-  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
+  font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;
@@ -803,26 +804,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border: 0.01px solid transparent;
 }
 
-.block-editor-iframe__container {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-  width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-  margin-left: calc(-1 * (var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2);
-}
-
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -830,9 +814,19 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
     transition-delay: 0s;
   }
 }
+.block-editor-iframe__html.zoom-out-animation {
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-iframe__html.zoom-out-animation {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 
 .block-editor-iframe__html.is-zoomed-out {
-  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale)));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale);
   background-color: #ddd;
   margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
   padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));

package/build-style/style-rtl.css

@@ -270,7 +270,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
-  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 }
 @media (prefers-reduced-motion: reduce) {
   iframe[name=editor-canvas] {
@@ -554,25 +554,8 @@ iframe[name=editor-canvas] {
   right: 50%;
 }
 
-.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
-.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
-.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.zoom-out-toolbar .block-editor-block-mover {
-  background: none;
-  border: none;
-}
-.zoom-out-toolbar .zoom-out-toolbar-button {
-  height: 40px;
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-  visibility: hidden;
-}
-.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
-  visibility: visible;
+.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
+  top: -1px;
 }
 
 .block-editor-block-lock-modal {
@@ -1919,6 +1902,22 @@ iframe[name=editor-canvas] {
   padding: 0;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+  position: absolute;
+  left: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -3061,10 +3060,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 8px;
   box-shadow: none;
   outline: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
   border-radius: 2px;
 }
+.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
+  background: none;
+}
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
   min-width: 48px;
@@ -3478,9 +3481,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
-.block-editor-block-toolbar > :last-child .components-toolbar {
+.block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
   border-left: none;
 }
+.block-editor-block-toolbar .components-toolbar-group:empty {
+  display: none;
+}
 
 .block-editor-block-contextual-toolbar {
   position: sticky;
@@ -3775,6 +3781,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 
 .block-editor-inserter__panel-header {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: 16px 16px 0;

package/build-style/style.css

@@ -270,7 +270,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
-  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 }
 @media (prefers-reduced-motion: reduce) {
   iframe[name=editor-canvas] {
@@ -554,25 +554,8 @@ iframe[name=editor-canvas] {
   left: 50%;
 }
 
-.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
-.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
-.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.zoom-out-toolbar .block-editor-block-mover {
-  background: none;
-  border: none;
-}
-.zoom-out-toolbar .zoom-out-toolbar-button {
-  height: 40px;
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-  visibility: hidden;
-}
-.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
-  visibility: visible;
+.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
+  top: -1px;
 }
 
 .block-editor-block-lock-modal {
@@ -1920,6 +1903,22 @@ iframe[name=editor-canvas] {
   padding: 0;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+  position: absolute;
+  right: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -3062,10 +3061,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 8px;
   box-shadow: none;
   outline: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
   border-radius: 2px;
 }
+.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
+  background: none;
+}
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
   min-width: 48px;
@@ -3479,9 +3482,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
-.block-editor-block-toolbar > :last-child .components-toolbar {
+.block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
   border-right: none;
 }
+.block-editor-block-toolbar .components-toolbar-group:empty {
+  display: none;
+}
 
 .block-editor-block-contextual-toolbar {
   position: sticky;
@@ -3776,6 +3782,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 
 .block-editor-inserter__panel-header {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: 16px 16px 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.3.6",
+	"version": "14.3.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,9 +40,9 @@
 		"@wordpress/api-fetch": "^7.8.2",
 		"@wordpress/blob": "^4.8.1",
 		"@wordpress/block-serialization-default-parser": "^5.8.1",
-		"@wordpress/blocks": "^13.8.4",
-		"@wordpress/commands": "^1.8.6",
-		"@wordpress/components": "^28.8.6",
+		"@wordpress/blocks": "^13.8.5",
+		"@wordpress/commands": "^1.8.7",
+		"@wordpress/components": "^28.8.7",
 		"@wordpress/compose": "^7.8.3",
 		"@wordpress/data": "^10.8.3",
 		"@wordpress/date": "^5.8.2",
@@ -58,7 +58,7 @@
 		"@wordpress/keyboard-shortcuts": "^5.8.3",
 		"@wordpress/keycodes": "^4.8.2",
 		"@wordpress/notices": "^5.8.3",
-		"@wordpress/preferences": "^4.8.6",
+		"@wordpress/preferences": "^4.8.7",
 		"@wordpress/private-apis": "^1.8.1",
 		"@wordpress/rich-text": "^7.8.3",
 		"@wordpress/style-engine": "^2.8.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b7af02f8431034ee19cdc33dd105d21705823eed"
+	"gitHead": "b1ace05ee94f0803e51b205306c19fc706499ede"
 }

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

@@ -4,5 +4,6 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	// Handles transitions between device previews
 	@include editor-canvas-resize-animation;
 }

package/src/components/block-list/content.scss

@@ -464,14 +464,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	overflow: hidden;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	color: $black;
 	font-weight: normal;
 
 	.is-zoomed-out & {
-		// Scale the font size based on the zoom level.
-		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
+		// Maintains an absolute font-size by counter-scaling based on the zoom level.
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
 	}
 
 	&.is-dragged-over {

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Adds block behaviour:
@@ -20,9 +21,18 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		isZoomOut,
+		__unstableGetEditorMode,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		__unstableSetEditorMode,
+		resetZoomLevel,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -56,7 +66,14 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if ( keyCode === ENTER ) {
+				if (
+					keyCode === ENTER &&
+					__unstableGetEditorMode() === 'zoom-out' &&
+					isZoomOut()
+				) {
+					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
+				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
@@ -88,6 +105,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
+			__unstableGetEditorMode,
+			__unstableSetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
 		]
 	);
 }

package/src/components/block-list/zoom-out-separator.js

@@ -85,14 +85,15 @@ export function ZoomOutSeparator( {
 		<AnimatePresence>
 			{ isVisible && (
 				<motion.div
-					as="button"
-					layout={ ! isReducedMotion }
 					initial={ { height: 0 } }
-					animate={ { height: '120px' } }
+					animate={ {
+						// Use a height equal to that of the zoom out frame size.
+						height: 'calc(1.5 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)',
+					} }
 					exit={ { height: 0 } }
 					transition={ {
 						type: 'tween',
-						duration: 0.2,
+						duration: isReducedMotion ? 0 : 0.2,
 						ease: [ 0.6, 0, 0.4, 1 ],
 					} }
 					className={ clsx(
@@ -108,10 +109,11 @@ export function ZoomOutSeparator( {
 					<motion.div
 						initial={ { opacity: 0 } }
 						animate={ { opacity: 1 } }
-						exit={ { opacity: 0 } }
+						exit={ { opacity: 0, transition: { delay: -0.125 } } }
 						transition={ {
-							type: 'tween',
+							ease: 'linear',
 							duration: 0.1,
+							delay: 0.125,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }

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

@@ -98,10 +98,10 @@ function BlockPopover(
 			contextElement: selectedElement,
 		};
 	}, [
+		popoverDimensionsRecomputeCounter,
+		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		selectedElement,
-		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

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

@@ -16,7 +16,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
-import { ToolbarGroup } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -35,6 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import Shuffle from './shuffle';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -58,7 +60,6 @@ export function PrivateBlockToolbar( {
 	const {
 		blockClientId,
 		blockClientIds,
-		isContentOnlyEditingMode,
 		isDefaultEditingMode,
 		blockType,
 		toolbarKey,
@@ -67,6 +68,10 @@ export function PrivateBlockToolbar( {
 		isUsingBindings,
 		hasParentPattern,
 		hasContentOnlyLocking,
+		showShuffleButton,
+		showSlots,
+		showGroupButtons,
+		showLockButtons,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -78,7 +83,8 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-		} = select( blockEditorStore );
+			isZoomOutMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const parents = getBlockParents( selectedBlockClientId );
@@ -112,12 +118,12 @@ export function PrivateBlockToolbar( {
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
-			isContentOnlyEditingMode: editingMode === 'contentOnly',
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
+				! isZoomOutMode() &&
 				parentBlockType &&
 				getBlockEditingMode( firstParentClientId ) === 'default' &&
 				hasBlockSupport(
@@ -130,6 +136,10 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
+			showShuffleButton: isZoomOutMode(),
+			showSlots: ! isZoomOutMode(),
+			showGroupButtons: ! isZoomOutMode(),
+			showLockButtons: ! isZoomOutMode(),
 		};
 	}, [] );
 
@@ -179,13 +189,11 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode ||
-						( isContentOnlyEditingMode && ! hasParentPattern ) ||
-						isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
@@ -196,26 +204,31 @@ export function PrivateBlockToolbar( {
 									disabled={ ! isDefaultEditingMode }
 									isUsingBindings={ isUsingBindings }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
+								{ ! isMultiToolbar && showLockButtons && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
 								) }
+								<BlockMover
+									clientIds={ blockClientIds }
+									hideDragHandle={ hideDragHandle }
+								/>
 							</ToolbarGroup>
 						</div>
 					) }
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
-					isMultiToolbar && <BlockGroupToolbar /> }
-				{ shouldShowVisualToolbar && (
+					isMultiToolbar &&
+					showGroupButtons && <BlockGroupToolbar /> }
+				{ showShuffleButton && (
+					<ToolbarGroup>
+						<Shuffle
+							clientId={ blockClientIds[ 0 ] }
+							as={ ToolbarButton }
+						/>
+					</ToolbarGroup>
+				) }
+				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot
 							group="parent"

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

@@ -59,9 +59,18 @@
 
 	> :last-child,
 	> :last-child .components-toolbar-group,
-	> :last-child .components-toolbar {
+	> :last-child .components-toolbar,
+	// If the last toolbar group is empty,
+	// we need to remove the double border from the penultimate one.
+	&:has(> :last-child:empty) > :nth-last-child(2),
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group,
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
 		border-right: none;
 	}
+
+	.components-toolbar-group:empty {
+		display: none;
+	}
 }
 
 .block-editor-block-contextual-toolbar {