@wordpress/block-editor 12.25.0 → 13.0.0

package/build-module/hooks/use-bindings-attributes.js

@@ -1,11 +1,10 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -22,13 +21,44 @@ import { unlock } from '../lock-unlock';
  *
  * @return {WPHigherOrderComponent} Higher-order component.
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
   'core/paragraph': ['content'],
   'core/heading': ['content'],
-  'core/image': ['url', 'title', 'alt'],
-  'core/button': ['url', 'text', 'linkTarget']
+  'core/image': ['id', 'url', 'title', 'alt'],
+  'core/button': ['url', 'text', 'linkTarget', 'rel']
 };
+const DEFAULT_ATTRIBUTE = '__default';
+
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * 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 {Object} bindings  A block's bindings from the metadata attribute.
+ *
+ * @return {Object} The bindings with default replaced for pattern overrides.
+ */
+function replacePatternOverrideDefaultBindings(blockName, bindings) {
+  // The `__default` binding currently only works for pattern overrides.
+  if (bindings?.[DEFAULT_ATTRIBUTE]?.source === 'core/pattern-overrides') {
+    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.
+      const bindingSource = bindings[attributeName] ? bindings[attributeName] : {
+        source: 'core/pattern-overrides'
+      };
+      bindingsWithDefaults[attributeName] = bindingSource;
+    }
+    return bindingsWithDefaults;
+  }
+  return bindings;
+}
 
 /**
  * Based on the given block name,
@@ -55,12 +85,12 @@ export function canBindAttribute(blockName, attributeName) {
 export const withBlockBindingSupport = createHigherOrderComponent(BlockEdit => props => {
   const registry = useRegistry();
   const sources = useSelect(select => unlock(select(blocksStore)).getAllBlockBindingsSources());
-  const bindings = props.attributes.metadata?.bindings;
   const {
     name,
     clientId,
     context
   } = props;
+  const bindings = useMemo(() => replacePatternOverrideDefaultBindings(name, props.attributes.metadata?.bindings), [props.attributes.metadata?.bindings, name]);
   const boundAttributes = useSelect(() => {
     if (!bindings) {
       return;
@@ -95,39 +125,69 @@ export const withBlockBindingSupport = createHigherOrderComponent(BlockEdit => p
   const _setAttributes = useCallback(nextAttributes => {
     registry.batch(() => {
       if (!bindings) {
-        return setAttributes(nextAttributes);
+        setAttributes(nextAttributes);
+        return;
       }
       const keptAttributes = {
         ...nextAttributes
       };
-      for (const [attributeName, boundAttribute] of Object.entries(bindings)) {
-        const source = sources[boundAttribute.source];
-        if (!source?.setValue || !canBindAttribute(name, attributeName)) {
+      const updatesBySource = new Map();
+
+      // Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
+      for (const [attributeName, newValue] of Object.entries(keptAttributes)) {
+        if (!bindings[attributeName] || !canBindAttribute(name, attributeName)) {
           continue;
         }
-        source.setValue({
-          registry,
-          context,
-          clientId,
-          attributeName,
-          args: boundAttribute.args,
-          value: nextAttributes[attributeName]
+        const binding = bindings[attributeName];
+        const source = sources[binding?.source];
+        if (!source?.setValue && !source?.setValues) {
+          continue;
+        }
+        updatesBySource.set(source, {
+          ...updatesBySource.get(source),
+          [attributeName]: newValue
         });
         delete keptAttributes[attributeName];
       }
+      if (updatesBySource.size) {
+        for (const [source, attributes] of updatesBySource) {
+          if (source.setValues) {
+            source.setValues({
+              registry,
+              context,
+              clientId,
+              attributes
+            });
+          } else {
+            for (const [attributeName, value] of Object.entries(attributes)) {
+              const binding = bindings[attributeName];
+              source.setValue({
+                registry,
+                context,
+                clientId,
+                attributeName,
+                args: binding.args,
+                value
+              });
+            }
+          }
+        }
+      }
       if (Object.keys(keptAttributes).length) {
         setAttributes(keptAttributes);
       }
     });
   }, [registry, bindings, name, clientId, context, setAttributes, sources]);
-  return createElement(Fragment, null, createElement(BlockEdit, {
-    ...props,
-    attributes: {
-      ...props.attributes,
-      ...boundAttributes
-    },
-    setAttributes: _setAttributes
-  }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(BlockEdit, {
+      ...props,
+      attributes: {
+        ...props.attributes,
+        ...boundAttributes
+      },
+      setAttributes: _setAttributes
+    })
+  });
 }, 'withBlockBindingSupport');
 
 /**

package/build-module/hooks/use-bindings-attributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["store","blocksStore","createHigherOrderComponent","useRegistry","useSelect","useCallback","addFilter","unlock","BLOCK_BINDINGS_ALLOWED_BLOCKS","canBindBlock","blockName","canBindAttribute","attributeName","includes","withBlockBindingSupport","BlockEdit","props","registry","sources","select","getAllBlockBindingsSources","bindings","attributes","metadata","name","clientId","context","boundAttributes","boundAttribute","Object","entries","source","getValue","args","undefined","getPlaceholder","setAttributes","_setAttributes","nextAttributes","batch","keptAttributes","setValue","value","keys","length","createElement","Fragment","shimAttributeSource","settings","edit"],"sources":["@wordpress/block-editor/src/hooks/use-bindings-attributes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\n/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */\n/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */\n\n/**\n * Given a binding of block attributes, returns a higher order component that\n * overrides its `attributes` and `setAttributes` props to sync any changes needed.\n *\n * @return {WPHigherOrderComponent} Higher-order component.\n */\n\nconst BLOCK_BINDINGS_ALLOWED_BLOCKS = {\n\t'core/paragraph': [ 'content' ],\n\t'core/heading': [ 'content' ],\n\t'core/image': [ 'url', 'title', 'alt' ],\n\t'core/button': [ 'url', 'text', 'linkTarget' ],\n};\n\n/**\n * Based on the given block name,\n * check if it is possible to bind the block.\n *\n * @param {string} blockName - The block name.\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,\n * check if it is possible to bind the block attribute.\n *\n * @param {string} blockName     - The block name.\n * @param {string} attributeName - The attribute name.\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\nexport const withBlockBindingSupport = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst registry = useRegistry();\n\t\tconst sources = useSelect( ( select ) =>\n\t\t\tunlock( select( blocksStore ) ).getAllBlockBindingsSources()\n\t\t);\n\t\tconst bindings = props.attributes.metadata?.bindings;\n\t\tconst { name, clientId, context } = props;\n\t\tconst boundAttributes = useSelect( () => {\n\t\t\tif ( ! bindings ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst attributes = {};\n\n\t\t\tfor ( const [ attributeName, boundAttribute ] of Object.entries(\n\t\t\t\tbindings\n\t\t\t) ) {\n\t\t\t\tconst source = sources[ boundAttribute.source ];\n\t\t\t\tif (\n\t\t\t\t\t! source?.getValue ||\n\t\t\t\t\t! canBindAttribute( name, attributeName )\n\t\t\t\t) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tconst args = {\n\t\t\t\t\tregistry,\n\t\t\t\t\tcontext,\n\t\t\t\t\tclientId,\n\t\t\t\t\tattributeName,\n\t\t\t\t\targs: boundAttribute.args,\n\t\t\t\t};\n\n\t\t\t\tattributes[ attributeName ] = source.getValue( args );\n\n\t\t\t\tif ( attributes[ attributeName ] === undefined ) {\n\t\t\t\t\tif ( attributeName === 'url' ) {\n\t\t\t\t\t\tattributes[ attributeName ] = null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tattributes[ attributeName ] =\n\t\t\t\t\t\t\tsource.getPlaceholder?.( args );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn attributes;\n\t\t}, [ bindings, name, clientId, context, registry, sources ] );\n\n\t\tconst { setAttributes } = props;\n\n\t\tconst _setAttributes = useCallback(\n\t\t\t( nextAttributes ) => {\n\t\t\t\tregistry.batch( () => {\n\t\t\t\t\tif ( ! bindings ) {\n\t\t\t\t\t\treturn setAttributes( nextAttributes );\n\t\t\t\t\t}\n\n\t\t\t\t\tconst keptAttributes = { ...nextAttributes };\n\n\t\t\t\t\tfor ( const [\n\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\tboundAttribute,\n\t\t\t\t\t] of Object.entries( bindings ) ) {\n\t\t\t\t\t\tconst source = sources[ boundAttribute.source ];\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! source?.setValue ||\n\t\t\t\t\t\t\t! canBindAttribute( name, attributeName )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsource.setValue( {\n\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\t\targs: boundAttribute.args,\n\t\t\t\t\t\t\tvalue: nextAttributes[ attributeName ],\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tdelete keptAttributes[ attributeName ];\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( Object.keys( keptAttributes ).length ) {\n\t\t\t\t\t\tsetAttributes( keptAttributes );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[\n\t\t\t\tregistry,\n\t\t\t\tbindings,\n\t\t\t\tname,\n\t\t\t\tclientId,\n\t\t\t\tcontext,\n\t\t\t\tsetAttributes,\n\t\t\t\tsources,\n\t\t\t]\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<BlockEdit\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tattributes={ { ...props.attributes, ...boundAttributes } }\n\t\t\t\t\tsetAttributes={ _setAttributes }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n\t'withBlockBindingSupport'\n);\n\n/**\n * Filters a registered block's settings to enhance a block's `edit` component\n * to upgrade bound attributes.\n *\n * @param {WPBlockSettings} settings - Registered block settings.\n * @param {string}          name     - Block name.\n * @return {WPBlockSettings} Filtered block settings.\n */\nfunction shimAttributeSource( settings, name ) {\n\tif ( ! canBindBlock( name ) ) {\n\t\treturn settings;\n\t}\n\n\treturn {\n\t\t...settings,\n\t\tedit: withBlockBindingSupport( settings.edit ),\n\t};\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',\n\tshimAttributeSource\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["store","blocksStore","createHigherOrderComponent","useRegistry","useSelect","useCallback","useMemo","addFilter","unlock","jsx","_jsx","Fragment","_Fragment","BLOCK_BINDINGS_ALLOWED_BLOCKS","DEFAULT_ATTRIBUTE","replacePatternOverrideDefaultBindings","blockName","bindings","source","supportedAttributes","bindingsWithDefaults","attributeName","bindingSource","canBindBlock","canBindAttribute","includes","withBlockBindingSupport","BlockEdit","props","registry","sources","select","getAllBlockBindingsSources","name","clientId","context","attributes","metadata","boundAttributes","boundAttribute","Object","entries","getValue","args","undefined","getPlaceholder","setAttributes","_setAttributes","nextAttributes","batch","keptAttributes","updatesBySource","Map","newValue","binding","setValue","setValues","set","get","size","value","keys","length","children","shimAttributeSource","settings","edit"],"sources":["@wordpress/block-editor/src/hooks/use-bindings-attributes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\n/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */\n/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */\n\n/**\n * Given a binding of block attributes, returns a higher order component that\n * overrides its `attributes` and `setAttributes` props to sync any changes needed.\n *\n * @return {WPHigherOrderComponent} Higher-order component.\n */\n\nconst BLOCK_BINDINGS_ALLOWED_BLOCKS = {\n\t'core/paragraph': [ 'content' ],\n\t'core/heading': [ 'content' ],\n\t'core/image': [ 'id', 'url', 'title', 'alt' ],\n\t'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],\n};\n\nconst DEFAULT_ATTRIBUTE = '__default';\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 {Object} bindings  A block's bindings from the metadata attribute.\n *\n * @return {Object} The bindings with default replaced for pattern overrides.\n */\nfunction replacePatternOverrideDefaultBindings( blockName, bindings ) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif (\n\t\tbindings?.[ DEFAULT_ATTRIBUTE ]?.source === 'core/pattern-overrides'\n\t) {\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: 'core/pattern-overrides' };\n\t\t\tbindingsWithDefaults[ attributeName ] = bindingSource;\n\t\t}\n\n\t\treturn bindingsWithDefaults;\n\t}\n\n\treturn bindings;\n}\n\n/**\n * Based on the given block name,\n * check if it is possible to bind the block.\n *\n * @param {string} blockName - The block name.\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,\n * check if it is possible to bind the block attribute.\n *\n * @param {string} blockName     - The block name.\n * @param {string} attributeName - The attribute name.\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\nexport const withBlockBindingSupport = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst registry = useRegistry();\n\t\tconst sources = useSelect( ( select ) =>\n\t\t\tunlock( select( blocksStore ) ).getAllBlockBindingsSources()\n\t\t);\n\t\tconst { name, clientId, context } = props;\n\t\tconst bindings = useMemo(\n\t\t\t() =>\n\t\t\t\treplacePatternOverrideDefaultBindings(\n\t\t\t\t\tname,\n\t\t\t\t\tprops.attributes.metadata?.bindings\n\t\t\t\t),\n\t\t\t[ props.attributes.metadata?.bindings, name ]\n\t\t);\n\t\tconst boundAttributes = useSelect( () => {\n\t\t\tif ( ! bindings ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst attributes = {};\n\n\t\t\tfor ( const [ attributeName, boundAttribute ] of Object.entries(\n\t\t\t\tbindings\n\t\t\t) ) {\n\t\t\t\tconst source = sources[ boundAttribute.source ];\n\t\t\t\tif (\n\t\t\t\t\t! source?.getValue ||\n\t\t\t\t\t! canBindAttribute( name, attributeName )\n\t\t\t\t) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tconst args = {\n\t\t\t\t\tregistry,\n\t\t\t\t\tcontext,\n\t\t\t\t\tclientId,\n\t\t\t\t\tattributeName,\n\t\t\t\t\targs: boundAttribute.args,\n\t\t\t\t};\n\n\t\t\t\tattributes[ attributeName ] = source.getValue( args );\n\n\t\t\t\tif ( attributes[ attributeName ] === undefined ) {\n\t\t\t\t\tif ( attributeName === 'url' ) {\n\t\t\t\t\t\tattributes[ attributeName ] = null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tattributes[ attributeName ] =\n\t\t\t\t\t\t\tsource.getPlaceholder?.( args );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn attributes;\n\t\t}, [ bindings, name, clientId, context, registry, sources ] );\n\n\t\tconst { setAttributes } = props;\n\n\t\tconst _setAttributes = useCallback(\n\t\t\t( nextAttributes ) => {\n\t\t\t\tregistry.batch( () => {\n\t\t\t\t\tif ( ! bindings ) {\n\t\t\t\t\t\tsetAttributes( nextAttributes );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst keptAttributes = { ...nextAttributes };\n\t\t\t\t\tconst updatesBySource = new Map();\n\n\t\t\t\t\t// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.\n\t\t\t\t\tfor ( const [ attributeName, newValue ] of Object.entries(\n\t\t\t\t\t\tkeptAttributes\n\t\t\t\t\t) ) {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! bindings[ attributeName ] ||\n\t\t\t\t\t\t\t! canBindAttribute( name, attributeName )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst binding = bindings[ attributeName ];\n\t\t\t\t\t\tconst source = sources[ binding?.source ];\n\t\t\t\t\t\tif ( ! source?.setValue && ! source?.setValues ) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tupdatesBySource.set( source, {\n\t\t\t\t\t\t\t...updatesBySource.get( source ),\n\t\t\t\t\t\t\t[ attributeName ]: newValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tdelete keptAttributes[ attributeName ];\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( updatesBySource.size ) {\n\t\t\t\t\t\tfor ( const [\n\t\t\t\t\t\t\tsource,\n\t\t\t\t\t\t\tattributes,\n\t\t\t\t\t\t] of updatesBySource ) {\n\t\t\t\t\t\t\tif ( source.setValues ) {\n\t\t\t\t\t\t\t\tsource.setValues( {\n\t\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\t\t\tattributes,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor ( const [\n\t\t\t\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t] of Object.entries( attributes ) ) {\n\t\t\t\t\t\t\t\t\tconst binding = bindings[ attributeName ];\n\t\t\t\t\t\t\t\t\tsource.setValue( {\n\t\t\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\t\t\t\t\targs: binding.args,\n\t\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( Object.keys( keptAttributes ).length ) {\n\t\t\t\t\t\tsetAttributes( keptAttributes );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[\n\t\t\t\tregistry,\n\t\t\t\tbindings,\n\t\t\t\tname,\n\t\t\t\tclientId,\n\t\t\t\tcontext,\n\t\t\t\tsetAttributes,\n\t\t\t\tsources,\n\t\t\t]\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<BlockEdit\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tattributes={ { ...props.attributes, ...boundAttributes } }\n\t\t\t\t\tsetAttributes={ _setAttributes }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n\t'withBlockBindingSupport'\n);\n\n/**\n * Filters a registered block's settings to enhance a block's `edit` component\n * to upgrade bound attributes.\n *\n * @param {WPBlockSettings} settings - Registered block settings.\n * @param {string}          name     - Block name.\n * @return {WPBlockSettings} Filtered block settings.\n */\nfunction shimAttributeSource( settings, name ) {\n\tif ( ! canBindBlock( name ) ) {\n\t\treturn settings;\n\t}\n\n\treturn {\n\t\t...settings,\n\t\tedit: withBlockBindingSupport( settings.edit ),\n\t};\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',\n\tshimAttributeSource\n);\n"],"mappings":"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","ignoreList":[]}

