@wordpress/block-editor 7.0.1 → 8.0.0

package/build-module/hooks/dimensions.js

@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -12,10 +12,12 @@ import { getBlockSupport } from '@wordpress/blocks';
  */
 
 import InspectorControls from '../components/inspector-controls';
+import { GapEdit, hasGapSupport, hasGapValue, resetGap, useIsGapDisabled } from './gap';
 import { MarginEdit, hasMarginSupport, hasMarginValue, resetMargin, useIsMarginDisabled } from './margin';
 import { PaddingEdit, hasPaddingSupport, hasPaddingValue, resetPadding, useIsPaddingDisabled } from './padding';
-import { cleanEmptyObject } from './utils';
 export const SPACING_SUPPORT_KEY = 'spacing';
+export const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
+export const AXIAL_SIDES = ['vertical', 'horizontal'];
 /**
  * Inspector controls for dimensions support.
  *
@@ -25,6 +27,7 @@ export const SPACING_SUPPORT_KEY = 'spacing';
  */
 
 export function DimensionsPanel(props) {
+  const isGapDisabled = useIsGapDisabled(props);
   const isPaddingDisabled = useIsPaddingDisabled(props);
   const isMarginDisabled = useIsMarginDisabled(props);
   const isDisabled = useIsDimensionsDisabled(props);
@@ -34,39 +37,44 @@ export function DimensionsPanel(props) {
     return null;
   }
 
-  const defaultSpacingControls = getBlockSupport(props.name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']); // Callback to reset all block support attributes controlled via this panel.
-
-  const resetAll = () => {
-    const {
-      style
-    } = props.attributes;
-    props.setAttributes({
-      style: cleanEmptyObject({ ...style,
-        spacing: { ...(style === null || style === void 0 ? void 0 : style.spacing),
-          margin: undefined,
-          padding: undefined
+  const defaultSpacingControls = getBlockSupport(props.name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']);
+
+  const createResetAllFilter = attribute => newAttributes => {
+    var _newAttributes$style;
+
+    return { ...newAttributes,
+      style: { ...newAttributes.style,
+        spacing: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style.spacing),
+          [attribute]: undefined
         }
-      })
-    });
+      }
+    };
   };
 
   return createElement(InspectorControls, {
-    key: "dimensions"
-  }, createElement(ToolsPanel, {
-    label: __('Dimensions options'),
-    header: __('Dimensions'),
-    resetAll: resetAll
+    __experimentalGroup: "dimensions"
   }, !isPaddingDisabled && createElement(ToolsPanelItem, {
     hasValue: () => hasPaddingValue(props),
     label: __('Padding'),
     onDeselect: () => resetPadding(props),
-    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.padding
+    resetAllFilter: createResetAllFilter('padding'),
+    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.padding,
+    panelId: props.clientId
   }, createElement(PaddingEdit, props)), !isMarginDisabled && createElement(ToolsPanelItem, {
     hasValue: () => hasMarginValue(props),
     label: __('Margin'),
     onDeselect: () => resetMargin(props),
-    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.margin
-  }, createElement(MarginEdit, props))));
+    resetAllFilter: createResetAllFilter('margin'),
+    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.margin,
+    panelId: props.clientId
+  }, createElement(MarginEdit, props)), !isGapDisabled && createElement(ToolsPanelItem, {
+    hasValue: () => hasGapValue(props),
+    label: __('Block spacing'),
+    onDeselect: () => resetGap(props),
+    resetAllFilter: createResetAllFilter('blockGap'),
+    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.blockGap,
+    panelId: props.clientId
+  }, createElement(GapEdit, props)));
 }
 /**
  * Determine whether there is dimensions related block support.
@@ -81,7 +89,7 @@ export function hasDimensionsSupport(blockName) {
     return false;
   }
 
-  return hasPaddingSupport(blockName) || hasMarginSupport(blockName);
+  return hasGapSupport(blockName) || hasPaddingSupport(blockName) || hasMarginSupport(blockName);
 }
 /**
  * Determines whether dimensions support has been disabled.
@@ -92,9 +100,10 @@ export function hasDimensionsSupport(blockName) {
  */
 
 const useIsDimensionsDisabled = (props = {}) => {
+  const gapDisabled = useIsGapDisabled(props);
   const paddingDisabled = useIsPaddingDisabled(props);
   const marginDisabled = useIsMarginDisabled(props);
-  return paddingDisabled && marginDisabled;
+  return gapDisabled && paddingDisabled && marginDisabled;
 };
 /**
  * Custom hook to retrieve which padding/margin is supported
@@ -113,10 +122,32 @@ const useIsDimensionsDisabled = (props = {}) => {
 export function useCustomSides(blockName, feature) {
   const support = getBlockSupport(blockName, SPACING_SUPPORT_KEY); // Skip when setting is boolean as theme isn't setting arbitrary sides.
 
-  if (typeof support[feature] === 'boolean') {
+  if (!support || typeof support[feature] === 'boolean') {
     return;
   }
 
   return support[feature];
 }
+/**
+ * Custom hook to determine whether the sides configured in the
+ * block support are valid. A dimension property cannot declare
+ * support for a mix of axial and individual sides.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
+ *
+ * @return {boolean} If the feature has a valid configuration of sides.
+ */
+
+export function useIsDimensionsSupportValid(blockName, feature) {
+  const sides = useCustomSides(blockName, feature);
+
+  if (sides && sides.some(side => ALL_SIDES.includes(side)) && sides.some(side => AXIAL_SIDES.includes(side))) {
+    // eslint-disable-next-line no-console
+    console.warn(`The ${feature} support for the "${blockName}" block can not be configured to support both axial and arbitrary sides.`);
+    return false;
+  }
+
+  return true;
+}
 //# sourceMappingURL=dimensions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/dimensions.js"],"names":["__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","Platform","__","getBlockSupport","InspectorControls","MarginEdit","hasMarginSupport","hasMarginValue","resetMargin","useIsMarginDisabled","PaddingEdit","hasPaddingSupport","hasPaddingValue","resetPadding","useIsPaddingDisabled","cleanEmptyObject","SPACING_SUPPORT_KEY","DimensionsPanel","props","isPaddingDisabled","isMarginDisabled","isDisabled","useIsDimensionsDisabled","isSupported","hasDimensionsSupport","name","defaultSpacingControls","resetAll","style","attributes","setAttributes","spacing","margin","undefined","padding","blockName","OS","paddingDisabled","marginDisabled","useCustomSides","feature","support"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tMarginEdit,\n\thasMarginSupport,\n\thasMarginValue,\n\tresetMargin,\n\tuseIsMarginDisabled,\n} from './margin';\nimport {\n\tPaddingEdit,\n\thasPaddingSupport,\n\thasPaddingValue,\n\tresetPadding,\n\tuseIsPaddingDisabled,\n} from './padding';\nimport { cleanEmptyObject } from './utils';\n\nexport const SPACING_SUPPORT_KEY = 'spacing';\n\n/**\n * Inspector controls for dimensions support.\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Inspector controls for spacing support features.\n */\nexport function DimensionsPanel( props ) {\n\tconst isPaddingDisabled = useIsPaddingDisabled( props );\n\tconst isMarginDisabled = useIsMarginDisabled( props );\n\tconst isDisabled = useIsDimensionsDisabled( props );\n\tconst isSupported = hasDimensionsSupport( props.name );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultSpacingControls = getBlockSupport( props.name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\t// Callback to reset all block support attributes controlled via this panel.\n\tconst resetAll = () => {\n\t\tconst { style } = props.attributes;\n\n\t\tprops.setAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\tspacing: {\n\t\t\t\t\t...style?.spacing,\n\t\t\t\t\tmargin: undefined,\n\t\t\t\t\tpadding: undefined,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\treturn (\n\t\t<InspectorControls key=\"dimensions\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Dimensions options' ) }\n\t\t\t\theader={ __( 'Dimensions' ) }\n\t\t\t\tresetAll={ resetAll }\n\t\t\t>\n\t\t\t\t{ ! isPaddingDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => hasPaddingValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\tonDeselect={ () => resetPadding( props ) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.padding }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PaddingEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isMarginDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => hasMarginValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\tonDeselect={ () => resetMargin( props ) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.margin }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MarginEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is dimensions related block support.\n *\n * @param {string} blockName Block name.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( blockName ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\treturn hasPaddingSupport( blockName ) || hasMarginSupport( blockName );\n}\n\n/**\n * Determines whether dimensions support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} If spacing support is completely disabled.\n */\nconst useIsDimensionsDisabled = ( props = {} ) => {\n\tconst paddingDisabled = useIsPaddingDisabled( props );\n\tconst marginDisabled = useIsMarginDisabled( props );\n\n\treturn paddingDisabled && marginDisabled;\n};\n\n/**\n * Custom hook to retrieve which padding/margin is supported\n * e.g. top, right, bottom or left.\n *\n * Sides are opted into by default. It is only if a specific side is set to\n * false that it is omitted.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {Object} Sides supporting custom margin.\n */\nexport function useCustomSides( blockName, feature ) {\n\tconst support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );\n\n\t// Skip when setting is boolean as theme isn't setting arbitrary sides.\n\tif ( typeof support[ feature ] === 'boolean' ) {\n\t\treturn;\n\t}\n\n\treturn support[ feature ];\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/dimensions.js"],"names":["__experimentalToolsPanelItem","ToolsPanelItem","Platform","__","getBlockSupport","InspectorControls","GapEdit","hasGapSupport","hasGapValue","resetGap","useIsGapDisabled","MarginEdit","hasMarginSupport","hasMarginValue","resetMargin","useIsMarginDisabled","PaddingEdit","hasPaddingSupport","hasPaddingValue","resetPadding","useIsPaddingDisabled","SPACING_SUPPORT_KEY","ALL_SIDES","AXIAL_SIDES","DimensionsPanel","props","isGapDisabled","isPaddingDisabled","isMarginDisabled","isDisabled","useIsDimensionsDisabled","isSupported","hasDimensionsSupport","name","defaultSpacingControls","createResetAllFilter","attribute","newAttributes","style","spacing","undefined","padding","clientId","margin","blockGap","blockName","OS","gapDisabled","paddingDisabled","marginDisabled","useCustomSides","feature","support","useIsDimensionsSupportValid","sides","some","side","includes","console","warn"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,4BAA4B,IAAIC,cAAzC,QAA+D,uBAA/D;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,eAAT,QAAgC,mBAAhC;AAEA;AACA;AACA;;AACA,OAAOC,iBAAP,MAA8B,kCAA9B;AACA,SACCC,OADD,EAECC,aAFD,EAGCC,WAHD,EAICC,QAJD,EAKCC,gBALD,QAMO,OANP;AAOA,SACCC,UADD,EAECC,gBAFD,EAGCC,cAHD,EAICC,WAJD,EAKCC,mBALD,QAMO,UANP;AAOA,SACCC,WADD,EAECC,iBAFD,EAGCC,eAHD,EAICC,YAJD,EAKCC,oBALD,QAMO,WANP;AAQA,OAAO,MAAMC,mBAAmB,GAAG,SAA5B;AACP,OAAO,MAAMC,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CAAlB;AACP,OAAO,MAAMC,WAAW,GAAG,CAAE,UAAF,EAAc,YAAd,CAApB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,eAAT,CAA0BC,KAA1B,EAAkC;AACxC,QAAMC,aAAa,GAAGhB,gBAAgB,CAAEe,KAAF,CAAtC;AACA,QAAME,iBAAiB,GAAGP,oBAAoB,CAAEK,KAAF,CAA9C;AACA,QAAMG,gBAAgB,GAAGb,mBAAmB,CAAEU,KAAF,CAA5C;AACA,QAAMI,UAAU,GAAGC,uBAAuB,CAAEL,KAAF,CAA1C;AACA,QAAMM,WAAW,GAAGC,oBAAoB,CAAEP,KAAK,CAACQ,IAAR,CAAxC;;AAEA,MAAKJ,UAAU,IAAI,CAAEE,WAArB,EAAmC;AAClC,WAAO,IAAP;AACA;;AAED,QAAMG,sBAAsB,GAAG9B,eAAe,CAAEqB,KAAK,CAACQ,IAAR,EAAc,CAC3DZ,mBAD2D,EAE3D,+BAF2D,CAAd,CAA9C;;AAKA,QAAMc,oBAAoB,GAAKC,SAAF,IAAmBC,aAAF;AAAA;;AAAA,WAAuB,EACpE,GAAGA,aADiE;AAEpEC,MAAAA,KAAK,EAAE,EACN,GAAGD,aAAa,CAACC,KADX;AAENC,QAAAA,OAAO,EAAE,EACR,4BAAGF,aAAa,CAACC,KAAjB,yDAAG,qBAAqBC,OAAxB,CADQ;AAER,WAAEH,SAAF,GAAeI;AAFP;AAFH;AAF6D,KAAvB;AAAA,GAA9C;;AAWA,SACC,cAAC,iBAAD;AAAmB,IAAA,mBAAmB,EAAC;AAAvC,KACG,CAAEb,iBAAF,IACD,cAAC,cAAD;AACC,IAAA,QAAQ,EAAG,MAAMT,eAAe,CAAEO,KAAF,CADjC;AAEC,IAAA,KAAK,EAAGtB,EAAE,CAAE,SAAF,CAFX;AAGC,IAAA,UAAU,EAAG,MAAMgB,YAAY,CAAEM,KAAF,CAHhC;AAIC,IAAA,cAAc,EAAGU,oBAAoB,CAAE,SAAF,CAJtC;AAKC,IAAA,gBAAgB,EAAGD,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAEO,OAL5C;AAMC,IAAA,OAAO,EAAGhB,KAAK,CAACiB;AANjB,KAQC,cAAC,WAAD,EAAkBjB,KAAlB,CARD,CAFF,EAaG,CAAEG,gBAAF,IACD,cAAC,cAAD;AACC,IAAA,QAAQ,EAAG,MAAMf,cAAc,CAAEY,KAAF,CADhC;AAEC,IAAA,KAAK,EAAGtB,EAAE,CAAE,QAAF,CAFX;AAGC,IAAA,UAAU,EAAG,MAAMW,WAAW,CAAEW,KAAF,CAH/B;AAIC,IAAA,cAAc,EAAGU,oBAAoB,CAAE,QAAF,CAJtC;AAKC,IAAA,gBAAgB,EAAGD,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAES,MAL5C;AAMC,IAAA,OAAO,EAAGlB,KAAK,CAACiB;AANjB,KAQC,cAAC,UAAD,EAAiBjB,KAAjB,CARD,CAdF,EAyBG,CAAEC,aAAF,IACD,cAAC,cAAD;AACC,IAAA,QAAQ,EAAG,MAAMlB,WAAW,CAAEiB,KAAF,CAD7B;AAEC,IAAA,KAAK,EAAGtB,EAAE,CAAE,eAAF,CAFX;AAGC,IAAA,UAAU,EAAG,MAAMM,QAAQ,CAAEgB,KAAF,CAH5B;AAIC,IAAA,cAAc,EAAGU,oBAAoB,CAAE,UAAF,CAJtC;AAKC,IAAA,gBAAgB,EAAGD,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAEU,QAL5C;AAMC,IAAA,OAAO,EAAGnB,KAAK,CAACiB;AANjB,KAQC,cAAC,OAAD,EAAcjB,KAAd,CARD,CA1BF,CADD;AAwCA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASO,oBAAT,CAA+Ba,SAA/B,EAA2C;AACjD,MAAK3C,QAAQ,CAAC4C,EAAT,KAAgB,KAArB,EAA6B;AAC5B,WAAO,KAAP;AACA;;AAED,SACCvC,aAAa,CAAEsC,SAAF,CAAb,IACA5B,iBAAiB,CAAE4B,SAAF,CADjB,IAEAjC,gBAAgB,CAAEiC,SAAF,CAHjB;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMf,uBAAuB,GAAG,CAAEL,KAAK,GAAG,EAAV,KAAkB;AACjD,QAAMsB,WAAW,GAAGrC,gBAAgB,CAAEe,KAAF,CAApC;AACA,QAAMuB,eAAe,GAAG5B,oBAAoB,CAAEK,KAAF,CAA5C;AACA,QAAMwB,cAAc,GAAGlC,mBAAmB,CAAEU,KAAF,CAA1C;AAEA,SAAOsB,WAAW,IAAIC,eAAf,IAAkCC,cAAzC;AACA,CAND;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASC,cAAT,CAAyBL,SAAzB,EAAoCM,OAApC,EAA8C;AACpD,QAAMC,OAAO,GAAGhD,eAAe,CAAEyC,SAAF,EAAaxB,mBAAb,CAA/B,CADoD,CAGpD;;AACA,MAAK,CAAE+B,OAAF,IAAa,OAAOA,OAAO,CAAED,OAAF,CAAd,KAA8B,SAAhD,EAA4D;AAC3D;AACA;;AAED,SAAOC,OAAO,CAAED,OAAF,CAAd;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,2BAAT,CAAsCR,SAAtC,EAAiDM,OAAjD,EAA2D;AACjE,QAAMG,KAAK,GAAGJ,cAAc,CAAEL,SAAF,EAAaM,OAAb,CAA5B;;AAEA,MACCG,KAAK,IACLA,KAAK,CAACC,IAAN,CAAcC,IAAF,IAAYlC,SAAS,CAACmC,QAAV,CAAoBD,IAApB,CAAxB,CADA,IAEAF,KAAK,CAACC,IAAN,CAAcC,IAAF,IAAYjC,WAAW,CAACkC,QAAZ,CAAsBD,IAAtB,CAAxB,CAHD,EAIE;AACD;AACAE,IAAAA,OAAO,CAACC,IAAR,CACE,OAAOR,OAAS,qBAAqBN,SAAW,0EADlD;AAGA,WAAO,KAAP;AACA;;AAED,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tGapEdit,\n\thasGapSupport,\n\thasGapValue,\n\tresetGap,\n\tuseIsGapDisabled,\n} from './gap';\nimport {\n\tMarginEdit,\n\thasMarginSupport,\n\thasMarginValue,\n\tresetMargin,\n\tuseIsMarginDisabled,\n} from './margin';\nimport {\n\tPaddingEdit,\n\thasPaddingSupport,\n\thasPaddingValue,\n\tresetPadding,\n\tuseIsPaddingDisabled,\n} from './padding';\n\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\n/**\n * Inspector controls for dimensions support.\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Inspector controls for spacing support features.\n */\nexport function DimensionsPanel( props ) {\n\tconst isGapDisabled = useIsGapDisabled( props );\n\tconst isPaddingDisabled = useIsPaddingDisabled( props );\n\tconst isMarginDisabled = useIsMarginDisabled( props );\n\tconst isDisabled = useIsDimensionsDisabled( props );\n\tconst isSupported = hasDimensionsSupport( props.name );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultSpacingControls = getBlockSupport( props.name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {\n\t\t...newAttributes,\n\t\tstyle: {\n\t\t\t...newAttributes.style,\n\t\t\tspacing: {\n\t\t\t\t...newAttributes.style?.spacing,\n\t\t\t\t[ attribute ]: undefined,\n\t\t\t},\n\t\t},\n\t} );\n\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"dimensions\">\n\t\t\t{ ! isPaddingDisabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasPaddingValue( props ) }\n\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\tonDeselect={ () => resetPadding( props ) }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'padding' ) }\n\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.padding }\n\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t>\n\t\t\t\t\t<PaddingEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ ! isMarginDisabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasMarginValue( props ) }\n\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\tonDeselect={ () => resetMargin( props ) }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'margin' ) }\n\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.margin }\n\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t>\n\t\t\t\t\t<MarginEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ ! isGapDisabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasGapValue( props ) }\n\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\tonDeselect={ () => resetGap( props ) }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'blockGap' ) }\n\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.blockGap }\n\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t>\n\t\t\t\t\t<GapEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is dimensions related block support.\n *\n * @param {string} blockName Block name.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( blockName ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\treturn (\n\t\thasGapSupport( blockName ) ||\n\t\thasPaddingSupport( blockName ) ||\n\t\thasMarginSupport( blockName )\n\t);\n}\n\n/**\n * Determines whether dimensions support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} If spacing support is completely disabled.\n */\nconst useIsDimensionsDisabled = ( props = {} ) => {\n\tconst gapDisabled = useIsGapDisabled( props );\n\tconst paddingDisabled = useIsPaddingDisabled( props );\n\tconst marginDisabled = useIsMarginDisabled( props );\n\n\treturn gapDisabled && paddingDisabled && marginDisabled;\n};\n\n/**\n * Custom hook to retrieve which padding/margin is supported\n * e.g. top, right, bottom or left.\n *\n * Sides are opted into by default. It is only if a specific side is set to\n * false that it is omitted.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {Object} Sides supporting custom margin.\n */\nexport function useCustomSides( blockName, feature ) {\n\tconst support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );\n\n\t// Skip when setting is boolean as theme isn't setting arbitrary sides.\n\tif ( ! support || typeof support[ feature ] === 'boolean' ) {\n\t\treturn;\n\t}\n\n\treturn support[ feature ];\n}\n\n/**\n * Custom hook to determine whether the sides configured in the\n * block support are valid. A dimension property cannot declare\n * support for a mix of axial and individual sides.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {boolean} If the feature has a valid configuration of sides.\n */\nexport function useIsDimensionsSupportValid( blockName, feature ) {\n\tconst sides = useCustomSides( blockName, feature );\n\n\tif (\n\t\tsides &&\n\t\tsides.some( ( side ) => ALL_SIDES.includes( side ) ) &&\n\t\tsides.some( ( side ) => AXIAL_SIDES.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support both axial and arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n"]}

