@wordpress/block-editor 15.9.1-next.8b30e05b0.0 → 15.10.0

package/build-module/utils/block-bindings.js

@@ -1,12 +1,6 @@
 // packages/block-editor/src/utils/block-bindings.js
-import { useDispatch, useRegistry } from "@wordpress/data";
-import { store as blockEditorStore } from "../store";
-import { useBlockEditContext } from "../components/block-edit";
 var DEFAULT_ATTRIBUTE = "__default";
 var PATTERN_OVERRIDES_SOURCE = "core/pattern-overrides";
-function isObjectEmpty(object) {
-  return !object || Object.keys(object).length === 0;
-}
 function hasPatternOverridesDefaultBinding(bindings) {
   return bindings?.[DEFAULT_ATTRIBUTE]?.source === PATTERN_OVERRIDES_SOURCE;
 }
@@ -21,43 +15,8 @@ function replacePatternOverridesDefaultBinding(bindings, supportedAttributes) {
   }
   return bindings;
 }
-function useBlockBindingsUtils(clientId) {
-  const { clientId: contextClientId } = useBlockEditContext();
-  const blockClientId = clientId || contextClientId;
-  const { updateBlockAttributes } = useDispatch(blockEditorStore);
-  const { getBlockAttributes } = useRegistry().select(blockEditorStore);
-  const updateBlockBindings = (bindings) => {
-    const { metadata: { bindings: currentBindings, ...metadata } = {} } = getBlockAttributes(blockClientId);
-    const newBindings = { ...currentBindings };
-    Object.entries(bindings).forEach(([attribute, binding]) => {
-      if (!binding && newBindings[attribute]) {
-        delete newBindings[attribute];
-        return;
-      }
-      newBindings[attribute] = binding;
-    });
-    const newMetadata = {
-      ...metadata,
-      bindings: newBindings
-    };
-    if (isObjectEmpty(newMetadata.bindings)) {
-      delete newMetadata.bindings;
-    }
-    updateBlockAttributes(blockClientId, {
-      metadata: isObjectEmpty(newMetadata) ? void 0 : newMetadata
-    });
-  };
-  const removeAllBlockBindings = () => {
-    const { metadata: { bindings, ...metadata } = {} } = getBlockAttributes(blockClientId);
-    updateBlockAttributes(blockClientId, {
-      metadata: isObjectEmpty(metadata) ? void 0 : metadata
-    });
-  };
-  return { updateBlockBindings, removeAllBlockBindings };
-}
 export {
   hasPatternOverridesDefaultBinding,
-  replacePatternOverridesDefaultBinding,
-  useBlockBindingsUtils
+  replacePatternOverridesDefaultBinding
 };
 //# sourceMappingURL=block-bindings.js.map

