@wordpress/edit-site 5.0.0 → 5.2.0

package/build/components/global-styles/screen-text-color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["ScreenTextColor","name","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAG,2CAAgCD,IAAhC,CAAjB;AACA,QAAM,CAAEE,MAAF,IAAa,uBAAY,eAAZ,EAA6BF,IAA7B,CAAnB;AACA,QAAM,CAAEG,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BH,IAA5B,CAAnC;AACA,QAAM,CAAEI,aAAF,IAAoB,uBAAY,YAAZ,EAA0BJ,IAA1B,CAA1B;AAEA,QAAMK,eAAe,GAAG,+BAAoBL,IAApB,CAAxB;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,qBAAU,YAAV,EAAwBV,IAAxB,CAA5B;AACA,QAAM,CAAEW,SAAF,IAAgB,qBAAU,YAAV,EAAwBX,IAAxB,EAA8B,MAA9B,CAAtB;;AAEA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,sDADa;AAFf,IADD,EAOC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGD,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,KARd;AASC,IAAA,aAAa,EAAGC,QATjB;AAUC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AAVvB,IAPD,CADD;AAsBA;;eAEcZ,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-text-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["ScreenTextColor","name","variationPath","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAyD;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,aAAa,GAAG;AAAxB,GAA+B;AACxD,QAAMC,QAAQ,GAAG,2CAAgCF,IAAhC,CAAjB;AACA,QAAM,CAAEG,MAAF,IAAa,uBAAY,eAAZ,EAA6BH,IAA7B,CAAnB;AACA,QAAM,CAAEI,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BJ,IAA5B,CAAnC;AACA,QAAM,CAAEK,aAAF,IAAoB,uBAAY,YAAZ,EAA0BL,IAA1B,CAA1B;AAEA,QAAMM,eAAe,GAAG,+BAAoBN,IAApB,CAAxB;AAEA,QAAMO,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,qBAAUV,aAAa,GAAG,YAA1B,EAAwCD,IAAxC,CAA5B;AACA,QAAM,CAAEY,SAAF,IAAgB,qBACrBX,aAAa,GAAG,YADK,EAErBD,IAFqB,EAGrB,MAHqB,CAAtB;;AAMA,MAAK,CAAEO,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,sDADa;AAFf,IADD,EAOC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGD,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGM,KAPd;AAQC,IAAA,aAAa,EAAGC,QARjB;AASC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AATvB,IAPD,CADD;AAqBA;;eAEcb,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( variationPath + 'color.text', name );\n\tconst [ userColor ] = useStyle(\n\t\tvariationPath + 'color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-text-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}

package/build/components/global-styles/screen-typography.js

@@ -23,6 +23,10 @@ var _subtitle = _interopRequireDefault(require("./subtitle"));
 
 var _typographyPanel = _interopRequireDefault(require("./typography-panel"));
 
+var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
+
+var _utils = require("./utils");
+
 /**
  * WordPress dependencies
  */
@@ -77,12 +81,17 @@ function Item(_ref) {
 
 function ScreenTypography(_ref2) {
   let {
-    name
+    name,
+    variationPath = ''
   } = _ref2;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  const variationClassName = (0, _utils.getVariationClassNameFromPath)(variationPath);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Typography'),
     description: (0, _i18n.__)('Manage the typography settings for different elements.')
+  }), (0, _element.createElement)(_blockPreviewPanel.default, {
+    name: name,
+    variation: variationClassName
   }), !name && (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-typography"
   }, (0, _element.createElement)(_components.__experimentalVStack, {
@@ -112,6 +121,7 @@ function ScreenTypography(_ref2) {
     label: (0, _i18n.__)('Buttons')
   })))), !!name && (0, _element.createElement)(_typographyPanel.default, {
     name: name,
+    variationPath: variationPath,
     element: "text"
   }));
 }

package/build/components/global-styles/screen-typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"heading\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"button\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography","variationPath","undefined","variationClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassNameFromPath } from './utils';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name, variationPath = '' } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst variationClassName = getVariationClassNameFromPath( variationPath );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"heading\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"button\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && (\n\t\t\t\t<TypographyPanel\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}

package/build/components/global-styles/screen-variations.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenVariation = ScreenVariation;
+exports.ScreenVariations = ScreenVariations;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _variationsPanel = require("./variations-panel");
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
+
+var _subtitle = _interopRequireDefault(require("./subtitle"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenVariations(_ref) {
+  let {
+    name,
+    path = ''
+  } = _ref;
+  const hasVariationsPanel = (0, _variationsPanel.useHasVariationsPanel)(name, path);
+
+  if (!hasVariationsPanel) {
+    return null;
+  }
+
+  return (0, _element.createElement)("div", {
+    className: "edit-site-global-styles-screen-variations"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 3
+  }, (0, _element.createElement)("p", null, "Manage style variations, saved block appearence presets."), (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Style Variations')), (0, _element.createElement)(_variationsPanel.VariationsPanel, {
+    name: name
+  })));
+}
+
+function ScreenVariation(_ref2) {
+  let {
+    blockName,
+    style
+  } = _ref2;
+  const {
+    name: styleName,
+    label: styleLabel
+  } = style;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    title: styleLabel
+  }), (0, _element.createElement)(_blockPreviewPanel.default, {
+    name: blockName,
+    variation: `is-style-${styleName}`
+  }), (0, _element.createElement)(_variationsPanel.VariationPanel, {
+    blockName: blockName,
+    styleName: styleName
+  }));
+}
+//# sourceMappingURL=screen-variations.js.map

package/build/components/global-styles/screen-variations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-variations.js"],"names":["ScreenVariations","name","path","hasVariationsPanel","ScreenVariation","blockName","style","styleName","label","styleLabel"],"mappings":";;;;;;;;;;;;AAGA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAUO,SAASA,gBAAT,OAAiD;AAAA,MAAtB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,IAAI,GAAG;AAAf,GAAsB;AACvD,QAAMC,kBAAkB,GAAG,4CAAuBF,IAAvB,EAA6BC,IAA7B,CAA3B;;AAEA,MAAK,CAAEC,kBAAP,EAA4B;AAC3B,WAAO,IAAP;AACA;;AACD,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,kGADD,EAEC,4BAAC,iBAAD,QAAY,cAAI,kBAAJ,CAAZ,CAFD,EAGC,4BAAC,gCAAD;AAAiB,IAAA,IAAI,EAAGF;AAAxB,IAHD,CADD,CADD;AASA;;AAEM,SAASG,eAAT,QAAiD;AAAA,MAAvB;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAuB;AACvD,QAAM;AAAEL,IAAAA,IAAI,EAAEM,SAAR;AAAmBC,IAAAA,KAAK,EAAEC;AAA1B,MAAyCH,KAA/C;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAGG;AAAtB,IADD,EAEC,4BAAC,0BAAD;AACC,IAAA,IAAI,EAAGJ,SADR;AAEC,IAAA,SAAS,EAAI,YAAYE,SAAW;AAFrC,IAFD,EAMC,4BAAC,+BAAD;AAAgB,IAAA,SAAS,EAAGF,SAA5B;AAAwC,IAAA,SAAS,EAAGE;AAApD,IAND,CADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport {\n\tVariationPanel,\n\tVariationsPanel,\n\tuseHasVariationsPanel,\n} from './variations-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport Subtitle from './subtitle';\n\nexport function ScreenVariations( { name, path = '' } ) {\n\tconst hasVariationsPanel = useHasVariationsPanel( name, path );\n\n\tif ( ! hasVariationsPanel ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<div className=\"edit-site-global-styles-screen-variations\">\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>Manage style variations, saved block appearence presets.</p>\n\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport function ScreenVariation( { blockName, style } ) {\n\tconst { name: styleName, label: styleLabel } = style;\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ styleLabel } />\n\t\t\t<BlockPreviewPanel\n\t\t\t\tname={ blockName }\n\t\t\t\tvariation={ `is-style-${ styleName }` }\n\t\t\t/>\n\t\t\t<VariationPanel blockName={ blockName } styleName={ styleName } />\n\t\t</>\n\t);\n}\n"]}

