@wordpress/block-editor 12.19.3 → 12.19.5

package/build-style/style-rtl.css

@@ -97,6 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -122,6 +123,20 @@
   margin-top: 0;
 }
 
+.block-editor-block-bindings-toolbar-indicator {
+  display: inline-flex;
+  align-items: center;
+  height: 48px;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
@@ -1550,6 +1565,17 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-bottom: 8px;
+}
+
+.block-editor-global-styles__clear-shadow {
+  text-align: left;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
   display: block;
@@ -1565,21 +1591,27 @@ iframe[name=editor-canvas].has-editor-padding {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles__shadow-indicator-wrapper {
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
   cursor: pointer;
   padding: 0;
-  height: 24px;
-  width: 24px;
+  height: 26px;
+  width: 26px;
+  box-sizing: border-box;
+  transform: scale(1);
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+.block-editor-global-styles__shadow-indicator:focus {
+  border: 2px solid #757575;
+}
+.block-editor-global-styles__shadow-indicator:hover {
+  transform: scale(1.2);
+}
+.block-editor-global-styles__shadow-indicator.unset {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
@@ -1794,6 +1826,13 @@ iframe[name=editor-canvas].has-editor-padding {
 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
   content: attr(aria-label);
 }
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top {
+  gap: 8px;
+}
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon {
+  min-width: inherit;
+  width: min-content;
+}
 
 .block-editor-link-control__search-input-wrapper {
   margin-bottom: 8px;
@@ -2646,6 +2685,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.block-editor-list-view-block-select-button__bindings svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3125,6 +3172,7 @@ iframe[name=editor-canvas].has-editor-padding {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-left: 8px;
+  min-width: 150px;
   max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
@@ -3169,6 +3217,11 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
   flex-direction: row;
 }
+.block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
+  color: #757575;
+  font-size: 12px;
+  margin-bottom: 16px;
+}
 
 .block-editor-hooks__background__inspector-media-replace-container {
   position: relative;
@@ -3521,16 +3574,14 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
+  position: relative;
 }
 @media (min-width: 600px) {
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
-    position: relative;
-  }
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
     content: "";
     height: 1px;
     width: 100%;
-    background: #1e1e1e;
+    background: #e0e0e0;
     position: absolute;
     top: 50%;
     right: 50%;
@@ -3538,6 +3589,11 @@ iframe[name=editor-canvas].has-editor-padding {
     margin-top: -0.5px;
   }
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+    background: #1e1e1e;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-right: 6px;

package/build-style/style.css

@@ -97,6 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -122,6 +123,20 @@
   margin-top: 0;
 }
 
+.block-editor-block-bindings-toolbar-indicator {
+  display: inline-flex;
+  align-items: center;
+  height: 48px;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
@@ -1550,6 +1565,17 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-bottom: 8px;
+}
+
+.block-editor-global-styles__clear-shadow {
+  text-align: right;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
   display: block;
@@ -1565,21 +1591,27 @@ iframe[name=editor-canvas].has-editor-padding {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles__shadow-indicator-wrapper {
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
   cursor: pointer;
   padding: 0;
-  height: 24px;
-  width: 24px;
+  height: 26px;
+  width: 26px;
+  box-sizing: border-box;
+  transform: scale(1);
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+.block-editor-global-styles__shadow-indicator:focus {
+  border: 2px solid #757575;
+}
+.block-editor-global-styles__shadow-indicator:hover {
+  transform: scale(1.2);
+}
+.block-editor-global-styles__shadow-indicator.unset {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
@@ -1795,6 +1827,13 @@ iframe[name=editor-canvas].has-editor-padding {
 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
   content: attr(aria-label);
 }
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top {
+  gap: 8px;
+}
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon {
+  min-width: inherit;
+  width: min-content;
+}
 
 .block-editor-link-control__search-input-wrapper {
   margin-bottom: 8px;
@@ -2647,6 +2686,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.block-editor-list-view-block-select-button__bindings svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3126,6 +3173,7 @@ iframe[name=editor-canvas].has-editor-padding {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-right: 8px;
+  min-width: 150px;
   max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
@@ -3170,6 +3218,11 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
   flex-direction: row;
 }
+.block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
+  color: #757575;
+  font-size: 12px;
+  margin-bottom: 16px;
+}
 
 .block-editor-hooks__background__inspector-media-replace-container {
   position: relative;
@@ -3522,16 +3575,14 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
+  position: relative;
 }
 @media (min-width: 600px) {
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
-    position: relative;
-  }
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
     content: "";
     height: 1px;
     width: 100%;
-    background: #1e1e1e;
+    background: #e0e0e0;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -3539,6 +3590,11 @@ iframe[name=editor-canvas].has-editor-padding {
     margin-top: -0.5px;
   }
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+    background: #1e1e1e;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-left: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.19.3",
+	"version": "12.19.5",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,9 +38,9 @@
 		"@wordpress/a11y": "^3.51.1",
 		"@wordpress/api-fetch": "^6.48.1",
 		"@wordpress/blob": "^3.51.1",
-		"@wordpress/blocks": "^12.28.3",
-		"@wordpress/commands": "^0.22.2",
-		"@wordpress/components": "^26.0.2",
+		"@wordpress/blocks": "^12.28.5",
+		"@wordpress/commands": "^0.22.4",
+		"@wordpress/components": "^26.0.4",
 		"@wordpress/compose": "^6.28.1",
 		"@wordpress/data": "^9.21.1",
 		"@wordpress/date": "^4.51.1",
@@ -51,14 +51,14 @@
 		"@wordpress/hooks": "^3.51.1",
 		"@wordpress/html-entities": "^3.51.1",
 		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
+		"@wordpress/icons": "^9.42.3",
 		"@wordpress/is-shallow-equal": "^4.51.1",
 		"@wordpress/keyboard-shortcuts": "^4.28.1",
 		"@wordpress/keycodes": "^3.51.1",
 		"@wordpress/notices": "^4.19.1",
-		"@wordpress/preferences": "^3.28.2",
+		"@wordpress/preferences": "^3.28.4",
 		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/rich-text": "^6.28.2",
+		"@wordpress/rich-text": "^6.28.3",
 		"@wordpress/style-engine": "^1.34.1",
 		"@wordpress/token-list": "^2.51.1",
 		"@wordpress/url": "^3.52.1",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
+	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
 }

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

@@ -20,42 +20,55 @@ export default function BlockActions( {
 	children,
 	__experimentalUpdateSelection: updateSelection,
 } ) {
-	const {
-		canInsertBlockType,
-		getBlockRootClientId,
-		getBlocksByClientId,
-		canMoveBlocks,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
-
-	const blocks = getBlocksByClientId( clientIds );
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canCopyStyles = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			( hasBlockSupport( block.name, 'color' ) ||
-				hasBlockSupport( block.name, 'typography' ) )
-		);
-	} );
-
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
-
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
+	const selected = useSelect(
+		( select ) => {
+			const {
+				canInsertBlockType,
+				getBlockRootClientId,
+				getBlocksByClientId,
+				getDirectInsertBlock,
+				canMoveBlocks,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+
+			const blocks = getBlocksByClientId( clientIds );
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const canInsertDefaultBlock = canInsertBlockType(
+				getDefaultBlockName(),
+				rootClientId
+			);
+			const directInsertBlock = rootClientId
+				? getDirectInsertBlock( rootClientId )
+				: null;
+
+			return {
+				canMove: canMoveBlocks( clientIds, rootClientId ),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canCopyStyles: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						( hasBlockSupport( block.name, 'color' ) ||
+							hasBlockSupport( block.name, 'typography' ) )
+					);
+				} ),
+				canDuplicate: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						hasBlockSupport( block.name, 'multiple', true ) &&
+						canInsertBlockType( block.name, rootClientId )
+					);
+				} ),
+			};
+		},
+		[ clientIds, getDefaultBlockName ]
 	);