package/build-module/utils/block-bindings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/block-bindings.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { useBlockEditContext } from '../components/block-edit';\n\nconst DEFAULT_ATTRIBUTE = '__default';\nconst PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';\n\n/**\n * Checks if the given object is empty.\n *\n * @param {?Object} object The object to check.\n *\n * @return {boolean} Whether the object is empty.\n */\nfunction isObjectEmpty( object ) {\n\treturn ! object || Object.keys( object ).length === 0;\n}\n\n/**\n * Checks if the block has the `__default` binding for pattern overrides.\n *\n * @param {?Record<string, object>} bindings A block's bindings from the metadata attribute.\n *\n * @return {boolean} Whether the block has the `__default` binding for pattern overrides.\n */\nexport function hasPatternOverridesDefaultBinding( bindings ) {\n\treturn bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;\n}\n\n/**\n * Returns the bindings with the `__default` binding for pattern overrides\n * replaced with the full-set of supported attributes. e.g.:\n *\n * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`\n * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`\n *\n * @param {?Record<string, object>} bindings            A block's bindings from the metadata attribute.\n * @param {string[]}                supportedAttributes The block's attributes which are supported by block bindings.\n *\n * @return {Object} The bindings with default replaced for pattern overrides.\n */\nexport function replacePatternOverridesDefaultBinding(\n\tbindings,\n\tsupportedAttributes\n) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif ( hasPatternOverridesDefaultBinding( bindings ) ) {\n\t\tconst bindingsWithDefaults = {};\n\t\tfor ( const attributeName of supportedAttributes ) {\n\t\t\t// If the block has mixed binding sources, retain any non pattern override bindings.\n\t\t\tconst bindingSource = bindings[ attributeName ]\n\t\t\t\t? bindings[ attributeName ]\n\t\t\t\t: { source: PATTERN_OVERRIDES_SOURCE };\n\t\t\tbindingsWithDefaults[ attributeName ] = bindingSource;\n\t\t}\n\n\t\treturn bindingsWithDefaults;\n\t}\n\n\treturn bindings;\n}\n\n/**\n * Contains utils to update the block `bindings` metadata.\n *\n * @typedef {Object} WPBlockBindingsUtils\n *\n * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.\n * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.\n */\n\n/**\n * Retrieves the existing utils needed to update the block `bindings` metadata.\n * They can be used to create, modify, or remove connections from the existing block attributes.\n *\n * It contains the following utils:\n * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.\n * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.\n *\n * @since 6.7.0 Introduced in WordPress core.\n *\n * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.\n *\n * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.\n *\n * @example\n * ```js\n * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();\n *\n * // Update url and alt attributes.\n * updateBlockBindings( {\n *     url: {\n *         source: 'core/post-meta',\n *         args: {\n *             key: 'url_custom_field',\n *         },\n *     },\n *     alt: {\n *         source: 'core/post-meta',\n *         args: {\n *             key: 'text_custom_field',\n *         },\n *     },\n * } );\n *\n * // Remove binding from url attribute.\n * updateBlockBindings( { url: undefined } );\n *\n * // Remove bindings from all attributes.\n * removeAllBlockBindings();\n * ```\n */\nexport function useBlockBindingsUtils( clientId ) {\n\tconst { clientId: contextClientId } = useBlockEditContext();\n\tconst blockClientId = clientId || contextClientId;\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { getBlockAttributes } = useRegistry().select( blockEditorStore );\n\n\t/**\n\t * Updates the value of the bindings connected to block attributes.\n\t * It removes the binding when the new value is `undefined`.\n\t *\n\t * @param {Object} bindings        Bindings including the attributes to update and the new object.\n\t * @param {string} bindings.source The source name to connect to.\n\t * @param {Object} [bindings.args] Object containing the arguments needed by the source.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { updateBlockBindings } = useBlockBindingsUtils();\n\t * updateBlockBindings( {\n\t *     url: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'url_custom_field',\n\t *         },\n\t * \t   },\n\t *     alt: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'text_custom_field',\n\t *         },\n\t * \t   }\n\t * } );\n\t * ```\n\t */\n\tconst updateBlockBindings = ( bindings ) => {\n\t\tconst { metadata: { bindings: currentBindings, ...metadata } = {} } =\n\t\t\tgetBlockAttributes( blockClientId );\n\t\tconst newBindings = { ...currentBindings };\n\n\t\tObject.entries( bindings ).forEach( ( [ attribute, binding ] ) => {\n\t\t\tif ( ! binding && newBindings[ attribute ] ) {\n\t\t\t\tdelete newBindings[ attribute ];\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tnewBindings[ attribute ] = binding;\n\t\t} );\n\n\t\tconst newMetadata = {\n\t\t\t...metadata,\n\t\t\tbindings: newBindings,\n\t\t};\n\n\t\tif ( isObjectEmpty( newMetadata.bindings ) ) {\n\t\t\tdelete newMetadata.bindings;\n\t\t}\n\n\t\tupdateBlockAttributes( blockClientId, {\n\t\t\tmetadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,\n\t\t} );\n\t};\n\n\t/**\n\t * Removes the bindings property of the `metadata` attribute.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { removeAllBlockBindings } = useBlockBindingsUtils();\n\t * removeAllBlockBindings();\n\t * ```\n\t */\n\tconst removeAllBlockBindings = () => {\n\t\tconst { metadata: { bindings, ...metadata } = {} } =\n\t\t\tgetBlockAttributes( blockClientId );\n\t\tupdateBlockAttributes( blockClientId, {\n\t\t\tmetadata: isObjectEmpty( metadata ) ? undefined : metadata,\n\t\t} );\n\t};\n\n\treturn { updateBlockBindings, removeAllBlockBindings };\n}\n"],
-  "mappings": ";AAGA,SAAS,aAAa,mBAAmB;AAKzC,SAAS,SAAS,wBAAwB;AAC1C,SAAS,2BAA2B;AAEpC,IAAM,oBAAoB;AAC1B,IAAM,2BAA2B;AASjC,SAAS,cAAe,QAAS;AAChC,SAAO,CAAE,UAAU,OAAO,KAAM,MAAO,EAAE,WAAW;AACrD;AASO,SAAS,kCAAmC,UAAW;AAC7D,SAAO,WAAY,iBAAkB,GAAG,WAAW;AACpD;AAcO,SAAS,sCACf,UACA,qBACC;AAED,MAAK,kCAAmC,QAAS,GAAI;AACpD,UAAM,uBAAuB,CAAC;AAC9B,eAAY,iBAAiB,qBAAsB;AAElD,YAAM,gBAAgB,SAAU,aAAc,IAC3C,SAAU,aAAc,IACxB,EAAE,QAAQ,yBAAyB;AACtC,2BAAsB,aAAc,IAAI;AAAA,IACzC;AAEA,WAAO;AAAA,EACR;AAEA,SAAO;AACR;AAqDO,SAAS,sBAAuB,UAAW;AACjD,QAAM,EAAE,UAAU,gBAAgB,IAAI,oBAAoB;AAC1D,QAAM,gBAAgB,YAAY;AAClC,QAAM,EAAE,sBAAsB,IAAI,YAAa,gBAAiB;AAChE,QAAM,EAAE,mBAAmB,IAAI,YAAY,EAAE,OAAQ,gBAAiB;AA+BtE,QAAM,sBAAsB,CAAE,aAAc;AAC3C,UAAM,EAAE,UAAU,EAAE,UAAU,iBAAiB,GAAG,SAAS,IAAI,CAAC,EAAE,IACjE,mBAAoB,aAAc;AACnC,UAAM,cAAc,EAAE,GAAG,gBAAgB;AAEzC,WAAO,QAAS,QAAS,EAAE,QAAS,CAAE,CAAE,WAAW,OAAQ,MAAO;AACjE,UAAK,CAAE,WAAW,YAAa,SAAU,GAAI;AAC5C,eAAO,YAAa,SAAU;AAC9B;AAAA,MACD;AACA,kBAAa,SAAU,IAAI;AAAA,IAC5B,CAAE;AAEF,UAAM,cAAc;AAAA,MACnB,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAEA,QAAK,cAAe,YAAY,QAAS,GAAI;AAC5C,aAAO,YAAY;AAAA,IACpB;AAEA,0BAAuB,eAAe;AAAA,MACrC,UAAU,cAAe,WAAY,IAAI,SAAY;AAAA,IACtD,CAAE;AAAA,EACH;AAaA,QAAM,yBAAyB,MAAM;AACpC,UAAM,EAAE,UAAU,EAAE,UAAU,GAAG,SAAS,IAAI,CAAC,EAAE,IAChD,mBAAoB,aAAc;AACnC,0BAAuB,eAAe;AAAA,MACrC,UAAU,cAAe,QAAS,IAAI,SAAY;AAAA,IACnD,CAAE;AAAA,EACH;AAEA,SAAO,EAAE,qBAAqB,uBAAuB;AACtD;",
+  "sourcesContent": ["const DEFAULT_ATTRIBUTE = '__default';\nconst PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';\n\n/**\n * Checks if the block has the `__default` binding for pattern overrides.\n *\n * @param {?Record<string, object>} bindings A block's bindings from the metadata attribute.\n *\n * @return {boolean} Whether the block has the `__default` binding for pattern overrides.\n */\nexport function hasPatternOverridesDefaultBinding( bindings ) {\n\treturn bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;\n}\n\n/**\n * Returns the bindings with the `__default` binding for pattern overrides\n * replaced with the full-set of supported attributes. e.g.:\n *\n * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`\n * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`\n *\n * @param {?Record<string, object>} bindings            A block's bindings from the metadata attribute.\n * @param {string[]}                supportedAttributes The block's attributes which are supported by block bindings.\n *\n * @return {Object} The bindings with default replaced for pattern overrides.\n */\nexport function replacePatternOverridesDefaultBinding(\n\tbindings,\n\tsupportedAttributes\n) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif ( hasPatternOverridesDefaultBinding( bindings ) ) {\n\t\tconst bindingsWithDefaults = {};\n\t\tfor ( const attributeName of supportedAttributes ) {\n\t\t\t// If the block has mixed binding sources, retain any non pattern override bindings.\n\t\t\tconst bindingSource = bindings[ attributeName ]\n\t\t\t\t? bindings[ attributeName ]\n\t\t\t\t: { source: PATTERN_OVERRIDES_SOURCE };\n\t\t\tbindingsWithDefaults[ attributeName ] = bindingSource;\n\t\t}\n\n\t\treturn bindingsWithDefaults;\n\t}\n\n\treturn bindings;\n}\n"],
+  "mappings": ";AAAA,IAAM,oBAAoB;AAC1B,IAAM,2BAA2B;AAS1B,SAAS,kCAAmC,UAAW;AAC7D,SAAO,WAAY,iBAAkB,GAAG,WAAW;AACpD;AAcO,SAAS,sCACf,UACA,qBACC;AAED,MAAK,kCAAmC,QAAS,GAAI;AACpD,UAAM,uBAAuB,CAAC;AAC9B,eAAY,iBAAiB,qBAAsB;AAElD,YAAM,gBAAgB,SAAU,aAAc,IAC3C,SAAU,aAAc,IACxB,EAAE,QAAQ,yBAAyB;AACtC,2BAAsB,aAAc,IAAI;AAAA,IACzC;AAEA,WAAO;AAAA,EACR;AAEA,SAAO;AACR;",
   "names": []
 }

package/build-module/utils/index.js

@@ -1,10 +1,8 @@
 // packages/block-editor/src/utils/index.js
 import { default as default2 } from "./transform-styles";
 import { default as default3 } from "./get-px-from-css-unit";
-import { useBlockBindingsUtils } from "./block-bindings";
 export {
   default3 as getPxFromCssUnit,
-  default2 as transformStyles,
-  useBlockBindingsUtils
+  default2 as transformStyles
 };
 //# sourceMappingURL=index.js.map

package/build-module/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/index.js"],
-  "sourcesContent": ["export { default as transformStyles } from './transform-styles';\nexport { default as getPxFromCssUnit } from './get-px-from-css-unit';\nexport { useBlockBindingsUtils } from './block-bindings';\n"],
-  "mappings": ";AAAA,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAmC;AAC5C,SAAS,6BAA6B;",
+  "sourcesContent": ["export { default as transformStyles } from './transform-styles';\nexport { default as getPxFromCssUnit } from './get-px-from-css-unit';\n"],
+  "mappings": ";AAAA,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAmC;",
   "names": ["default"]
 }

