@wordpress/block-editor 7.0.1 → 8.0.0

package/build-module/hooks/font-family.js

@@ -3,69 +3,124 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find, kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
 
+import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
+import TokenList from '@wordpress/token-list';
 /**
  * Internal dependencies
  */
 
-import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 import FontFamilyControl from '../components/font-family';
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+/**
+ * Filters registered block settings, extending attributes to include
+ * the `fontFamily` attribute.
+ *
+ * @param {Object} settings Original block settings
+ * @return {Object}         Filtered block settings
+ */
 
-const getFontFamilyFromAttributeValue = (fontFamilies, value) => {
-  const attributeParsed = /var:preset\|font-family\|(.+)/.exec(value);
+function addAttributes(settings) {
+  if (!hasBlockSupport(settings, FONT_FAMILY_SUPPORT_KEY)) {
+    return settings;
+  } // Allow blocks to specify a default value if needed.
 
-  if (attributeParsed && attributeParsed[1]) {
-    const fontFamilyObject = find(fontFamilies, ({
-      slug
-    }) => {
-      return slug === attributeParsed[1];
+
+  if (!settings.attributes.fontFamily) {
+    Object.assign(settings.attributes, {
+      fontFamily: {
+        type: 'string'
+      }
     });
+  }
 
-    if (fontFamilyObject) {
-      return fontFamilyObject.fontFamily;
-    }
+  return settings;
+}
+/**
+ * Override props assigned to save component to inject font family.
+ *
+ * @param {Object} props      Additional props applied to save element
+ * @param {Object} blockType  Block type
+ * @param {Object} attributes Block attributes
+ * @return {Object}           Filtered props applied to save element
+ */
+
+
+function addSaveProps(props, blockType, attributes) {
+  if (!hasBlockSupport(blockType, FONT_FAMILY_SUPPORT_KEY)) {
+    return props;
   }
 
-  return value;
-};
+  if (hasBlockSupport(blockType, 'typography.__experimentalSkipSerialization')) {
+    return props;
+  }
+
+  if (!(attributes !== null && attributes !== void 0 && attributes.fontFamily)) {
+    return props;
+  } // Use TokenList to dedupe classes.
+
+
+  const classes = new TokenList(props.className);
+  classes.add(`has-${kebabCase(attributes === null || attributes === void 0 ? void 0 : attributes.fontFamily)}-font-family`);
+  const newClassName = classes.value;
+  props.className = newClassName ? newClassName : undefined;
+  return props;
+}
+/**
+ * Filters registered block settings to expand the block edit wrapper
+ * by applying the desired styles and classnames.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+
+
+function addEditProps(settings) {
+  if (!hasBlockSupport(settings, FONT_FAMILY_SUPPORT_KEY)) {
+    return settings;
+  }
+
+  const existingGetEditWrapperProps = settings.getEditWrapperProps;
+
+  settings.getEditWrapperProps = attributes => {
+    let props = {};
+
+    if (existingGetEditWrapperProps) {
+      props = existingGetEditWrapperProps(attributes);
+    }
+
+    return addSaveProps(props, settings, attributes);
+  };
+
+  return settings;
+}
 
 export function FontFamilyEdit({
-  name,
   setAttributes,
   attributes: {
-    style = {}
+    fontFamily
   }
 }) {
-  var _style$typography;
+  var _find;
 
   const fontFamilies = useSetting('typography.fontFamilies');
-  const isDisable = useIsFontFamilyDisabled({
-    name
-  });
-
-  if (isDisable) {
-    return null;
-  }
-
-  const value = getFontFamilyFromAttributeValue(fontFamilies, (_style$typography = style.typography) === null || _style$typography === void 0 ? void 0 : _style$typography.fontFamily);
+  const value = (_find = find(fontFamilies, ({
+    slug
+  }) => fontFamily === slug)) === null || _find === void 0 ? void 0 : _find.fontFamily;
 
   function onChange(newValue) {
     const predefinedFontFamily = find(fontFamilies, ({
-      fontFamily
-    }) => fontFamily === newValue);
+      fontFamily: f
+    }) => f === newValue);
     setAttributes({
-      style: cleanEmptyObject({ ...style,
-        typography: { ...(style.typography || {}),
-          fontFamily: predefinedFontFamily ? `var:preset|font-family|${predefinedFontFamily.slug}` : newValue || undefined
-        }
-      })
+      fontFamily: predefinedFontFamily === null || predefinedFontFamily === void 0 ? void 0 : predefinedFontFamily.slug
     });
   }
 
@@ -89,4 +144,33 @@ export function useIsFontFamilyDisabled({
   const fontFamilies = useSetting('typography.fontFamilies');
   return !fontFamilies || fontFamilies.length === 0 || !hasBlockSupport(name, FONT_FAMILY_SUPPORT_KEY);
 }
+/**
+ * Checks if there is a current value set for the font family block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a font family value set.
+ */
+
+export function hasFontFamilyValue(props) {
+  return !!props.attributes.fontFamily;
+}
+/**
+ * Resets the font family block support attribute. This can be used when
+ * disabling the font family support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+
+export function resetFontFamily({
+  setAttributes
+}) {
+  setAttributes({
+    fontFamily: undefined
+  });
+}
+addFilter('blocks.registerBlockType', 'core/fontFamily/addAttribute', addAttributes);
+addFilter('blocks.getSaveContent.extraProps', 'core/fontFamily/addSaveProps', addSaveProps);
+addFilter('blocks.registerBlockType', 'core/fontFamily/addEditProps', addEditProps);
 //# sourceMappingURL=font-family.js.map

package/build-module/hooks/font-family.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-family.js"],"names":["find","hasBlockSupport","cleanEmptyObject","useSetting","FontFamilyControl","FONT_FAMILY_SUPPORT_KEY","getFontFamilyFromAttributeValue","fontFamilies","value","attributeParsed","exec","fontFamilyObject","slug","fontFamily","FontFamilyEdit","name","setAttributes","attributes","style","isDisable","useIsFontFamilyDisabled","typography","onChange","newValue","predefinedFontFamily","undefined","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,eAAT,QAAgC,mBAAhC;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,SAAjC;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,OAAOC,iBAAP,MAA8B,2BAA9B;AAEA,OAAO,MAAMC,uBAAuB,GAAG,qCAAhC;;AAEP,MAAMC,+BAA+B,GAAG,CAAEC,YAAF,EAAgBC,KAAhB,KAA2B;AAClE,QAAMC,eAAe,GAAG,gCAAgCC,IAAhC,CAAsCF,KAAtC,CAAxB;;AACA,MAAKC,eAAe,IAAIA,eAAe,CAAE,CAAF,CAAvC,EAA+C;AAC9C,UAAME,gBAAgB,GAAGX,IAAI,CAAEO,YAAF,EAAgB,CAAE;AAAEK,MAAAA;AAAF,KAAF,KAAgB;AAC5D,aAAOA,IAAI,KAAKH,eAAe,CAAE,CAAF,CAA/B;AACA,KAF4B,CAA7B;;AAGA,QAAKE,gBAAL,EAAwB;AACvB,aAAOA,gBAAgB,CAACE,UAAxB;AACA;AACD;;AACD,SAAOL,KAAP;AACA,CAXD;;AAaA,OAAO,SAASM,cAAT,CAAyB;AAC/BC,EAAAA,IAD+B;AAE/BC,EAAAA,aAF+B;AAG/BC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,KAAK,GAAG;AAAV;AAHmB,CAAzB,EAIH;AAAA;;AACH,QAAMX,YAAY,GAAGJ,UAAU,CAAE,yBAAF,CAA/B;AACA,QAAMgB,SAAS,GAAGC,uBAAuB,CAAE;AAAEL,IAAAA;AAAF,GAAF,CAAzC;;AAEA,MAAKI,SAAL,EAAiB;AAChB,WAAO,IAAP;AACA;;AAED,QAAMX,KAAK,GAAGF,+BAA+B,CAC5CC,YAD4C,uBAE5CW,KAAK,CAACG,UAFsC,sDAE5C,kBAAkBR,UAF0B,CAA7C;;AAKA,WAASS,QAAT,CAAmBC,QAAnB,EAA8B;AAC7B,UAAMC,oBAAoB,GAAGxB,IAAI,CAChCO,YADgC,EAEhC,CAAE;AAAEM,MAAAA;AAAF,KAAF,KAAsBA,UAAU,KAAKU,QAFL,CAAjC;AAIAP,IAAAA,aAAa,CAAE;AACdE,MAAAA,KAAK,EAAEhB,gBAAgB,CAAE,EACxB,GAAGgB,KADqB;AAExBG,QAAAA,UAAU,EAAE,EACX,IAAKH,KAAK,CAACG,UAAN,IAAoB,EAAzB,CADW;AAEXR,UAAAA,UAAU,EAAEW,oBAAoB,GAC5B,0BAA0BA,oBAAoB,CAACZ,IAAM,EADzB,GAE7BW,QAAQ,IAAIE;AAJJ;AAFY,OAAF;AADT,KAAF,CAAb;AAWA;;AAED,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,YAAY,EAAGlB,YAFhB;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,QAAQ,EAAGc;AAJZ,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASF,uBAAT,CAAkC;AAAEL,EAAAA;AAAF,CAAlC,EAA6C;AACnD,QAAMR,YAAY,GAAGJ,UAAU,CAAE,yBAAF,CAA/B;AACA,SACC,CAAEI,YAAF,IACAA,YAAY,CAACmB,MAAb,KAAwB,CADxB,IAEA,CAAEzB,eAAe,CAAEc,IAAF,EAAQV,uBAAR,CAHlB;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { cleanEmptyObject } from './utils';\nimport useSetting from '../components/use-setting';\nimport FontFamilyControl from '../components/font-family';\n\nexport const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';\n\nconst getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {\n\tconst attributeParsed = /var:preset\\|font-family\\|(.+)/.exec( value );\n\tif ( attributeParsed && attributeParsed[ 1 ] ) {\n\t\tconst fontFamilyObject = find( fontFamilies, ( { slug } ) => {\n\t\t\treturn slug === attributeParsed[ 1 ];\n\t\t} );\n\t\tif ( fontFamilyObject ) {\n\t\t\treturn fontFamilyObject.fontFamily;\n\t\t}\n\t}\n\treturn value;\n};\n\nexport function FontFamilyEdit( {\n\tname,\n\tsetAttributes,\n\tattributes: { style = {} },\n} ) {\n\tconst fontFamilies = useSetting( 'typography.fontFamilies' );\n\tconst isDisable = useIsFontFamilyDisabled( { name } );\n\n\tif ( isDisable ) {\n\t\treturn null;\n\t}\n\n\tconst value = getFontFamilyFromAttributeValue(\n\t\tfontFamilies,\n\t\tstyle.typography?.fontFamily\n\t);\n\n\tfunction onChange( newValue ) {\n\t\tconst predefinedFontFamily = find(\n\t\t\tfontFamilies,\n\t\t\t( { fontFamily } ) => fontFamily === newValue\n\t\t);\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\ttypography: {\n\t\t\t\t\t...( style.typography || {} ),\n\t\t\t\t\tfontFamily: predefinedFontFamily\n\t\t\t\t\t\t? `var:preset|font-family|${ predefinedFontFamily.slug }`\n\t\t\t\t\t\t: newValue || undefined,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<FontFamilyControl\n\t\t\tclassName=\"block-editor-hooks-font-family-control\"\n\t\t\tfontFamilies={ fontFamilies }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Custom hook that checks if font-family functionality is disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean} Whether setting is disabled.\n */\nexport function useIsFontFamilyDisabled( { name } ) {\n\tconst fontFamilies = useSetting( 'typography.fontFamilies' );\n\treturn (\n\t\t! fontFamilies ||\n\t\tfontFamilies.length === 0 ||\n\t\t! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-family.js"],"names":["find","kebabCase","addFilter","hasBlockSupport","TokenList","useSetting","FontFamilyControl","FONT_FAMILY_SUPPORT_KEY","addAttributes","settings","attributes","fontFamily","Object","assign","type","addSaveProps","props","blockType","classes","className","add","newClassName","value","undefined","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","FontFamilyEdit","setAttributes","fontFamilies","slug","onChange","newValue","predefinedFontFamily","f","useIsFontFamilyDisabled","name","length","hasFontFamilyValue","resetFontFamily"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport TokenList from '@wordpress/token-list';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport FontFamilyControl from '../components/font-family';\n\nexport const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `fontFamily` attribute.\n *\n * @param {Object} settings Original block settings\n * @return {Object}         Filtered block settings\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify a default value if needed.\n\tif ( ! settings.attributes.fontFamily ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tfontFamily: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject font family.\n *\n * @param {Object} props      Additional props applied to save element\n * @param {Object} blockType  Block type\n * @param {Object} attributes Block attributes\n * @return {Object}           Filtered props applied to save element\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tif (\n\t\thasBlockSupport(\n\t\t\tblockType,\n\t\t\t'typography.__experimentalSkipSerialization'\n\t\t)\n\t) {\n\t\treturn props;\n\t}\n\n\tif ( ! attributes?.fontFamily ) {\n\t\treturn props;\n\t}\n\n\t// Use TokenList to dedupe classes.\n\tconst classes = new TokenList( props.className );\n\tclasses.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );\n\tconst newClassName = classes.value;\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters registered block settings to expand the block edit wrapper\n * by applying the desired styles and classnames.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\nexport function FontFamilyEdit( {\n\tsetAttributes,\n\tattributes: { fontFamily },\n} ) {\n\tconst fontFamilies = useSetting( 'typography.fontFamilies' );\n\n\tconst value = find( fontFamilies, ( { slug } ) => fontFamily === slug )\n\t\t?.fontFamily;\n\n\tfunction onChange( newValue ) {\n\t\tconst predefinedFontFamily = find(\n\t\t\tfontFamilies,\n\t\t\t( { fontFamily: f } ) => f === newValue\n\t\t);\n\t\tsetAttributes( {\n\t\t\tfontFamily: predefinedFontFamily?.slug,\n\t\t} );\n\t}\n\n\treturn (\n\t\t<FontFamilyControl\n\t\t\tclassName=\"block-editor-hooks-font-family-control\"\n\t\t\tfontFamilies={ fontFamilies }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Custom hook that checks if font-family functionality is disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean} Whether setting is disabled.\n */\nexport function useIsFontFamilyDisabled( { name } ) {\n\tconst fontFamilies = useSetting( 'typography.fontFamilies' );\n\treturn (\n\t\t! fontFamilies ||\n\t\tfontFamilies.length === 0 ||\n\t\t! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )\n\t);\n}\n\n/**\n * Checks if there is a current value set for the font family block support.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a font family value set.\n */\nexport function hasFontFamilyValue( props ) {\n\treturn !! props.attributes.fontFamily;\n}\n\n/**\n * Resets the font family block support attribute. This can be used when\n * disabling the font family support controls for a block via a progressive\n * discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetFontFamily( { setAttributes } ) {\n\tsetAttributes( { fontFamily: undefined } );\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/fontFamily/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/fontFamily/addSaveProps',\n\taddSaveProps\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/fontFamily/addEditProps',\n\taddEditProps\n);\n"]}

package/build-module/hooks/font-size.js

@@ -115,7 +115,6 @@ export function FontSizeEdit(props) {
     },
     setAttributes
   } = props;
-  const isDisabled = useIsFontSizeDisabled(props);
   const fontSizes = useSetting('typography.fontSizes');
 
   const onChange = value => {
@@ -130,15 +129,54 @@ export function FontSizeEdit(props) {
     });
   };
 
-  if (isDisabled) {
-    return null;
-  }
-
   const fontSizeObject = getFontSize(fontSizes, fontSize, style === null || style === void 0 ? void 0 : (_style$typography = style.typography) === null || _style$typography === void 0 ? void 0 : _style$typography.fontSize);
   const fontSizeValue = (fontSizeObject === null || fontSizeObject === void 0 ? void 0 : fontSizeObject.size) || (style === null || style === void 0 ? void 0 : (_style$typography2 = style.typography) === null || _style$typography2 === void 0 ? void 0 : _style$typography2.fontSize) || fontSize;
   return createElement(FontSizePicker, {
     onChange: onChange,
-    value: fontSizeValue
+    value: fontSizeValue,
+    withReset: false
+  });
+}
+/**
+ * Checks if there is a current value set for the font size block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a font size value set.
+ */
+
+export function hasFontSizeValue(props) {
+  var _style$typography3;
+
+  const {
+    fontSize,
+    style
+  } = props.attributes;
+  return !!fontSize || !!(style !== null && style !== void 0 && (_style$typography3 = style.typography) !== null && _style$typography3 !== void 0 && _style$typography3.fontSize);
+}
+/**
+ * Resets the font size block support attribute. This can be used when
+ * disabling the font size support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+
+export function resetFontSize({
+  attributes = {},
+  setAttributes
+}) {
+  const {
+    style
+  } = attributes;
+  setAttributes({
+    fontSize: undefined,
+    style: cleanEmptyObject({ ...style,
+      typography: { ...(style === null || style === void 0 ? void 0 : style.typography),
+        fontSize: undefined
+      }
+    })
   });
 }
 /**
@@ -166,7 +204,7 @@ export function useIsFontSizeDisabled({
  */
 
 const withFontSizeInlineStyles = createHigherOrderComponent(BlockListBlock => props => {
-  var _style$typography3, _style$typography4;
+  var _style$typography4, _style$typography5;
 
   const fontSizes = useSetting('typography.fontSizes');
   const {
@@ -181,11 +219,11 @@ const withFontSizeInlineStyles = createHigherOrderComponent(BlockListBlock => pr
   // doesn't already have an inline font size,
   // and does have a class to extract the font size from.
 
-  if (!hasBlockSupport(blockName, FONT_SIZE_SUPPORT_KEY) || hasBlockSupport(blockName, 'typography.__experimentalSkipSerialization') || !fontSize || style !== null && style !== void 0 && (_style$typography3 = style.typography) !== null && _style$typography3 !== void 0 && _style$typography3.fontSize) {
+  if (!hasBlockSupport(blockName, FONT_SIZE_SUPPORT_KEY) || hasBlockSupport(blockName, 'typography.__experimentalSkipSerialization') || !fontSize || style !== null && style !== void 0 && (_style$typography4 = style.typography) !== null && _style$typography4 !== void 0 && _style$typography4.fontSize) {
     return createElement(BlockListBlock, props);
   }
 
-  const fontSizeValue = getFontSize(fontSizes, fontSize, style === null || style === void 0 ? void 0 : (_style$typography4 = style.typography) === null || _style$typography4 === void 0 ? void 0 : _style$typography4.fontSize).size;
+  const fontSizeValue = getFontSize(fontSizes, fontSize, style === null || style === void 0 ? void 0 : (_style$typography5 = style.typography) === null || _style$typography5 === void 0 ? void 0 : _style$typography5.fontSize).size;
   const newProps = { ...props,
     wrapperProps: { ...wrapperProps,
       style: {

package/build-module/hooks/font-size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-size.js"],"names":["addFilter","hasBlockSupport","TokenList","createHigherOrderComponent","getFontSize","getFontSizeClass","getFontSizeObjectByValue","FontSizePicker","cleanEmptyObject","useSetting","FONT_SIZE_SUPPORT_KEY","addAttributes","settings","attributes","fontSize","Object","assign","type","addSaveProps","props","blockType","classes","className","add","newClassName","value","undefined","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","FontSizeEdit","style","setAttributes","isDisabled","useIsFontSizeDisabled","fontSizes","onChange","fontSizeSlug","slug","typography","fontSizeObject","fontSizeValue","size","name","blockName","hasFontSizes","length","withFontSizeInlineStyles","BlockListBlock","wrapperProps","newProps"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport TokenList from '@wordpress/token-list';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n\tFontSizePicker,\n} from '../components/font-sizes';\nimport { cleanEmptyObject } from './utils';\nimport useSetting from '../components/use-setting';\n\nexport const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';\n\n/**\n * Filters registered block settings, extending attributes to include\n * `fontSize` and `fontWeight` attributes.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify a default value if needed.\n\tif ( ! settings.attributes.fontSize ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tfontSize: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject font size.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tif (\n\t\thasBlockSupport(\n\t\t\tblockType,\n\t\t\t'typography.__experimentalSkipSerialization'\n\t\t)\n\t) {\n\t\treturn props;\n\t}\n\n\t// Use TokenList to dedupe classes.\n\tconst classes = new TokenList( props.className );\n\tclasses.add( getFontSizeClass( attributes.fontSize ) );\n\tconst newClassName = classes.value;\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters registered block settings to expand the block edit wrapper\n * by applying the desired styles and classnames.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * Inspector control panel containing the font size related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Font size edit element.\n */\nexport function FontSizeEdit( props ) {\n\tconst {\n\t\tattributes: { fontSize, style },\n\t\tsetAttributes,\n\t} = props;\n\tconst isDisabled = useIsFontSizeDisabled( props );\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\n\tconst onChange = ( value ) => {\n\t\tconst fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\ttypography: {\n\t\t\t\t\t...style?.typography,\n\t\t\t\t\tfontSize: fontSizeSlug ? undefined : value,\n\t\t\t\t},\n\t\t\t} ),\n\t\t\tfontSize: fontSizeSlug,\n\t\t} );\n\t};\n\n\tif ( isDisabled ) {\n\t\treturn null;\n\t}\n\n\tconst fontSizeObject = getFontSize(\n\t\tfontSizes,\n\t\tfontSize,\n\t\tstyle?.typography?.fontSize\n\t);\n\n\tconst fontSizeValue =\n\t\tfontSizeObject?.size || style?.typography?.fontSize || fontSize;\n\n\treturn <FontSizePicker onChange={ onChange } value={ fontSizeValue } />;\n}\n\n/**\n * Custom hook that checks if font-size settings have been disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean} Whether setting is disabled.\n */\nexport function useIsFontSizeDisabled( { name: blockName } = {} ) {\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst hasFontSizes = !! fontSizes?.length;\n\n\treturn (\n\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || ! hasFontSizes\n\t);\n}\n\n/**\n * Add inline styles for font sizes.\n * Ideally, this is not needed and themes load the font-size classes on the\n * editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withFontSizeInlineStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\t\tconst {\n\t\t\tname: blockName,\n\t\t\tattributes: { fontSize, style },\n\t\t\twrapperProps,\n\t\t} = props;\n\n\t\t// Only add inline styles if the block supports font sizes,\n\t\t// doesn't skip serialization of font sizes,\n\t\t// doesn't already have an inline font size,\n\t\t// and does have a class to extract the font size from.\n\t\tif (\n\t\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||\n\t\t\thasBlockSupport(\n\t\t\t\tblockName,\n\t\t\t\t'typography.__experimentalSkipSerialization'\n\t\t\t) ||\n\t\t\t! fontSize ||\n\t\t\tstyle?.typography?.fontSize\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst fontSizeValue = getFontSize(\n\t\t\tfontSizes,\n\t\t\tfontSize,\n\t\t\tstyle?.typography?.fontSize\n\t\t).size;\n\n\t\tconst newProps = {\n\t\t\t...props,\n\t\t\twrapperProps: {\n\t\t\t\t...wrapperProps,\n\t\t\t\tstyle: {\n\t\t\t\t\tfontSize: fontSizeValue,\n\t\t\t\t\t...wrapperProps?.style,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...newProps } />;\n\t},\n\t'withFontSizeInlineStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/font/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/font/addSaveProps',\n\taddSaveProps\n);\n\naddFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/font-size/with-font-size-inline-styles',\n\twithFontSizeInlineStyles\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-size.js"],"names":["addFilter","hasBlockSupport","TokenList","createHigherOrderComponent","getFontSize","getFontSizeClass","getFontSizeObjectByValue","FontSizePicker","cleanEmptyObject","useSetting","FONT_SIZE_SUPPORT_KEY","addAttributes","settings","attributes","fontSize","Object","assign","type","addSaveProps","props","blockType","classes","className","add","newClassName","value","undefined","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","FontSizeEdit","style","setAttributes","fontSizes","onChange","fontSizeSlug","slug","typography","fontSizeObject","fontSizeValue","size","hasFontSizeValue","resetFontSize","useIsFontSizeDisabled","name","blockName","hasFontSizes","length","withFontSizeInlineStyles","BlockListBlock","wrapperProps","newProps"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport TokenList from '@wordpress/token-list';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n\tFontSizePicker,\n} from '../components/font-sizes';\nimport { cleanEmptyObject } from './utils';\nimport useSetting from '../components/use-setting';\n\nexport const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';\n\n/**\n * Filters registered block settings, extending attributes to include\n * `fontSize` and `fontWeight` attributes.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify a default value if needed.\n\tif ( ! settings.attributes.fontSize ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tfontSize: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject font size.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tif (\n\t\thasBlockSupport(\n\t\t\tblockType,\n\t\t\t'typography.__experimentalSkipSerialization'\n\t\t)\n\t) {\n\t\treturn props;\n\t}\n\n\t// Use TokenList to dedupe classes.\n\tconst classes = new TokenList( props.className );\n\tclasses.add( getFontSizeClass( attributes.fontSize ) );\n\tconst newClassName = classes.value;\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters registered block settings to expand the block edit wrapper\n * by applying the desired styles and classnames.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * Inspector control panel containing the font size related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Font size edit element.\n */\nexport function FontSizeEdit( props ) {\n\tconst {\n\t\tattributes: { fontSize, style },\n\t\tsetAttributes,\n\t} = props;\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\n\tconst onChange = ( value ) => {\n\t\tconst fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\ttypography: {\n\t\t\t\t\t...style?.typography,\n\t\t\t\t\tfontSize: fontSizeSlug ? undefined : value,\n\t\t\t\t},\n\t\t\t} ),\n\t\t\tfontSize: fontSizeSlug,\n\t\t} );\n\t};\n\n\tconst fontSizeObject = getFontSize(\n\t\tfontSizes,\n\t\tfontSize,\n\t\tstyle?.typography?.fontSize\n\t);\n\n\tconst fontSizeValue =\n\t\tfontSizeObject?.size || style?.typography?.fontSize || fontSize;\n\n\treturn (\n\t\t<FontSizePicker\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ fontSizeValue }\n\t\t\twithReset={ false }\n\t\t/>\n\t);\n}\n\n/**\n * Checks if there is a current value set for the font size block support.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a font size value set.\n */\nexport function hasFontSizeValue( props ) {\n\tconst { fontSize, style } = props.attributes;\n\treturn !! fontSize || !! style?.typography?.fontSize;\n}\n\n/**\n * Resets the font size block support attribute. This can be used when\n * disabling the font size support controls for a block via a progressive\n * discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetFontSize( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tfontSize: undefined,\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\ttypography: {\n\t\t\t\t...style?.typography,\n\t\t\t\tfontSize: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if font-size settings have been disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean} Whether setting is disabled.\n */\nexport function useIsFontSizeDisabled( { name: blockName } = {} ) {\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst hasFontSizes = !! fontSizes?.length;\n\n\treturn (\n\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || ! hasFontSizes\n\t);\n}\n\n/**\n * Add inline styles for font sizes.\n * Ideally, this is not needed and themes load the font-size classes on the\n * editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withFontSizeInlineStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\t\tconst {\n\t\t\tname: blockName,\n\t\t\tattributes: { fontSize, style },\n\t\t\twrapperProps,\n\t\t} = props;\n\n\t\t// Only add inline styles if the block supports font sizes,\n\t\t// doesn't skip serialization of font sizes,\n\t\t// doesn't already have an inline font size,\n\t\t// and does have a class to extract the font size from.\n\t\tif (\n\t\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||\n\t\t\thasBlockSupport(\n\t\t\t\tblockName,\n\t\t\t\t'typography.__experimentalSkipSerialization'\n\t\t\t) ||\n\t\t\t! fontSize ||\n\t\t\tstyle?.typography?.fontSize\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst fontSizeValue = getFontSize(\n\t\t\tfontSizes,\n\t\t\tfontSize,\n\t\t\tstyle?.typography?.fontSize\n\t\t).size;\n\n\t\tconst newProps = {\n\t\t\t...props,\n\t\t\twrapperProps: {\n\t\t\t\t...wrapperProps,\n\t\t\t\tstyle: {\n\t\t\t\t\tfontSize: fontSizeValue,\n\t\t\t\t\t...wrapperProps?.style,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...newProps } />;\n\t},\n\t'withFontSizeInlineStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/font/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/font/addSaveProps',\n\taddSaveProps\n);\n\naddFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/font-size/with-font-size-inline-styles',\n\twithFontSizeInlineStyles\n);\n"]}

package/build-module/hooks/gap.js

@@ -0,0 +1,140 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+import { getBlockSupport } from '@wordpress/blocks';
+import { __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import useSetting from '../components/use-setting';
+import { SPACING_SUPPORT_KEY } from './dimensions';
+import { cleanEmptyObject } from './utils';
+/**
+ * Determines if there is gap support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ * @return {boolean}                 Whether there is support.
+ */
+
+export function hasGapSupport(blockType) {
+  const support = getBlockSupport(blockType, SPACING_SUPPORT_KEY);
+  return !!(true === support || support !== null && support !== void 0 && support.blockGap);
+}
+/**
+ * Checks if there is a current value in the gap block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}      Whether or not the block has a gap value set.
+ */
+
+export function hasGapValue(props) {
+  var _props$attributes$sty, _props$attributes$sty2;
+
+  return ((_props$attributes$sty = props.attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.spacing) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.blockGap) !== undefined;
+}
+/**
+ * Resets the gap block support attribute. This can be used when disabling
+ * the gap support controls for a block via a progressive discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+
+export function resetGap({
+  attributes = {},
+  setAttributes
+}) {
+  const {
+    style
+  } = attributes;
+  setAttributes({
+    style: { ...style,
+      spacing: { ...(style === null || style === void 0 ? void 0 : style.spacing),
+        blockGap: undefined
+      }
+    }
+  });
+}
+/**
+ * Custom hook that checks if gap settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean}     Whether the gap setting is disabled.
+ */
+
+export function useIsGapDisabled({
+  name: blockName
+} = {}) {
+  const isDisabled = !useSetting('spacing.blockGap');
+  return !hasGapSupport(blockName) || isDisabled;
+}
+/**
+ * Inspector control panel containing the gap related configuration
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Gap edit element.
+ */
+
+export function GapEdit(props) {
+  var _style$spacing;
+
+  const {
+    clientId,
+    attributes: {
+      style
+    },
+    setAttributes
+  } = props;
+  const units = useCustomUnits({
+    availableUnits: useSetting('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
+  });
+  const ref = useBlockRef(clientId);
+
+  if (useIsGapDisabled(props)) {
+    return null;
+  }
+
+  const onChange = next => {
+    var _window;
+
+    const newStyle = { ...style,
+      spacing: { ...(style === null || style === void 0 ? void 0 : style.spacing),
+        blockGap: next
+      }
+    };
+    setAttributes({
+      style: cleanEmptyObject(newStyle)
+    }); // In Safari, changing the `gap` CSS value on its own will not trigger the layout
+    // to be recalculated / re-rendered. To force the updated gap to re-render, here
+    // we replace the block's node with itself.
+
+    const isSafari = ((_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent) && window.navigator.userAgent.includes('Safari') && !window.navigator.userAgent.includes('Chrome ') && !window.navigator.userAgent.includes('Chromium ');
+
+    if (ref.current && isSafari) {
+      var _ref$current$parentNo;
+
+      (_ref$current$parentNo = ref.current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.replaceChild(ref.current, ref.current);
+    }
+  };
+
+  return Platform.select({
+    web: createElement(Fragment, null, createElement(UnitControl, {
+      label: __('Block spacing'),
+      __unstableInputWidth: "80px",
+      min: 0,
+      onChange: onChange,
+      units: units,
+      value: style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap
+    })),
+    native: null
+  });
+}
+//# sourceMappingURL=gap.js.map

package/build-module/hooks/gap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/gap.js"],"names":["__","Platform","getBlockSupport","__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__unstableUseBlockRef","useBlockRef","useSetting","SPACING_SUPPORT_KEY","cleanEmptyObject","hasGapSupport","blockType","support","blockGap","hasGapValue","props","attributes","style","spacing","undefined","resetGap","setAttributes","useIsGapDisabled","name","blockName","isDisabled","GapEdit","clientId","units","availableUnits","ref","onChange","next","newStyle","isSafari","window","navigator","userAgent","includes","current","parentNode","replaceChild","select","web","native"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Platform } from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';\nimport useSetting from '../components/use-setting';\nimport { SPACING_SUPPORT_KEY } from './dimensions';\nimport { cleanEmptyObject } from './utils';\n\n/**\n * Determines if there is gap support.\n *\n * @param {string|Object} blockType Block name or Block Type object.\n * @return {boolean}                 Whether there is support.\n */\nexport function hasGapSupport( blockType ) {\n\tconst support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );\n\treturn !! ( true === support || support?.blockGap );\n}\n\n/**\n * Checks if there is a current value in the gap block support attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}      Whether or not the block has a gap value set.\n */\nexport function hasGapValue( props ) {\n\treturn props.attributes.style?.spacing?.blockGap !== undefined;\n}\n\n/**\n * Resets the gap block support attribute. This can be used when disabling\n * the gap support controls for a block via a progressive discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetGap( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tblockGap: undefined,\n\t\t\t},\n\t\t},\n\t} );\n}\n\n/**\n * Custom hook that checks if gap settings have been disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean}     Whether the gap setting is disabled.\n */\nexport function useIsGapDisabled( { name: blockName } = {} ) {\n\tconst isDisabled = ! useSetting( 'spacing.blockGap' );\n\treturn ! hasGapSupport( blockName ) || isDisabled;\n}\n\n/**\n * Inspector control panel containing the gap related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Gap edit element.\n */\nexport function GapEdit( props ) {\n\tconst {\n\t\tclientId,\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst ref = useBlockRef( clientId );\n\n\tif ( useIsGapDisabled( props ) ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tblockGap: next,\n\t\t\t},\n\t\t};\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\n\t\t// In Safari, changing the `gap` CSS value on its own will not trigger the layout\n\t\t// to be recalculated / re-rendered. To force the updated gap to re-render, here\n\t\t// we replace the block's node with itself.\n\t\tconst isSafari =\n\t\t\twindow?.navigator.userAgent &&\n\t\t\twindow.navigator.userAgent.includes( 'Safari' ) &&\n\t\t\t! window.navigator.userAgent.includes( 'Chrome ' ) &&\n\t\t\t! window.navigator.userAgent.includes( 'Chromium ' );\n\n\t\tif ( ref.current && isSafari ) {\n\t\t\tref.current.parentNode?.replaceChild( ref.current, ref.current );\n\t\t}\n\t};\n\n\treturn Platform.select( {\n\t\tweb: (\n\t\t\t<>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tvalue={ style?.spacing?.blockGap }\n\t\t\t\t/>\n\t\t\t</>\n\t\t),\n\t\tnative: null,\n\t} );\n}\n"]}

package/build-module/hooks/index.js

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
+import './compat';
 import './align';
+import './lock';
 import './anchor';
 import './custom-class-name';
 import './generated-class-name';
@@ -15,4 +17,5 @@ export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { useCachedTruthy } from './use-cached-truthy';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/index.js"],"names":["useCustomSides","getBorderClassesAndStyles","useBorderProps","getColorClassesAndStyles","useColorProps","getSpacingClassesAndStyles"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,SAAP;AACA,OAAO,UAAP;AACA,OAAO,qBAAP;AACA,OAAO,wBAAP;AACA,OAAO,SAAP;AACA,OAAO,SAAP;AACA,OAAO,WAAP;AACA,OAAO,aAAP;AACA,OAAO,gBAAP;AACA,OAAO,UAAP;AAEA,SAASA,cAAT,QAA+B,cAA/B;AACA,SAASC,yBAAT,EAAoCC,cAApC,QAA0D,oBAA1D;AACA,SAASC,wBAAT,EAAmCC,aAAnC,QAAwD,mBAAxD;AACA,SAASC,0BAAT,QAA2C,qBAA3C","sourcesContent":["/**\n * Internal dependencies\n */\nimport './align';\nimport './anchor';\nimport './custom-class-name';\nimport './generated-class-name';\nimport './style';\nimport './color';\nimport './duotone';\nimport './font-size';\nimport './border-color';\nimport './layout';\n\nexport { useCustomSides } from './dimensions';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/index.js"],"names":["useCustomSides","getBorderClassesAndStyles","useBorderProps","getColorClassesAndStyles","useColorProps","getSpacingClassesAndStyles","useCachedTruthy"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,UAAP;AACA,OAAO,SAAP;AACA,OAAO,QAAP;AACA,OAAO,UAAP;AACA,OAAO,qBAAP;AACA,OAAO,wBAAP;AACA,OAAO,SAAP;AACA,OAAO,SAAP;AACA,OAAO,WAAP;AACA,OAAO,aAAP;AACA,OAAO,gBAAP;AACA,OAAO,UAAP;AAEA,SAASA,cAAT,QAA+B,cAA/B;AACA,SAASC,yBAAT,EAAoCC,cAApC,QAA0D,oBAA1D;AACA,SAASC,wBAAT,EAAmCC,aAAnC,QAAwD,mBAAxD;AACA,SAASC,0BAAT,QAA2C,qBAA3C;AACA,SAASC,eAAT,QAAgC,qBAAhC","sourcesContent":["/**\n * Internal dependencies\n */\nimport './compat';\nimport './align';\nimport './lock';\nimport './anchor';\nimport './custom-class-name';\nimport './generated-class-name';\nimport './style';\nimport './color';\nimport './duotone';\nimport './font-size';\nimport './border-color';\nimport './layout';\n\nexport { useCustomSides } from './dimensions';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { useCachedTruthy } from './use-cached-truthy';\n"]}

package/build-module/hooks/index.native.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './compat';
 import './align';
 import './anchor';
 import './custom-class-name';
@@ -11,4 +12,5 @@ import './font-size';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { useCachedTruthy } from './use-cached-truthy';
 //# sourceMappingURL=index.native.js.map

package/build-module/hooks/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/index.native.js"],"names":["getBorderClassesAndStyles","useBorderProps","getColorClassesAndStyles","useColorProps","getSpacingClassesAndStyles"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,SAAP;AACA,OAAO,UAAP;AACA,OAAO,qBAAP;AACA,OAAO,wBAAP;AACA,OAAO,SAAP;AACA,OAAO,SAAP;AACA,OAAO,aAAP;AAEA,SAASA,yBAAT,EAAoCC,cAApC,QAA0D,oBAA1D;AACA,SAASC,wBAAT,EAAmCC,aAAnC,QAAwD,mBAAxD;AACA,SAASC,0BAAT,QAA2C,qBAA3C","sourcesContent":["/**\n * Internal dependencies\n */\nimport './align';\nimport './anchor';\nimport './custom-class-name';\nimport './generated-class-name';\nimport './style';\nimport './color';\nimport './font-size';\n\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/index.native.js"],"names":["getBorderClassesAndStyles","useBorderProps","getColorClassesAndStyles","useColorProps","getSpacingClassesAndStyles","useCachedTruthy"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,UAAP;AACA,OAAO,SAAP;AACA,OAAO,UAAP;AACA,OAAO,qBAAP;AACA,OAAO,wBAAP;AACA,OAAO,SAAP;AACA,OAAO,SAAP;AACA,OAAO,aAAP;AAEA,SAASA,yBAAT,EAAoCC,cAApC,QAA0D,oBAA1D;AACA,SAASC,wBAAT,EAAmCC,aAAnC,QAAwD,mBAAxD;AACA,SAASC,0BAAT,QAA2C,qBAA3C;AACA,SAASC,eAAT,QAAgC,qBAAhC","sourcesContent":["/**\n * Internal dependencies\n */\nimport './compat';\nimport './align';\nimport './anchor';\nimport './custom-class-name';\nimport './generated-class-name';\nimport './style';\nimport './color';\nimport './font-size';\n\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { useCachedTruthy } from './use-cached-truthy';\n"]}