package/build/components/global-styles/typography-panel.js

@@ -165,7 +165,8 @@ function TypographyPanel(_ref) {
   let {
     name,
     element,
-    headingLevel
+    headingLevel,
+    variationPath = ''
   } = _ref;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   let prefix = '';
@@ -196,13 +197,13 @@ function TypographyPanel(_ref) {
     hasFontSizeEnabled = false;
   }
 
-  const [fontFamily, setFontFamily, hasFontFamily, resetFontFamily] = useStyleWithReset(prefix + 'typography.fontFamily', name);
+  const [fontFamily, setFontFamily, hasFontFamily, resetFontFamily] = useStyleWithReset(variationPath + prefix + 'typography.fontFamily', name);
   const {
     fontSize,
     setFontSize,
     hasFontSize,
     resetFontSize
-  } = useFontSizeWithReset(prefix + 'typography.fontSize', name);
+  } = useFontSizeWithReset(variationPath + prefix + 'typography.fontSize', name);
   const {
     fontStyle,
     setFontStyle,
@@ -210,11 +211,11 @@ function TypographyPanel(_ref) {
     setFontWeight,
     hasFontAppearance,
     resetFontAppearance
-  } = useFontAppearance(prefix, name);
-  const [lineHeight, setLineHeight, hasLineHeight, resetLineHeight] = useStyleWithReset(prefix + 'typography.lineHeight', name);
-  const [letterSpacing, setLetterSpacing, hasLetterSpacing, resetLetterSpacing] = useStyleWithReset(prefix + 'typography.letterSpacing', name);
-  const [textTransform, setTextTransform, hasTextTransform, resetTextTransform] = useStyleWithReset(prefix + 'typography.textTransform', name);
-  const [textDecoration, setTextDecoration, hasTextDecoration, resetTextDecoration] = useStyleWithReset(prefix + 'typography.textDecoration', name);
+  } = useFontAppearance(variationPath + prefix, name);
+  const [lineHeight, setLineHeight, hasLineHeight, resetLineHeight] = useStyleWithReset(variationPath + prefix + 'typography.lineHeight', name);
+  const [letterSpacing, setLetterSpacing, hasLetterSpacing, resetLetterSpacing] = useStyleWithReset(variationPath + prefix + 'typography.letterSpacing', name);
+  const [textTransform, setTextTransform, hasTextTransform, resetTextTransform] = useStyleWithReset(variationPath + prefix + 'typography.textTransform', name);
+  const [textDecoration, setTextDecoration, hasTextDecoration, resetTextDecoration] = useStyleWithReset(variationPath + prefix + 'typography.textDecoration', name);
 
   const resetAll = () => {
     resetFontFamily();

package/build/components/global-styles/typography-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["useHasTypographyPanel","name","hasFontFamily","useHasFontFamilyControl","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","fontFamilies","length","hasFontStyles","hasFontWeights","useAppearanceControlLabel","element","setting","useHasTextTransformControl","useHasTextDecorationControl","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontSizeWithReset","fontSize","setStyleCallback","hasFontSize","resetFontSize","setFontSize","newValue","metadata","slug","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","fontSizes","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasTextDecorationControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","textDecoration","setTextDecoration","hasTextDecoration","resetTextDecoration","resetAll","newFontStyle","newFontWeight"],"mappings":";;;;;;;;;;AAGA;;AAQA;;AAKA;;AAKA;;AArBA;AACA;AACA;;AAgBA;AACA;AACA;AAGO,SAASA,qBAAT,CAAgCC,IAAhC,EAAuC;AAC7C,QAAMC,aAAa,GAAGC,uBAAuB,CAAEF,IAAF,CAA7C;AACA,QAAMG,aAAa,GAAGC,uBAAuB,CAAEJ,IAAF,CAA7C;AACA,QAAMK,iBAAiB,GAAGC,uBAAuB,CAAEN,IAAF,CAAjD;AACA,QAAMO,gBAAgB,GAAGC,0BAA0B,CAAER,IAAF,CAAnD;AACA,QAAMS,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,SACCC,aAAa,IACbE,aADA,IAEAE,iBAFA,IAGAE,gBAHA,IAIAE,QAAQ,CAACC,QAAT,CAAmB,UAAnB,CALD;AAOA;;AAED,SAASR,uBAAT,CAAkCF,IAAlC,EAAyC;AACxC,QAAMS,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,QAAM,CAAEW,YAAF,IAAmB,uBAAY,yBAAZ,EAAuCX,IAAvC,CAAzB;AACA,SAAOS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,KAAqC,CAAC,EAAEC,YAAF,aAAEA,YAAF,eAAEA,YAAY,CAAEC,MAAhB,CAA7C;AACA;;AAED,SAASR,uBAAT,CAAkCJ,IAAlC,EAAyC;AACxC,QAAMS,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,SACC,uBAAY,uBAAZ,EAAqCA,IAArC,EAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;AAIA;;AAED,SAASJ,uBAAT,CAAkCN,IAAlC,EAAyC;AACxC,QAAMS,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,QAAMa,aAAa,GAClB,uBAAY,sBAAZ,EAAoCb,IAApC,EAA4C,CAA5C,KACAS,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAFD;AAGA,QAAMI,cAAc,GACnB,uBAAY,uBAAZ,EAAqCd,IAArC,EAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;AAGA,SAAOG,aAAa,IAAIC,cAAxB;AACA;;AAED,SAASC,yBAAT,CAAoCf,IAApC,EAA2C;AAC1C,QAAMS,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,QAAMa,aAAa,GAClB,uBAAY,sBAAZ,EAAoCb,IAApC,EAA4C,CAA5C,KACAS,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAFD;AAGA,QAAMI,cAAc,GACnB,uBAAY,uBAAZ,EAAqCd,IAArC,EAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;;AAGA,MAAK,CAAEG,aAAP,EAAuB;AACtB,WAAO,cAAI,aAAJ,CAAP;AACA;;AACD,MAAK,CAAEC,cAAP,EAAwB;AACvB,WAAO,cAAI,YAAJ,CAAP;AACA;;AACD,SAAO,cAAI,YAAJ,CAAP;AACA;;AAED,SAASN,0BAAT,CAAqCR,IAArC,EAA2CgB,OAA3C,EAAqD;AACpD,QAAMC,OAAO,GAAG,uBAAY,0BAAZ,EAAwCjB,IAAxC,EAAgD,CAAhD,CAAhB;;AACA,MAAK,CAAEiB,OAAP,EAAiB;AAChB,WAAO,KAAP;AACA;;AACD,MAAK,CAAEjB,IAAF,IAAUgB,OAAO,KAAK,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AACD,QAAMP,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,SAAOS,QAAQ,CAACC,QAAT,CAAmB,eAAnB,CAAP;AACA;;AAED,SAASQ,0BAAT,CAAqClB,IAArC,EAA2CgB,OAA3C,EAAqD;AACpD,QAAMC,OAAO,GAAG,uBAAY,0BAAZ,EAAwCjB,IAAxC,EAAgD,CAAhD,CAAhB;;AACA,MAAK,CAAEiB,OAAP,EAAiB;AAChB,WAAO,KAAP;AACA;;AACD,MAAK,CAAEjB,IAAF,IAAUgB,OAAO,KAAK,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AACD,QAAMP,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,SAAOS,QAAQ,CAACC,QAAT,CAAmB,eAAnB,CAAP;AACA;;AAED,SAASS,2BAAT,CAAsCnB,IAAtC,EAA4CgB,OAA5C,EAAsD;AACrD;AACA;AACA;AACA,SAAO,CAAEhB,IAAF,IAAUgB,OAAO,KAAK,MAA7B;AACA;;AAED,SAASI,iBAAT,CAA4BC,IAA5B,EAAkCC,SAAlC,EAA8C;AAC7C,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,qBAAUH,IAAV,EAAgBC,SAAhB,CAA5B;AACA,QAAM,CAAEG,SAAF,IAAgB,qBAAUJ,IAAV,EAAgBC,SAAhB,EAA2B,MAA3B,CAAtB;;AACA,QAAMI,QAAQ,GAAG,MAAM,CAAC,CAAED,SAA1B;;AACA,QAAME,UAAU,GAAG,MAAMH,QAAQ,CAAEI,SAAF,CAAjC;;AACA,SAAO,CAAEL,KAAF,EAASC,QAAT,EAAmBE,QAAnB,EAA6BC,UAA7B,CAAP;AACA;;AAED,SAASE,oBAAT,CAA+BR,IAA/B,EAAqCC,SAArC,EAAiD;AAChD,QAAM,CAAEQ,QAAF,EAAYC,gBAAZ,IAAiC,qBAAUV,IAAV,EAAgBC,SAAhB,CAAvC;AACA,QAAM,CAAEG,SAAF,IAAgB,qBAAUJ,IAAV,EAAgBC,SAAhB,EAA2B,MAA3B,CAAtB;;AACA,QAAMU,WAAW,GAAG,MAAM,CAAC,CAAEP,SAA7B;;AACA,QAAMQ,aAAa,GAAG,MAAMF,gBAAgB,CAAEH,SAAF,CAA5C;;AACA,QAAMM,WAAW,GAAG,CAAEC,QAAF,EAAYC,QAAZ,KAA0B;AAC7C,QAAK,CAAC,EAAEA,QAAF,aAAEA,QAAF,eAAEA,QAAQ,CAAEC,IAAZ,CAAN,EAAyB;AACxBF,MAAAA,QAAQ,GAAI,wBAAwBC,QAAzB,aAAyBA,QAAzB,uBAAyBA,QAAQ,CAAEC,IAAM,EAApD;AACA;;AACDN,IAAAA,gBAAgB,CAAEI,QAAF,CAAhB;AACA,GALD;;AAOA,SAAO;AACNL,IAAAA,QADM;AAENI,IAAAA,WAFM;AAGNF,IAAAA,WAHM;AAINC,IAAAA;AAJM,GAAP;AAMA;;AAED,SAASK,iBAAT,CAA4BC,MAA5B,EAAoCvC,IAApC,EAA2C;AAC1C,QAAM,CAAEwC,SAAF,EAAaC,YAAb,IAA8B,qBACnCF,MAAM,GAAG,sBAD0B,EAEnCvC,IAFmC,CAApC;AAIA,QAAM,CAAE0C,aAAF,IAAoB,qBACzBH,MAAM,GAAG,sBADgB,EAEzBvC,IAFyB,EAGzB,MAHyB,CAA1B;AAKA,QAAM,CAAE2C,UAAF,EAAcC,aAAd,IAAgC,qBACrCL,MAAM,GAAG,uBAD4B,EAErCvC,IAFqC,CAAtC;AAIA,QAAM,CAAE6C,cAAF,IAAqB,qBAC1BN,MAAM,GAAG,uBADiB,EAE1BvC,IAF0B,EAG1B,MAH0B,CAA3B;;AAKA,QAAMK,iBAAiB,GAAG,MAAM,CAAC,CAAEqC,aAAH,IAAoB,CAAC,CAAEG,cAAvD;;AACA,QAAMC,mBAAmB,GAAG,MAAM;AACjCL,IAAAA,YAAY,CAAEb,SAAF,CAAZ;AACAgB,IAAAA,aAAa,CAAEhB,SAAF,CAAb;AACA,GAHD;;AAIA,SAAO;AACNY,IAAAA,SADM;AAENC,IAAAA,YAFM;AAGNE,IAAAA,UAHM;AAINC,IAAAA,aAJM;AAKNvC,IAAAA,iBALM;AAMNyC,IAAAA;AANM,GAAP;AAQA;;AAEc,SAASC,eAAT,OAA4D;AAAA,MAAlC;AAAE/C,IAAAA,IAAF;AAAQgB,IAAAA,OAAR;AAAiBgC,IAAAA;AAAjB,GAAkC;AAC1E,QAAMvC,QAAQ,GAAG,2CAAgCT,IAAhC,CAAjB;AACA,MAAIuC,MAAM,GAAG,EAAb;;AACA,MAAKvB,OAAO,KAAK,SAAjB,EAA6B;AAC5BuB,IAAAA,MAAM,GAAI,YAAYS,YAAc,GAApC;AACA,GAFD,MAEO,IAAKhC,OAAO,IAAIA,OAAO,KAAK,MAA5B,EAAqC;AAC3CuB,IAAAA,MAAM,GAAI,YAAYvB,OAAS,GAA/B;AACA;;AACD,QAAM,CAAEiC,SAAF,IAAgB,uBAAY,sBAAZ,EAAoCjD,IAApC,CAAtB;AAEA,QAAMkD,sBAAsB,GAAG,CAAE,uBAChC,2BADgC,EAEhClD,IAFgC,EAG9B,CAH8B,CAAjC;AAIA,QAAM,CAAEW,YAAF,IAAmB,uBAAY,yBAAZ,EAAuCX,IAAvC,CAAzB;AACA,QAAMa,aAAa,GAClB,uBAAY,sBAAZ,EAAoCb,IAApC,EAA4C,CAA5C,KACAS,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAFD;AAGA,QAAMI,cAAc,GACnB,uBAAY,uBAAZ,EAAqCd,IAArC,EAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;AAGA,QAAMyC,oBAAoB,GAAGjD,uBAAuB,CAAEF,IAAF,CAApD;AACA,QAAMoD,oBAAoB,GAAGhD,uBAAuB,CAAEJ,IAAF,CAApD;AACA,QAAMqD,oBAAoB,GAAG/C,uBAAuB,CAAEN,IAAF,CAApD;AACA,QAAMsD,sBAAsB,GAAGvC,yBAAyB,CAAEf,IAAF,CAAxD;AACA,QAAMuD,uBAAuB,GAAG/C,0BAA0B,CAAER,IAAF,EAAQgB,OAAR,CAA1D;AACA,QAAMwC,uBAAuB,GAAGtC,0BAA0B,CAAElB,IAAF,EAAQgB,OAAR,CAA1D;AACA,QAAMyC,wBAAwB,GAAGtC,2BAA2B,CAC3DnB,IAD2D,EAE3DgB,OAF2D,CAA5D;AAKA;;AACA,MAAI0C,kBAAkB,GAAGjD,QAAQ,CAACC,QAAT,CAAmB,UAAnB,CAAzB;;AACA,MAAKM,OAAO,KAAK,SAAZ,IAAyBgC,YAAY,KAAK,SAA/C,EAA2D;AAC1DU,IAAAA,kBAAkB,GAAG,KAArB;AACA;;AAED,QAAM,CAAEC,UAAF,EAAcC,aAAd,EAA6B3D,aAA7B,EAA4C4D,eAA5C,IACLzC,iBAAiB,CAAEmB,MAAM,GAAG,uBAAX,EAAoCvC,IAApC,CADlB;AAEA,QAAM;AAAE8B,IAAAA,QAAF;AAAYI,IAAAA,WAAZ;AAAyBF,IAAAA,WAAzB;AAAsCC,IAAAA;AAAtC,MACLJ,oBAAoB,CAAEU,MAAM,GAAG,qBAAX,EAAkCvC,IAAlC,CADrB;AAEA,QAAM;AACLwC,IAAAA,SADK;AAELC,IAAAA,YAFK;AAGLE,IAAAA,UAHK;AAILC,IAAAA,aAJK;AAKLvC,IAAAA,iBALK;AAMLyC,IAAAA;AANK,MAOFR,iBAAiB,CAAEC,MAAF,EAAUvC,IAAV,CAPrB;AAQA,QAAM,CAAE8D,UAAF,EAAcC,aAAd,EAA6B5D,aAA7B,EAA4C6D,eAA5C,IACL5C,iBAAiB,CAAEmB,MAAM,GAAG,uBAAX,EAAoCvC,IAApC,CADlB;AAEA,QAAM,CACLiE,aADK,EAELC,gBAFK,EAGL3D,gBAHK,EAIL4D,kBAJK,IAKF/C,iBAAiB,CAAEmB,MAAM,GAAG,0BAAX,EAAuCvC,IAAvC,CALrB;AAMA,QAAM,CACLoE,aADK,EAELC,gBAFK,EAGLC,gBAHK,EAILC,kBAJK,IAKFnD,iBAAiB,CAAEmB,MAAM,GAAG,0BAAX,EAAuCvC,IAAvC,CALrB;AAMA,QAAM,CACLwE,cADK,EAELC,iBAFK,EAGLC,iBAHK,EAILC,mBAJK,IAKFvD,iBAAiB,CAAEmB,MAAM,GAAG,2BAAX,EAAwCvC,IAAxC,CALrB;;AAOA,QAAM4E,QAAQ,GAAG,MAAM;AACtBf,IAAAA,eAAe;AACf5B,IAAAA,aAAa;AACba,IAAAA,mBAAmB;AACnBkB,IAAAA,eAAe;AACfG,IAAAA,kBAAkB;AAClBI,IAAAA,kBAAkB;AAClB,GAPD;;AASA,SACC,4BAAC,oCAAD;AAAY,IAAA,KAAK,EAAG,cAAI,YAAJ,CAApB;AAAyC,IAAA,QAAQ,EAAGK;AAApD,KACGzB,oBAAoB,IACrB,4BAAC,wCAAD;AACC,IAAA,KAAK,EAAG,cAAI,aAAJ,CADT;AAEC,IAAA,QAAQ,EAAGlD,aAFZ;AAGC,IAAA,UAAU,EAAG4D,eAHd;AAIC,IAAA,gBAAgB;AAJjB,KAMC,4BAAC,4CAAD;AACC,IAAA,YAAY,EAAGlD,YADhB;AAEC,IAAA,KAAK,EAAGgD,UAFT;AAGC,IAAA,QAAQ,EAAGC,aAHZ;AAIC,IAAA,IAAI,EAAC,kBAJN;AAKC,IAAA,uBAAuB;AALxB,IAND,CAFF,EAiBGF,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,KAAK,EAAG,cAAI,WAAJ,CADT;AAEC,IAAA,QAAQ,EAAG1B,WAFZ;AAGC,IAAA,UAAU,EAAGC,aAHd;AAIC,IAAA,gBAAgB;AAJjB,KAMC,4BAAC,0BAAD;AACC,IAAA,KAAK,EAAGH,QADT;AAEC,IAAA,QAAQ,EAAGI,WAFZ;AAGC,IAAA,SAAS,EAAGe,SAHb;AAIC,IAAA,sBAAsB,EAAGC,sBAJ1B;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,UAAU,MANX;AAOC,IAAA,IAAI,EAAC,kBAPN;AAQC,IAAA,uBAAuB;AARxB,IAND,CAlBF,EAoCGG,oBAAoB,IACrB,4BAAC,wCAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAGC,sBAFT;AAGC,IAAA,QAAQ,EAAGjD,iBAHZ;AAIC,IAAA,UAAU,EAAGyC,mBAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,4BAAC,gDAAD;AACC,IAAA,KAAK,EAAG;AACPN,MAAAA,SADO;AAEPG,MAAAA;AAFO,KADT;AAKC,IAAA,QAAQ,EAAG,SAGJ;AAAA,UAHM;AACZH,QAAAA,SAAS,EAAEqC,YADC;AAEZlC,QAAAA,UAAU,EAAEmC;AAFA,OAGN;AACNrC,MAAAA,YAAY,CAAEoC,YAAF,CAAZ;AACAjC,MAAAA,aAAa,CAAEkC,aAAF,CAAb;AACA,KAXF;AAYC,IAAA,aAAa,EAAGjE,aAZjB;AAaC,IAAA,cAAc,EAAGC,cAblB;AAcC,IAAA,IAAI,EAAC,kBAdN;AAeC,IAAA,uBAAuB;AAfxB,IAPD,CArCF,EA+DGsC,oBAAoB,IACrB,4BAAC,wCAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAG,cAAI,aAAJ,CAFT;AAGC,IAAA,QAAQ,EAAGjD,aAHZ;AAIC,IAAA,UAAU,EAAG6D,eAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,4BAAC,8BAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,oBAAoB,EAAC,MAFtB;AAGC,IAAA,KAAK,EAAGF,UAHT;AAIC,IAAA,QAAQ,EAAGC,aAJZ;AAKC,IAAA,IAAI,EAAC;AALN,IAPD,CAhEF,EAgFGR,uBAAuB,IACxB,4BAAC,wCAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CAFT;AAGC,IAAA,QAAQ,EAAGhD,gBAHZ;AAIC,IAAA,UAAU,EAAG4D,kBAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,4BAAC,+CAAD;AACC,IAAA,KAAK,EAAGF,aADT;AAEC,IAAA,QAAQ,EAAGC,gBAFZ;AAGC,IAAA,IAAI,EAAC,kBAHN;AAIC,IAAA,oBAAoB,EAAC;AAJtB,IAPD,CAjFF,EAgGGV,uBAAuB,IACxB,4BAAC,wCAAD;AACC,IAAA,KAAK,EAAG,cAAI,aAAJ,CADT;AAEC,IAAA,QAAQ,EAAGc,gBAFZ;AAGC,IAAA,UAAU,EAAGC,kBAHd;AAIC,IAAA,gBAAgB;AAJjB,KAMC,4BAAC,+CAAD;AACC,IAAA,KAAK,EAAGH,aADT;AAEC,IAAA,QAAQ,EAAGC,gBAFZ;AAGC,IAAA,QAAQ,MAHT;AAIC,IAAA,OAAO,MAJR;AAKC,IAAA,IAAI,EAAC,kBALN;AAMC,IAAA,uBAAuB;AANxB,IAND,CAjGF,EAiHGZ,wBAAwB,IACzB,4BAAC,wCAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAG,cAAI,iBAAJ,CAFT;AAGC,IAAA,QAAQ,EAAGiB,iBAHZ;AAIC,IAAA,UAAU,EAAGC,mBAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,4BAAC,gDAAD;AACC,IAAA,KAAK,EAAGH,cADT;AAEC,IAAA,QAAQ,EAAGC,iBAFZ;AAGC,IAAA,IAAI,EAAC,kBAHN;AAIC,IAAA,oBAAoB,EAAC;AAJtB,IAPD,CAlHF,CADD;AAoIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tLineHeightControl,\n\t__experimentalFontFamilyControl as FontFamilyControl,\n\t__experimentalFontAppearanceControl as FontAppearanceControl,\n\t__experimentalLetterSpacingControl as LetterSpacingControl,\n\t__experimentalTextTransformControl as TextTransformControl,\n\t__experimentalTextDecorationControl as TextDecorationControl,\n} from '@wordpress/block-editor';\nimport {\n\tFontSizePicker,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nexport function useHasTypographyPanel( name ) {\n\tconst hasFontFamily = useHasFontFamilyControl( name );\n\tconst hasLineHeight = useHasLineHeightControl( name );\n\tconst hasFontAppearance = useHasAppearanceControl( name );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( name );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\n}\n\nfunction useHasFontFamilyControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\treturn supports.includes( 'fontFamily' ) && !! fontFamilies?.length;\n}\n\nfunction useHasLineHeightControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'typography.lineHeight', name )[ 0 ] &&\n\t\tsupports.includes( 'lineHeight' )\n\t);\n}\n\nfunction useHasAppearanceControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\treturn hasFontStyles || hasFontWeights;\n}\n\nfunction useAppearanceControlLabel( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( name, element ) {\n\tconst setting = useSetting( 'typography.letterSpacing', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'letterSpacing' );\n}\n\nfunction useHasTextTransformControl( name, element ) {\n\tconst setting = useSetting( 'typography.textTransform', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'textTransform' );\n}\n\nfunction useHasTextDecorationControl( name, element ) {\n\t// This is an exception for link elements.\n\t// We shouldn't allow other blocks or elements to set textDecoration\n\t// because this will be inherited by their children.\n\treturn ! name && element === 'link';\n}\n\nfunction useStyleWithReset( path, blockName ) {\n\tconst [ style, setStyle ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasStyle = () => !! userStyle;\n\tconst resetStyle = () => setStyle( undefined );\n\treturn [ style, setStyle, hasStyle, resetStyle ];\n}\n\nfunction useFontSizeWithReset( path, blockName ) {\n\tconst [ fontSize, setStyleCallback ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasFontSize = () => !! userStyle;\n\tconst resetFontSize = () => setStyleCallback( undefined );\n\tconst setFontSize = ( newValue, metadata ) => {\n\t\tif ( !! metadata?.slug ) {\n\t\t\tnewValue = `var:preset|font-size|${ metadata?.slug }`;\n\t\t}\n\t\tsetStyleCallback( newValue );\n\t};\n\n\treturn {\n\t\tfontSize,\n\t\tsetFontSize,\n\t\thasFontSize,\n\t\tresetFontSize,\n\t};\n}\n\nfunction useFontAppearance( prefix, name ) {\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ userFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ userFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname,\n\t\t'user'\n\t);\n\tconst hasFontAppearance = () => !! userFontStyle || !! userFontWeight;\n\tconst resetFontAppearance = () => {\n\t\tsetFontStyle( undefined );\n\t\tsetFontWeight( undefined );\n\t};\n\treturn {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t};\n}\n\nexport default function TypographyPanel( { name, element, headingLevel } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\n\tconst disableCustomFontSizes = ! useSetting(\n\t\t'typography.customFontSize',\n\t\tname\n\t)[ 0 ];\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( name );\n\tconst hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst appearanceControlLabel = useAppearanceControlLabel( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\n\tconst hasTextDecorationControl = useHasTextDecorationControl(\n\t\tname,\n\t\telement\n\t);\n\n\t/* Disable font size controls when the option to style all headings is selected. */\n\tlet hasFontSizeEnabled = supports.includes( 'fontSize' );\n\tif ( element === 'heading' && headingLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontFamily', name );\n\tconst { fontSize, setFontSize, hasFontSize, resetFontSize } =\n\t\tuseFontSizeWithReset( prefix + 'typography.fontSize', name );\n\tconst {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t} = useFontAppearance( prefix, name );\n\tconst [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =\n\t\tuseStyleWithReset( prefix + 'typography.lineHeight', name );\n\tconst [\n\t\tletterSpacing,\n\t\tsetLetterSpacing,\n\t\thasLetterSpacing,\n\t\tresetLetterSpacing,\n\t] = useStyleWithReset( prefix + 'typography.letterSpacing', name );\n\tconst [\n\t\ttextTransform,\n\t\tsetTextTransform,\n\t\thasTextTransform,\n\t\tresetTextTransform,\n\t] = useStyleWithReset( prefix + 'typography.textTransform', name );\n\tconst [\n\t\ttextDecoration,\n\t\tsetTextDecoration,\n\t\thasTextDecoration,\n\t\tresetTextDecoration,\n\t] = useStyleWithReset( prefix + 'typography.textDecoration', name );\n\n\tconst resetAll = () => {\n\t\tresetFontFamily();\n\t\tresetFontSize();\n\t\tresetFontAppearance();\n\t\tresetLineHeight();\n\t\tresetLetterSpacing();\n\t\tresetTextTransform();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font family' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\tfontStyle: newFontStyle,\n\t\t\t\t\t\t\tfontWeight: newFontWeight,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tsetFontStyle( newFontStyle );\n\t\t\t\t\t\t\tsetFontWeight( newFontWeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextDecorationControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Text decoration' ) }\n\t\t\t\t\thasValue={ hasTextDecoration }\n\t\t\t\t\tonDeselect={ resetTextDecoration }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextDecorationControl\n\t\t\t\t\t\tvalue={ textDecoration }\n\t\t\t\t\t\tonChange={ setTextDecoration }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["useHasTypographyPanel","name","hasFontFamily","useHasFontFamilyControl","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","fontFamilies","length","hasFontStyles","hasFontWeights","useAppearanceControlLabel","element","setting","useHasTextTransformControl","useHasTextDecorationControl","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontSizeWithReset","fontSize","setStyleCallback","hasFontSize","resetFontSize","setFontSize","newValue","metadata","slug","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","variationPath","fontSizes","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasTextDecorationControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","textDecoration","setTextDecoration","hasTextDecoration","resetTextDecoration","resetAll","newFontStyle","newFontWeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tLineHeightControl,\n\t__experimentalFontFamilyControl as FontFamilyControl,\n\t__experimentalFontAppearanceControl as FontAppearanceControl,\n\t__experimentalLetterSpacingControl as LetterSpacingControl,\n\t__experimentalTextTransformControl as TextTransformControl,\n\t__experimentalTextDecorationControl as TextDecorationControl,\n} from '@wordpress/block-editor';\nimport {\n\tFontSizePicker,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nexport function useHasTypographyPanel( name ) {\n\tconst hasFontFamily = useHasFontFamilyControl( name );\n\tconst hasLineHeight = useHasLineHeightControl( name );\n\tconst hasFontAppearance = useHasAppearanceControl( name );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( name );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\n}\n\nfunction useHasFontFamilyControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\treturn supports.includes( 'fontFamily' ) && !! fontFamilies?.length;\n}\n\nfunction useHasLineHeightControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'typography.lineHeight', name )[ 0 ] &&\n\t\tsupports.includes( 'lineHeight' )\n\t);\n}\n\nfunction useHasAppearanceControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\treturn hasFontStyles || hasFontWeights;\n}\n\nfunction useAppearanceControlLabel( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( name, element ) {\n\tconst setting = useSetting( 'typography.letterSpacing', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'letterSpacing' );\n}\n\nfunction useHasTextTransformControl( name, element ) {\n\tconst setting = useSetting( 'typography.textTransform', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'textTransform' );\n}\n\nfunction useHasTextDecorationControl( name, element ) {\n\t// This is an exception for link elements.\n\t// We shouldn't allow other blocks or elements to set textDecoration\n\t// because this will be inherited by their children.\n\treturn ! name && element === 'link';\n}\n\nfunction useStyleWithReset( path, blockName ) {\n\tconst [ style, setStyle ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasStyle = () => !! userStyle;\n\tconst resetStyle = () => setStyle( undefined );\n\treturn [ style, setStyle, hasStyle, resetStyle ];\n}\n\nfunction useFontSizeWithReset( path, blockName ) {\n\tconst [ fontSize, setStyleCallback ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasFontSize = () => !! userStyle;\n\tconst resetFontSize = () => setStyleCallback( undefined );\n\tconst setFontSize = ( newValue, metadata ) => {\n\t\tif ( !! metadata?.slug ) {\n\t\t\tnewValue = `var:preset|font-size|${ metadata?.slug }`;\n\t\t}\n\t\tsetStyleCallback( newValue );\n\t};\n\n\treturn {\n\t\tfontSize,\n\t\tsetFontSize,\n\t\thasFontSize,\n\t\tresetFontSize,\n\t};\n}\n\nfunction useFontAppearance( prefix, name ) {\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ userFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ userFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname,\n\t\t'user'\n\t);\n\tconst hasFontAppearance = () => !! userFontStyle || !! userFontWeight;\n\tconst resetFontAppearance = () => {\n\t\tsetFontStyle( undefined );\n\t\tsetFontWeight( undefined );\n\t};\n\treturn {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t};\n}\n\nexport default function TypographyPanel( {\n\tname,\n\telement,\n\theadingLevel,\n\tvariationPath = '',\n} ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\n\tconst disableCustomFontSizes = ! useSetting(\n\t\t'typography.customFontSize',\n\t\tname\n\t)[ 0 ];\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( name );\n\tconst hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst appearanceControlLabel = useAppearanceControlLabel( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\n\tconst hasTextDecorationControl = useHasTextDecorationControl(\n\t\tname,\n\t\telement\n\t);\n\n\t/* Disable font size controls when the option to style all headings is selected. */\n\tlet hasFontSizeEnabled = supports.includes( 'fontSize' );\n\tif ( element === 'heading' && headingLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =\n\t\tuseStyleWithReset(\n\t\t\tvariationPath + prefix + 'typography.fontFamily',\n\t\t\tname\n\t\t);\n\tconst { fontSize, setFontSize, hasFontSize, resetFontSize } =\n\t\tuseFontSizeWithReset(\n\t\t\tvariationPath + prefix + 'typography.fontSize',\n\t\t\tname\n\t\t);\n\tconst {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t} = useFontAppearance( variationPath + prefix, name );\n\tconst [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =\n\t\tuseStyleWithReset(\n\t\t\tvariationPath + prefix + 'typography.lineHeight',\n\t\t\tname\n\t\t);\n\tconst [\n\t\tletterSpacing,\n\t\tsetLetterSpacing,\n\t\thasLetterSpacing,\n\t\tresetLetterSpacing,\n\t] = useStyleWithReset(\n\t\tvariationPath + prefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [\n\t\ttextTransform,\n\t\tsetTextTransform,\n\t\thasTextTransform,\n\t\tresetTextTransform,\n\t] = useStyleWithReset(\n\t\tvariationPath + prefix + 'typography.textTransform',\n\t\tname\n\t);\n\tconst [\n\t\ttextDecoration,\n\t\tsetTextDecoration,\n\t\thasTextDecoration,\n\t\tresetTextDecoration,\n\t] = useStyleWithReset(\n\t\tvariationPath + prefix + 'typography.textDecoration',\n\t\tname\n\t);\n\n\tconst resetAll = () => {\n\t\tresetFontFamily();\n\t\tresetFontSize();\n\t\tresetFontAppearance();\n\t\tresetLineHeight();\n\t\tresetLetterSpacing();\n\t\tresetTextTransform();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font family' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\tfontStyle: newFontStyle,\n\t\t\t\t\t\t\tfontWeight: newFontWeight,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tsetFontStyle( newFontStyle );\n\t\t\t\t\t\t\tsetFontWeight( newFontWeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextDecorationControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Text decoration' ) }\n\t\t\t\t\thasValue={ hasTextDecoration }\n\t\t\t\t\tonDeselect={ resetTextDecoration }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextDecorationControl\n\t\t\t\t\t\tvalue={ textDecoration }\n\t\t\t\t\t\tonChange={ setTextDecoration }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}

package/build/components/global-styles/typography-utils.js

@@ -31,13 +31,23 @@ var _blockEditor = require("@wordpress/block-editor");
  * @property {boolean|FluidPreset|undefined} fluid A font size slug
  */
 
+/**
+ * @typedef {Object} TypographySettings
+ * @property {?string|?number} size              A default font size.
+ * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ */
+
 /**
  * Returns a font-size value based on a given font-size preset.
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
- * @param {Preset}  preset
- * @param {Object}  typographySettings
- * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
+ * @param {Preset}                     preset
+ * @param {Object}                     typographySettings
+ * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
@@ -56,7 +66,7 @@ function getTypographyFontSizeValue(preset, typographySettings) {
     return defaultSize;
   }
 
-  if (true !== (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid)) {
+  if (!(typographySettings !== null && typographySettings !== void 0 && typographySettings.fluid) || typeof (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid) === 'object' && Object.keys(typographySettings.fluid).length === 0) {
     return defaultSize;
   } // A font size has explicitly bypassed fluid calculations.
 
@@ -65,10 +75,12 @@ function getTypographyFontSizeValue(preset, typographySettings) {
     return defaultSize;
   }
 
+  const fluidTypographySettings = typeof (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid) === 'object' ? typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid : {};
   const fluidFontSizeValue = (0, _blockEditor.getComputedFluidTypographyValue)({
     minimumFontSize: preset === null || preset === void 0 ? void 0 : (_preset$fluid = preset.fluid) === null || _preset$fluid === void 0 ? void 0 : _preset$fluid.min,
     maximumFontSize: preset === null || preset === void 0 ? void 0 : (_preset$fluid2 = preset.fluid) === null || _preset$fluid2 === void 0 ? void 0 : _preset$fluid2.max,
-    fontSize: defaultSize
+    fontSize: defaultSize,
+    minimumFontSizeLimit: fluidTypographySettings === null || fluidTypographySettings === void 0 ? void 0 : fluidTypographySettings.minFontSize
   });
 
   if (!!fluidFontSizeValue) {

package/build/components/global-styles/typography-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","fluidFontSizeValue","minimumFontSize","min","maximumFontSize","max","fontSize"],"mappings":";;;;;;;AASA;;AATA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,0BAAT,CAAqCC,MAArC,EAA6CC,kBAA7C,EAAkE;AAAA;;AACxE,QAAM;AAAEC,IAAAA,IAAI,EAAEC;AAAR,MAAwBH,MAA9B;AAEA;AACD;AACA;AACA;;AACC,MAAK,CAAEG,WAAF,IAAiB,QAAQA,WAA9B,EAA4C;AAC3C,WAAOA,WAAP;AACA;;AAED,MAAK,UAASF,kBAAT,aAASA,kBAAT,uBAASA,kBAAkB,CAAEG,KAA7B,CAAL,EAA0C;AACzC,WAAOD,WAAP;AACA,GAbuE,CAexE;;;AACA,MAAK,WAAUH,MAAV,aAAUA,MAAV,uBAAUA,MAAM,CAAEI,KAAlB,CAAL,EAA+B;AAC9B,WAAOD,WAAP;AACA;;AAED,QAAME,kBAAkB,GAAG,kDAAiC;AAC3DC,IAAAA,eAAe,EAAEN,MAAF,aAAEA,MAAF,wCAAEA,MAAM,CAAEI,KAAV,kDAAE,cAAeG,GAD2B;AAE3DC,IAAAA,eAAe,EAAER,MAAF,aAAEA,MAAF,yCAAEA,MAAM,CAAEI,KAAV,mDAAE,eAAeK,GAF2B;AAG3DC,IAAAA,QAAQ,EAAEP;AAHiD,GAAjC,CAA3B;;AAMA,MAAK,CAAC,CAAEE,kBAAR,EAA6B;AAC5B,WAAOA,kBAAP;AACA;;AAED,SAAOF,WAAP;AACA","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * WordPress dependencies\n */\nimport { getComputedFluidTypographyValue } from '@wordpress/block-editor';\n\n/**\n * @typedef {Object} FluidPreset\n * @property {string|undefined}  max A maximum font size value.\n * @property {?string|undefined} min A minimum font size value.\n */\n\n/**\n * @typedef {Object} Preset\n * @property {?string|?number}               size  A default font size.\n * @property {string}                        name  A font size name, displayed in the UI.\n * @property {string}                        slug  A font size slug\n * @property {boolean|FluidPreset|undefined} fluid A font size slug\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Preset}  preset\n * @param {Object}  typographySettings\n * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\t/*\n\t * Catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on 0.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize ) {\n\t\treturn defaultSize;\n\t}\n\n\tif ( true !== typographySettings?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","Object","keys","length","fluidTypographySettings","fluidFontSizeValue","minimumFontSize","min","maximumFontSize","max","fontSize","minimumFontSizeLimit","minFontSize"],"mappings":";;;;;;;AASA;;AATA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,0BAAT,CAAqCC,MAArC,EAA6CC,kBAA7C,EAAkE;AAAA;;AACxE,QAAM;AAAEC,IAAAA,IAAI,EAAEC;AAAR,MAAwBH,MAA9B;AAEA;AACD;AACA;AACA;;AACC,MAAK,CAAEG,WAAF,IAAiB,QAAQA,WAA9B,EAA4C;AAC3C,WAAOA,WAAP;AACA;;AAED,MACC,EAAEF,kBAAF,aAAEA,kBAAF,eAAEA,kBAAkB,CAAEG,KAAtB,KACE,QAAOH,kBAAP,aAAOA,kBAAP,uBAAOA,kBAAkB,CAAEG,KAA3B,MAAqC,QAArC,IACDC,MAAM,CAACC,IAAP,CAAaL,kBAAkB,CAACG,KAAhC,EAAwCG,MAAxC,KAAmD,CAHrD,EAIE;AACD,WAAOJ,WAAP;AACA,GAjBuE,CAmBxE;;;AACA,MAAK,WAAUH,MAAV,aAAUA,MAAV,uBAAUA,MAAM,CAAEI,KAAlB,CAAL,EAA+B;AAC9B,WAAOD,WAAP;AACA;;AAED,QAAMK,uBAAuB,GAC5B,QAAOP,kBAAP,aAAOA,kBAAP,uBAAOA,kBAAkB,CAAEG,KAA3B,MAAqC,QAArC,GACGH,kBADH,aACGA,kBADH,uBACGA,kBAAkB,CAAEG,KADvB,GAEG,EAHJ;AAKA,QAAMK,kBAAkB,GAAG,kDAAiC;AAC3DC,IAAAA,eAAe,EAAEV,MAAF,aAAEA,MAAF,wCAAEA,MAAM,CAAEI,KAAV,kDAAE,cAAeO,GAD2B;AAE3DC,IAAAA,eAAe,EAAEZ,MAAF,aAAEA,MAAF,yCAAEA,MAAM,CAAEI,KAAV,mDAAE,eAAeS,GAF2B;AAG3DC,IAAAA,QAAQ,EAAEX,WAHiD;AAI3DY,IAAAA,oBAAoB,EAAEP,uBAAF,aAAEA,uBAAF,uBAAEA,uBAAuB,CAAEQ;AAJY,GAAjC,CAA3B;;AAOA,MAAK,CAAC,CAAEP,kBAAR,EAA6B;AAC5B,WAAOA,kBAAP;AACA;;AAED,SAAON,WAAP;AACA","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * WordPress dependencies\n */\nimport { getComputedFluidTypographyValue } from '@wordpress/block-editor';\n\n/**\n * @typedef {Object} FluidPreset\n * @property {string|undefined}  max A maximum font size value.\n * @property {?string|undefined} min A minimum font size value.\n */\n\n/**\n * @typedef {Object} Preset\n * @property {?string|?number}               size  A default font size.\n * @property {string}                        name  A font size name, displayed in the UI.\n * @property {string}                        slug  A font size slug\n * @property {boolean|FluidPreset|undefined} fluid A font size slug\n */\n\n/**\n * @typedef {Object} TypographySettings\n * @property {?string|?number} size              A default font size.\n * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.\n * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.\n * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.\n * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.\n * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Preset}                     preset\n * @param {Object}                     typographySettings\n * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\t/*\n\t * Catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on 0.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize ) {\n\t\treturn defaultSize;\n\t}\n\n\tif (\n\t\t! typographySettings?.fluid ||\n\t\t( typeof typographySettings?.fluid === 'object' &&\n\t\t\tObject.keys( typographySettings.fluid ).length === 0 )\n\t) {\n\t\treturn defaultSize;\n\t}\n\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidTypographySettings =\n\t\ttypeof typographySettings?.fluid === 'object'\n\t\t\t? typographySettings?.fluid\n\t\t\t: {};\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n"]}

package/build/components/global-styles/ui.js

@@ -15,6 +15,8 @@ var _components = require("@wordpress/components");
 
 var _blocks = require("@wordpress/blocks");
 
+var _data = require("@wordpress/data");
+
 var _screenRoot = _interopRequireDefault(require("./screen-root"));
 
 var _screenBlockList = _interopRequireDefault(require("./screen-block-list"));
@@ -43,6 +45,8 @@ var _screenLayout = _interopRequireDefault(require("./screen-layout"));
 
 var _screenStyleVariations = _interopRequireDefault(require("./screen-style-variations"));
 
+var _screenVariations = require("./screen-variations");
+
 var _screenBorder = _interopRequireDefault(require("./screen-border"));
 
 var _styleBook = _interopRequireDefault(require("../style-book"));
@@ -66,15 +70,61 @@ function GlobalStylesNavigationScreen(_ref) {
   }, props));
 }
 
-function ContextScreens(_ref2) {
+function BlockStyleVariationsScreens(_ref2) {
   let {
     name
   } = _ref2;
-  const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
+  const blockStyleVariations = (0, _data.useSelect)(select => {
+    const {
+      getBlockStyles
+    } = select(_blocks.store);
+    return getBlockStyles(name);
+  }, [name]);
+
+  if (!(blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length)) {
+    return null;
+  }
+
+  return blockStyleVariations.map(variation => (0, _element.createElement)(ContextScreens, {
+    key: variation.name + name,
+    name: name,
+    parentMenu: '/blocks/' + encodeURIComponent(name) + '/variations/' + encodeURIComponent(variation.name)
+  }));
+}
+
+function ContextScreens(_ref3) {
+  let {
+    name,
+    parentMenu = ''
+  } = _ref3;
+  const hasVariationPath = parentMenu.search('variations');
+  const variationPath = hasVariationPath !== -1 ? parentMenu.substring(hasVariationPath).replace('/', '.').concat('', '.') : '';
+  const blockStyleVariations = (0, _data.useSelect)(select => {
+    const {
+      getBlockStyles
+    } = select(_blocks.store);
+    return getBlockStyles(name);
+  }, [name]);
+
+  const BlockStylesNavigationScreens = _ref4 => {
+    let {
+      blockStyles,
+      blockName
+    } = _ref4;
+    return blockStyles.map((style, index) => (0, _element.createElement)(GlobalStylesNavigationScreen, {
+      key: index,
+      path: parentMenu + '/variations/' + style.name
+    }, (0, _element.createElement)(_screenVariations.ScreenVariation, {
+      blockName: blockName,
+      style: style
+    })));
+  };
+
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography'
   }, (0, _element.createElement)(_screenTypography.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography/text'
   }, (0, _element.createElement)(_screenTypographyElement.default, {
@@ -98,7 +148,8 @@ function ContextScreens(_ref2) {
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors'
   }, (0, _element.createElement)(_screenColors.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/palette'
   }, (0, _element.createElement)(_screenColorPalette.default, {
@@ -106,38 +157,48 @@ function ContextScreens(_ref2) {
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/background'
   }, (0, _element.createElement)(_screenBackgroundColor.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/text'
   }, (0, _element.createElement)(_screenTextColor.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/link'
   }, (0, _element.createElement)(_screenLinkColor.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/heading'
   }, (0, _element.createElement)(_screenHeadingColor.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/button'
   }, (0, _element.createElement)(_screenButtonColor.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/border'
   }, (0, _element.createElement)(_screenBorder.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, (0, _element.createElement)(_screenLayout.default, {
-    name: name
-  })));
+    name: name,
+    variationPath: variationPath
+  })), !!(blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length) && (0, _element.createElement)(BlockStylesNavigationScreens, {
+    blockStyles: blockStyleVariations,
+    blockName: name
+  }));
 }
 
-function GlobalStylesStyleBook(_ref3) {
+function GlobalStylesStyleBook(_ref5) {
   let {
     onClose
-  } = _ref3;
+  } = _ref5;
   const navigator = (0, _components.__experimentalUseNavigator)();
   const {
     path
@@ -162,11 +223,11 @@ function GlobalStylesStyleBook(_ref3) {
   });
 }
 
-function GlobalStylesUI(_ref4) {
+function GlobalStylesUI(_ref6) {
   let {
     isStyleBookOpened,
     onCloseStyleBook
-  } = _ref4;
+  } = _ref6;
   const blocks = (0, _blocks.getBlockTypes)();
   return (0, _element.createElement)(_components.__experimentalNavigatorProvider, {
     className: "edit-site-global-styles-sidebar__navigator-provider",
@@ -184,8 +245,14 @@ function GlobalStylesUI(_ref4) {
     name: block.name
   }))), (0, _element.createElement)(ContextScreens, null), blocks.map(block => (0, _element.createElement)(ContextScreens, {
     key: 'screens-block-' + block.name,
-    name: block.name
-  })), isStyleBookOpened && (0, _element.createElement)(GlobalStylesStyleBook, {
+    name: block.name,
+    parentMenu: '/blocks/' + encodeURIComponent(block.name)
+  })), blocks.map((block, index) => {
+    return (0, _element.createElement)(BlockStyleVariationsScreens, {
+      key: 'screens-block-styles-' + block.name + index,
+      name: block.name
+    });
+  }), isStyleBookOpened && (0, _element.createElement)(GlobalStylesStyleBook, {
     onClose: onCloseStyleBook
   }), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: "/css"