package/build-module/hooks/duotone.js

@@ -5,7 +5,8 @@ import { createElement, Fragment } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
@@ -20,8 +21,9 @@ import { useContext, createPortal } from '@wordpress/element';
  */
 
 import { BlockControls, __experimentalDuotoneControl as DuotoneControl, useSetting } from '../components';
-import { Head } from '../components/block-list/head';
+import BlockList from '../components/block-list';
 const EMPTY_ARRAY = [];
+extend([namesPlugin]);
 /**
  * Convert a list of colors to an object of R, G, and B values.
  *
@@ -34,14 +36,15 @@ export function getValuesFromColors(colors = []) {
   const values = {
     r: [],
     g: [],
-    b: []
+    b: [],
+    a: []
   };
   colors.forEach(color => {
-    // Access values directly to skip extra rounding that tinycolor.toRgb() does.
-    const tcolor = tinycolor(color);
-    values.r.push(tcolor._r / 255);
-    values.g.push(tcolor._g / 255);
-    values.b.push(tcolor._b / 255);
+    const rgbColor = colord(color).toRgb();
+    values.r.push(rgbColor.r / 255);
+    values.g.push(rgbColor.g / 255);
+    values.b.push(rgbColor.b / 255);
+    values.a.push(rgbColor.a);
   });
   return values;
 }
@@ -52,6 +55,7 @@ export function getValuesFromColors(colors = []) {
  * @property {number[]} r Red values.
  * @property {number[]} g Green values.
  * @property {number[]} b Blue values.
+ * @property {number[]} a Alpha values.
  */
 
 /**
@@ -60,7 +64,7 @@ export function getValuesFromColors(colors = []) {
  * @param {Object} props          Duotone props.
  * @param {string} props.selector Selector to apply the filter to.
  * @param {string} props.id       Unique id for this duotone filter.
- * @param {Values} props.values   R, G, and B values to filter with.
+ * @param {Values} props.values   R, G, B, and A values to filter with.
  *
  * @return {WPElement} Duotone element.
  */
