@wordpress/block-editor 15.4.1-next.233ccab9b.0 → 15.5.0

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

@@ -10,13 +10,6 @@ import { store as blockEditorStore } from '../store';
 import { useBlockEditContext } from '../components/block-edit';
 const DEFAULT_ATTRIBUTE = '__default';
 const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
-const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
-  'core/paragraph': ['content'],
-  'core/heading': ['content'],
-  'core/image': ['id', 'url', 'title', 'alt', 'caption'],
-  'core/button': ['url', 'text', 'linkTarget', 'rel'],
-  'core/post-date': ['datetime']
-};
 
 /**
  * Checks if the given object is empty.
@@ -29,40 +22,6 @@ function isObjectEmpty(object) {
   return !object || Object.keys(object).length === 0;
 }
 
-/**
- * Based on the given block name, checks if it is possible to bind the block.
- *
- * @param {string} blockName The name of the block.
- *
- * @return {boolean} Whether it is possible to bind the block to sources.
- */
-export function canBindBlock(blockName) {
-  return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
-}
-
-/**
- * Based on the given block name and attribute name, checks if it is possible to bind the block attribute.
- *
- * @param {string} blockName     The name of the block.
- * @param {string} attributeName The name of attribute.
- *
- * @return {boolean} Whether it is possible to bind the block attribute.
- */
-export function canBindAttribute(blockName, attributeName) {
-  return canBindBlock(blockName) && BLOCK_BINDINGS_ALLOWED_BLOCKS[blockName].includes(attributeName);
-}
-
-/**
- * Gets the bindable attributes for a given block.
- *
- * @param {string} blockName The name of the block.
- *
- * @return {string[]} The bindable attributes for the block.
- */
-export function getBindableAttributes(blockName) {
-  return BLOCK_BINDINGS_ALLOWED_BLOCKS[blockName];
-}
-
 /**
  * Checks if the block has the `__default` binding for pattern overrides.
  *
@@ -81,15 +40,14 @@ export function hasPatternOverridesDefaultBinding(bindings) {
  * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
  * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
  *
- * @param {string}                  blockName The block name (e.g. 'core/paragraph').
- * @param {?Record<string, object>} bindings  A block's bindings from the metadata attribute.
+ * @param {?Record<string, object>} bindings            A block's bindings from the metadata attribute.
+ * @param {string[]}                supportedAttributes The block's attributes which are supported by block bindings.
  *
  * @return {Object} The bindings with default replaced for pattern overrides.
  */