package/build-style/style-rtl.css

@@ -3782,15 +3782,15 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   content: attr(aria-label);
   font-size: 12px;
 }
-.show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
-  padding-right: 6px;
-  padding-left: 6px;
-}
-.show-icon-labels .block-editor-block-icon {
+.show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
   min-width: 0 !important;
 }
+.show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
+  padding-right: 6px;
+  padding-left: 6px;
+}
 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -4219,7 +4219,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   right: 0;
   bottom: 0;
   width: 280px;
-  padding: 24px 32px 32px;
+  padding: 24px 24px 24px;
   overflow-x: visible;
   overflow-y: auto;
 }

package/build-style/style.css

@@ -3784,15 +3784,15 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   content: attr(aria-label);
   font-size: 12px;
 }
-.show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-.show-icon-labels .block-editor-block-icon {
+.show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
   min-width: 0 !important;
 }
+.show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
+  padding-left: 6px;
+  padding-right: 6px;
+}
 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -4221,7 +4221,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   left: 0;
   bottom: 0;
   width: 280px;
-  padding: 24px 32px 32px;
+  padding: 24px 24px 24px;
   overflow-x: visible;
   overflow-y: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.9.1-next.8b30e05b0.0",
+	"version": "15.10.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -52,45 +52,44 @@
 		"build-module/hooks/**"
 	],
 	"dependencies": {
-		"@emotion/react": "^11.7.1",
-		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/api-fetch": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/base-styles": "^6.12.1-next.8b30e05b0.0",
-		"@wordpress/blob": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/block-serialization-default-parser": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/blocks": "^15.9.1-next.8b30e05b0.0",
-		"@wordpress/commands": "^1.36.1-next.8b30e05b0.0",
-		"@wordpress/components": "^30.9.1-next.8b30e05b0.0",
-		"@wordpress/compose": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/data": "^10.36.1-next.8b30e05b0.0",
-		"@wordpress/dataviews": "^11.0.1-next.8b30e05b0.0",
-		"@wordpress/date": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/deprecated": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/dom": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/element": "^6.36.1-next.8b30e05b0.0",
-		"@wordpress/escape-html": "^3.36.1-next.8b30e05b0.0",
-		"@wordpress/global-styles-engine": "^1.3.1-next.8b30e05b0.0",
-		"@wordpress/hooks": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/html-entities": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/i18n": "^6.9.1-next.8b30e05b0.0",
-		"@wordpress/icons": "^11.3.1-next.8b30e05b0.0",
-		"@wordpress/interactivity": "^6.36.1-next.8b30e05b0.0",
-		"@wordpress/is-shallow-equal": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/keyboard-shortcuts": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/keycodes": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/notices": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/preferences": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/priority-queue": "^3.36.1-next.8b30e05b0.0",
-		"@wordpress/private-apis": "^1.36.1-next.8b30e05b0.0",
-		"@wordpress/rich-text": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/style-engine": "^2.36.1-next.8b30e05b0.0",
-		"@wordpress/token-list": "^3.36.1-next.8b30e05b0.0",
-		"@wordpress/upload-media": "^0.21.1-next.8b30e05b0.0",
-		"@wordpress/url": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/warning": "^3.36.1-next.8b30e05b0.0",
-		"@wordpress/wordcount": "^4.36.1-next.8b30e05b0.0",
+		"@wordpress/a11y": "^4.37.0",
+		"@wordpress/api-fetch": "^7.37.0",
+		"@wordpress/base-styles": "^6.13.0",
+		"@wordpress/blob": "^4.37.0",
+		"@wordpress/block-serialization-default-parser": "^5.37.0",
+		"@wordpress/blocks": "^15.10.0",
+		"@wordpress/commands": "^1.37.0",
+		"@wordpress/components": "^31.0.0",
+		"@wordpress/compose": "^7.37.0",
+		"@wordpress/data": "^10.37.0",
+		"@wordpress/dataviews": "^11.1.0",
+		"@wordpress/date": "^5.37.0",
+		"@wordpress/deprecated": "^4.37.0",
+		"@wordpress/dom": "^4.37.0",
+		"@wordpress/element": "^6.37.0",
+		"@wordpress/escape-html": "^3.37.0",
+		"@wordpress/global-styles-engine": "^1.4.0",
+		"@wordpress/hooks": "^4.37.0",
+		"@wordpress/html-entities": "^4.37.0",
+		"@wordpress/i18n": "^6.10.0",
+		"@wordpress/icons": "^11.4.0",
+		"@wordpress/image-cropper": "^1.1.0",
+		"@wordpress/interactivity": "^6.37.0",
+		"@wordpress/is-shallow-equal": "^5.37.0",
+		"@wordpress/keyboard-shortcuts": "^5.37.0",
+		"@wordpress/keycodes": "^4.37.0",
+		"@wordpress/notices": "^5.37.0",
+		"@wordpress/preferences": "^4.37.0",
+		"@wordpress/priority-queue": "^3.37.0",
+		"@wordpress/private-apis": "^1.37.0",
+		"@wordpress/rich-text": "^7.37.0",
+		"@wordpress/style-engine": "^2.37.0",
+		"@wordpress/token-list": "^3.37.0",
+		"@wordpress/upload-media": "^0.22.0",
+		"@wordpress/url": "^4.37.0",
+		"@wordpress/warning": "^3.37.0",
+		"@wordpress/wordcount": "^4.37.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -113,5 +112,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2466f6bc223f8be98c55e1ac7270e8c3e413eaaf"
+	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
 }