@@ -91,10 +95,11 @@ ${selector} {
   }, createElement("defs", null, createElement("filter", {
     id: id
   }, createElement("feColorMatrix", {
+    // Use sRGB instead of linearRGB so transparency looks correct.
+    colorInterpolationFilters: "sRGB",
     type: "matrix" // Use perceptual brightness to convert to grayscale.
-    // prettier-ignore
     ,
-    values: ".299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 0 0 0 1 0"
+    values: " .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "
   }), createElement("feComponentTransfer", {
     // Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
     colorInterpolationFilters: "sRGB"
@@ -107,7 +112,14 @@ ${selector} {
   }), createElement("feFuncB", {
     type: "table",
     tableValues: values.b.join(' ')
-  }))))), createElement("style", {
+  }), createElement("feFuncA", {
+    type: "table",
+    tableValues: values.a.join(' ')
+  })), createElement("feComposite", {
+    // Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+    in2: "SourceGraphic",
+    operator: "in"
+  })))), createElement("style", {
     dangerouslySetInnerHTML: {
       __html: stylesheet
     }
@@ -132,7 +144,8 @@ function DuotonePanel({
   }
 
   return createElement(BlockControls, {
-    group: "block"
+    group: "block",
+    __experimentalShareWithChildBlocks: true
   }, createElement(DuotoneControl, {
     duotonePalette: duotonePalette,
     colorPalette: colorPalette,
@@ -192,6 +205,35 @@ const withDuotoneControls = createHigherOrderComponent(BlockEdit => props => {
   const hasDuotoneSupport = hasBlockSupport(props.name, 'color.__experimentalDuotone');
   return createElement(Fragment, null, createElement(BlockEdit, props), hasDuotoneSupport && createElement(DuotonePanel, props));
 }, 'withDuotoneControls');
+/**
+ * Function that scopes a selector with another one. This works a bit like
+ * SCSS nesting except the `&` operator isn't supported.
+ *
+ * @example
+ * ```js
+ * const scope = '.a, .b .c';
+ * const selector = '> .x, .y';
+ * const merged = scopeSelector( scope, selector );
+ * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+ * ```
+ *
+ * @param {string} scope    Selector to scope to.
+ * @param {string} selector Original selector.
+ *
+ * @return {string} Scoped selector.
+ */
+
+function scopeSelector(scope, selector) {
+  const scopes = scope.split(',');
+  const selectors = selector.split(',');
+  const selectorsScoped = [];
+  scopes.forEach(outer => {
+    selectors.forEach(inner => {
+      selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
+    });
+  });
+  return selectorsScoped.join(', ');
+}
 /**
  * Override the default block element to include duotone styles.
  *
@@ -200,6 +242,7 @@ const withDuotoneControls = createHigherOrderComponent(BlockEdit => props => {
  * @return {Function} Wrapped component.
  */
 
+
 const withDuotoneStyles = createHigherOrderComponent(BlockListBlock => props => {
   var _props$attributes, _props$attributes$sty, _props$attributes$sty2;
 
@@ -210,12 +253,13 @@ const withDuotoneStyles = createHigherOrderComponent(BlockListBlock => props =>
     return createElement(BlockListBlock, props);
   }
 
-  const id = `wp-duotone-filter-${useInstanceId(BlockListBlock)}`;
-  const selectors = duotoneSupport.split(',');
-  const selectorsScoped = selectors.map(selector => `.${id} ${selector.trim()}`);
-  const selectorsGroup = selectorsScoped.join(', ');
+  const id = `wp-duotone-${useInstanceId(BlockListBlock)}`; // Extra .editor-styles-wrapper specificity is needed in the editor
+  // since we're not using inline styles to apply the filter. We need to
+  // override duotone applied by global styles and theme.json.
+
+  const selectorsGroup = scopeSelector(`.editor-styles-wrapper .${id}`, duotoneSupport);
   const className = classnames(props === null || props === void 0 ? void 0 : props.className, id);
-  const element = useContext(Head.context);
+  const element = useContext(BlockList.__unstableElementContext);
   return createElement(Fragment, null, element && createPortal(createElement(DuotoneFilter, {
     selector: selectorsGroup,
     id: id,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/duotone.js"],"names":["classnames","tinycolor","getBlockSupport","hasBlockSupport","SVG","createHigherOrderComponent","useInstanceId","addFilter","useContext","createPortal","BlockControls","__experimentalDuotoneControl","DuotoneControl","useSetting","Head","EMPTY_ARRAY","getValuesFromColors","colors","values","r","g","b","forEach","color","tcolor","push","_r","_g","_b","DuotoneFilter","selector","id","stylesheet","visibility","position","left","overflow","join","__html","DuotonePanel","attributes","setAttributes","style","duotone","duotonePalette","colorPalette","disableCustomColors","disableCustomDuotone","length","newDuotone","newStyle","addDuotoneAttributes","settings","Object","assign","type","withDuotoneControls","BlockEdit","props","hasDuotoneSupport","name","withDuotoneStyles","BlockListBlock","duotoneSupport","selectors","split","selectorsScoped","map","trim","selectorsGroup","className","element","context"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport tinycolor from 'tinycolor2';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';\nimport { SVG } from '@wordpress/components';\nimport { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useContext, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockControls,\n\t__experimentalDuotoneControl as DuotoneControl,\n\tuseSetting,\n} from '../components';\nimport { Head } from '../components/block-list/head';\n\nconst EMPTY_ARRAY = [];\n\n/**\n * Convert a list of colors to an object of R, G, and B values.\n *\n * @param {string[]} colors Array of RBG color strings.\n *\n * @return {Object} R, G, and B values.\n */\nexport function getValuesFromColors( colors = [] ) {\n\tconst values = { r: [], g: [], b: [] };\n\n\tcolors.forEach( ( color ) => {\n\t\t// Access values directly to skip extra rounding that tinycolor.toRgb() does.\n\t\tconst tcolor = tinycolor( color );\n\t\tvalues.r.push( tcolor._r / 255 );\n\t\tvalues.g.push( tcolor._g / 255 );\n\t\tvalues.b.push( tcolor._b / 255 );\n\t} );\n\n\treturn values;\n}\n\n/**\n * Values for the SVG `feComponentTransfer`.\n *\n * @typedef Values {Object}\n * @property {number[]} r Red values.\n * @property {number[]} g Green values.\n * @property {number[]} b Blue values.\n */\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {Object} props          Duotone props.\n * @param {string} props.selector Selector to apply the filter to.\n * @param {string} props.id       Unique id for this duotone filter.\n * @param {Values} props.values   R, G, and B values to filter with.\n *\n * @return {WPElement} Duotone element.\n */\nfunction DuotoneFilter( { selector, id, values } ) {\n\tconst stylesheet = `\n${ selector } {\n\tfilter: url( #${ id } );\n}\n`;\n\n\treturn (\n\t\t<>\n\t\t\t<SVG\n\t\t\t\txmlnsXlink=\"http://www.w3.org/1999/xlink\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\tfocusable=\"false\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<filter id={ id }>\n\t\t\t\t\t\t<feColorMatrix\n\t\t\t\t\t\t\ttype=\"matrix\"\n\t\t\t\t\t\t\t// Use perceptual brightness to convert to grayscale.\n\t\t\t\t\t\t\t// prettier-ignore\n\t\t\t\t\t\t\tvalues=\".299 .587 .114 0 0\n\t\t\t\t\t\t\t        .299 .587 .114 0 0\n\t\t\t\t\t\t\t        .299 .587 .114 0 0\n\t\t\t\t\t\t\t        0 0 0 1 0\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feComponentTransfer\n\t\t\t\t\t\t\t// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.\n\t\t\t\t\t\t\tcolorInterpolationFilters=\"sRGB\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<feFuncR\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.r.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<feFuncG\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.g.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<feFuncB\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.b.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</feComponentTransfer>\n\t\t\t\t\t</filter>\n\t\t\t\t</defs>\n\t\t\t</SVG>\n\t\t\t<style dangerouslySetInnerHTML={ { __html: stylesheet } } />\n\t\t</>\n\t);\n}\n\nfunction DuotonePanel( { attributes, setAttributes } ) {\n\tconst style = attributes?.style;\n\tconst duotone = style?.color?.duotone;\n\n\tconst duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;\n\tconst colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst disableCustomColors = ! useSetting( 'color.custom' );\n\tconst disableCustomDuotone =\n\t\t! useSetting( 'color.customDuotone' ) ||\n\t\t( colorPalette?.length === 0 && disableCustomColors );\n\n\tif ( duotonePalette?.length === 0 && disableCustomDuotone ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockControls group=\"block\">\n\t\t\t<DuotoneControl\n\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\tvalue={ duotone }\n\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t...style?.color,\n\t\t\t\t\t\t\tduotone: newDuotone,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `duotone` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addDuotoneAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, 'color.__experimentalDuotone' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default\n\t// values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override the default edit UI to include toolbar controls for duotone if the\n * block supports duotone.\n *\n * @param {Function} BlockEdit Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneControls = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst hasDuotoneSupport = hasBlockSupport(\n\t\t\tprops.name,\n\t\t\t'color.__experimentalDuotone'\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t\t{ hasDuotoneSupport && <DuotonePanel { ...props } /> }\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneControls'\n);\n\n/**\n * Override the default block element to include duotone styles.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst duotoneSupport = getBlockSupport(\n\t\t\tprops.name,\n\t\t\t'color.__experimentalDuotone'\n\t\t);\n\t\tconst values = props?.attributes?.style?.color?.duotone;\n\n\t\tif ( ! duotoneSupport || ! values ) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst id = `wp-duotone-filter-${ useInstanceId( BlockListBlock ) }`;\n\n\t\tconst selectors = duotoneSupport.split( ',' );\n\t\tconst selectorsScoped = selectors.map(\n\t\t\t( selector ) => `.${ id } ${ selector.trim() }`\n\t\t);\n\t\tconst selectorsGroup = selectorsScoped.join( ', ' );\n\n\t\tconst className = classnames( props?.className, id );\n\n\t\tconst element = useContext( Head.context );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ element &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<DuotoneFilter\n\t\t\t\t\t\t\tselector={ selectorsGroup }\n\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\tvalues={ getValuesFromColors( values ) }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\telement\n\t\t\t\t\t) }\n\t\t\t\t<BlockListBlock { ...props } className={ className } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/duotone/add-attributes',\n\taddDuotoneAttributes\n);\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/duotone/with-editor-controls',\n\twithDuotoneControls\n);\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/editor/duotone/with-styles',\n\twithDuotoneStyles\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/duotone.js"],"names":["classnames","colord","extend","namesPlugin","getBlockSupport","hasBlockSupport","SVG","createHigherOrderComponent","useInstanceId","addFilter","useContext","createPortal","BlockControls","__experimentalDuotoneControl","DuotoneControl","useSetting","BlockList","EMPTY_ARRAY","getValuesFromColors","colors","values","r","g","b","a","forEach","color","rgbColor","toRgb","push","DuotoneFilter","selector","id","stylesheet","visibility","position","left","overflow","join","__html","DuotonePanel","attributes","setAttributes","style","duotone","duotonePalette","colorPalette","disableCustomColors","disableCustomDuotone","length","newDuotone","newStyle","addDuotoneAttributes","settings","Object","assign","type","withDuotoneControls","BlockEdit","props","hasDuotoneSupport","name","scopeSelector","scope","scopes","split","selectors","selectorsScoped","outer","inner","trim","withDuotoneStyles","BlockListBlock","duotoneSupport","selectorsGroup","className","element","__unstableElementContext"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';\nimport { SVG } from '@wordpress/components';\nimport { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useContext, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockControls,\n\t__experimentalDuotoneControl as DuotoneControl,\n\tuseSetting,\n} from '../components';\nimport BlockList from '../components/block-list';\n\nconst EMPTY_ARRAY = [];\n\nextend( [ namesPlugin ] );\n\n/**\n * Convert a list of colors to an object of R, G, and B values.\n *\n * @param {string[]} colors Array of RBG color strings.\n *\n * @return {Object} R, G, and B values.\n */\nexport function getValuesFromColors( colors = [] ) {\n\tconst values = { r: [], g: [], b: [], a: [] };\n\n\tcolors.forEach( ( color ) => {\n\t\tconst rgbColor = colord( color ).toRgb();\n\t\tvalues.r.push( rgbColor.r / 255 );\n\t\tvalues.g.push( rgbColor.g / 255 );\n\t\tvalues.b.push( rgbColor.b / 255 );\n\t\tvalues.a.push( rgbColor.a );\n\t} );\n\n\treturn values;\n}\n\n/**\n * Values for the SVG `feComponentTransfer`.\n *\n * @typedef Values {Object}\n * @property {number[]} r Red values.\n * @property {number[]} g Green values.\n * @property {number[]} b Blue values.\n * @property {number[]} a Alpha values.\n */\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {Object} props          Duotone props.\n * @param {string} props.selector Selector to apply the filter to.\n * @param {string} props.id       Unique id for this duotone filter.\n * @param {Values} props.values   R, G, B, and A values to filter with.\n *\n * @return {WPElement} Duotone element.\n */\nfunction DuotoneFilter( { selector, id, values } ) {\n\tconst stylesheet = `\n${ selector } {\n\tfilter: url( #${ id } );\n}\n`;\n\n\treturn (\n\t\t<>\n\t\t\t<SVG\n\t\t\t\txmlnsXlink=\"http://www.w3.org/1999/xlink\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\tfocusable=\"false\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<filter id={ id }>\n\t\t\t\t\t\t<feColorMatrix\n\t\t\t\t\t\t\t// Use sRGB instead of linearRGB so transparency looks correct.\n\t\t\t\t\t\t\tcolorInterpolationFilters=\"sRGB\"\n\t\t\t\t\t\t\ttype=\"matrix\"\n\t\t\t\t\t\t\t// Use perceptual brightness to convert to grayscale.\n\t\t\t\t\t\t\tvalues=\"\n\t\t\t\t\t\t\t\t.299 .587 .114 0 0\n\t\t\t\t\t\t\t\t.299 .587 .114 0 0\n\t\t\t\t\t\t\t\t.299 .587 .114 0 0\n\t\t\t\t\t\t\t\t.299 .587 .114 0 0\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feComponentTransfer\n\t\t\t\t\t\t\t// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.\n\t\t\t\t\t\t\tcolorInterpolationFilters=\"sRGB\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<feFuncR\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.r.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<feFuncG\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.g.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<feFuncB\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.b.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<feFuncA\n\t\t\t\t\t\t\t\ttype=\"table\"\n\t\t\t\t\t\t\t\ttableValues={ values.a.join( ' ' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</feComponentTransfer>\n\t\t\t\t\t\t<feComposite\n\t\t\t\t\t\t\t// Re-mask the image with the original transparency since the feColorMatrix above loses that information.\n\t\t\t\t\t\t\tin2=\"SourceGraphic\"\n\t\t\t\t\t\t\toperator=\"in\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</filter>\n\t\t\t\t</defs>\n\t\t\t</SVG>\n\t\t\t<style dangerouslySetInnerHTML={ { __html: stylesheet } } />\n\t\t</>\n\t);\n}\n\nfunction DuotonePanel( { attributes, setAttributes } ) {\n\tconst style = attributes?.style;\n\tconst duotone = style?.color?.duotone;\n\n\tconst duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;\n\tconst colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst disableCustomColors = ! useSetting( 'color.custom' );\n\tconst disableCustomDuotone =\n\t\t! useSetting( 'color.customDuotone' ) ||\n\t\t( colorPalette?.length === 0 && disableCustomColors );\n\n\tif ( duotonePalette?.length === 0 && disableCustomDuotone ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t<DuotoneControl\n\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\tvalue={ duotone }\n\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t...style?.color,\n\t\t\t\t\t\t\tduotone: newDuotone,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `duotone` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addDuotoneAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, 'color.__experimentalDuotone' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default\n\t// values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override the default edit UI to include toolbar controls for duotone if the\n * block supports duotone.\n *\n * @param {Function} BlockEdit Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneControls = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst hasDuotoneSupport = hasBlockSupport(\n\t\t\tprops.name,\n\t\t\t'color.__experimentalDuotone'\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t\t{ hasDuotoneSupport && <DuotonePanel { ...props } /> }\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneControls'\n);\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param {string} scope    Selector to scope to.\n * @param {string} selector Original selector.\n *\n * @return {string} Scoped selector.\n */\nfunction scopeSelector( scope, selector ) {\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\n/**\n * Override the default block element to include duotone styles.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst duotoneSupport = getBlockSupport(\n\t\t\tprops.name,\n\t\t\t'color.__experimentalDuotone'\n\t\t);\n\t\tconst values = props?.attributes?.style?.color?.duotone;\n\n\t\tif ( ! duotoneSupport || ! values ) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst id = `wp-duotone-${ useInstanceId( BlockListBlock ) }`;\n\n\t\t// Extra .editor-styles-wrapper specificity is needed in the editor\n\t\t// since we're not using inline styles to apply the filter. We need to\n\t\t// override duotone applied by global styles and theme.json.\n\t\tconst selectorsGroup = scopeSelector(\n\t\t\t`.editor-styles-wrapper .${ id }`,\n\t\t\tduotoneSupport\n\t\t);\n\n\t\tconst className = classnames( props?.className, id );\n\n\t\tconst element = useContext( BlockList.__unstableElementContext );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ element &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<DuotoneFilter\n\t\t\t\t\t\t\tselector={ selectorsGroup }\n\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\tvalues={ getValuesFromColors( values ) }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\telement\n\t\t\t\t\t) }\n\t\t\t\t<BlockListBlock { ...props } className={ className } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/duotone/add-attributes',\n\taddDuotoneAttributes\n);\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/duotone/with-editor-controls',\n\twithDuotoneControls\n);\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/editor/duotone/with-styles',\n\twithDuotoneStyles\n);\n"]}

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

@@ -41,10 +41,6 @@ export function FontAppearanceEdit(props) {
   const hasFontStyles = !useIsFontStyleDisabled(props);
   const hasFontWeights = !useIsFontWeightDisabled(props);
 
-  if (!hasFontStyles && !hasFontWeights) {
-    return null;
-  }
-
   const onChange = newStyles => {
     setAttributes({
       style: cleanEmptyObject({ ...style,
@@ -82,7 +78,7 @@ export function useIsFontStyleDisabled({
   name: blockName
 } = {}) {
   const styleSupport = hasBlockSupport(blockName, FONT_STYLE_SUPPORT_KEY);
-  const hasFontStyles = useSetting('typography.customFontStyle');
+  const hasFontStyles = useSetting('typography.fontStyle');
   return !styleSupport || !hasFontStyles;
 }
 /**
@@ -99,7 +95,7 @@ export function useIsFontWeightDisabled({
   name: blockName
 } = {}) {
   const weightSupport = hasBlockSupport(blockName, FONT_WEIGHT_SUPPORT_KEY);
-  const hasFontWeights = useSetting('typography.customFontWeight');
+  const hasFontWeights = useSetting('typography.fontWeight');
   return !weightSupport || !hasFontWeights;
 }
 /**
@@ -115,4 +111,47 @@ export function useIsFontAppearanceDisabled(props) {
   const weightsDisabled = useIsFontWeightDisabled(props);
   return stylesDisabled && weightsDisabled;
 }
+/**
+ * Checks if there is either a font style or weight value set within the
+ * typography styles.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a font style or weight.
+ */
+
+export function hasFontAppearanceValue(props) {
+  var _props$attributes$sty;
+
+  const {
+    fontStyle,
+    fontWeight
+  } = ((_props$attributes$sty = props.attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : _props$attributes$sty.typography) || {};
+  return !!fontStyle || !!fontWeight;
+}
+/**
+ * Resets the font style and weight block support attributes. This can be used
+ * when disabling the font appearance 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 resetFontAppearance({
+  attributes = {},
+  setAttributes
+}) {
+  const {
+    style
+  } = attributes;
+  setAttributes({
+    style: cleanEmptyObject({ ...style,
+      typography: { ...(style === null || style === void 0 ? void 0 : style.typography),
+        fontStyle: undefined,
+        fontWeight: undefined
+      }
+    })
+  });
+}
 //# sourceMappingURL=font-appearance.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-appearance.js"],"names":["hasBlockSupport","FontAppearanceControl","useSetting","cleanEmptyObject","FONT_STYLE_SUPPORT_KEY","FONT_WEIGHT_SUPPORT_KEY","FontAppearanceEdit","props","attributes","style","setAttributes","hasFontStyles","useIsFontStyleDisabled","hasFontWeights","useIsFontWeightDisabled","onChange","newStyles","typography","fontStyle","fontWeight","name","blockName","styleSupport","weightSupport","useIsFontAppearanceDisabled","stylesDisabled","weightsDisabled"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,eAAT,QAAgC,mBAAhC;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,uCAAlC;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,SAASC,gBAAT,QAAiC,SAAjC;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,sBAAsB,GAAG,oCAA/B;AAEP;AACA;AACA;;AACA,OAAO,MAAMC,uBAAuB,GAAG,qCAAhC;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,kBAAT,CAA6BC,KAA7B,EAAqC;AAAA;;AAC3C,QAAM;AACLC,IAAAA,UAAU,EAAE;AAAEC,MAAAA;AAAF,KADP;AAELC,IAAAA;AAFK,MAGFH,KAHJ;AAKA,QAAMI,aAAa,GAAG,CAAEC,sBAAsB,CAAEL,KAAF,CAA9C;AACA,QAAMM,cAAc,GAAG,CAAEC,uBAAuB,CAAEP,KAAF,CAAhD;;AAEA,MAAK,CAAEI,aAAF,IAAmB,CAAEE,cAA1B,EAA2C;AAC1C,WAAO,IAAP;AACA;;AAED,QAAME,QAAQ,GAAKC,SAAF,IAAiB;AACjCN,IAAAA,aAAa,CAAE;AACdD,MAAAA,KAAK,EAAEN,gBAAgB,CAAE,EACxB,GAAGM,KADqB;AAExBQ,QAAAA,UAAU,EAAE,EACX,IAAGR,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEQ,UAAV,CADW;AAEXC,UAAAA,SAAS,EAAEF,SAAS,CAACE,SAFV;AAGXC,UAAAA,UAAU,EAAEH,SAAS,CAACG;AAHX;AAFY,OAAF;AADT,KAAF,CAAb;AAUA,GAXD;;AAaA,QAAMD,SAAS,GAAGT,KAAH,aAAGA,KAAH,4CAAGA,KAAK,CAAEQ,UAAV,sDAAG,kBAAmBC,SAArC;AAEA,QAAMC,UAAU,GAAGV,KAAH,aAAGA,KAAH,6CAAGA,KAAK,CAAEQ,UAAV,uDAAG,mBAAmBE,UAAtC;AAEA,SACC,cAAC,qBAAD;AACC,IAAA,QAAQ,EAAGJ,QADZ;AAEC,IAAA,aAAa,EAAGJ,aAFjB;AAGC,IAAA,cAAc,EAAGE,cAHlB;AAIC,IAAA,KAAK,EAAG;AAAEK,MAAAA,SAAF;AAAaC,MAAAA;AAAb;AAJT,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASP,sBAAT,CAAiC;AAAEQ,EAAAA,IAAI,EAAEC;AAAR,IAAsB,EAAvD,EAA4D;AAClE,QAAMC,YAAY,GAAGtB,eAAe,CAAEqB,SAAF,EAAajB,sBAAb,CAApC;AACA,QAAMO,aAAa,GAAGT,UAAU,CAAE,4BAAF,CAAhC;AAEA,SAAO,CAAEoB,YAAF,IAAkB,CAAEX,aAA3B;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,uBAAT,CAAkC;AAAEM,EAAAA,IAAI,EAAEC;AAAR,IAAsB,EAAxD,EAA6D;AACnE,QAAME,aAAa,GAAGvB,eAAe,CAAEqB,SAAF,EAAahB,uBAAb,CAArC;AACA,QAAMQ,cAAc,GAAGX,UAAU,CAAE,6BAAF,CAAjC;AAEA,SAAO,CAAEqB,aAAF,IAAmB,CAAEV,cAA5B;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASW,2BAAT,CAAsCjB,KAAtC,EAA8C;AACpD,QAAMkB,cAAc,GAAGb,sBAAsB,CAAEL,KAAF,CAA7C;AACA,QAAMmB,eAAe,GAAGZ,uBAAuB,CAAEP,KAAF,CAA/C;AAEA,SAAOkB,cAAc,IAAIC,eAAzB;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport FontAppearanceControl from '../components/font-appearance-control';\nimport useSetting from '../components/use-setting';\nimport { cleanEmptyObject } from './utils';\n\n/**\n * Key within block settings' support array indicating support for font style.\n */\nexport const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';\n\n/**\n * Key within block settings' support array indicating support for font weight.\n */\nexport const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';\n\n/**\n * Inspector control panel containing the font appearance options.\n *\n * @param {Object} props Block properties.\n *\n * @return {WPElement} Font appearance edit element.\n */\nexport function FontAppearanceEdit( props ) {\n\tconst {\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst hasFontStyles = ! useIsFontStyleDisabled( props );\n\tconst hasFontWeights = ! useIsFontWeightDisabled( props );\n\n\tif ( ! hasFontStyles && ! hasFontWeights ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( newStyles ) => {\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\tfontStyle: newStyles.fontStyle,\n\t\t\t\t\tfontWeight: newStyles.fontWeight,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\tconst fontStyle = style?.typography?.fontStyle;\n\n\tconst fontWeight = style?.typography?.fontWeight;\n\n\treturn (\n\t\t<FontAppearanceControl\n\t\t\tonChange={ onChange }\n\t\t\thasFontStyles={ hasFontStyles }\n\t\t\thasFontWeights={ hasFontWeights }\n\t\t\tvalue={ { fontStyle, fontWeight } }\n\t\t/>\n\t);\n}\n\n/**\n * Checks if font style support has been disabled either by not opting in for\n * support or by failing to provide preset styles.\n *\n * @param {Object} props      Block properties.\n * @param {string} props.name Name for the block type.\n *\n * @return {boolean} Whether font style support has been disabled.\n */\nexport function useIsFontStyleDisabled( { name: blockName } = {} ) {\n\tconst styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY );\n\tconst hasFontStyles = useSetting( 'typography.customFontStyle' );\n\n\treturn ! styleSupport || ! hasFontStyles;\n}\n\n/**\n * Checks if font weight support has been disabled either by not opting in for\n * support or by failing to provide preset weights.\n *\n * @param {Object} props      Block properties.\n * @param {string} props.name Name for the block type.\n *\n * @return {boolean} Whether font weight support has been disabled.\n */\nexport function useIsFontWeightDisabled( { name: blockName } = {} ) {\n\tconst weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY );\n\tconst hasFontWeights = useSetting( 'typography.customFontWeight' );\n\n\treturn ! weightSupport || ! hasFontWeights;\n}\n\n/**\n * Checks if font appearance support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} Whether font appearance support has been disabled.\n */\nexport function useIsFontAppearanceDisabled( props ) {\n\tconst stylesDisabled = useIsFontStyleDisabled( props );\n\tconst weightsDisabled = useIsFontWeightDisabled( props );\n\n\treturn stylesDisabled && weightsDisabled;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-appearance.js"],"names":["hasBlockSupport","FontAppearanceControl","useSetting","cleanEmptyObject","FONT_STYLE_SUPPORT_KEY","FONT_WEIGHT_SUPPORT_KEY","FontAppearanceEdit","props","attributes","style","setAttributes","hasFontStyles","useIsFontStyleDisabled","hasFontWeights","useIsFontWeightDisabled","onChange","newStyles","typography","fontStyle","fontWeight","name","blockName","styleSupport","weightSupport","useIsFontAppearanceDisabled","stylesDisabled","weightsDisabled","hasFontAppearanceValue","resetFontAppearance","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport FontAppearanceControl from '../components/font-appearance-control';\nimport useSetting from '../components/use-setting';\nimport { cleanEmptyObject } from './utils';\n\n/**\n * Key within block settings' support array indicating support for font style.\n */\nexport const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';\n\n/**\n * Key within block settings' support array indicating support for font weight.\n */\nexport const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';\n\n/**\n * Inspector control panel containing the font appearance options.\n *\n * @param {Object} props Block properties.\n *\n * @return {WPElement} Font appearance edit element.\n */\nexport function FontAppearanceEdit( props ) {\n\tconst {\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst hasFontStyles = ! useIsFontStyleDisabled( props );\n\tconst hasFontWeights = ! useIsFontWeightDisabled( props );\n\n\tconst onChange = ( newStyles ) => {\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\tfontStyle: newStyles.fontStyle,\n\t\t\t\t\tfontWeight: newStyles.fontWeight,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\tconst fontStyle = style?.typography?.fontStyle;\n\tconst fontWeight = style?.typography?.fontWeight;\n\n\treturn (\n\t\t<FontAppearanceControl\n\t\t\tonChange={ onChange }\n\t\t\thasFontStyles={ hasFontStyles }\n\t\t\thasFontWeights={ hasFontWeights }\n\t\t\tvalue={ { fontStyle, fontWeight } }\n\t\t/>\n\t);\n}\n\n/**\n * Checks if font style support has been disabled either by not opting in for\n * support or by failing to provide preset styles.\n *\n * @param {Object} props      Block properties.\n * @param {string} props.name Name for the block type.\n *\n * @return {boolean} Whether font style support has been disabled.\n */\nexport function useIsFontStyleDisabled( { name: blockName } = {} ) {\n\tconst styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY );\n\tconst hasFontStyles = useSetting( 'typography.fontStyle' );\n\n\treturn ! styleSupport || ! hasFontStyles;\n}\n\n/**\n * Checks if font weight support has been disabled either by not opting in for\n * support or by failing to provide preset weights.\n *\n * @param {Object} props      Block properties.\n * @param {string} props.name Name for the block type.\n *\n * @return {boolean} Whether font weight support has been disabled.\n */\nexport function useIsFontWeightDisabled( { name: blockName } = {} ) {\n\tconst weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY );\n\tconst hasFontWeights = useSetting( 'typography.fontWeight' );\n\n\treturn ! weightSupport || ! hasFontWeights;\n}\n\n/**\n * Checks if font appearance support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} Whether font appearance support has been disabled.\n */\nexport function useIsFontAppearanceDisabled( props ) {\n\tconst stylesDisabled = useIsFontStyleDisabled( props );\n\tconst weightsDisabled = useIsFontWeightDisabled( props );\n\n\treturn stylesDisabled && weightsDisabled;\n}\n\n/**\n * Checks if there is either a font style or weight value set within the\n * typography styles.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a font style or weight.\n */\nexport function hasFontAppearanceValue( props ) {\n\tconst { fontStyle, fontWeight } = props.attributes.style?.typography || {};\n\treturn !! fontStyle || !! fontWeight;\n}\n\n/**\n * Resets the font style and weight block support attributes. This can be used\n * when disabling the font appearance support controls for a block via a\n * 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 resetFontAppearance( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\ttypography: {\n\t\t\t\t...style?.typography,\n\t\t\t\tfontStyle: undefined,\n\t\t\t\tfontWeight: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n"]}