@wordpress/block-editor 12.6.0 → 12.8.0

package/build-module/components/font-sizes/font-size-picker.js

@@ -1,27 +1,25 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import useSetting from '../use-setting';
-
 function FontSizePicker(props) {
   const fontSizes = useSetting('typography.fontSizes');
   const disableCustomFontSizes = !useSetting('typography.customFontSize');
-  return createElement(BaseFontSizePicker, { ...props,
+  return createElement(BaseFontSizePicker, {
+    ...props,
     fontSizes: fontSizes,
     disableCustomFontSizes: disableCustomFontSizes
   });
 }
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md
  */
-
-
 export default FontSizePicker;
 //# sourceMappingURL=font-size-picker.js.map

package/build-module/components/font-sizes/font-size-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/font-size-picker.js"],"names":["FontSizePicker","BaseFontSizePicker","useSetting","props","fontSizes","disableCustomFontSizes"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,cAAc,IAAIC,kBAA3B,QAAqD,uBAArD;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,gBAAvB;;AAEA,SAASF,cAAT,CAAyBG,KAAzB,EAAiC;AAChC,QAAMC,SAAS,GAAGF,UAAU,CAAE,sBAAF,CAA5B;AACA,QAAMG,sBAAsB,GAAG,CAAEH,UAAU,CAAE,2BAAF,CAA3C;AAEA,SACC,cAAC,kBAAD,OACMC,KADN;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,sBAAsB,EAAGC;AAH1B,IADD;AAOA;AAED;AACA;AACA;;;AACA,eAAeL,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nfunction FontSizePicker( props ) {\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst disableCustomFontSizes = ! useSetting( 'typography.customFontSize' );\n\n\treturn (\n\t\t<BaseFontSizePicker\n\t\t\t{ ...props }\n\t\t\tfontSizes={ fontSizes }\n\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t/>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md\n */\nexport default FontSizePicker;\n"]}
+{"version":3,"names":["FontSizePicker","BaseFontSizePicker","useSetting","props","fontSizes","disableCustomFontSizes","createElement"],"sources":["@wordpress/block-editor/src/components/font-sizes/font-size-picker.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nfunction FontSizePicker( props ) {\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst disableCustomFontSizes = ! useSetting( 'typography.customFontSize' );\n\n\treturn (\n\t\t<BaseFontSizePicker\n\t\t\t{ ...props }\n\t\t\tfontSizes={ fontSizes }\n\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t/>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md\n */\nexport default FontSizePicker;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,IAAIC,kBAAkB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,OAAOC,UAAU,MAAM,gBAAgB;AAEvC,SAASF,cAAcA,CAAEG,KAAK,EAAG;EAChC,MAAMC,SAAS,GAAGF,UAAU,CAAE,sBAAuB,CAAC;EACtD,MAAMG,sBAAsB,GAAG,CAAEH,UAAU,CAAE,2BAA4B,CAAC;EAE1E,OACCI,aAAA,CAACL,kBAAkB;IAAA,GACbE,KAAK;IACVC,SAAS,EAAGA,SAAW;IACvBC,sBAAsB,EAAGA;EAAwB,CACjD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA,eAAeL,cAAc"}

package/build-module/components/font-sizes/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/index.js"],"names":["getFontSize","getFontSizeClass","getFontSizeObjectByValue","getComputedFluidTypographyValue","default","FontSizePicker","withFontSizes"],"mappings":"AAAA,SACCA,WADD,EAECC,gBAFD,EAGCC,wBAHD,QAIO,SAJP;AAKA,SAASC,+BAAT,QAAgD,eAAhD;AACA,SAASC,OAAO,IAAIC,cAApB,QAA0C,oBAA1C;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,mBAAzC","sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { getComputedFluidTypographyValue } from './fluid-utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"]}
+{"version":3,"names":["getFontSize","getFontSizeClass","getFontSizeObjectByValue","getComputedFluidTypographyValue","default","FontSizePicker","withFontSizes"],"sources":["@wordpress/block-editor/src/components/font-sizes/index.js"],"sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { getComputedFluidTypographyValue } from './fluid-utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"],"mappings":"AAAA,SACCA,WAAW,EACXC,gBAAgB,EAChBC,wBAAwB,QAClB,SAAS;AAChB,SAASC,+BAA+B,QAAQ,eAAe;AAC/D,SAASC,OAAO,IAAIC,cAAc,QAAQ,oBAAoB;AAC9D,SAASD,OAAO,IAAIE,aAAa,QAAQ,mBAAmB"}

package/build-module/components/font-sizes/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/index.native.js"],"names":["getFontSize","getFontSizeClass","getFontSizeObjectByValue","default","FontSizePicker","withFontSizes"],"mappings":"AAAA,SACCA,WADD,EAECC,gBAFD,EAGCC,wBAHD,QAIO,SAJP;AAKA,SAASC,OAAO,IAAIC,cAApB,QAA0C,oBAA1C;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,mBAAzC","sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"]}
+{"version":3,"names":["getFontSize","getFontSizeClass","getFontSizeObjectByValue","default","FontSizePicker","withFontSizes"],"sources":["@wordpress/block-editor/src/components/font-sizes/index.native.js"],"sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"],"mappings":"AAAA,SACCA,WAAW,EACXC,gBAAgB,EAChBC,wBAAwB,QAClB,SAAS;AAChB,SAASC,OAAO,IAAIC,cAAc,QAAQ,oBAAoB;AAC9D,SAASD,OAAO,IAAIE,aAAa,QAAQ,mBAAmB"}

package/build-module/components/font-sizes/utils.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { kebabCase } from '../../utils/object';
+
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
  * 	If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
@@ -13,22 +14,20 @@ import { kebabCase } from '../../utils/object';
  * @return {?Object} If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug.
  * 					 Otherwise, an object with just the size value based on customFontSize is returned.
  */
-
 export const getFontSize = (fontSizes, fontSizeAttribute, customFontSizeAttribute) => {
   if (fontSizeAttribute) {
     const fontSizeObject = fontSizes?.find(({
       slug
     }) => slug === fontSizeAttribute);
-
     if (fontSizeObject) {
       return fontSizeObject;
     }
   }
-
   return {
     size: customFontSizeAttribute
   };
 };
+
 /**
  * Returns the corresponding font size object for a given value.
  *
@@ -37,20 +36,18 @@ export const getFontSize = (fontSizes, fontSizeAttribute, customFontSizeAttribut
  *
  * @return {Object} Font size object.
  */
-
 export function getFontSizeObjectByValue(fontSizes, value) {
   const fontSizeObject = fontSizes?.find(({
     size
   }) => size === value);
-
   if (fontSizeObject) {
     return fontSizeObject;
   }
-
   return {
     size: value
   };
 }
+
 /**
  * Returns a class based on fontSizeName.
  *
@@ -59,12 +56,10 @@ export function getFontSizeObjectByValue(fontSizes, value) {
  * @return {string | undefined} String with the class corresponding to the fontSize passed.
  *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
  */
-
 export function getFontSizeClass(fontSizeSlug) {
   if (!fontSizeSlug) {
     return;
   }
-
   return `has-${kebabCase(fontSizeSlug)}-font-size`;
 }
 //# sourceMappingURL=utils.js.map