+	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const canMove = canMoveBlocks( clientIds, rootClientId );
-	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
+		selected;
 
 	const {
 		removeBlocks,
@@ -75,11 +88,9 @@ export default function BlockActions( {
 	return children( {
 		canCopyStyles,
 		canDuplicate,
-		canInsertDefaultBlock,
+		canInsertBlock,
 		canMove,
 		canRemove,
-		rootClientId,
-		blocks,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
 		},
@@ -104,14 +115,17 @@ export default function BlockActions( {
 			setBlockMovingClientId( clientIds[ 0 ] );
 		},
 		onGroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
 			const groupingBlockName = getGroupingBlockName();
 
 			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = switchToBlockType(
+				getBlocksByClientId( clientIds ),
+				groupingBlockName
+			);
 
 			if ( ! newBlocks ) {
 				return;
@@ -119,12 +133,11 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, newBlocks );
 		},
 		onUngroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
-			const innerBlocks = blocks[ 0 ].innerBlocks;
-
+			const innerBlocks = getBlocks( clientIds[ 0 ] );
 			if ( ! innerBlocks.length ) {
 				return;
 			}
@@ -132,16 +145,13 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, innerBlocks );
 		},
 		onCopy() {
-			const selectedBlockClientIds = blocks.map(
-				( { clientId } ) => clientId
-			);
-			if ( blocks.length === 1 ) {
-				flashBlock( selectedBlockClientIds[ 0 ] );
+			if ( clientIds.length === 1 ) {
+				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', selectedBlockClientIds );
+			notifyCopy( 'copy', clientIds );
 		},
 		async onPasteStyles() {
-			await pasteStyles( blocks );
+			await pasteStyles( getBlocksByClientId( clientIds ) );
 		},
 	} );
 }

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
+import { connection } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+export default function BlockBindingsToolbarIndicator() {
+	return (
+		<ToolbarGroup>
+			<ToolbarItem
+				as={ 'div' }
+				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
+				className="block-editor-block-bindings-toolbar-indicator"
+			>
+				<Icon icon={ connection } size={ 24 } />
+			</ToolbarItem>
+		</ToolbarGroup>
+	);
+}

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

@@ -0,0 +1,14 @@
+.block-editor-block-bindings-toolbar-indicator {
+	display: inline-flex;
+	align-items: center;
+	height: 48px;
+	padding: 6px;
+
+	svg g {
+		stroke: var(--wp-bound-block-color);
+		fill: transparent;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+}

package/src/components/block-edit/context.js

@@ -6,6 +6,7 @@ import { createContext, useContext } from '@wordpress/element';
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
 export const blockEditingModeKey = Symbol( 'blockEditingMode' );
+export const blockBindingsKey = Symbol( 'blockBindings' );
 
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',

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

@@ -14,6 +14,7 @@ import {
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
 	blockEditingModeKey,
+	blockBindingsKey,
 } from './context';
 
 /**
@@ -41,7 +42,8 @@ export default function BlockEdit( {
 		attributes = {},
 		__unstableLayoutClassNames,
 	} = props;
-	const { layout = null } = attributes;
+	const { layout = null, metadata = {} } = attributes;
+	const { bindings } = metadata;
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
@@ -62,6 +64,7 @@ export default function BlockEdit( {
 					[ mayDisplayControlsKey ]: mayDisplayControls,
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
 					[ blockEditingModeKey ]: blockEditingMode,
+					[ blockBindingsKey ]: bindings,
 				} ),
 				[
 					name,
@@ -73,6 +76,7 @@ export default function BlockEdit( {
 					mayDisplayControls,
 					mayDisplayParentControls,
 					blockEditingMode,
+					bindings,
 				]
 			) }
 		>

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

@@ -30,7 +30,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -116,6 +116,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId
 	);
 
+	const borderPanelLabel = useBorderPanelLabel( {
+		blockName: selectedBlockName,
+	} );
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -140,9 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 						/>
 						<InspectorControls.Slot
 							group="border"
-							label={ getBorderPanelLabel( {
-								blockName: selectedBlockName,
-							} ) }
+							label={ borderPanelLabel }
 						/>
 						<InspectorControls.Slot group="styles" />
 					</>
@@ -251,7 +253,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<div className="block-editor-block-inspector">

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

@@ -19,13 +19,17 @@ import useMovingAnimation from '../../use-moving-animation';
 import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
-import { useBlockEditContext } from '../../block-edit/context';
+import {
+	blockBindingsKey,
+	useBlockEditContext,
+} from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -123,6 +127,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	] );
 
 	const blockEditContext = useBlockEditContext();
+	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
+	const bindingsStyle =
+		hasBlockBindings && canBindBlock( name )
+			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
+			: {};
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -168,7 +178,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			wrapperProps.className,
 			defaultClassName
 		),
-		style: { ...wrapperProps.style, ...props.style },
+		style: { ...wrapperProps.style, ...props.style, ...bindingsStyle },
 	};
 }