package/build-module/hooks/use-color-props.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ export function getColorClassesAndStyles(attributes) {
   const hasGradient = gradientClass || style?.color?.gradient;
 
   // Determine color CSS class name list.
-  const className = classnames(textClass, gradientClass, {
+  const className = clsx(textClass, gradientClass, {
     // Don't apply the background class if there's a gradient.
     [backgroundClass]: !hasGradient && !!backgroundClass,
     'has-text-color': textColor || style?.color?.text,

package/build-module/hooks/use-color-props.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useMemo","getInlineStyles","getColorClassName","getColorObjectByAttributeValues","__experimentalGetGradientClass","getGradientValueBySlug","useSettings","getColorClassesAndStyles","attributes","backgroundColor","textColor","gradient","style","backgroundClass","textClass","gradientClass","hasGradient","color","className","text","background","elements","link","colorStyles","styleProp","undefined","useColorProps","userPalette","themePalette","defaultPalette","userGradients","themeGradients","defaultGradients","colors","gradients","colorProps","backgroundColorObject","textColorObject"],"sources":["@wordpress/block-editor/src/hooks/use-color-props.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport {\n\t__experimentalGetGradientClass,\n\tgetGradientValueBySlug,\n} from '../components/gradients';\nimport { useSettings } from '../components/use-settings';\n\n// The code in this file has largely been lifted from the color block support\n// hook.\n//\n// This utility is intended to assist where the serialization of the colors\n// block support is being skipped for a block but the color related CSS classes\n// & styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's color support\n * attributes.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Color block support derived CSS classes & styles.\n */\nexport function getColorClassesAndStyles( attributes ) {\n\tconst { backgroundColor, textColor, gradient, style } = attributes;\n\n\t// Collect color CSS classes.\n\tconst backgroundClass = getColorClassName(\n\t\t'background-color',\n\t\tbackgroundColor\n\t);\n\tconst textClass = getColorClassName( 'color', textColor );\n\n\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\tconst hasGradient = gradientClass || style?.color?.gradient;\n\n\t// Determine color CSS class name list.\n\tconst className = classnames( textClass, gradientClass, {\n\t\t// Don't apply the background class if there's a gradient.\n\t\t[ backgroundClass ]: ! hasGradient && !! backgroundClass,\n\t\t'has-text-color': textColor || style?.color?.text,\n\t\t'has-background':\n\t\t\tbackgroundColor ||\n\t\t\tstyle?.color?.background ||\n\t\t\tgradient ||\n\t\t\tstyle?.color?.gradient,\n\t\t'has-link-color': style?.elements?.link?.color,\n\t} );\n\n\t// Collect inline styles for colors.\n\tconst colorStyles = style?.color || {};\n\tconst styleProp = getInlineStyles( { color: colorStyles } );\n\n\treturn {\n\t\tclassName: className || undefined,\n\t\tstyle: styleProp,\n\t};\n}\n\n/**\n * Determines the color related props for a block derived from its color block\n * support attributes.\n *\n * Inline styles are forced for named colors to ensure these selections are\n * reflected when themes do not load their color stylesheets in the editor.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} ClassName & style props from colors block support.\n */\nexport function useColorProps( attributes ) {\n\tconst { backgroundColor, textColor, gradient } = attributes;\n\n\tconst [\n\t\tuserPalette,\n\t\tthemePalette,\n\t\tdefaultPalette,\n\t\tuserGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t] = useSettings(\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default'\n\t);\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( userPalette || [] ),\n\t\t\t...( themePalette || [] ),\n\t\t\t...( defaultPalette || [] ),\n\t\t],\n\t\t[ userPalette, themePalette, defaultPalette ]\n\t);\n\tconst gradients = useMemo(\n\t\t() => [\n\t\t\t...( userGradients || [] ),\n\t\t\t...( themeGradients || [] ),\n\t\t\t...( defaultGradients || [] ),\n\t\t],\n\t\t[ userGradients, themeGradients, defaultGradients ]\n\t);\n\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\t// Force inline styles to apply colors when themes do not load their color\n\t// stylesheets in the editor.\n\tif ( backgroundColor ) {\n\t\tconst backgroundColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\tbackgroundColor\n\t\t);\n\n\t\tcolorProps.style.backgroundColor = backgroundColorObject.color;\n\t}\n\n\tif ( gradient ) {\n\t\tcolorProps.style.background = getGradientValueBySlug(\n\t\t\tgradients,\n\t\t\tgradient\n\t\t);\n\t}\n\n\tif ( textColor ) {\n\t\tconst textColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\ttextColor\n\t\t);\n\n\t\tcolorProps.style.color = textColorObject.color;\n\t}\n\n\treturn colorProps;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useMemo","getInlineStyles","getColorClassName","getColorObjectByAttributeValues","__experimentalGetGradientClass","getGradientValueBySlug","useSettings","getColorClassesAndStyles","attributes","backgroundColor","textColor","gradient","style","backgroundClass","textClass","gradientClass","hasGradient","color","className","text","background","elements","link","colorStyles","styleProp","undefined","useColorProps","userPalette","themePalette","defaultPalette","userGradients","themeGradients","defaultGradients","colors","gradients","colorProps","backgroundColorObject","textColorObject"],"sources":["@wordpress/block-editor/src/hooks/use-color-props.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport {\n\t__experimentalGetGradientClass,\n\tgetGradientValueBySlug,\n} from '../components/gradients';\nimport { useSettings } from '../components/use-settings';\n\n// The code in this file has largely been lifted from the color block support\n// hook.\n//\n// This utility is intended to assist where the serialization of the colors\n// block support is being skipped for a block but the color related CSS classes\n// & styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's color support\n * attributes.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Color block support derived CSS classes & styles.\n */\nexport function getColorClassesAndStyles( attributes ) {\n\tconst { backgroundColor, textColor, gradient, style } = attributes;\n\n\t// Collect color CSS classes.\n\tconst backgroundClass = getColorClassName(\n\t\t'background-color',\n\t\tbackgroundColor\n\t);\n\tconst textClass = getColorClassName( 'color', textColor );\n\n\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\tconst hasGradient = gradientClass || style?.color?.gradient;\n\n\t// Determine color CSS class name list.\n\tconst className = clsx( textClass, gradientClass, {\n\t\t// Don't apply the background class if there's a gradient.\n\t\t[ backgroundClass ]: ! hasGradient && !! backgroundClass,\n\t\t'has-text-color': textColor || style?.color?.text,\n\t\t'has-background':\n\t\t\tbackgroundColor ||\n\t\t\tstyle?.color?.background ||\n\t\t\tgradient ||\n\t\t\tstyle?.color?.gradient,\n\t\t'has-link-color': style?.elements?.link?.color,\n\t} );\n\n\t// Collect inline styles for colors.\n\tconst colorStyles = style?.color || {};\n\tconst styleProp = getInlineStyles( { color: colorStyles } );\n\n\treturn {\n\t\tclassName: className || undefined,\n\t\tstyle: styleProp,\n\t};\n}\n\n/**\n * Determines the color related props for a block derived from its color block\n * support attributes.\n *\n * Inline styles are forced for named colors to ensure these selections are\n * reflected when themes do not load their color stylesheets in the editor.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} ClassName & style props from colors block support.\n */\nexport function useColorProps( attributes ) {\n\tconst { backgroundColor, textColor, gradient } = attributes;\n\n\tconst [\n\t\tuserPalette,\n\t\tthemePalette,\n\t\tdefaultPalette,\n\t\tuserGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t] = useSettings(\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default'\n\t);\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( userPalette || [] ),\n\t\t\t...( themePalette || [] ),\n\t\t\t...( defaultPalette || [] ),\n\t\t],\n\t\t[ userPalette, themePalette, defaultPalette ]\n\t);\n\tconst gradients = useMemo(\n\t\t() => [\n\t\t\t...( userGradients || [] ),\n\t\t\t...( themeGradients || [] ),\n\t\t\t...( defaultGradients || [] ),\n\t\t],\n\t\t[ userGradients, themeGradients, defaultGradients ]\n\t);\n\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\t// Force inline styles to apply colors when themes do not load their color\n\t// stylesheets in the editor.\n\tif ( backgroundColor ) {\n\t\tconst backgroundColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\tbackgroundColor\n\t\t);\n\n\t\tcolorProps.style.backgroundColor = backgroundColorObject.color;\n\t}\n\n\tif ( gradient ) {\n\t\tcolorProps.style.background = getGradientValueBySlug(\n\t\t\tgradients,\n\t\t\tgradient\n\t\t);\n\t}\n\n\tif ( textColor ) {\n\t\tconst textColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\ttextColor\n\t\t);\n\n\t\tcolorProps.style.color = textColorObject.color;\n\t}\n\n\treturn colorProps;\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/hooks/use-typography-props.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,9 @@ import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
 import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
+const {
+  kebabCase
+} = unlock(componentsPrivateApis);
 
 /*
  * This utility is intended to assist where the serialization of the typography
@@ -31,9 +34,6 @@ import { unlock } from '../lock-unlock';
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles(attributes, settings) {
-  const {
-    kebabCase
-  } = unlock(componentsPrivateApis);
   let typographyStyles = attributes?.style?.typography || {};
   typographyStyles = {
     ...typographyStyles,
@@ -46,7 +46,7 @@ export function getTypographyClassesAndStyles(attributes, settings) {
   });
   const fontFamilyClassName = !!attributes?.fontFamily ? `has-${kebabCase(attributes.fontFamily)}-font-family` : '';
   const textAlignClassName = !!attributes?.style?.typography?.textAlign ? `has-text-align-${attributes?.style?.typography?.textAlign}` : '';
-  const className = classnames(fontFamilyClassName, textAlignClassName, getFontSizeClass(attributes?.fontSize));
+  const className = clsx(fontFamilyClassName, textAlignClassName, getFontSizeClass(attributes?.fontSize));
   return {
     className,
     style

package/build-module/hooks/use-typography-props.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","privateApis","componentsPrivateApis","getInlineStyles","getFontSizeClass","getTypographyFontSizeValue","unlock","getTypographyClassesAndStyles","attributes","settings","kebabCase","typographyStyles","style","typography","fontSize","size","fontFamilyClassName","fontFamily","textAlignClassName","textAlign","className"],"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\nimport { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';\nimport { unlock } from '../lock-unlock';\n\n/*\n * This utility is intended to assist where the serialization of the typography\n * block support is being skipped for a block but the typography related CSS\n * styles still need to be generated so they can be applied to inner elements.\n */\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object}         attributes Block attributes.\n * @param {Object|boolean} settings   Merged theme.json settings\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles( attributes, settings ) {\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tlet typographyStyles = attributes?.style?.typography || {};\n\ttypographyStyles = {\n\t\t...typographyStyles,\n\t\tfontSize: getTypographyFontSizeValue(\n\t\t\t{ size: attributes?.style?.typography?.fontSize },\n\t\t\tsettings\n\t\t),\n\t};\n\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\tconst textAlignClassName = !! attributes?.style?.typography?.textAlign\n\t\t? `has-text-align-${ attributes?.style?.typography?.textAlign }`\n\t\t: '';\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\ttextAlignClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,WAAW,IAAIC,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,SAASC,eAAe,QAAQ,SAAS;AACzC,SAASC,gBAAgB,QAAQ,0BAA0B;AAC3D,SAASC,0BAA0B,QAAQ,8CAA8C;AACzF,SAASC,MAAM,QAAQ,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,6BAA6BA,CAAEC,UAAU,EAAEC,QAAQ,EAAG;EACrE,MAAM;IAAEC;EAAU,CAAC,GAAGJ,MAAM,CAAEJ,qBAAsB,CAAC;EACrD,IAAIS,gBAAgB,GAAGH,UAAU,EAAEI,KAAK,EAAEC,UAAU,IAAI,CAAC,CAAC;EAC1DF,gBAAgB,GAAG;IAClB,GAAGA,gBAAgB;IACnBG,QAAQ,EAAET,0BAA0B,CACnC;MAAEU,IAAI,EAAEP,UAAU,EAAEI,KAAK,EAAEC,UAAU,EAAEC;IAAS,CAAC,EACjDL,QACD;EACD,CAAC;EAED,MAAMG,KAAK,GAAGT,eAAe,CAAE;IAAEU,UAAU,EAAEF;EAAiB,CAAE,CAAC;EACjE,MAAMK,mBAAmB,GAAG,CAAC,CAAER,UAAU,EAAES,UAAU,GACjD,OAAOP,SAAS,CAAEF,UAAU,CAACS,UAAW,CAAG,cAAa,GACzD,EAAE;EACL,MAAMC,kBAAkB,GAAG,CAAC,CAAEV,UAAU,EAAEI,KAAK,EAAEC,UAAU,EAAEM,SAAS,GAClE,kBAAkBX,UAAU,EAAEI,KAAK,EAAEC,UAAU,EAAEM,SAAW,EAAC,GAC9D,EAAE;EACL,MAAMC,SAAS,GAAGpB,UAAU,CAC3BgB,mBAAmB,EACnBE,kBAAkB,EAClBd,gBAAgB,CAAEI,UAAU,EAAEM,QAAS,CACxC,CAAC;EAED,OAAO;IACNM,SAAS;IACTR;EACD,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["clsx","privateApis","componentsPrivateApis","getInlineStyles","getFontSizeClass","getTypographyFontSizeValue","unlock","kebabCase","getTypographyClassesAndStyles","attributes","settings","typographyStyles","style","typography","fontSize","size","fontFamilyClassName","fontFamily","textAlignClassName","textAlign","className"],"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\nimport { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';\nimport { unlock } from '../lock-unlock';\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/*\n * This utility is intended to assist where the serialization of the typography\n * block support is being skipped for a block but the typography related CSS\n * styles still need to be generated so they can be applied to inner elements.\n */\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object}         attributes Block attributes.\n * @param {Object|boolean} settings   Merged theme.json settings\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles( attributes, settings ) {\n\tlet typographyStyles = attributes?.style?.typography || {};\n\ttypographyStyles = {\n\t\t...typographyStyles,\n\t\tfontSize: getTypographyFontSizeValue(\n\t\t\t{ size: attributes?.style?.typography?.fontSize },\n\t\t\tsettings\n\t\t),\n\t};\n\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\tconst textAlignClassName = !! attributes?.style?.typography?.textAlign\n\t\t? `has-text-align-${ attributes?.style?.typography?.textAlign }`\n\t\t: '';\n\tconst className = clsx(\n\t\tfontFamilyClassName,\n\t\ttextAlignClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,WAAW,IAAIC,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,SAASC,eAAe,QAAQ,SAAS;AACzC,SAASC,gBAAgB,QAAQ,0BAA0B;AAC3D,SAASC,0BAA0B,QAAQ,8CAA8C;AACzF,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,MAAM;EAAEC;AAAU,CAAC,GAAGD,MAAM,CAAEJ,qBAAsB,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,6BAA6BA,CAAEC,UAAU,EAAEC,QAAQ,EAAG;EACrE,IAAIC,gBAAgB,GAAGF,UAAU,EAAEG,KAAK,EAAEC,UAAU,IAAI,CAAC,CAAC;EAC1DF,gBAAgB,GAAG;IAClB,GAAGA,gBAAgB;IACnBG,QAAQ,EAAET,0BAA0B,CACnC;MAAEU,IAAI,EAAEN,UAAU,EAAEG,KAAK,EAAEC,UAAU,EAAEC;IAAS,CAAC,EACjDJ,QACD;EACD,CAAC;EAED,MAAME,KAAK,GAAGT,eAAe,CAAE;IAAEU,UAAU,EAAEF;EAAiB,CAAE,CAAC;EACjE,MAAMK,mBAAmB,GAAG,CAAC,CAAEP,UAAU,EAAEQ,UAAU,GACjD,OAAOV,SAAS,CAAEE,UAAU,CAACQ,UAAW,CAAG,cAAa,GACzD,EAAE;EACL,MAAMC,kBAAkB,GAAG,CAAC,CAAET,UAAU,EAAEG,KAAK,EAAEC,UAAU,EAAEM,SAAS,GAClE,kBAAkBV,UAAU,EAAEG,KAAK,EAAEC,UAAU,EAAEM,SAAW,EAAC,GAC9D,EAAE;EACL,MAAMC,SAAS,GAAGpB,IAAI,CACrBgB,mBAAmB,EACnBE,kBAAkB,EAClBd,gBAAgB,CAAEK,UAAU,EAAEK,QAAS,CACxC,CAAC;EAED,OAAO;IACNM,SAAS;IACTR;EACD,CAAC;AACF","ignoreList":[]}

package/build-module/hooks/use-zoom-out.js

@@ -30,7 +30,7 @@ export function useZoomOut(zoomOut = true) {
     }
     return () => {
       // We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-      if (__unstableGetEditorMode() !== originalEditingMode.current) {
+      if (__unstableGetEditorMode() === 'zoom-out' && __unstableGetEditorMode() !== originalEditingMode.current) {
         __unstableSetEditorMode(originalEditingMode.current);
       }
     };
@@ -40,7 +40,7 @@ export function useZoomOut(zoomOut = true) {
   useEffect(() => {
     if (zoomOut && mode !== 'zoom-out') {
       __unstableSetEditorMode('zoom-out');
-    } else if (!zoomOut && originalEditingMode.current !== mode) {
+    } else if (!zoomOut && __unstableGetEditorMode() === 'zoom-out' && originalEditingMode.current !== mode) {
       __unstableSetEditorMode(originalEditingMode.current);
     }
   }, [__unstableSetEditorMode, zoomOut, mode]);

package/build-module/hooks/use-zoom-out.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","useDispatch","useEffect","useRef","store","blockEditorStore","useZoomOut","zoomOut","__unstableSetEditorMode","__unstableGetEditorMode","originalEditingMode","mode","current"],"sources":["@wordpress/block-editor/src/hooks/use-zoom-out.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\n\n/**\n * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.\n *\n * @param {boolean} zoomOut If we should enter into zoomOut mode or not\n */\nexport function useZoomOut( zoomOut = true ) {\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst { __unstableGetEditorMode } = useSelect( blockEditorStore );\n\n\tconst originalEditingMode = useRef( null );\n\tconst mode = __unstableGetEditorMode();\n\n\tuseEffect( () => {\n\t\t// Only set this on mount so we know what to return to when we unmount.\n\t\tif ( ! originalEditingMode.current ) {\n\t\t\toriginalEditingMode.current = mode;\n\t\t}\n\n\t\treturn () => {\n\t\t\t// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount\n\t\t\tif ( __unstableGetEditorMode() !== originalEditingMode.current ) {\n\t\t\t\t__unstableSetEditorMode( originalEditingMode.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\t// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.\n\tuseEffect( () => {\n\t\tif ( zoomOut && mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t} else if ( ! zoomOut && originalEditingMode.current !== mode ) {\n\t\t\t__unstableSetEditorMode( originalEditingMode.current );\n\t\t}\n\t}, [ __unstableSetEditorMode, zoomOut, mode ] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;;AAEpD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAEC,OAAO,GAAG,IAAI,EAAG;EAC5C,MAAM;IAAEC;EAAwB,CAAC,GAAGP,WAAW,CAAEI,gBAAiB,CAAC;EACnE,MAAM;IAAEI;EAAwB,CAAC,GAAGT,SAAS,CAAEK,gBAAiB,CAAC;EAEjE,MAAMK,mBAAmB,GAAGP,MAAM,CAAE,IAAK,CAAC;EAC1C,MAAMQ,IAAI,GAAGF,uBAAuB,CAAC,CAAC;EAEtCP,SAAS,CAAE,MAAM;IAChB;IACA,IAAK,CAAEQ,mBAAmB,CAACE,OAAO,EAAG;MACpCF,mBAAmB,CAACE,OAAO,GAAGD,IAAI;IACnC;IAEA,OAAO,MAAM;MACZ;MACA,IAAKF,uBAAuB,CAAC,CAAC,KAAKC,mBAAmB,CAACE,OAAO,EAAG;QAChEJ,uBAAuB,CAAEE,mBAAmB,CAACE,OAAQ,CAAC;MACvD;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;;EAEP;EACAV,SAAS,CAAE,MAAM;IAChB,IAAKK,OAAO,IAAII,IAAI,KAAK,UAAU,EAAG;MACrCH,uBAAuB,CAAE,UAAW,CAAC;IACtC,CAAC,MAAM,IAAK,CAAED,OAAO,IAAIG,mBAAmB,CAACE,OAAO,KAAKD,IAAI,EAAG;MAC/DH,uBAAuB,CAAEE,mBAAmB,CAACE,OAAQ,CAAC;IACvD;EACD,CAAC,EAAE,CAAEJ,uBAAuB,EAAED,OAAO,EAAEI,IAAI,CAAG,CAAC;AAChD","ignoreList":[]}
+{"version":3,"names":["useSelect","useDispatch","useEffect","useRef","store","blockEditorStore","useZoomOut","zoomOut","__unstableSetEditorMode","__unstableGetEditorMode","originalEditingMode","mode","current"],"sources":["@wordpress/block-editor/src/hooks/use-zoom-out.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\n\n/**\n * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.\n *\n * @param {boolean} zoomOut If we should enter into zoomOut mode or not\n */\nexport function useZoomOut( zoomOut = true ) {\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst { __unstableGetEditorMode } = useSelect( blockEditorStore );\n\n\tconst originalEditingMode = useRef( null );\n\tconst mode = __unstableGetEditorMode();\n\n\tuseEffect( () => {\n\t\t// Only set this on mount so we know what to return to when we unmount.\n\t\tif ( ! originalEditingMode.current ) {\n\t\t\toriginalEditingMode.current = mode;\n\t\t}\n\n\t\treturn () => {\n\t\t\t// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount\n\t\t\tif (\n\t\t\t\t__unstableGetEditorMode() === 'zoom-out' &&\n\t\t\t\t__unstableGetEditorMode() !== originalEditingMode.current\n\t\t\t) {\n\t\t\t\t__unstableSetEditorMode( originalEditingMode.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\t// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.\n\tuseEffect( () => {\n\t\tif ( zoomOut && mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t} else if (\n\t\t\t! zoomOut &&\n\t\t\t__unstableGetEditorMode() === 'zoom-out' &&\n\t\t\toriginalEditingMode.current !== mode\n\t\t) {\n\t\t\t__unstableSetEditorMode( originalEditingMode.current );\n\t\t}\n\t}, [ __unstableSetEditorMode, zoomOut, mode ] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;;AAEpD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAEC,OAAO,GAAG,IAAI,EAAG;EAC5C,MAAM;IAAEC;EAAwB,CAAC,GAAGP,WAAW,CAAEI,gBAAiB,CAAC;EACnE,MAAM;IAAEI;EAAwB,CAAC,GAAGT,SAAS,CAAEK,gBAAiB,CAAC;EAEjE,MAAMK,mBAAmB,GAAGP,MAAM,CAAE,IAAK,CAAC;EAC1C,MAAMQ,IAAI,GAAGF,uBAAuB,CAAC,CAAC;EAEtCP,SAAS,CAAE,MAAM;IAChB;IACA,IAAK,CAAEQ,mBAAmB,CAACE,OAAO,EAAG;MACpCF,mBAAmB,CAACE,OAAO,GAAGD,IAAI;IACnC;IAEA,OAAO,MAAM;MACZ;MACA,IACCF,uBAAuB,CAAC,CAAC,KAAK,UAAU,IACxCA,uBAAuB,CAAC,CAAC,KAAKC,mBAAmB,CAACE,OAAO,EACxD;QACDJ,uBAAuB,CAAEE,mBAAmB,CAACE,OAAQ,CAAC;MACvD;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;;EAEP;EACAV,SAAS,CAAE,MAAM;IAChB,IAAKK,OAAO,IAAII,IAAI,KAAK,UAAU,EAAG;MACrCH,uBAAuB,CAAE,UAAW,CAAC;IACtC,CAAC,MAAM,IACN,CAAED,OAAO,IACTE,uBAAuB,CAAC,CAAC,KAAK,UAAU,IACxCC,mBAAmB,CAACE,OAAO,KAAKD,IAAI,EACnC;MACDH,uBAAuB,CAAEE,mBAAmB,CAACE,OAAQ,CAAC;IACvD;EACD,CAAC,EAAE,CAAEJ,uBAAuB,EAAED,OAAO,EAAEI,IAAI,CAAG,CAAC;AAChD","ignoreList":[]}

package/build-module/hooks/utils.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -20,7 +19,7 @@ import { unlock } from '../lock-unlock';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Removed falsy values from nested object.
@@ -28,6 +27,7 @@ import classnames from 'classnames';
  * @param {*} object
  * @return {*} Object cleaned from falsy values
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const cleanEmptyObject = object => {
   if (object === null || typeof object !== 'object' || Array.isArray(object)) {
     return object;
@@ -160,7 +160,7 @@ export function useStyleOverride({
  * @return {Object} Settings object.
  */
 export function useBlockSettings(name, parentLayout) {
-  const [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, writingMode, textTransform, letterSpacing, padding, margin, blockGap, spacingSizes, units, aspectRatio, minHeight, layout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow] = useSettings('background.backgroundImage', 'background.backgroundSize', 'typography.fontFamilies.custom', 'typography.fontFamilies.default', 'typography.fontFamilies.theme', 'typography.defaultFontSizes', 'typography.fontSizes.custom', 'typography.fontSizes.default', 'typography.fontSizes.theme', 'typography.customFontSize', 'typography.fontStyle', 'typography.fontWeight', 'typography.lineHeight', 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.writingMode', 'typography.textTransform', 'typography.letterSpacing', 'spacing.padding', 'spacing.margin', 'spacing.blockGap', 'spacing.spacingSizes', 'spacing.units', 'dimensions.aspectRatio', 'dimensions.minHeight', 'layout', 'border.color', 'border.radius', 'border.style', 'border.width', 'color.custom', 'color.palette.custom', 'color.customDuotone', 'color.palette.theme', 'color.palette.default', 'color.defaultPalette', 'color.defaultDuotone', 'color.duotone.custom', 'color.duotone.theme', 'color.duotone.default', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default', 'color.defaultGradients', 'color.customGradient', 'color.background', 'color.link', 'color.text', 'color.heading', 'color.button', 'shadow');
+  const [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, writingMode, textTransform, letterSpacing, padding, margin, blockGap, defaultSpacingSizesEnabled, customSpacingSize, userSpacingSizes, defaultSpacingSizes, themeSpacingSizes, units, aspectRatio, minHeight, layout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow] = useSettings('background.backgroundImage', 'background.backgroundSize', 'typography.fontFamilies.custom', 'typography.fontFamilies.default', 'typography.fontFamilies.theme', 'typography.defaultFontSizes', 'typography.fontSizes.custom', 'typography.fontSizes.default', 'typography.fontSizes.theme', 'typography.customFontSize', 'typography.fontStyle', 'typography.fontWeight', 'typography.lineHeight', 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.writingMode', 'typography.textTransform', 'typography.letterSpacing', 'spacing.padding', 'spacing.margin', 'spacing.blockGap', 'spacing.defaultSpacingSizes', 'spacing.customSpacingSize', 'spacing.spacingSizes.custom', 'spacing.spacingSizes.default', 'spacing.spacingSizes.theme', 'spacing.units', 'dimensions.aspectRatio', 'dimensions.minHeight', 'layout', 'border.color', 'border.radius', 'border.style', 'border.width', 'color.custom', 'color.palette.custom', 'color.customDuotone', 'color.palette.theme', 'color.palette.default', 'color.defaultPalette', 'color.defaultDuotone', 'color.duotone.custom', 'color.duotone.theme', 'color.duotone.default', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default', 'color.defaultGradients', 'color.customGradient', 'color.background', 'color.link', 'color.text', 'color.heading', 'color.button', 'shadow');
   const rawSettings = useMemo(() => {
     return {
       background: {
@@ -220,8 +220,12 @@ export function useBlockSettings(name, parentLayout) {
       },
       spacing: {
         spacingSizes: {
-          custom: spacingSizes
+          custom: userSpacingSizes,
+          default: defaultSpacingSizes,
+          theme: themeSpacingSizes
         },
+        customSpacingSize,
+        defaultSpacingSizes: defaultSpacingSizesEnabled,
         padding,
         margin,
         blockGap,
@@ -241,7 +245,7 @@ export function useBlockSettings(name, parentLayout) {
       parentLayout,
       shadow
     };
-  }, [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, textTransform, letterSpacing, writingMode, padding, margin, blockGap, spacingSizes, units, aspectRatio, minHeight, layout, parentLayout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow]);
+  }, [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, textTransform, letterSpacing, writingMode, padding, margin, blockGap, defaultSpacingSizesEnabled, customSpacingSize, userSpacingSizes, defaultSpacingSizes, themeSpacingSizes, units, aspectRatio, minHeight, layout, parentLayout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow]);
   return useSettingsForBlockElement(rawSettings, name);
 }
 export function createBlockEditFilter(features) {
@@ -277,11 +281,10 @@ export function createBlockEditFilter(features) {
           neededProps[key] = props.attributes[key];
         }
       }
-      return createElement(Edit
+      return /*#__PURE__*/_jsx(Edit
       // We can use the index because the array length
       // is fixed per page load right now.
       , {
-        key: i,
         name: props.name,
         isSelected: props.isSelected,
         clientId: props.clientId,
@@ -291,11 +294,10 @@ export function createBlockEditFilter(features) {
         // props!!!
         ,
         ...neededProps
-      });
-    }), createElement(OriginalBlockEdit, {
-      key: "edit",
+      }, i);
+    }), /*#__PURE__*/_jsx(OriginalBlockEdit, {
       ...props
-    })];
+    }, "edit")];
   }, 'withBlockEditHooks');
   addFilter('editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks);
 }
@@ -345,38 +347,37 @@ export function createBlockListBlockFilter(features) {
       !Object.keys(neededProps).length || !hasSupport(props.name)) {
         return null;
       }
-      return createElement(BlockPropsPure
+      return /*#__PURE__*/_jsx(BlockPropsPure
       // We can use the index because the array length
       // is fixed per page load right now.
       , {
-        key: i,
         index: i,
         useBlockProps: useBlockProps
         // This component is pure, so we must pass a stable
         // function reference.
         ,
         setAllWrapperProps: setAllWrapperProps,
-        name: props.name
+        name: props.name,
+        clientId: props.clientId
         // This component is pure, so only pass needed
         // props!!!
         ,
         ...neededProps
-      });
-    }), createElement(BlockListBlock, {
-      key: "edit",
+      }, i);
+    }), /*#__PURE__*/_jsx(BlockListBlock, {
       ...props,
       wrapperProps: allWrapperProps.filter(Boolean).reduce((acc, wrapperProps) => {
         return {
           ...acc,
           ...wrapperProps,
-          className: classnames(acc.className, wrapperProps.className),
+          className: clsx(acc.className, wrapperProps.className),
           style: {
             ...acc.style,
             ...wrapperProps.style
           }
         };
       }, props.wrapperProps || {})
-    })];
+    }, "edit")];
   }, 'withBlockListBlockHooks');
   addFilter('editor.BlockListBlock', 'core/editor/hooks', withBlockListBlockHooks);
 }