package/build-module/components/font-sizes/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/utils.js"],"names":["kebabCase","getFontSize","fontSizes","fontSizeAttribute","customFontSizeAttribute","fontSizeObject","find","slug","size","getFontSizeObjectByValue","value","getFontSizeClass","fontSizeSlug"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAG,CAC1BC,SAD0B,EAE1BC,iBAF0B,EAG1BC,uBAH0B,KAItB;AACJ,MAAKD,iBAAL,EAAyB;AACxB,UAAME,cAAc,GAAGH,SAAS,EAAEI,IAAX,CACtB,CAAE;AAAEC,MAAAA;AAAF,KAAF,KAAgBA,IAAI,KAAKJ,iBADH,CAAvB;;AAGA,QAAKE,cAAL,EAAsB;AACrB,aAAOA,cAAP;AACA;AACD;;AACD,SAAO;AACNG,IAAAA,IAAI,EAAEJ;AADA,GAAP;AAGA,CAhBM;AAkBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASK,wBAAT,CAAmCP,SAAnC,EAA8CQ,KAA9C,EAAsD;AAC5D,QAAML,cAAc,GAAGH,SAAS,EAAEI,IAAX,CAAiB,CAAE;AAAEE,IAAAA;AAAF,GAAF,KAAgBA,IAAI,KAAKE,KAA1C,CAAvB;;AACA,MAAKL,cAAL,EAAsB;AACrB,WAAOA,cAAP;AACA;;AAED,SAAO;AACNG,IAAAA,IAAI,EAAEE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CAA2BC,YAA3B,EAA0C;AAChD,MAAK,CAAEA,YAAP,EAAsB;AACrB;AACA;;AAED,SAAQ,OAAOZ,SAAS,CAAEY,YAAF,CAAkB,YAA1C;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { kebabCase } from '../../utils/object';\n\n/**\n *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.\n * \tIf namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.\n *\n * @param {Array}   fontSizes               Array of font size objects containing at least the \"name\" and \"size\" values as properties.\n * @param {?string} fontSizeAttribute       Content of the font size attribute (slug).\n * @param {?number} customFontSizeAttribute Contents of the custom font size attribute (value).\n *\n * @return {?Object} If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug.\n * \t\t\t\t\t Otherwise, an object with just the size value based on customFontSize is returned.\n */\nexport const getFontSize = (\n\tfontSizes,\n\tfontSizeAttribute,\n\tcustomFontSizeAttribute\n) => {\n\tif ( fontSizeAttribute ) {\n\t\tconst fontSizeObject = fontSizes?.find(\n\t\t\t( { slug } ) => slug === fontSizeAttribute\n\t\t);\n\t\tif ( fontSizeObject ) {\n\t\t\treturn fontSizeObject;\n\t\t}\n\t}\n\treturn {\n\t\tsize: customFontSizeAttribute,\n\t};\n};\n\n/**\n * Returns the corresponding font size object for a given value.\n *\n * @param {Array}  fontSizes Array of font size objects.\n * @param {number} value     Font size value.\n *\n * @return {Object} Font size object.\n */\nexport function getFontSizeObjectByValue( fontSizes, value ) {\n\tconst fontSizeObject = fontSizes?.find( ( { size } ) => size === value );\n\tif ( fontSizeObject ) {\n\t\treturn fontSizeObject;\n\t}\n\n\treturn {\n\t\tsize: value,\n\t};\n}\n\n/**\n * Returns a class based on fontSizeName.\n *\n * @param {string} fontSizeSlug Slug of the fontSize.\n *\n * @return {string | undefined} String with the class corresponding to the fontSize passed.\n *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.\n */\nexport function getFontSizeClass( fontSizeSlug ) {\n\tif ( ! fontSizeSlug ) {\n\t\treturn;\n\t}\n\n\treturn `has-${ kebabCase( fontSizeSlug ) }-font-size`;\n}\n"]}
+{"version":3,"names":["kebabCase","getFontSize","fontSizes","fontSizeAttribute","customFontSizeAttribute","fontSizeObject","find","slug","size","getFontSizeObjectByValue","value","getFontSizeClass","fontSizeSlug"],"sources":["@wordpress/block-editor/src/components/font-sizes/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { kebabCase } from '../../utils/object';\n\n/**\n *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.\n * \tIf namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.\n *\n * @param {Array}   fontSizes               Array of font size objects containing at least the \"name\" and \"size\" values as properties.\n * @param {?string} fontSizeAttribute       Content of the font size attribute (slug).\n * @param {?number} customFontSizeAttribute Contents of the custom font size attribute (value).\n *\n * @return {?Object} If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug.\n * \t\t\t\t\t Otherwise, an object with just the size value based on customFontSize is returned.\n */\nexport const getFontSize = (\n\tfontSizes,\n\tfontSizeAttribute,\n\tcustomFontSizeAttribute\n) => {\n\tif ( fontSizeAttribute ) {\n\t\tconst fontSizeObject = fontSizes?.find(\n\t\t\t( { slug } ) => slug === fontSizeAttribute\n\t\t);\n\t\tif ( fontSizeObject ) {\n\t\t\treturn fontSizeObject;\n\t\t}\n\t}\n\treturn {\n\t\tsize: customFontSizeAttribute,\n\t};\n};\n\n/**\n * Returns the corresponding font size object for a given value.\n *\n * @param {Array}  fontSizes Array of font size objects.\n * @param {number} value     Font size value.\n *\n * @return {Object} Font size object.\n */\nexport function getFontSizeObjectByValue( fontSizes, value ) {\n\tconst fontSizeObject = fontSizes?.find( ( { size } ) => size === value );\n\tif ( fontSizeObject ) {\n\t\treturn fontSizeObject;\n\t}\n\n\treturn {\n\t\tsize: value,\n\t};\n}\n\n/**\n * Returns a class based on fontSizeName.\n *\n * @param {string} fontSizeSlug Slug of the fontSize.\n *\n * @return {string | undefined} String with the class corresponding to the fontSize passed.\n *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.\n */\nexport function getFontSizeClass( fontSizeSlug ) {\n\tif ( ! fontSizeSlug ) {\n\t\treturn;\n\t}\n\n\treturn `has-${ kebabCase( fontSizeSlug ) }-font-size`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGA,CAC1BC,SAAS,EACTC,iBAAiB,EACjBC,uBAAuB,KACnB;EACJ,IAAKD,iBAAiB,EAAG;IACxB,MAAME,cAAc,GAAGH,SAAS,EAAEI,IAAI,CACrC,CAAE;MAAEC;IAAK,CAAC,KAAMA,IAAI,KAAKJ,iBAC1B,CAAC;IACD,IAAKE,cAAc,EAAG;MACrB,OAAOA,cAAc;IACtB;EACD;EACA,OAAO;IACNG,IAAI,EAAEJ;EACP,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,wBAAwBA,CAAEP,SAAS,EAAEQ,KAAK,EAAG;EAC5D,MAAML,cAAc,GAAGH,SAAS,EAAEI,IAAI,CAAE,CAAE;IAAEE;EAAK,CAAC,KAAMA,IAAI,KAAKE,KAAM,CAAC;EACxE,IAAKL,cAAc,EAAG;IACrB,OAAOA,cAAc;EACtB;EAEA,OAAO;IACNG,IAAI,EAAEE;EACP,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,YAAY,EAAG;EAChD,IAAK,CAAEA,YAAY,EAAG;IACrB;EACD;EAEA,OAAQ,OAAOZ,SAAS,CAAEY,YAAa,CAAG,YAAW;AACtD"}

package/build-module/components/font-sizes/with-font-sizes.js

@@ -1,17 +1,17 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import { getFontSize, getFontSizeClass } from './utils';
 import useSetting from '../use-setting';
 const DEFAULT_FONT_SIZES = [];
+
 /**
  * Capitalizes the first letter in a string.
  *
@@ -19,8 +19,8 @@ const DEFAULT_FONT_SIZES = [];
  *
  * @return {string} Capitalized string.
  */
-
 const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join('');
+
 /**
  * Higher-order component, which handles font size logic for class generation,
  * font size value retrieval, and font size change handling.
@@ -31,8 +31,6 @@ const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.
  *
  * @return {Function} Higher-order component.
  */
-
-
 export default ((...fontSizeNames) => {
   /*
    * Computes an object whose key is the font size attribute name as passed in the array,
@@ -45,7 +43,8 @@ export default ((...fontSizeNames) => {
   }, {});
   return createHigherOrderComponent(compose([createHigherOrderComponent(WrappedComponent => props => {
     const fontSizes = useSetting('typography.fontSizes') || DEFAULT_FONT_SIZES;
-    return createElement(WrappedComponent, { ...props,
+    return createElement(WrappedComponent, {
+      ...props,
       fontSizes: fontSizes
     });
   }, 'withFontSizes'), WrappedComponent => {
@@ -55,7 +54,6 @@ export default ((...fontSizeNames) => {
         this.setters = this.createSetters();
         this.state = {};
       }
-
       createSetters() {
         return Object.entries(fontSizeAttributeNames).reduce((settersAccumulator, [fontSizeAttributeName, customFontSizeAttributeName]) => {
           const upperFirstFontSizeAttributeName = upperFirst(fontSizeAttributeName);
@@ -63,7 +61,6 @@ export default ((...fontSizeNames) => {
           return settersAccumulator;
         }, {});
       }
-
       createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
         return fontSizeValue => {
           const fontSizeObject = this.props.fontSizes?.find(({
@@ -75,7 +72,6 @@ export default ((...fontSizeNames) => {
           });
         };
       }
-
       static getDerivedStateFromProps({
         attributes,
         fontSizes
@@ -85,41 +81,38 @@ export default ((...fontSizeNames) => {
             // If new font size is name compare with the previous slug.
             if (attributes[fontSizeAttributeName]) {
               return attributes[fontSizeAttributeName] !== previousState[fontSizeAttributeName].slug;
-            } // If font size is not named, update when the font size value changes.
-
-
+            }
+            // If font size is not named, update when the font size value changes.
             return previousState[fontSizeAttributeName].size !== attributes[customFontSizeAttributeName];
-          } // In this case we need to build the font size object.
-
-
+          }
+          // In this case we need to build the font size object.
           return true;
         };
-
         if (!Object.values(fontSizeAttributeNames).some(didAttributesChange)) {
           return null;
         }
-
         const newState = Object.entries(fontSizeAttributeNames).filter(([key, value]) => didAttributesChange(value, key)).reduce((newStateAccumulator, [fontSizeAttributeName, customFontSizeAttributeName]) => {
           const fontSizeAttributeValue = attributes[fontSizeAttributeName];
           const fontSizeObject = getFontSize(fontSizes, fontSizeAttributeValue, attributes[customFontSizeAttributeName]);
-          newStateAccumulator[fontSizeAttributeName] = { ...fontSizeObject,
+          newStateAccumulator[fontSizeAttributeName] = {
+            ...fontSizeObject,
             class: getFontSizeClass(fontSizeAttributeValue)
           };
           return newStateAccumulator;
         }, {});
-        return { ...previousState,
+        return {
+          ...previousState,
           ...newState
         };
       }
-
       render() {
-        return createElement(WrappedComponent, { ...this.props,
+        return createElement(WrappedComponent, {
+          ...this.props,
           fontSizes: undefined,
           ...this.state,
           ...this.setters
         });
       }
-
     };
   }]), 'withFontSizes');
 });

package/build-module/components/font-sizes/with-font-sizes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/with-font-sizes.js"],"names":["createHigherOrderComponent","compose","Component","getFontSize","getFontSizeClass","useSetting","DEFAULT_FONT_SIZES","upperFirst","firstLetter","rest","toUpperCase","join","fontSizeNames","fontSizeAttributeNames","reduce","fontSizeAttributeNamesAccumulator","fontSizeAttributeName","WrappedComponent","props","fontSizes","constructor","setters","createSetters","state","Object","entries","settersAccumulator","customFontSizeAttributeName","upperFirstFontSizeAttributeName","createSetFontSize","fontSizeValue","fontSizeObject","find","size","Number","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","didAttributesChange","values","some","newState","filter","key","value","newStateAccumulator","fontSizeAttributeValue","class","render"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,0BAAT,EAAqCC,OAArC,QAAoD,oBAApD;AACA,SAASC,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,gBAAtB,QAA8C,SAA9C;AACA,OAAOC,UAAP,MAAuB,gBAAvB;AAEA,MAAMC,kBAAkB,GAAG,EAA3B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,UAAU,GAAG,CAAE,CAAEC,WAAF,EAAe,GAAGC,IAAlB,CAAF,KAClBD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACE,IAAL,CAAW,EAAX,CAD7B;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,gBAAe,CAAE,GAAGC,aAAL,KAAwB;AACtC;AACD;AACA;AACA;AACA;AACC,QAAMC,sBAAsB,GAAGD,aAAa,CAACE,MAAd,CAC9B,CAAEC,iCAAF,EAAqCC,qBAArC,KAAgE;AAC/DD,IAAAA,iCAAiC,CAChCC,qBADgC,CAAjC,GAEK,SAAST,UAAU,CAAES,qBAAF,CAA2B,EAFnD;AAGA,WAAOD,iCAAP;AACA,GAN6B,EAO9B,EAP8B,CAA/B;AAUA,SAAOf,0BAA0B,CAChCC,OAAO,CAAE,CACRD,0BAA0B,CACvBiB,gBAAF,IAA0BC,KAAF,IAAa;AACpC,UAAMC,SAAS,GACdd,UAAU,CAAE,sBAAF,CAAV,IACAC,kBAFD;AAGA,WACC,cAAC,gBAAD,OACMY,KADN;AAEC,MAAA,SAAS,EAAGC;AAFb,MADD;AAMA,GAXwB,EAYzB,eAZyB,CADlB,EAeNF,gBAAF,IAAwB;AACvB,WAAO,cAAcf,SAAd,CAAwB;AAC9BkB,MAAAA,WAAW,CAAEF,KAAF,EAAU;AACpB,cAAOA,KAAP;AAEA,aAAKG,OAAL,GAAe,KAAKC,aAAL,EAAf;AAEA,aAAKC,KAAL,GAAa,EAAb;AACA;;AAEDD,MAAAA,aAAa,GAAG;AACf,eAAOE,MAAM,CAACC,OAAP,CAAgBZ,sBAAhB,EAAyCC,MAAzC,CACN,CACCY,kBADD,EAEC,CACCV,qBADD,EAECW,2BAFD,CAFD,KAMK;AACJ,gBAAMC,+BAA+B,GACpCrB,UAAU,CAAES,qBAAF,CADX;AAEAU,UAAAA,kBAAkB,CAChB,MAAME,+BAAiC,EADvB,CAAlB,GAEI,KAAKC,iBAAL,CACHb,qBADG,EAEHW,2BAFG,CAFJ;AAMA,iBAAOD,kBAAP;AACA,SAjBK,EAkBN,EAlBM,CAAP;AAoBA;;AAEDG,MAAAA,iBAAiB,CAChBb,qBADgB,EAEhBW,2BAFgB,EAGf;AACD,eAASG,aAAF,IAAqB;AAC3B,gBAAMC,cAAc,GAAG,KAAKb,KAAL,CAAWC,SAAX,EAAsBa,IAAtB,CACtB,CAAE;AAAEC,YAAAA;AAAF,WAAF,KAAgBA,IAAI,KAAKC,MAAM,CAAEJ,aAAF,CADT,CAAvB;AAGA,eAAKZ,KAAL,CAAWiB,aAAX,CAA0B;AACzB,aAAEnB,qBAAF,GACCe,cAAc,IAAIA,cAAc,CAACK,IAAjC,GACGL,cAAc,CAACK,IADlB,GAEGC,SAJqB;AAKzB,aAAEV,2BAAF,GACCI,cAAc,IAAIA,cAAc,CAACK,IAAjC,GACGC,SADH,GAEGP;AARqB,WAA1B;AAUA,SAdD;AAeA;;AAE8B,aAAxBQ,wBAAwB,CAC9B;AAAEC,QAAAA,UAAF;AAAcpB,QAAAA;AAAd,OAD8B,EAE9BqB,aAF8B,EAG7B;AACD,cAAMC,mBAAmB,GAAG,CAC3Bd,2BAD2B,EAE3BX,qBAF2B,KAGvB;AACJ,cAAKwB,aAAa,CAAExB,qBAAF,CAAlB,EAA8C;AAC7C;AACA,gBAAKuB,UAAU,CAAEvB,qBAAF,CAAf,EAA2C;AAC1C,qBACCuB,UAAU,CAAEvB,qBAAF,CAAV,KACAwB,aAAa,CAAExB,qBAAF,CAAb,CACEoB,IAHH;AAKA,aAR4C,CAS7C;;;AACA,mBACCI,aAAa,CAAExB,qBAAF,CAAb,CACEiB,IADF,KAEAM,UAAU,CAAEZ,2BAAF,CAHX;AAKA,WAhBG,CAiBJ;;;AACA,iBAAO,IAAP;AACA,SAtBD;;AAwBA,YACC,CAAEH,MAAM,CAACkB,MAAP,CAAe7B,sBAAf,EAAwC8B,IAAxC,CACDF,mBADC,CADH,EAIE;AACD,iBAAO,IAAP;AACA;;AAED,cAAMG,QAAQ,GAAGpB,MAAM,CAACC,OAAP,CAChBZ,sBADgB,EAGfgC,MAHe,CAGP,CAAE,CAAEC,GAAF,EAAOC,KAAP,CAAF,KACRN,mBAAmB,CAAEM,KAAF,EAASD,GAAT,CAJJ,EAMfhC,MANe,CAOf,CACCkC,mBADD,EAEC,CACChC,qBADD,EAECW,2BAFD,CAFD,KAMK;AACJ,gBAAMsB,sBAAsB,GAC3BV,UAAU,CAAEvB,qBAAF,CADX;AAEA,gBAAMe,cAAc,GAAG5B,WAAW,CACjCgB,SADiC,EAEjC8B,sBAFiC,EAGjCV,UAAU,CACTZ,2BADS,CAHuB,CAAlC;AAOAqB,UAAAA,mBAAmB,CAClBhC,qBADkB,CAAnB,GAEI,EACH,GAAGe,cADA;AAEHmB,YAAAA,KAAK,EAAE9C,gBAAgB,CACtB6C,sBADsB;AAFpB,WAFJ;AAQA,iBAAOD,mBAAP;AACA,SAhCc,EAiCf,EAjCe,CAAjB;AAoCA,eAAO,EACN,GAAGR,aADG;AAEN,aAAGI;AAFG,SAAP;AAIA;;AAEDO,MAAAA,MAAM,GAAG;AACR,eACC,cAAC,gBAAD,IAEE,GAAG,KAAKjC,KAFV;AAGEC,UAAAA,SAAS,EAAEkB,SAHb;AAIE,aAAG,KAAKd,KAJV;AAKE,aAAG,KAAKF;AALV,UADD;AAUA;;AA9I6B,KAA/B;AAgJA,GAhKO,CAAF,CADyB,EAmKhC,eAnKgC,CAAjC;AAqKA,CArLD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, compose } from '@wordpress/compose';\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getFontSize, getFontSizeClass } from './utils';\nimport useSetting from '../use-setting';\n\nconst DEFAULT_FONT_SIZES = [];\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher-order component, which handles font size logic for class generation,\n * font size value retrieval, and font size change handling.\n *\n * @param {...(Object|string)} fontSizeNames The arguments should all be strings.\n *                                           Each string contains the font size\n *                                           attribute name e.g: 'fontSize'.\n *\n * @return {Function} Higher-order component.\n */\nexport default ( ...fontSizeNames ) => {\n\t/*\n\t * Computes an object whose key is the font size attribute name as passed in the array,\n\t * and the value is the custom font size attribute name.\n\t * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.\n\t */\n\tconst fontSizeAttributeNames = fontSizeNames.reduce(\n\t\t( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {\n\t\t\tfontSizeAttributeNamesAccumulator[\n\t\t\t\tfontSizeAttributeName\n\t\t\t] = `custom${ upperFirst( fontSizeAttributeName ) }`;\n\t\t\treturn fontSizeAttributeNamesAccumulator;\n\t\t},\n\t\t{}\n\t);\n\n\treturn createHigherOrderComponent(\n\t\tcompose( [\n\t\t\tcreateHigherOrderComponent(\n\t\t\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t\t\tconst fontSizes =\n\t\t\t\t\t\tuseSetting( 'typography.fontSizes' ) ||\n\t\t\t\t\t\tDEFAULT_FONT_SIZES;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t'withFontSizes'\n\t\t\t),\n\t\t\t( WrappedComponent ) => {\n\t\t\t\treturn class extends Component {\n\t\t\t\t\tconstructor( props ) {\n\t\t\t\t\t\tsuper( props );\n\n\t\t\t\t\t\tthis.setters = this.createSetters();\n\n\t\t\t\t\t\tthis.state = {};\n\t\t\t\t\t}\n\n\t\t\t\t\tcreateSetters() {\n\t\t\t\t\t\treturn Object.entries( fontSizeAttributeNames ).reduce(\n\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tconst upperFirstFontSizeAttributeName =\n\t\t\t\t\t\t\t\t\tupperFirst( fontSizeAttributeName );\n\t\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t\t`set${ upperFirstFontSizeAttributeName }`\n\t\t\t\t\t\t\t\t] = this.createSetFontSize(\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn settersAccumulator;\n\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\tcreateSetFontSize(\n\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn ( fontSizeValue ) => {\n\t\t\t\t\t\t\tconst fontSizeObject = this.props.fontSizes?.find(\n\t\t\t\t\t\t\t\t( { size } ) => size === Number( fontSizeValue )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t\t[ fontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t[ customFontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: fontSizeValue,\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\tstatic getDerivedStateFromProps(\n\t\t\t\t\t\t{ attributes, fontSizes },\n\t\t\t\t\t\tpreviousState\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst didAttributesChange = (\n\t\t\t\t\t\t\tcustomFontSizeAttributeName,\n\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tif ( previousState[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t// If new font size is name compare with the previous slug.\n\t\t\t\t\t\t\t\tif ( attributes[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ] !==\n\t\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t\t.slug\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\t// If font size is not named, update when the font size value changes.\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t.size !==\n\t\t\t\t\t\t\t\t\tattributes[ customFontSizeAttributeName ]\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// In this case we need to build the font size object.\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! Object.values( fontSizeAttributeNames ).some(\n\t\t\t\t\t\t\t\tdidAttributesChange\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst newState = Object.entries(\n\t\t\t\t\t\t\tfontSizeAttributeNames\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.filter( ( [ key, value ] ) =>\n\t\t\t\t\t\t\t\tdidAttributesChange( value, key )\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.reduce(\n\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\tnewStateAccumulator,\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\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\t\tconst fontSizeAttributeValue =\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ];\n\t\t\t\t\t\t\t\t\tconst fontSizeObject = getFontSize(\n\t\t\t\t\t\t\t\t\t\tfontSizes,\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue,\n\t\t\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tnewStateAccumulator[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t\t\t\t] = {\n\t\t\t\t\t\t\t\t\t\t...fontSizeObject,\n\t\t\t\t\t\t\t\t\t\tclass: getFontSizeClass(\n\t\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\treturn newStateAccumulator;\n\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\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...previousState,\n\t\t\t\t\t\t\t...newState,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\trender() {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\t\tfontSizes: undefined,\n\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t...this.setters,\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\t\t\t\t};\n\t\t\t},\n\t\t] ),\n\t\t'withFontSizes'\n\t);\n};\n"]}
+{"version":3,"names":["createHigherOrderComponent","compose","Component","getFontSize","getFontSizeClass","useSetting","DEFAULT_FONT_SIZES","upperFirst","firstLetter","rest","toUpperCase","join","fontSizeNames","fontSizeAttributeNames","reduce","fontSizeAttributeNamesAccumulator","fontSizeAttributeName","WrappedComponent","props","fontSizes","createElement","constructor","setters","createSetters","state","Object","entries","settersAccumulator","customFontSizeAttributeName","upperFirstFontSizeAttributeName","createSetFontSize","fontSizeValue","fontSizeObject","find","size","Number","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","didAttributesChange","values","some","newState","filter","key","value","newStateAccumulator","fontSizeAttributeValue","class","render"],"sources":["@wordpress/block-editor/src/components/font-sizes/with-font-sizes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, compose } from '@wordpress/compose';\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getFontSize, getFontSizeClass } from './utils';\nimport useSetting from '../use-setting';\n\nconst DEFAULT_FONT_SIZES = [];\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher-order component, which handles font size logic for class generation,\n * font size value retrieval, and font size change handling.\n *\n * @param {...(Object|string)} fontSizeNames The arguments should all be strings.\n *                                           Each string contains the font size\n *                                           attribute name e.g: 'fontSize'.\n *\n * @return {Function} Higher-order component.\n */\nexport default ( ...fontSizeNames ) => {\n\t/*\n\t * Computes an object whose key is the font size attribute name as passed in the array,\n\t * and the value is the custom font size attribute name.\n\t * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.\n\t */\n\tconst fontSizeAttributeNames = fontSizeNames.reduce(\n\t\t( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {\n\t\t\tfontSizeAttributeNamesAccumulator[\n\t\t\t\tfontSizeAttributeName\n\t\t\t] = `custom${ upperFirst( fontSizeAttributeName ) }`;\n\t\t\treturn fontSizeAttributeNamesAccumulator;\n\t\t},\n\t\t{}\n\t);\n\n\treturn createHigherOrderComponent(\n\t\tcompose( [\n\t\t\tcreateHigherOrderComponent(\n\t\t\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t\t\tconst fontSizes =\n\t\t\t\t\t\tuseSetting( 'typography.fontSizes' ) ||\n\t\t\t\t\t\tDEFAULT_FONT_SIZES;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t'withFontSizes'\n\t\t\t),\n\t\t\t( WrappedComponent ) => {\n\t\t\t\treturn class extends Component {\n\t\t\t\t\tconstructor( props ) {\n\t\t\t\t\t\tsuper( props );\n\n\t\t\t\t\t\tthis.setters = this.createSetters();\n\n\t\t\t\t\t\tthis.state = {};\n\t\t\t\t\t}\n\n\t\t\t\t\tcreateSetters() {\n\t\t\t\t\t\treturn Object.entries( fontSizeAttributeNames ).reduce(\n\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tconst upperFirstFontSizeAttributeName =\n\t\t\t\t\t\t\t\t\tupperFirst( fontSizeAttributeName );\n\t\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t\t`set${ upperFirstFontSizeAttributeName }`\n\t\t\t\t\t\t\t\t] = this.createSetFontSize(\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn settersAccumulator;\n\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\tcreateSetFontSize(\n\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn ( fontSizeValue ) => {\n\t\t\t\t\t\t\tconst fontSizeObject = this.props.fontSizes?.find(\n\t\t\t\t\t\t\t\t( { size } ) => size === Number( fontSizeValue )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t\t[ fontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t[ customFontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: fontSizeValue,\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\tstatic getDerivedStateFromProps(\n\t\t\t\t\t\t{ attributes, fontSizes },\n\t\t\t\t\t\tpreviousState\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst didAttributesChange = (\n\t\t\t\t\t\t\tcustomFontSizeAttributeName,\n\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tif ( previousState[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t// If new font size is name compare with the previous slug.\n\t\t\t\t\t\t\t\tif ( attributes[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ] !==\n\t\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t\t.slug\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\t// If font size is not named, update when the font size value changes.\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t.size !==\n\t\t\t\t\t\t\t\t\tattributes[ customFontSizeAttributeName ]\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// In this case we need to build the font size object.\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! Object.values( fontSizeAttributeNames ).some(\n\t\t\t\t\t\t\t\tdidAttributesChange\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst newState = Object.entries(\n\t\t\t\t\t\t\tfontSizeAttributeNames\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.filter( ( [ key, value ] ) =>\n\t\t\t\t\t\t\t\tdidAttributesChange( value, key )\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.reduce(\n\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\tnewStateAccumulator,\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\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\t\tconst fontSizeAttributeValue =\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ];\n\t\t\t\t\t\t\t\t\tconst fontSizeObject = getFontSize(\n\t\t\t\t\t\t\t\t\t\tfontSizes,\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue,\n\t\t\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tnewStateAccumulator[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t\t\t\t] = {\n\t\t\t\t\t\t\t\t\t\t...fontSizeObject,\n\t\t\t\t\t\t\t\t\t\tclass: getFontSizeClass(\n\t\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\treturn newStateAccumulator;\n\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\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...previousState,\n\t\t\t\t\t\t\t...newState,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\trender() {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\t\tfontSizes: undefined,\n\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t...this.setters,\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\t\t\t\t};\n\t\t\t},\n\t\t] ),\n\t\t'withFontSizes'\n\t);\n};\n"],"mappings":"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"}

package/build-module/components/global-styles/advanced-panel.js

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -7,10 +6,10 @@ import { TextareaControl, Tooltip, __experimentalVStack as VStack } from '@wordp
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
-
 import { default as transformStyles } from '../../utils/transform-styles';
 export default function AdvancedPanel({
   value,
@@ -20,35 +19,30 @@ export default function AdvancedPanel({
   // Custom CSS
   const [cssError, setCSSError] = useState(null);
   const customCSS = inheritedValue?.css;
-
   function handleOnChange(newValue) {
-    onChange({ ...value,
+    onChange({
+      ...value,
       css: newValue
     });
-
     if (cssError) {
       const [transformed] = transformStyles([{
         css: value
       }], '.editor-styles-wrapper');
-
       if (transformed) {
         setCSSError(null);
       }
     }
   }
-
   function handleOnBlur(event) {
     if (!event?.target?.value) {
       setCSSError(null);
       return;
     }
-
     const [transformed] = transformStyles([{
       css: event.target.value
     }], '.editor-styles-wrapper');
     setCSSError(transformed === null ? __('There is an error with your CSS structure.') : null);
   }
-
   return createElement(VStack, {
     spacing: 3
   }, createElement(TextareaControl, {

package/build-module/components/global-styles/advanced-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/advanced-panel.js"],"names":["TextareaControl","Tooltip","__experimentalVStack","VStack","useState","__","Icon","info","default","transformStyles","AdvancedPanel","value","onChange","inheritedValue","cssError","setCSSError","customCSS","css","handleOnChange","newValue","transformed","handleOnBlur","event","target"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,eADD,EAECC,OAFD,EAGCC,oBAAoB,IAAIC,MAHzB,QAIO,uBAJP;AAKA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,kBAA3B;AAEA;AACA;AACA;;AACA,SAASC,OAAO,IAAIC,eAApB,QAA2C,8BAA3C;AAEA,eAAe,SAASC,aAAT,CAAwB;AACtCC,EAAAA,KADsC;AAEtCC,EAAAA,QAFsC;AAGtCC,EAAAA,cAAc,GAAGF;AAHqB,CAAxB,EAIX;AACH;AACA,QAAM,CAAEG,QAAF,EAAYC,WAAZ,IAA4BX,QAAQ,CAAE,IAAF,CAA1C;AACA,QAAMY,SAAS,GAAGH,cAAc,EAAEI,GAAlC;;AACA,WAASC,cAAT,CAAyBC,QAAzB,EAAoC;AACnCP,IAAAA,QAAQ,CAAE,EACT,GAAGD,KADM;AAETM,MAAAA,GAAG,EAAEE;AAFI,KAAF,CAAR;;AAIA,QAAKL,QAAL,EAAgB;AACf,YAAM,CAAEM,WAAF,IAAkBX,eAAe,CACtC,CAAE;AAAEQ,QAAAA,GAAG,EAAEN;AAAP,OAAF,CADsC,EAEtC,wBAFsC,CAAvC;;AAIA,UAAKS,WAAL,EAAmB;AAClBL,QAAAA,WAAW,CAAE,IAAF,CAAX;AACA;AACD;AACD;;AACD,WAASM,YAAT,CAAuBC,KAAvB,EAA+B;AAC9B,QAAK,CAAEA,KAAK,EAAEC,MAAP,EAAeZ,KAAtB,EAA8B;AAC7BI,MAAAA,WAAW,CAAE,IAAF,CAAX;AACA;AACA;;AAED,UAAM,CAAEK,WAAF,IAAkBX,eAAe,CACtC,CAAE;AAAEQ,MAAAA,GAAG,EAAEK,KAAK,CAACC,MAAN,CAAaZ;AAApB,KAAF,CADsC,EAEtC,wBAFsC,CAAvC;AAKAI,IAAAA,WAAW,CACVK,WAAW,KAAK,IAAhB,GACGf,EAAE,CAAE,4CAAF,CADL,GAEG,IAHO,CAAX;AAKA;;AAED,SACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,eAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,gBAAF,CADX;AAEC,IAAA,uBAAuB,MAFxB;AAGC,IAAA,KAAK,EAAGW,SAHT;AAIC,IAAA,QAAQ,EAAKG,QAAF,IAAgBD,cAAc,CAAEC,QAAF,CAJ1C;AAKC,IAAA,MAAM,EAAGE,YALV;AAMC,IAAA,SAAS,EAAC,6DANX;AAOC,IAAA,UAAU,EAAG;AAPd,IADD,EAUGP,QAAQ,IACT,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,IAAD;AACC,IAAA,IAAI,EAAGP,IADR;AAEC,IAAA,SAAS,EAAC;AAFX,IADD,CADD,CAXF,CADD;AAuBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tTextareaControl,\n\tTooltip,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, info } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n} ) {\n\t// Custom CSS\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst customCSS = inheritedValue?.css;\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\t\tif ( cssError ) {\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: value } ],\n\t\t\t\t'.editor-styles-wrapper'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.editor-styles-wrapper'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t/>\n\t\t\t{ cssError && (\n\t\t\t\t<Tooltip text={ cssError }>\n\t\t\t\t\t<div className=\"block-editor-global-styles-advanced-panel__custom-css-validation-wrapper\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-validation-icon\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Tooltip>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"names":["TextareaControl","Tooltip","__experimentalVStack","VStack","useState","__","Icon","info","default","transformStyles","AdvancedPanel","value","onChange","inheritedValue","cssError","setCSSError","customCSS","css","handleOnChange","newValue","transformed","handleOnBlur","event","target","createElement","spacing","label","__nextHasNoMarginBottom","onBlur","className","spellCheck","text","icon"],"sources":["@wordpress/block-editor/src/components/global-styles/advanced-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tTextareaControl,\n\tTooltip,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, info } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n} ) {\n\t// Custom CSS\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst customCSS = inheritedValue?.css;\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\t\tif ( cssError ) {\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: value } ],\n\t\t\t\t'.editor-styles-wrapper'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.editor-styles-wrapper'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t/>\n\t\t\t{ cssError && (\n\t\t\t\t<Tooltip text={ cssError }>\n\t\t\t\t\t<div className=\"block-editor-global-styles-advanced-panel__custom-css-validation-wrapper\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-validation-icon\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Tooltip>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,eAAe,EACfC,OAAO,EACPC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,SAASC,OAAO,IAAIC,eAAe,QAAQ,8BAA8B;AAEzE,eAAe,SAASC,aAAaA,CAAE;EACtCC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAGF;AAClB,CAAC,EAAG;EACH;EACA,MAAM,CAAEG,QAAQ,EAAEC,WAAW,CAAE,GAAGX,QAAQ,CAAE,IAAK,CAAC;EAClD,MAAMY,SAAS,GAAGH,cAAc,EAAEI,GAAG;EACrC,SAASC,cAAcA,CAAEC,QAAQ,EAAG;IACnCP,QAAQ,CAAE;MACT,GAAGD,KAAK;MACRM,GAAG,EAAEE;IACN,CAAE,CAAC;IACH,IAAKL,QAAQ,EAAG;MACf,MAAM,CAAEM,WAAW,CAAE,GAAGX,eAAe,CACtC,CAAE;QAAEQ,GAAG,EAAEN;MAAM,CAAC,CAAE,EAClB,wBACD,CAAC;MACD,IAAKS,WAAW,EAAG;QAClBL,WAAW,CAAE,IAAK,CAAC;MACpB;IACD;EACD;EACA,SAASM,YAAYA,CAAEC,KAAK,EAAG;IAC9B,IAAK,CAAEA,KAAK,EAAEC,MAAM,EAAEZ,KAAK,EAAG;MAC7BI,WAAW,CAAE,IAAK,CAAC;MACnB;IACD;IAEA,MAAM,CAAEK,WAAW,CAAE,GAAGX,eAAe,CACtC,CAAE;MAAEQ,GAAG,EAAEK,KAAK,CAACC,MAAM,CAACZ;IAAM,CAAC,CAAE,EAC/B,wBACD,CAAC;IAEDI,WAAW,CACVK,WAAW,KAAK,IAAI,GACjBf,EAAE,CAAE,4CAA6C,CAAC,GAClD,IACJ,CAAC;EACF;EAEA,OACCmB,aAAA,CAACrB,MAAM;IAACsB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACxB,eAAe;IACf0B,KAAK,EAAGrB,EAAE,CAAE,gBAAiB,CAAG;IAChCsB,uBAAuB;IACvBhB,KAAK,EAAGK,SAAW;IACnBJ,QAAQ,EAAKO,QAAQ,IAAMD,cAAc,CAAEC,QAAS,CAAG;IACvDS,MAAM,EAAGP,YAAc;IACvBQ,SAAS,EAAC,6DAA6D;IACvEC,UAAU,EAAG;EAAO,CACpB,CAAC,EACAhB,QAAQ,IACTU,aAAA,CAACvB,OAAO;IAAC8B,IAAI,EAAGjB;EAAU,GACzBU,aAAA;IAAKK,SAAS,EAAC;EAA0E,GACxFL,aAAA,CAAClB,IAAI;IACJ0B,IAAI,EAAGzB,IAAM;IACbsB,SAAS,EAAC;EAAuE,CACjF,CACG,CACG,CAEH,CAAC;AAEX"}

package/build-module/components/global-styles/behaviors-panel.js

@@ -0,0 +1,57 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+export default function ({
+  onChange,
+  value,
+  behaviors
+}) {
+  const defaultBehaviors = {
+    default: {
+      value: 'default',
+      label: __('Default')
+    },
+    noBehaviors: {
+      value: '',
+      label: __('No behaviors')
+    }
+  };
+  const behaviorsOptions = Object.entries(behaviors).map(([behaviorName]) => ({
+    value: behaviorName,
+    // Capitalize the first letter of the behavior name.
+    label: `${behaviorName.charAt(0).toUpperCase()}${behaviorName.slice(1).toLowerCase()}`
+  }));
+  const options = [...Object.values(defaultBehaviors), ...behaviorsOptions];
+  const animations = [{
+    value: 'zoom',
+    label: __('Zoom')
+  }, {
+    value: 'fade',
+    label: __('Fade')
+  }];
+  return createElement("div", {
+    style: {
+      marginTop: '2rem'
+    }
+  }, createElement(SelectControl, {
+    label: __('Behaviors')
+    // At the moment we are only supporting one behavior (Lightbox)
+    ,
+    value: value,
+    options: options,
+    onChange: onChange,
+    hideCancelButton: true,
+    size: "__unstable-large"
+  }), value === 'lightbox' && createElement(SelectControl, {
+    label: __('Animation'),
+    value: behaviors?.lightbox.animation ? behaviors?.lightbox.animation : '',
+    options: animations,
+    onChange: onChange,
+    hideCancelButton: false,
+    size: "__unstable-large"
+  }));
+}
+//# sourceMappingURL=behaviors-panel.js.map

package/build-module/components/global-styles/behaviors-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SelectControl","__","onChange","value","behaviors","defaultBehaviors","default","label","noBehaviors","behaviorsOptions","Object","entries","map","behaviorName","charAt","toUpperCase","slice","toLowerCase","options","values","animations","createElement","style","marginTop","hideCancelButton","size","lightbox","animation"],"sources":["@wordpress/block-editor/src/components/global-styles/behaviors-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ( { onChange, value, behaviors } ) {\n\tconst defaultBehaviors = {\n\t\tdefault: {\n\t\t\tvalue: 'default',\n\t\t\tlabel: __( 'Default' ),\n\t\t},\n\t\tnoBehaviors: {\n\t\t\tvalue: '',\n\t\t\tlabel: __( 'No behaviors' ),\n\t\t},\n\t};\n\n\tconst behaviorsOptions = Object.entries( behaviors ).map(\n\t\t( [ behaviorName ] ) => ( {\n\t\t\tvalue: behaviorName,\n\t\t\t// Capitalize the first letter of the behavior name.\n\t\t\tlabel: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName\n\t\t\t\t.slice( 1 )\n\t\t\t\t.toLowerCase() }`,\n\t\t} )\n\t);\n\n\tconst options = [\n\t\t...Object.values( defaultBehaviors ),\n\t\t...behaviorsOptions,\n\t];\n\n\tconst animations = [\n\t\t{\n\t\t\tvalue: 'zoom',\n\t\t\tlabel: __( 'Zoom' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'fade',\n\t\t\tlabel: __( 'Fade' ),\n\t\t},\n\t];\n\treturn (\n\t\t<div style={ { marginTop: '2rem' } }>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Behaviors' ) }\n\t\t\t\t// At the moment we are only supporting one behavior (Lightbox)\n\t\t\t\tvalue={ value }\n\t\t\t\toptions={ options }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideCancelButton={ true }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t{ value === 'lightbox' && (\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'Animation' ) }\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tbehaviors?.lightbox.animation\n\t\t\t\t\t\t\t? behaviors?.lightbox.animation\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\toptions={ animations }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\thideCancelButton={ false }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,SAASC,EAAE,QAAQ,iBAAiB;AAEpC,eAAe,UAAW;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAU,CAAC,EAAG;EAC1D,MAAMC,gBAAgB,GAAG;IACxBC,OAAO,EAAE;MACRH,KAAK,EAAE,SAAS;MAChBI,KAAK,EAAEN,EAAE,CAAE,SAAU;IACtB,CAAC;IACDO,WAAW,EAAE;MACZL,KAAK,EAAE,EAAE;MACTI,KAAK,EAAEN,EAAE,CAAE,cAAe;IAC3B;EACD,CAAC;EAED,MAAMQ,gBAAgB,GAAGC,MAAM,CAACC,OAAO,CAAEP,SAAU,CAAC,CAACQ,GAAG,CACvD,CAAE,CAAEC,YAAY,CAAE,MAAQ;IACzBV,KAAK,EAAEU,YAAY;IACnB;IACAN,KAAK,EAAG,GAAGM,YAAY,CAACC,MAAM,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG,GAAGF,YAAY,CAChEG,KAAK,CAAE,CAAE,CAAC,CACVC,WAAW,CAAC,CAAG;EAClB,CAAC,CACF,CAAC;EAED,MAAMC,OAAO,GAAG,CACf,GAAGR,MAAM,CAACS,MAAM,CAAEd,gBAAiB,CAAC,EACpC,GAAGI,gBAAgB,CACnB;EAED,MAAMW,UAAU,GAAG,CAClB;IACCjB,KAAK,EAAE,MAAM;IACbI,KAAK,EAAEN,EAAE,CAAE,MAAO;EACnB,CAAC,EACD;IACCE,KAAK,EAAE,MAAM;IACbI,KAAK,EAAEN,EAAE,CAAE,MAAO;EACnB,CAAC,CACD;EACD,OACCoB,aAAA;IAAKC,KAAK,EAAG;MAAEC,SAAS,EAAE;IAAO;EAAG,GACnCF,aAAA,CAACrB,aAAa;IACbO,KAAK,EAAGN,EAAE,CAAE,WAAY;IACxB;IAAA;IACAE,KAAK,EAAGA,KAAO;IACfe,OAAO,EAAGA,OAAS;IACnBhB,QAAQ,EAAGA,QAAU;IACrBsB,gBAAgB,EAAG,IAAM;IACzBC,IAAI,EAAC;EAAkB,CACvB,CAAC,EACAtB,KAAK,KAAK,UAAU,IACrBkB,aAAA,CAACrB,aAAa;IACbO,KAAK,EAAGN,EAAE,CAAE,WAAY,CAAG;IAC3BE,KAAK,EACJC,SAAS,EAAEsB,QAAQ,CAACC,SAAS,GAC1BvB,SAAS,EAAEsB,QAAQ,CAACC,SAAS,GAC7B,EACH;IACDT,OAAO,EAAGE,UAAY;IACtBlB,QAAQ,EAAGA,QAAU;IACrBsB,gBAAgB,EAAG,KAAO;IAC1BC,IAAI,EAAC;EAAkB,CACvB,CAEE,CAAC;AAER"}

package/build-module/components/global-styles/border-panel.js

@@ -1,15 +1,14 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { __experimentalBorderBoxControl as BorderBoxControl, __experimentalHasSplitBorders as hasSplitBorders, __experimentalIsDefinedBorder as isDefinedBorder, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { getValueFromVariable } from './utils';
@@ -17,23 +16,18 @@ export function useHasBorderPanel(settings) {
   const controls = [useHasBorderColorControl(settings), useHasBorderRadiusControl(settings), useHasBorderStyleControl(settings), useHasBorderWidthControl(settings)];
   return controls.some(Boolean);
 }
-
 function useHasBorderColorControl(settings) {
   return settings?.border?.color;
 }
-
 function useHasBorderRadiusControl(settings) {
   return settings?.border?.radius;
 }
-
 function useHasBorderStyleControl(settings) {
   return settings?.border?.style;
 }
-
 function useHasBorderWidthControl(settings) {
   return settings?.border?.width;
 }
-
 function BorderToolsPanel({
   resetAllFilter,
   onChange,
@@ -45,14 +39,12 @@ function BorderToolsPanel({
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
   };
-
   return createElement(ToolsPanel, {
     label: __('Border'),
     resetAll: resetAll,
     panelId: panelId
   }, children);
 }
-
 const DEFAULT_CONTROLS = {
   radius: true,
   color: true,
@@ -68,11 +60,9 @@ export default function BorderPanel({
   defaultControls = DEFAULT_CONTROLS
 }) {
   const colors = useColorsPerOrigin(settings);
-
   const decodeValue = rawValue => getValueFromVariable({
     settings
   }, '', rawValue);
-
   const encodeColorValue = colorValue => {
     const allColors = colors.flatMap(({
       colors: originColors
@@ -82,7 +72,6 @@ export default function BorderPanel({
     }) => color === colorValue);
     return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
   };
-
   const decodeColorValue = useCallback(colorValue => {
     const allColors = colors.flatMap(({
       colors: originColors
@@ -94,85 +83,82 @@ export default function BorderPanel({
   }, [colors]);
   const border = useMemo(() => {
     if (hasSplitBorders(inheritedValue?.border)) {
-      const borderValue = { ...inheritedValue?.border
+      const borderValue = {
+        ...inheritedValue?.border
       };
       ['top', 'right', 'bottom', 'left'].forEach(side => {
-        borderValue[side] = { ...borderValue[side],
+        borderValue[side] = {
+          ...borderValue[side],
           color: decodeColorValue(borderValue[side]?.color)
         };
       });
       return borderValue;
     }
-
-    return { ...inheritedValue?.border,
+    return {
+      ...inheritedValue?.border,
       color: inheritedValue?.border?.color ? decodeColorValue(inheritedValue?.border?.color) : undefined
     };
   }, [inheritedValue?.border, decodeColorValue]);
-
-  const setBorder = newBorder => onChange({ ...value,
+  const setBorder = newBorder => onChange({
+    ...value,
     border: newBorder
   });
-
   const showBorderColor = useHasBorderColorControl(settings);
   const showBorderStyle = useHasBorderStyleControl(settings);
-  const showBorderWidth = useHasBorderWidthControl(settings); // Border radius.
+  const showBorderWidth = useHasBorderWidthControl(settings);
 
+  // Border radius.
   const showBorderRadius = useHasBorderRadiusControl(settings);
   const borderRadiusValues = decodeValue(border?.radius);
-
-  const setBorderRadius = newBorderRadius => setBorder({ ...border,
+  const setBorderRadius = newBorderRadius => setBorder({
+    ...border,
     radius: newBorderRadius
   });
-
   const hasBorderRadius = () => {
     const borderValues = value?.border?.radius;
-
     if (typeof borderValues === 'object') {
       return Object.entries(borderValues).some(Boolean);
     }
-
     return !!borderValues;
   };
-
   const resetBorder = () => {
     if (hasBorderRadius()) {
       return setBorder({
         radius: value?.border?.radius
       });
     }
-
     setBorder(undefined);
   };
-
   const onBorderChange = newBorder => {
     // Ensure we have a visible border style when a border width or
     // color is being selected.
-    const updatedBorder = { ...newBorder
+    const updatedBorder = {
+      ...newBorder
     };
-
     if (hasSplitBorders(updatedBorder)) {
       ['top', 'right', 'bottom', 'left'].forEach(side => {
         if (updatedBorder[side]) {
-          updatedBorder[side] = { ...updatedBorder[side],
+          updatedBorder[side] = {
+            ...updatedBorder[side],
             color: encodeColorValue(updatedBorder[side]?.color)
           };
         }
       });
     } else if (updatedBorder) {
       updatedBorder.color = encodeColorValue(updatedBorder.color);
-    } // As radius is maintained separately to color, style, and width
+    }
+
+    // As radius is maintained separately to color, style, and width
     // maintain its value. Undefined values here will be cleaned when
     // global styles are saved.
-
-
     setBorder({
       radius: border?.radius,
       ...updatedBorder
     });
   };
-
   const resetAllFilter = useCallback(previousValue => {
-    return { ...previousValue,
+    return {
+      ...previousValue,
       border: undefined
     };
   }, []);