@wordpress/block-editor 13.0.0 → 13.0.2

package/build-style/content-rtl.css

@@ -572,7 +572,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-variation-picker__variations svg,
 .block-editor-block-variation-picker__skip svg,
 .wp-block-group-placeholder__variations svg {
-  fill: #ccc !important;
+  fill: #949494 !important;
 }
 .block-editor-block-variation-picker__variations .components-button,
 .block-editor-block-variation-picker__skip .components-button,

package/build-style/content.css

@@ -572,7 +572,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-variation-picker__variations svg,
 .block-editor-block-variation-picker__skip svg,
 .wp-block-group-placeholder__variations svg {
-  fill: #ccc !important;
+  fill: #949494 !important;
 }
 .block-editor-block-variation-picker__variations .components-button,
 .block-editor-block-variation-picker__skip .components-button,

package/build-style/style-rtl.css

@@ -122,25 +122,12 @@
   margin-top: 0;
 }
 
-.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
-  min-width: 260px;
-  padding: 16px;
-}
-
-.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
-  fill: var(--wp-block-synced-color);
-}
-
-.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
-  height: 32px;
-}
-
 iframe[name=editor-canvas] {
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: block;
-  background-color: #ddd;
-  box-sizing: border-box;
+  background-color: transparent;
 }
 
 .block-editor-block-icon {
@@ -1196,6 +1183,11 @@ iframe[name=editor-canvas] {
   margin: 0;
 }
 
+.block-editor-block-switcher__binding-indicator {
+  display: block;
+  padding: 8px;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -2895,8 +2887,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3419,10 +3410,10 @@ iframe[name=editor-canvas] {
   border: 0;
   border-left: 1px solid #ddd;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors, .block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,
@@ -3852,6 +3843,10 @@ iframe[name=editor-canvas] {
   padding-bottom: 4px;
 }
 
+.block-editor-inserter__insertable-blocks-at-selection {
+  border-bottom: 1px solid #e0e0e0;
+}
+
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
   padding: 16px;

package/build-style/style.css

@@ -122,25 +122,12 @@
   margin-top: 0;
 }
 
-.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
-  min-width: 260px;
-  padding: 16px;
-}
-
-.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
-  fill: var(--wp-block-synced-color);
-}
-
-.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
-  height: 32px;
-}
-
 iframe[name=editor-canvas] {
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: block;
-  background-color: #ddd;
-  box-sizing: border-box;
+  background-color: transparent;
 }
 
 .block-editor-block-icon {
@@ -1196,6 +1183,11 @@ iframe[name=editor-canvas] {
   margin: 0;
 }
 
+.block-editor-block-switcher__binding-indicator {
+  display: block;
+  padding: 8px;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -2896,8 +2888,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3420,10 +3411,10 @@ iframe[name=editor-canvas] {
   border: 0;
   border-right: 1px solid #ddd;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors, .block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,
@@ -3853,6 +3844,10 @@ iframe[name=editor-canvas] {
   padding-bottom: 4px;
 }
 
+.block-editor-inserter__insertable-blocks-at-selection {
+  border-bottom: 1px solid #e0e0e0;
+}
+
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
   padding: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.0.0",
+	"version": "13.0.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.0.0",
-		"@wordpress/api-fetch": "^7.0.0",
-		"@wordpress/blob": "^4.0.0",
-		"@wordpress/blocks": "^13.0.0",
-		"@wordpress/commands": "^1.0.0",
-		"@wordpress/components": "^28.0.0",
-		"@wordpress/compose": "^7.0.0",
-		"@wordpress/data": "^10.0.0",
-		"@wordpress/date": "^5.0.0",
-		"@wordpress/deprecated": "^4.0.0",
-		"@wordpress/dom": "^4.0.0",
-		"@wordpress/element": "^6.0.0",
-		"@wordpress/escape-html": "^3.0.0",
-		"@wordpress/hooks": "^4.0.0",
-		"@wordpress/html-entities": "^4.0.0",
-		"@wordpress/i18n": "^5.0.0",
-		"@wordpress/icons": "^10.0.0",
-		"@wordpress/is-shallow-equal": "^5.0.0",
-		"@wordpress/keyboard-shortcuts": "^5.0.0",
-		"@wordpress/keycodes": "^4.0.0",
-		"@wordpress/notices": "^5.0.0",
-		"@wordpress/preferences": "^4.0.0",
-		"@wordpress/private-apis": "^1.0.0",
-		"@wordpress/rich-text": "^7.0.0",
-		"@wordpress/style-engine": "^2.0.0",
-		"@wordpress/token-list": "^3.0.0",
-		"@wordpress/url": "^4.0.0",
-		"@wordpress/warning": "^3.0.0",
-		"@wordpress/wordcount": "^4.0.0",
+		"@wordpress/a11y": "^4.0.1",
+		"@wordpress/api-fetch": "^7.0.1",
+		"@wordpress/blob": "^4.0.1",
+		"@wordpress/blocks": "^13.0.2",
+		"@wordpress/commands": "^1.0.2",
+		"@wordpress/components": "^28.0.2",
+		"@wordpress/compose": "^7.0.1",
+		"@wordpress/data": "^10.0.2",
+		"@wordpress/date": "^5.0.1",
+		"@wordpress/deprecated": "^4.0.1",
+		"@wordpress/dom": "^4.0.1",
+		"@wordpress/element": "^6.0.1",
+		"@wordpress/escape-html": "^3.0.1",
+		"@wordpress/hooks": "^4.0.1",
+		"@wordpress/html-entities": "^4.0.1",
+		"@wordpress/i18n": "^5.0.1",
+		"@wordpress/icons": "^10.0.1",
+		"@wordpress/is-shallow-equal": "^5.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.0.2",
+		"@wordpress/keycodes": "^4.0.1",
+		"@wordpress/notices": "^5.0.2",
+		"@wordpress/preferences": "^4.0.2",
+		"@wordpress/private-apis": "^1.0.2",
+		"@wordpress/rich-text": "^7.0.2",
+		"@wordpress/style-engine": "^2.0.2",
+		"@wordpress/token-list": "^3.0.1",
+		"@wordpress/url": "^4.0.1",
+		"@wordpress/warning": "^3.0.1",
+		"@wordpress/wordcount": "^4.0.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
+	"gitHead": "a68c6b5ef53956cccf4961d53d79b6af7e00ae60"
 }

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

@@ -31,12 +31,10 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
-				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,11 +44,9 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds, rootClientId ),
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock:
-					( canInsertDefaultBlock || !! directInsertBlock ) &&
-					rootBlockEditingMode === 'default',
+				canMove: canMoveBlocks( clientIds ),
+				canRemove: canRemoveBlocks( clientIds ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

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

@@ -1,7 +1,7 @@
 iframe[name="editor-canvas"] {
+	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	display: block;
-	background-color: $gray-300;
-	box-sizing: border-box;
+	background-color: transparent;
 }

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

@@ -53,7 +53,7 @@ const BlockDraggable = ( {
 
 			return {
 				srcRootClientId: rootClientId,
-				isDraggable: canMoveBlocks( clientIds, rootClientId ),
+				isDraggable: canMoveBlocks( clientIds ),
 				icon: variation?.icon || _getBlockType( blockName )?.icon,
 				visibleInserter: isBlockInsertionPointVisible(),
 				getBlockType: _getBlockType,

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

@@ -623,8 +623,8 @@ function BlockListBlockProvider( props ) {
 			}
 
 			const _isSelected = isBlockSelected( clientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId );
+			const canMove = canMoveBlock( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;

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

@@ -432,8 +432,8 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	const attributes = getBlockAttributes( clientId );
 	const isSelected = isBlockSelected( clientId );
 	const templateLock = getTemplateLock( rootClientId );
-	const canRemove = canRemoveBlock( clientId, rootClientId );
-	const canMove = canMoveBlock( clientId, rootClientId );
+	const canRemove = canRemoveBlock( clientId );
+	const canMove = canMoveBlock( clientId );
 
 	// The fallback to `{}` is a temporary fix.
 	// This function should never be called when a block is not present in

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

@@ -40,7 +40,9 @@ export function useInBetweenInserter() {
 			}
 
 			function onMouseMove( event ) {
-				if ( openRef.current ) {
+				// openRef is the reference to the insertion point between blocks.
+				// If the reference is not set or the insertion point is already open, return.
+				if ( openRef === undefined || openRef.current ) {
 					return;
 				}
 

package/src/components/block-lock/use-block-lock.js

@@ -24,14 +24,12 @@ export default function useBlockLock( clientId ) {
 				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
-				getBlockRootClientId,
 				getTemplateLock,
 			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
 
 			const canEdit = canEditBlock( clientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
+			const canMove = canMoveBlock( clientId );
+			const canRemove = canRemoveBlock( clientId );
 
 			return {
 				canEdit,

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

@@ -46,7 +46,7 @@ function BlockMover( {
 			const blockOrder = getBlockOrder( _rootClientId );
 
 			return {
-				canMove: canMoveBlocks( clientIds, _rootClientId ),
+				canMove: canMoveBlocks( clientIds ),
 				rootClientId: _rootClientId,
 				isFirst: firstIndex === 0,
 				isLast: lastIndex === blockOrder.length - 1,

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

@@ -166,7 +166,7 @@ export default compose(
 			numberOfBlocks: blockOrder.length - 1,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
-			canMove: canMoveBlocks( clientIds, rootClientId ),
+			canMove: canMoveBlocks( clientIds ),
 			rootClientId,
 		};
 	} ),

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

@@ -256,7 +256,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertBlock && (
+								{ canInsertBlock && ! isContentOnly && (
 									<>
 										<MenuItem
 											onClick={ pipe(

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

@@ -22,17 +22,12 @@ const EMPTY_OBJECT = {};
 export function useBlockVariationTransforms( { clientIds, blocks } ) {
 	const { activeBlockVariation, blockVariationTransformations } = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockVariations } =
 				select( blocksStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
+			const canRemove = canRemoveBlocks( clientIds );
 			// Only handle single selected blocks for now.
 			if ( blocks.length !== 1 || ! canRemove ) {
 				return EMPTY_OBJECT;

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

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
+	__experimentalText as Text,
+	MenuGroup,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
+	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
@@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {
 			</p>
 		);
 	}
+
+	const connectedBlockDescription = isSingleBlock
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+
 	return (
 		<div className="block-editor-block-switcher__container">
 			{ hasPatternTransformation && (
@@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( {
 					onSwitch={ onClose }
 				/>
 			) }
+			{ isUsingBindings && (
+				<MenuGroup>
+					<Text className="block-editor-block-switcher__binding-indicator">
+						{ connectedBlockDescription }
+					</Text>
+				</MenuGroup>
+			) }
 		</div>
 	);
 }
 
-export const BlockSwitcher = ( { clientIds, disabled } ) => {
+export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 	const {
 		canRemove,
 		hasBlockStyles,
@@ -170,21 +191,14 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 		isTemplate,
 	} = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlocksByClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlocksByClientId, getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
 			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
 				return { invalidBlocks: true };
 			}
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
@@ -206,7 +220,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 			}
 
 			return {
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+				canRemove: canRemoveBlocks( clientIds ),
 				hasBlockStyles:
 					_isSingleBlockSelected &&
 					!! getBlockStyles( firstBlockName )?.length,
@@ -303,6 +317,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
+								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>

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

@@ -203,3 +203,8 @@
 	padding: 6px $grid-unit;
 	margin: 0;
 }
+
+.block-editor-block-switcher__binding-indicator {
+	display: block;
+	padding: $grid-unit;
+}

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

@@ -35,9 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
-import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
+
 /**
  * Renders the block toolbar.
  *
@@ -62,7 +61,6 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
-		blockName,
 		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
@@ -94,13 +92,14 @@ export function PrivateBlockToolbar( {
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
-		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
-			?.metadata?.bindings;
+		const _isUsingBindings = selectedBlockClientIds.every(
+			( clientId ) =>
+				!! getBlockAttributes( clientId )?.metadata?.bindings
+		);
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockName: _blockName,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
@@ -146,6 +145,7 @@ export function PrivateBlockToolbar( {
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
+		'is-connected': isUsingBindings,
 	} );
 
 	return (
@@ -167,9 +167,6 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator clientIds={ blockClientIds } />
-				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
 						<div
@@ -180,6 +177,7 @@ export function PrivateBlockToolbar( {
 								<BlockSwitcher
 									clientIds={ blockClientIds }
 									disabled={ ! isDefaultEditingMode }
+									isUsingBindings={ isUsingBindings }
 								/>
 								{ isDefaultEditingMode && (
 									<>

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

@@ -39,14 +39,17 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
-	}
-
-	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		&:disabled .block-editor-block-icon.has-colors {
+	&.is-synced,
+	&.is-connected {
+		.block-editor-block-switcher .components-button .block-editor-block-icon {
 			color: var(--wp-block-synced-color);
 		}
+
+		.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+			&:disabled .block-editor-block-icon.has-colors {
+				color: var(--wp-block-synced-color);
+			}
+		}
 	}
 
 	> :last-child,

package/src/components/block-tools/block-selection-button.js

@@ -107,8 +107,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId, rootClientId ),
-				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId ),
+				canMove: canMoveBlock( clientId ),
 			};
 		},
 		[ clientId, rootClientId ]

package/src/components/block-variation-picker/content.scss

@@ -13,7 +13,7 @@
 	font-size: $helptext-font-size;
 
 	svg {
-		fill: $gray-400 !important;
+		fill: $gray-600 !important;
 	}
 
 	.components-button {

package/src/components/button-block-appender/index.js

@@ -60,6 +60,8 @@ function ButtonBlockAppender(
 						onClick={ onToggle }
 						aria-haspopup={ isToggleButton ? 'true' : undefined }
 						aria-expanded={ isToggleButton ? isOpen : undefined }
+						// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
 					>