-export function replacePatternOverridesDefaultBinding(blockName, bindings) {
+export function replacePatternOverridesDefaultBinding(bindings, supportedAttributes) {
   // The `__default` binding currently only works for pattern overrides.
   if (hasPatternOverridesDefaultBinding(bindings)) {
-    const supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[blockName];
     const bindingsWithDefaults = {};
     for (const attributeName of supportedAttributes) {
       // If the block has mixed binding sources, retain any non pattern override bindings.

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

@@ -1 +1 @@
-{"version":3,"names":["useDispatch","useRegistry","store","blockEditorStore","useBlockEditContext","DEFAULT_ATTRIBUTE","PATTERN_OVERRIDES_SOURCE","BLOCK_BINDINGS_ALLOWED_BLOCKS","isObjectEmpty","object","Object","keys","length","canBindBlock","blockName","canBindAttribute","attributeName","includes","getBindableAttributes","hasPatternOverridesDefaultBinding","bindings","source","replacePatternOverridesDefaultBinding","supportedAttributes","bindingsWithDefaults","bindingSource","useBlockBindingsUtils","clientId","contextClientId","blockClientId","updateBlockAttributes","getBlockAttributes","select","updateBlockBindings","metadata","currentBindings","newBindings","entries","forEach","attribute","binding","newMetadata","undefined","removeAllBlockBindings"],"sources":["@wordpress/block-editor/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';\nconst BLOCK_BINDINGS_ALLOWED_BLOCKS = {\n\t'core/paragraph': [ 'content' ],\n\t'core/heading': [ 'content' ],\n\t'core/image': [ 'id', 'url', 'title', 'alt', 'caption' ],\n\t'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],\n\t'core/post-date': [ 'datetime' ],\n};\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 * Based on the given block name, checks if it is possible to bind the block.\n *\n * @param {string} blockName The name of the block.\n *\n * @return {boolean} Whether it is possible to bind the block to sources.\n */\nexport function canBindBlock( blockName ) {\n\treturn blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;\n}\n\n/**\n * Based on the given block name and attribute name, checks if it is possible to bind the block attribute.\n *\n * @param {string} blockName     The name of the block.\n * @param {string} attributeName The name of attribute.\n *\n * @return {boolean} Whether it is possible to bind the block attribute.\n */\nexport function canBindAttribute( blockName, attributeName ) {\n\treturn (\n\t\tcanBindBlock( blockName ) &&\n\t\tBLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )\n\t);\n}\n\n/**\n * Gets the bindable attributes for a given block.\n *\n * @param {string} blockName The name of the block.\n *\n * @return {string[]} The bindable attributes for the block.\n */\nexport function getBindableAttributes( blockName ) {\n\treturn BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];\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 {string}                  blockName The block name (e.g. 'core/paragraph').\n * @param {?Record<string, object>} bindings  A block's bindings from the metadata attribute.\n *\n * @return {Object} The bindings with default replaced for pattern overrides.\n */\nexport function replacePatternOverridesDefaultBinding( blockName, bindings ) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif ( hasPatternOverridesDefaultBinding( bindings ) ) {\n\t\tconst supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];\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":"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","ignoreList":[]}
+{"version":3,"names":["useDispatch","useRegistry","store","blockEditorStore","useBlockEditContext","DEFAULT_ATTRIBUTE","PATTERN_OVERRIDES_SOURCE","isObjectEmpty","object","Object","keys","length","hasPatternOverridesDefaultBinding","bindings","source","replacePatternOverridesDefaultBinding","supportedAttributes","bindingsWithDefaults","attributeName","bindingSource","useBlockBindingsUtils","clientId","contextClientId","blockClientId","updateBlockAttributes","getBlockAttributes","select","updateBlockBindings","metadata","currentBindings","newBindings","entries","forEach","attribute","binding","newMetadata","undefined","removeAllBlockBindings"],"sources":["@wordpress/block-editor/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":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,WAAW,QAAQ,iBAAiB;;AAE1D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D,MAAMC,iBAAiB,GAAG,WAAW;AACrC,MAAMC,wBAAwB,GAAG,wBAAwB;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAAEC,MAAM,EAAG;EAChC,OAAO,CAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAAEF,MAAO,CAAC,CAACG,MAAM,KAAK,CAAC;AACtD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iCAAiCA,CAAEC,QAAQ,EAAG;EAC7D,OAAOA,QAAQ,GAAIR,iBAAiB,CAAE,EAAES,MAAM,KAAKR,wBAAwB;AAC5E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,qCAAqCA,CACpDF,QAAQ,EACRG,mBAAmB,EAClB;EACD;EACA,IAAKJ,iCAAiC,CAAEC,QAAS,CAAC,EAAG;IACpD,MAAMI,oBAAoB,GAAG,CAAC,CAAC;IAC/B,KAAM,MAAMC,aAAa,IAAIF,mBAAmB,EAAG;MAClD;MACA,MAAMG,aAAa,GAAGN,QAAQ,CAAEK,aAAa,CAAE,GAC5CL,QAAQ,CAAEK,aAAa,CAAE,GACzB;QAAEJ,MAAM,EAAER;MAAyB,CAAC;MACvCW,oBAAoB,CAAEC,aAAa,CAAE,GAAGC,aAAa;IACtD;IAEA,OAAOF,oBAAoB;EAC5B;EAEA,OAAOJ,QAAQ;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASO,qBAAqBA,CAAEC,QAAQ,EAAG;EACjD,MAAM;IAAEA,QAAQ,EAAEC;EAAgB,CAAC,GAAGlB,mBAAmB,CAAC,CAAC;EAC3D,MAAMmB,aAAa,GAAGF,QAAQ,IAAIC,eAAe;EACjD,MAAM;IAAEE;EAAsB,CAAC,GAAGxB,WAAW,CAAEG,gBAAiB,CAAC;EACjE,MAAM;IAAEsB;EAAmB,CAAC,GAAGxB,WAAW,CAAC,CAAC,CAACyB,MAAM,CAAEvB,gBAAiB,CAAC;;EAEvE;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMwB,mBAAmB,GAAKd,QAAQ,IAAM;IAC3C,MAAM;MAAEe,QAAQ,EAAE;QAAEf,QAAQ,EAAEgB,eAAe;QAAE,GAAGD;MAAS,CAAC,GAAG,CAAC;IAAE,CAAC,GAClEH,kBAAkB,CAAEF,aAAc,CAAC;IACpC,MAAMO,WAAW,GAAG;MAAE,GAAGD;IAAgB,CAAC;IAE1CpB,MAAM,CAACsB,OAAO,CAAElB,QAAS,CAAC,CAACmB,OAAO,CAAE,CAAE,CAAEC,SAAS,EAAEC,OAAO,CAAE,KAAM;MACjE,IAAK,CAAEA,OAAO,IAAIJ,WAAW,CAAEG,SAAS,CAAE,EAAG;QAC5C,OAAOH,WAAW,CAAEG,SAAS,CAAE;QAC/B;MACD;MACAH,WAAW,CAAEG,SAAS,CAAE,GAAGC,OAAO;IACnC,CAAE,CAAC;IAEH,MAAMC,WAAW,GAAG;MACnB,GAAGP,QAAQ;MACXf,QAAQ,EAAEiB;IACX,CAAC;IAED,IAAKvB,aAAa,CAAE4B,WAAW,CAACtB,QAAS,CAAC,EAAG;MAC5C,OAAOsB,WAAW,CAACtB,QAAQ;IAC5B;IAEAW,qBAAqB,CAAED,aAAa,EAAE;MACrCK,QAAQ,EAAErB,aAAa,CAAE4B,WAAY,CAAC,GAAGC,SAAS,GAAGD;IACtD,CAAE,CAAC;EACJ,CAAC;;EAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAME,sBAAsB,GAAGA,CAAA,KAAM;IACpC,MAAM;MAAET,QAAQ,EAAE;QAAEf,QAAQ;QAAE,GAAGe;MAAS,CAAC,GAAG,CAAC;IAAE,CAAC,GACjDH,kBAAkB,CAAEF,aAAc,CAAC;IACpCC,qBAAqB,CAAED,aAAa,EAAE;MACrCK,QAAQ,EAAErB,aAAa,CAAEqB,QAAS,CAAC,GAAGQ,SAAS,GAAGR;IACnD,CAAE,CAAC;EACJ,CAAC;EAED,OAAO;IAAED,mBAAmB;IAAEU;EAAuB,CAAC;AACvD","ignoreList":[]}

package/build-style/content-rtl.css

@@ -330,6 +330,19 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-offset: calc(1 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
+  visibility: hidden;
+  overflow: hidden;
+  height: 0;
+  border: none !important;
+  padding: 0 !important;
+}
+.block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
+  width: 0;
+  height: auto;
+  align-self: stretch;
+  white-space: nowrap !important;
+}
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;
           user-select: text;

package/build-style/content.css

@@ -330,6 +330,19 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-offset: calc(1 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
+  visibility: hidden;
+  overflow: hidden;
+  height: 0;
+  border: none !important;
+  padding: 0 !important;
+}
+.block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
+  width: 0;
+  height: auto;
+  align-self: stretch;
+  white-space: nowrap !important;
+}
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;
           user-select: text;

package/build-style/style-rtl.css

@@ -258,6 +258,7 @@
   border: 1px solid #ddd;
   border-radius: 2px;
   grid-column: 1/-1;
+  position: relative;
 }
 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
   background-color: #f0f0f0;
@@ -319,6 +320,31 @@
   height: 100%;
   width: 100%;
   padding-right: 12px;
+  padding-left: 32px;
+}
+
+.block-editor-global-styles-background-panel__reset {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
+}
+@media not (prefers-reduced-motion) {
+  .block-editor-global-styles-background-panel__reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
+  border-radius: 2px;
+}
+.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-editor-global-styles-background-panel__reset {
+    opacity: 1;
+  }
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-title {
@@ -2994,6 +3020,7 @@ iframe[name=editor-canvas] {
   background: rgba(0, 0, 0, 0.3);
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;

package/build-style/style.css

@@ -258,6 +258,7 @@
   border: 1px solid #ddd;
   border-radius: 2px;
   grid-column: 1/-1;
+  position: relative;
 }
 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
   background-color: #f0f0f0;
@@ -319,6 +320,31 @@
   height: 100%;
   width: 100%;
   padding-left: 12px;
+  padding-right: 32px;
+}
+
+.block-editor-global-styles-background-panel__reset {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
+}
+@media not (prefers-reduced-motion) {
+  .block-editor-global-styles-background-panel__reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
+  border-radius: 2px;
+}
+.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-editor-global-styles-background-panel__reset {
+    opacity: 1;
+  }
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-title {
@@ -2995,6 +3021,7 @@ iframe[name=editor-canvas] {
   background: rgba(0, 0, 0, 0.3);
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.4.1-next.233ccab9b.0",
+	"version": "15.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/api-fetch": "^7.31.1-next.233ccab9b.0",
-		"@wordpress/blob": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/block-serialization-default-parser": "^5.31.1-next.233ccab9b.0",
-		"@wordpress/blocks": "^15.4.1-next.233ccab9b.0",
-		"@wordpress/commands": "^1.31.1-next.233ccab9b.0",
-		"@wordpress/components": "^30.5.1-next.233ccab9b.0",
-		"@wordpress/compose": "^7.31.1-next.233ccab9b.0",
-		"@wordpress/data": "^10.31.1-next.233ccab9b.0",
-		"@wordpress/date": "^5.31.1-next.233ccab9b.0",
-		"@wordpress/deprecated": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/dom": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/element": "^6.31.1-next.233ccab9b.0",
-		"@wordpress/escape-html": "^3.31.1-next.233ccab9b.0",
-		"@wordpress/hooks": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/html-entities": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/i18n": "^6.4.1-next.233ccab9b.0",
-		"@wordpress/icons": "^10.31.1-next.233ccab9b.0",
-		"@wordpress/is-shallow-equal": "^5.31.1-next.233ccab9b.0",
-		"@wordpress/keyboard-shortcuts": "^5.31.1-next.233ccab9b.0",
-		"@wordpress/keycodes": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/notices": "^5.31.1-next.233ccab9b.0",
-		"@wordpress/preferences": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/priority-queue": "^3.31.1-next.233ccab9b.0",
-		"@wordpress/private-apis": "^1.31.1-next.233ccab9b.0",
-		"@wordpress/rich-text": "^7.31.1-next.233ccab9b.0",
-		"@wordpress/style-engine": "^2.31.1-next.233ccab9b.0",
-		"@wordpress/token-list": "^3.31.1-next.233ccab9b.0",
-		"@wordpress/upload-media": "^0.16.1-next.233ccab9b.0",
-		"@wordpress/url": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/warning": "^3.31.1-next.233ccab9b.0",
-		"@wordpress/wordcount": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/a11y": "^4.32.0",
+		"@wordpress/api-fetch": "^7.32.0",
+		"@wordpress/blob": "^4.32.0",
+		"@wordpress/block-serialization-default-parser": "^5.32.0",
+		"@wordpress/blocks": "^15.5.0",
+		"@wordpress/commands": "^1.32.0",
+		"@wordpress/components": "^30.5.0",
+		"@wordpress/compose": "^7.32.0",
+		"@wordpress/data": "^10.32.0",
+		"@wordpress/date": "^5.32.0",
+		"@wordpress/deprecated": "^4.32.0",
+		"@wordpress/dom": "^4.32.0",
+		"@wordpress/element": "^6.32.0",
+		"@wordpress/escape-html": "^3.32.0",
+		"@wordpress/hooks": "^4.32.0",
+		"@wordpress/html-entities": "^4.32.0",
+		"@wordpress/i18n": "^6.5.0",
+		"@wordpress/icons": "^10.32.0",
+		"@wordpress/is-shallow-equal": "^5.32.0",
+		"@wordpress/keyboard-shortcuts": "^5.32.0",
+		"@wordpress/keycodes": "^4.32.0",
+		"@wordpress/notices": "^5.32.0",
+		"@wordpress/preferences": "^4.32.0",
+		"@wordpress/priority-queue": "^3.32.0",
+		"@wordpress/private-apis": "^1.32.0",
+		"@wordpress/rich-text": "^7.32.0",
+		"@wordpress/style-engine": "^2.32.0",
+		"@wordpress/token-list": "^3.32.0",
+		"@wordpress/upload-media": "^0.17.0",
+		"@wordpress/url": "^4.32.0",
+		"@wordpress/warning": "^3.32.0",
+		"@wordpress/wordcount": "^4.32.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d11f971521e4b39b07124d5c5516890ff98b0e31"
+	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
 }

package/src/components/background-image-control/index.js

@@ -25,6 +25,7 @@ import {
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
 } from '@wordpress/components';
+import { reset as resetIcon } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
@@ -57,6 +58,24 @@ const BACKGROUND_POPOVER_PROPS = {
 };
 const noop = () => {};
 
+/**
+ * Focuses the toggle button.
+ * @param {Object} containerRef - ref object containing current element
+ */
+const focusToggleButton = ( containerRef ) => {
+	// Use requestAnimationFrame to ensure DOM updates are complete
+	window.requestAnimationFrame( () => {
+		const [ toggleButton ] = focus.tabbable.find( containerRef?.current );
+		if ( ! toggleButton ) {
+			return;
+		}
+		// Focus the toggle button and close the dropdown menu.
+		// This ensures similar behaviour as to selecting an image, where the dropdown is
+		// closed and focus is redirected to the dropdown toggle button.
+		toggleButton.focus();
+	} );
+};
+
 /**
  * Get the help text for the background size control.
  *
@@ -182,6 +201,8 @@ function BackgroundControlsPanel( {
 	children,
 	onToggle: onToggleCallback = noop,
 	hasImageValue,
+	onReset,
+	containerRef,
 } ) {
 	if ( ! hasImageValue ) {
 		return;
@@ -205,14 +226,34 @@ function BackgroundControlsPanel( {
 					isOpen,
 				};
 				return (
-					<InspectorImagePreviewItem
-						imgUrl={ imgUrl }
-						filename={ filename }
-						label={ imgLabel }
-						toggleProps={ toggleProps }
-						as="button"
-						onToggleCallback={ onToggleCallback }
-					/>
+					<>
+						<InspectorImagePreviewItem
+							imgUrl={ imgUrl }
+							filename={ filename }
+							label={ imgLabel }
+							toggleProps={ toggleProps }
+							as="button"
+							onToggleCallback={ onToggleCallback }
+						/>
+						{ onReset && (
+							<Button
+								__next40pxDefaultSize
+								label={ __( 'Reset' ) }
+								className="block-editor-global-styles-background-panel__reset"
+								size="small"
+								icon={ resetIcon }
+								onClick={ () => {
+									onReset();
+									// Close the dropdown if open.
+									if ( isOpen ) {
+										onToggle();
+									}
+									// Focus the toggle button.
+									focusToggleButton( containerRef );
+								} }
+							/>
+						) }
+					</>
 				);
 			} }
 			renderContent={ () => (
@@ -319,7 +360,7 @@ function BackgroundImageControls( {
 		);
 		setIsUploading( false );
 		// Close the dropdown and focus the toggle button.
-		closeAndFocus();
+		focusToggleButton( containerRef );
 	};
 
 	// Drag and drop callback, restricting image to one.
@@ -337,22 +378,6 @@ function BackgroundImageControls( {
 
 	const hasValue = hasBackgroundImageValue( style );
 
-	const closeAndFocus = () => {
-		// Use requestAnimationFrame to ensure DOM updates are complete
-		window.requestAnimationFrame( () => {
-			const [ toggleButton ] = focus.tabbable.find(
-				containerRef?.current
-			);
-			if ( ! toggleButton ) {
-				return;
-			}
-			// Focus the toggle button and close the dropdown menu.
-			// This ensures similar behaviour as to selecting an image, where the dropdown is
-			// closed and focus is redirected to the dropdown toggle button.
-			toggleButton.focus();
-		} );
-	};
-
 	const onRemove = () =>
 		onChange(
 			setImmutably( style, [ 'background' ], {
@@ -390,14 +415,14 @@ function BackgroundImageControls( {
 				) }
 				onError={ onUploadError }
 				onReset={ () => {
-					closeAndFocus();
+					focusToggleButton( containerRef );
 					onResetImage();
 				} }
 			>
 				{ canRemove && (
 					<MenuItem
 						onClick={ () => {
-							closeAndFocus();
+							focusToggleButton( containerRef );
 							onRemove();
 							onRemoveImage();
 						} }
@@ -713,6 +738,8 @@ export default function BackgroundImagePanel( {
 					url={ url }
 					onToggle={ setIsDropDownOpen }
 					hasImageValue={ hasImageValue }
+					onReset={ resetBackground }
+					containerRef={ containerRef }
 				>
 					<VStack spacing={ 3 } className="single-column">
 						<BackgroundImageControls

package/src/components/background-image-control/style.scss

@@ -3,6 +3,7 @@
 	border-radius: $radius-small;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
+	position: relative;
 
 	&.is-open {
 		background-color: $gray-100;
@@ -83,6 +84,33 @@
 	height: 100%;
 	width: 100%;
 	padding-left: $grid-unit-15;
+	padding-right: $grid-unit-40;
+}
+
+.block-editor-global-styles-background-panel__reset {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	&.block-editor-global-styles-background-panel__reset {
+		border-radius: $radius-small;
+	}
+
+	.block-editor-global-styles-background-panel__dropdown-toggle:hover + &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-title {

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

@@ -22,10 +22,10 @@ import { useCallback, useContext, useMemo } from '@wordpress/element';
 import BlockContext from '../block-context';
 import isURLLike from '../link-control/is-url-like';
 import {
-	canBindAttribute,
 	hasPatternOverridesDefaultBinding,
 	replacePatternOverridesDefaultBinding,
 } from '../../utils/block-bindings';
+import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -56,6 +56,8 @@ const Edit = ( props ) => {
 
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
+const EMPTY_ARRAY = [];
+
 const EditWithGeneratedProps = ( props ) => {
 	const { name, clientId, attributes, setAttributes } = props;
 	const registry = useRegistry();
@@ -66,6 +68,17 @@ const EditWithGeneratedProps = ( props ) => {
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources(),
 		[]
 	);
+	const bindableAttributes = useSelect(
+		( select ) => {
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+			return (
+				__experimentalBlockBindingsSupportedAttributes?.[ name ] ||
+				EMPTY_ARRAY
+			);
+		},
+		[ name ]
+	);
 
 	const { blockBindings, context, hasPatternOverrides } = useMemo( () => {
 		// Assign context values using the block type's declared context needs.
@@ -90,8 +103,8 @@ const EditWithGeneratedProps = ( props ) => {
 		}
 		return {
 			blockBindings: replacePatternOverridesDefaultBinding(
-				name,
-				attributes?.metadata?.bindings
+				attributes?.metadata?.bindings,
+				bindableAttributes
 			),
 			context: computedContext,
 			hasPatternOverrides: hasPatternOverridesDefaultBinding(
@@ -120,7 +133,10 @@ const EditWithGeneratedProps = ( props ) => {
 			) ) {
 				const { source: sourceName, args: sourceArgs } = binding;
 				const source = registeredSources[ sourceName ];
-				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
+				if (
+					! source ||
+					! bindableAttributes.includes( attributeName )
+				) {
 					continue;
 				}
 
@@ -172,6 +188,7 @@ const EditWithGeneratedProps = ( props ) => {
 		},
 		[
 			attributes,
+			bindableAttributes,
 			blockBindings,
 			clientId,
 			context,
@@ -197,7 +214,7 @@ const EditWithGeneratedProps = ( props ) => {
 				) ) {
 					if (
 						! blockBindings[ attributeName ] ||
-						! canBindAttribute( name, attributeName )
+						! bindableAttributes.includes( attributeName )
 					) {
 						continue;
 					}
@@ -250,6 +267,7 @@ const EditWithGeneratedProps = ( props ) => {
 			} );
 		},
 		[
+			bindableAttributes,
 			blockBindings,
 			clientId,
 			context,