package/src/components/block-alignment-matrix-control/index.js

@@ -77,11 +77,7 @@ function BlockAlignmentMatrixControl( props ) {
 				);
 			} }
 			renderContent={ () => (
-				<AlignmentMatrixControl
-					hasFocusBorder={ false }
-					onChange={ onChange }
-					value={ value }
-				/>
+				<AlignmentMatrixControl onChange={ onChange } value={ value } />
 			) }
 		/>
 	);

package/src/components/block-bindings/attribute-control.js

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	getBlockBindingsSource,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import {
+	__experimentalItem as Item,
+	__experimentalText as Text,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+import BlockBindingsSourceFieldsList from './source-fields-list';
+import useBlockBindingsUtils from './use-block-bindings-utils';
+import { unlock } from '../../lock-unlock';
+import { store as blockEditorStore } from '../../store';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+export default function BlockBindingsAttributeControl( {
+	attribute,
+	binding,
+	blockName,
+} ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	const blockContext = useContext( BlockContext );
+	const compatibleFields = useSelect(
+		( select ) => {
+			const {
+				getAllBlockBindingsSources,
+				getBlockBindingsSourceFieldsList,
+				getBlockType,
+			} = unlock( select( blocksStore ) );
+
+			const _attributeType =
+				getBlockType( blockName ).attributes?.[ attribute ]?.type;
+			const attributeType =
+				_attributeType === 'rich-text' ? 'string' : _attributeType;
+
+			const sourceFields = {};
+			Object.entries( getAllBlockBindingsSources() ).forEach(
+				( [ sourceName, source ] ) => {
+					const fieldsList = getBlockBindingsSourceFieldsList(
+						source,
+						blockContext
+					);
+					if ( ! fieldsList?.length ) {
+						return;
+					}
+					const compatibleFieldsList = fieldsList.filter(
+						( field ) => field.type === attributeType
+					);
+					if ( compatibleFieldsList.length ) {
+						sourceFields[ sourceName ] = compatibleFieldsList;
+					}
+				}
+			);
+			return sourceFields;
+		},
+		[ attribute, blockName, blockContext ]
+	);
+
+	const { canUpdateBlockBindings } = useSelect( ( select ) => ( {
+		canUpdateBlockBindings:
+			select( blockEditorStore ).getSettings().canUpdateBlockBindings,
+	} ) );
+
+	const hasCompatibleFields = Object.keys( compatibleFields ).length > 0;
+
+	// Lock the UI when the user can't update bindings or there are no fields to connect to.
+	const isAttributeReadOnly =
+		! canUpdateBlockBindings || ! hasCompatibleFields;
+
+	const { source: boundSourceName, args } = binding || {};
+	const source = getBlockBindingsSource( boundSourceName );
+
+	let displayText;
+	let isValid = true;
+
+	if ( binding === undefined ) {
+		if ( ! hasCompatibleFields ) {
+			displayText = __( 'No sources available' );
+		} else {
+			displayText = __( 'Not connected' );
+		}
+		isValid = true;
+	} else if ( ! source ) {
+		// If there's a binding but the source is not found, it's invalid.
+		isValid = false;
+		displayText = __( 'Source not registered' );
+	} else {
+		displayText =
+			compatibleFields?.[ boundSourceName ]?.find( ( field ) =>
+				fastDeepEqual( field.args, args )
+			)?.label ||
+			source?.label ||
+			boundSourceName;
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => !! binding }
+			label={ attribute }
+			onDeselect={
+				!! hasCompatibleFields &&
+				( () => {
+					updateBlockBindings( {
+						[ attribute ]: undefined,
+					} );
+				} )
+			}
+		>
+			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
+				<Menu.TriggerButton
+					render={ <Item /> }
+					disabled={ ! hasCompatibleFields }
+				>
+					<VStack
+						className="block-editor-bindings__item"
+						spacing={ 0 }
+					>
+						<Text truncate>{ attribute }</Text>
+						<Text
+							truncate
+							variant={ isValid ? 'muted' : undefined }
+							isDestructive={ ! isValid }
+						>
+							{ displayText }
+						</Text>
+					</VStack>
+				</Menu.TriggerButton>
+				{ ! isAttributeReadOnly && (
+					<Menu.Popover gutter={ isMobile ? 8 : 36 }>
+						<Menu
+							placement={
+								isMobile ? 'bottom-start' : 'left-start'
+							}
+						>
+							{ Object.entries( compatibleFields ).map(
+								( [ sourceKey, fields ] ) => (
+									<BlockBindingsSourceFieldsList
+										key={ sourceKey }
+										args={ binding?.args }
+										attribute={ attribute }
+										sourceKey={ sourceKey }
+										fields={ fields }
+									/>
+								)
+							) }
+						</Menu>
+					</Menu.Popover>
+				) }
+			</Menu>
+		</ToolsPanelItem>
+	);
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export { default as BlockBindingsAttributeControl } from './attribute-control';
+export { default as BlockBindingsSourceFieldsList } from './source-fields-list';
+export { default as useBlockBindingsUtils } from './use-block-bindings-utils';

package/src/components/block-bindings/source-fields-list.js

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockBindingsSource } from '@wordpress/blocks';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import useBlockBindingsUtils from './use-block-bindings-utils';
+import { unlock } from '../../lock-unlock';
+import BlockContext from '../block-context';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+function BlockBindingsSourceFieldsListItem( {
+	args,
+	attribute,
+	field,
+	source,
+	sourceKey,
+} ) {
+	const itemBindings = useMemo(
+		() => ( {
+			source: sourceKey,
+			args: field.args || {
+				key: field.key,
+			},
+		} ),
+		[ field.args, field.key, sourceKey ]
+	);
+
+	const blockContext = useContext( BlockContext );
+	const values = useSelect(
+		( select ) =>
+			source.getValues( {
+				select,
+				context: blockContext,
+				bindings: {
+					[ attribute ]: itemBindings,
+				},
+			} ),
+		[ attribute, blockContext, itemBindings, source ]
+	);
+	const { updateBlockBindings } = useBlockBindingsUtils();
+
+	return (
+		<Menu.CheckboxItem
+			onChange={ () => {
+				const isCurrentlySelected =
+					fastDeepEqual( args, field.args ) ??
+					// Deprecate key dependency in 7.0.
+					field.key === args?.key;
+
+				if ( isCurrentlySelected ) {
+					// Unset if the same field is selected again.
+					updateBlockBindings( {
+						[ attribute ]: undefined,
+					} );
+				} else {
+					updateBlockBindings( {
+						[ attribute ]: itemBindings,
+					} );
+				}
+			} }
+			name={ attribute + '-binding' }
+			value={ values[ attribute ] }
+			checked={
+				fastDeepEqual( args, field.args ) ??
+				// Deprecate key dependency in 7.0.
+				field.key === args?.key
+			}
+		>
+			<Menu.ItemLabel>{ field.label }</Menu.ItemLabel>
+			<Menu.ItemHelpText>{ values[ attribute ] }</Menu.ItemHelpText>
+		</Menu.CheckboxItem>
+	);
+}
+
+export default function BlockBindingsSourceFieldsList( {
+	args,
+	attribute,
+	sourceKey,
+	fields,
+} ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	// Only render source if it has compatible fields.
+	if ( ! fields || fields.length === 0 ) {
+		return null;
+	}
+
+	const source = getBlockBindingsSource( sourceKey );
+
+	return (
+		<Menu
+			key={ sourceKey }
+			placement={ isMobile ? 'bottom-start' : 'left-start' }
+		>
+			<Menu.SubmenuTriggerItem>
+				<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
+			</Menu.SubmenuTriggerItem>
+			<Menu.Popover gutter={ 8 }>
+				<Menu.Group>
+					{ fields.map( ( field ) => (
+						<BlockBindingsSourceFieldsListItem
+							key={
+								sourceKey + JSON.stringify( field.args ) ||
+								field.key
+							}
+							args={ args }
+							attribute={ attribute }
+							field={ field }
+							source={ source }
+							sourceKey={ sourceKey }
+						/>
+					) ) }
+				</Menu.Group>
+			</Menu.Popover>
+		</Menu>
+	);
+}