@wordpress/edit-site 4.15.1-next.4d3b314fd5.0 → 4.17.0

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

@@ -16,6 +16,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _hooks = require("./hooks");
 
+var _typographyUtils = require("./typography-utils");
+
 /**
  * WordPress dependencies
  */
@@ -24,11 +26,18 @@ var _hooks = require("./hooks");
  * Internal dependencies
  */
 function useHasTypographyPanel(name) {
+  const hasFontFamily = useHasFontFamilyControl(name);
   const hasLineHeight = useHasLineHeightControl(name);
   const hasFontAppearance = useHasAppearanceControl(name);
   const hasLetterSpacing = useHasLetterSpacingControl(name);
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  return hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes('fontSize');
+  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes('fontSize');
+}
+
+function useHasFontFamilyControl(name) {
+  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
+  const [fontFamilies] = (0, _hooks.useSetting)('typography.fontFamilies', name);
+  return supports.includes('fontFamily') && !!(fontFamilies !== null && fontFamilies !== void 0 && fontFamilies.length);
 }
 
 function useHasLineHeightControl(name) {
@@ -43,6 +52,22 @@ function useHasAppearanceControl(name) {
   return hasFontStyles || hasFontWeights;
 }
 
+function useAppearanceControlLabel(name) {
+  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
+  const hasFontStyles = (0, _hooks.useSetting)('typography.fontStyle', name)[0] && supports.includes('fontStyle');
+  const hasFontWeights = (0, _hooks.useSetting)('typography.fontWeight', name)[0] && supports.includes('fontWeight');
+
+  if (!hasFontStyles) {
+    return (0, _i18n.__)('Font weight');
+  }
+
+  if (!hasFontWeights) {
+    return (0, _i18n.__)('Font style');
+  }
+
+  return (0, _i18n.__)('Appearance');
+}
+
 function useHasLetterSpacingControl(name, element) {
   const setting = (0, _hooks.useSetting)('typography.letterSpacing', name)[0];
 
@@ -73,122 +98,142 @@ function useHasTextTransformControl(name, element) {
   return supports.includes('textTransform');
 }
 
+function useStyleWithReset(path, blockName) {
+  const [style, setStyle] = (0, _hooks.useStyle)(path, blockName);
+  const [userStyle] = (0, _hooks.useStyle)(path, blockName, 'user');
+
+  const hasStyle = () => !!userStyle;
+
+  const resetStyle = () => setStyle(undefined);
+
+  return [style, setStyle, hasStyle, resetStyle];
+}
+
+function useFontAppearance(prefix, name) {
+  const [fontStyle, setFontStyle] = (0, _hooks.useStyle)(prefix + 'typography.fontStyle', name);
+  const [userFontStyle] = (0, _hooks.useStyle)(prefix + 'typography.fontStyle', name, 'user');
+  const [fontWeight, setFontWeight] = (0, _hooks.useStyle)(prefix + 'typography.fontWeight', name);
+  const [userFontWeight] = (0, _hooks.useStyle)(prefix + 'typography.fontWeight', name, 'user');
+
+  const hasFontAppearance = () => !!userFontStyle || !!userFontWeight;
+
+  const resetFontAppearance = () => {
+    setFontStyle(undefined);
+    setFontWeight(undefined);
+  };
+
+  return {
+    fontStyle,
+    setFontStyle,
+    fontWeight,
+    setFontWeight,
+    hasFontAppearance,
+    resetFontAppearance
+  };
+}
+
 function TypographyPanel(_ref) {
   let {
     name,
-    element
+    element,
+    headingLevel
   } = _ref;
-  const [selectedLevel, setCurrentTab] = (0, _element.useState)('heading');
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   let prefix = '';
 
   if (element === 'heading') {
-    prefix = `elements.${selectedLevel}.`;
+    prefix = `elements.${headingLevel}.`;
   } else if (element && element !== 'text') {
     prefix = `elements.${element}.`;
   }
 
-  const [fontSizes] = (0, _hooks.useSetting)('typography.fontSizes', name);
+  const [fluidTypography] = (0, _hooks.useSetting)('typography.fluid', name);
+  const [fontSizes] = (0, _hooks.useSetting)('typography.fontSizes', name); // Convert static font size values to fluid font sizes if fluidTypography is activated.
+
+  const fontSizesWithFluidValues = fontSizes.map(font => {
+    if (!!fluidTypography) {
+      font.size = (0, _typographyUtils.getTypographyFontSizeValue)(font, {
+        fluid: fluidTypography
+      });
+    }
+
+    return font;
+  });
   const disableCustomFontSizes = !(0, _hooks.useSetting)('typography.customFontSize', name)[0];
   const [fontFamilies] = (0, _hooks.useSetting)('typography.fontFamilies', name);
   const hasFontStyles = (0, _hooks.useSetting)('typography.fontStyle', name)[0] && supports.includes('fontStyle');
   const hasFontWeights = (0, _hooks.useSetting)('typography.fontWeight', name)[0] && supports.includes('fontWeight');
+  const hasFontFamilyEnabled = useHasFontFamilyControl(name);
   const hasLineHeightEnabled = useHasLineHeightControl(name);
   const hasAppearanceControl = useHasAppearanceControl(name);
+  const appearanceControlLabel = useAppearanceControlLabel(name);
   const hasLetterSpacingControl = useHasLetterSpacingControl(name, element);
   const hasTextTransformControl = useHasTextTransformControl(name, element);
   /* Disable font size controls when the option to style all headings is selected. */
 
   let hasFontSizeEnabled = supports.includes('fontSize');
 
-  if (element === 'heading' && selectedLevel === 'heading') {
+  if (element === 'heading' && headingLevel === 'heading') {
     hasFontSizeEnabled = false;
   }
 
-  const [fontFamily, setFontFamily] = (0, _hooks.useStyle)(prefix + 'typography.fontFamily', name);
-  const [fontSize, setFontSize] = (0, _hooks.useStyle)(prefix + 'typography.fontSize', name);
-  const [fontStyle, setFontStyle] = (0, _hooks.useStyle)(prefix + 'typography.fontStyle', name);
-  const [fontWeight, setFontWeight] = (0, _hooks.useStyle)(prefix + 'typography.fontWeight', name);
-  const [lineHeight, setLineHeight] = (0, _hooks.useStyle)(prefix + 'typography.lineHeight', name);
-  const [letterSpacing, setLetterSpacing] = (0, _hooks.useStyle)(prefix + 'typography.letterSpacing', name);
-  const [textTransform, setTextTransform] = (0, _hooks.useStyle)(prefix + 'typography.textTransform', name);
-  const [backgroundColor] = (0, _hooks.useStyle)(prefix + 'color.background', name);
-  const [gradientValue] = (0, _hooks.useStyle)(prefix + 'color.gradient', name);
-  const [color] = (0, _hooks.useStyle)(prefix + 'color.text', name);
-  const extraStyles = element === 'link' ? {
-    textDecoration: 'underline'
-  } : {};
-  return (0, _element.createElement)(_components.PanelBody, {
-    className: "edit-site-typography-panel",
-    initialOpen: true
-  }, (0, _element.createElement)("div", {
-    className: "edit-site-typography-panel__preview",
-    style: {
-      fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
-      color,
-      fontSize,
-      fontStyle,
-      fontWeight,
-      letterSpacing,
-      ...extraStyles
-    }
-  }, "Aa"), (0, _element.createElement)(_components.__experimentalGrid, {
-    columns: 2,
-    rowGap: 16,
-    columnGap: 8
-  }, element === 'heading' && (0, _element.createElement)("div", {
-    className: "edit-site-typography-panel__full-width-control"
-  }, (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
-    label: (0, _i18n.__)('Select heading level'),
-    hideLabelFromVision: true,
-    value: selectedLevel,
-    onChange: setCurrentTab,
-    isBlock: true,
-    size: "__unstable-large",
-    __nextHasNoMarginBottom: true
-  }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "heading"
-    /* translators: 'All' refers to selecting all heading levels 
-    and applying the same style to h1-h6. */
-    ,
-    label: (0, _i18n.__)('All')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "h1",
-    label: (0, _i18n.__)('H1')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "h2",
-    label: (0, _i18n.__)('H2')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "h3",
-    label: (0, _i18n.__)('H3')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "h4",
-    label: (0, _i18n.__)('H4')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "h5",
-    label: (0, _i18n.__)('H5')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "h6",
-    label: (0, _i18n.__)('H6')
-  }))), supports.includes('fontFamily') && (0, _element.createElement)("div", {
-    className: "edit-site-typography-panel__full-width-control"
+  const [fontFamily, setFontFamily, hasFontFamily, resetFontFamily] = useStyleWithReset(prefix + 'typography.fontFamily', name);
+  const [fontSize, setFontSize, hasFontSize, resetFontSize] = useStyleWithReset(prefix + 'typography.fontSize', name);
+  const {
+    fontStyle,
+    setFontStyle,
+    fontWeight,
+    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 resetAll = () => {
+    resetFontFamily();
+    resetFontSize();
+    resetFontAppearance();
+    resetLineHeight();
+    resetLetterSpacing();
+    resetTextTransform();
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Typography'),
+    resetAll: resetAll
+  }, hasFontFamilyEnabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Font family'),
+    hasValue: hasFontFamily,
+    onDeselect: resetFontFamily,
+    isShownByDefault: true
   }, (0, _element.createElement)(_blockEditor.__experimentalFontFamilyControl, {
     fontFamilies: fontFamilies,
     value: fontFamily,
     onChange: setFontFamily,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  })), hasFontSizeEnabled && (0, _element.createElement)("div", {
-    className: "edit-site-typography-panel__full-width-control"
+  })), hasFontSizeEnabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Font size'),
+    hasValue: hasFontSize,
+    onDeselect: resetFontSize,
+    isShownByDefault: true
   }, (0, _element.createElement)(_components.FontSizePicker, {
     value: fontSize,
     onChange: setFontSize,
-    fontSizes: fontSizes,
+    fontSizes: fontSizesWithFluidValues,
     disableCustomFontSizes: disableCustomFontSizes,
+    withReset: false,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  })), hasAppearanceControl && (0, _element.createElement)(_blockEditor.__experimentalFontAppearanceControl, {
+  })), hasAppearanceControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    label: appearanceControlLabel,
+    hasValue: hasFontAppearance,
+    onDeselect: resetFontAppearance,
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalFontAppearanceControl, {
     value: {
       fontStyle,
       fontWeight
@@ -205,19 +250,34 @@ function TypographyPanel(_ref) {
     hasFontWeights: hasFontWeights,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  }), hasLineHeightEnabled && (0, _element.createElement)(_blockEditor.LineHeightControl, {
+  })), hasLineHeightEnabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    label: (0, _i18n.__)('Line height'),
+    hasValue: hasLineHeight,
+    onDeselect: resetLineHeight,
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.LineHeightControl, {
     __nextHasNoMarginBottom: true,
     __unstableInputWidth: "auto",
     value: lineHeight,
     onChange: setLineHeight,
     size: "__unstable-large"
-  }), hasLetterSpacingControl && (0, _element.createElement)(_blockEditor.__experimentalLetterSpacingControl, {
+  })), hasLetterSpacingControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    label: (0, _i18n.__)('Letter spacing'),
+    hasValue: hasLetterSpacing,
+    onDeselect: resetLetterSpacing,
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalLetterSpacingControl, {
     value: letterSpacing,
     onChange: setLetterSpacing,
     size: "__unstable-large",
     __unstableInputWidth: "auto"
-  }), hasTextTransformControl && (0, _element.createElement)("div", {
-    className: "edit-site-typography-panel__full-width-control"
+  })), hasTextTransformControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Letter case'),
+    hasValue: hasTextTransform,
+    onDeselect: resetTextTransform,
+    isShownByDefault: true
   }, (0, _element.createElement)(_blockEditor.__experimentalTextTransformControl, {
     value: textTransform,
     onChange: setTextTransform,
@@ -225,6 +285,6 @@ function TypographyPanel(_ref) {
     isBlock: true,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  }))));
+  })));
 }
 //# sourceMappingURL=typography-panel.js.map

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","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","hasFontStyles","hasFontWeights","element","setting","useHasTextTransformControl","TypographyPanel","selectedLevel","setCurrentTab","prefix","fontSizes","disableCustomFontSizes","fontFamilies","hasLineHeightEnabled","hasAppearanceControl","hasLetterSpacingControl","hasTextTransformControl","hasFontSizeEnabled","fontFamily","setFontFamily","fontSize","setFontSize","fontStyle","setFontStyle","fontWeight","setFontWeight","lineHeight","setLineHeight","letterSpacing","setLetterSpacing","textTransform","setTextTransform","backgroundColor","gradientValue","color","extraStyles","textDecoration","background","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} from '@wordpress/block-editor';\nimport {\n\tPanelBody,\n\tFontSizePicker,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nexport function useHasTypographyPanel( 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\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\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 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\nexport default function TypographyPanel( { name, element } ) {\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ selectedLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\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 hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\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' && selectedLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily ] = useStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ fontSize, setFontSize ] = useStyle(\n\t\tprefix + 'typography.fontSize',\n\t\tname\n\t);\n\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ lineHeight, setLineHeight ] = useStyle(\n\t\tprefix + 'typography.lineHeight',\n\t\tname\n\t);\n\tconst [ letterSpacing, setLetterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ textTransform, setTextTransform ] = useStyle(\n\t\tprefix + 'typography.textTransform',\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\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\n\treturn (\n\t\t<PanelBody className=\"edit-site-typography-panel\" initialOpen={ true }>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-typography-panel__preview\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcolor,\n\t\t\t\t\tfontSize,\n\t\t\t\t\tfontStyle,\n\t\t\t\t\tfontWeight,\n\t\t\t\t\tletterSpacing,\n\t\t\t\t\t...extraStyles,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\tAa\n\t\t\t</div>\n\t\t\t<Grid columns={ 2 } rowGap={ 16 } columnGap={ 8 }>\n\t\t\t\t{ element === 'heading' && (\n\t\t\t\t\t<div className=\"edit-site-typography-panel__full-width-control\">\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"h1\"\n\t\t\t\t\t\t\t\tlabel={ __( 'H1' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"h2\"\n\t\t\t\t\t\t\t\tlabel={ __( 'H2' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"h3\"\n\t\t\t\t\t\t\t\tlabel={ __( 'H3' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"h4\"\n\t\t\t\t\t\t\t\tlabel={ __( 'H4' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"h5\"\n\t\t\t\t\t\t\t\tlabel={ __( 'H5' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"h6\"\n\t\t\t\t\t\t\t\tlabel={ __( 'H6' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ supports.includes( 'fontFamily' ) && (\n\t\t\t\t\t<div className=\"edit-site-typography-panel__full-width-control\">\n\t\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t\t<div className=\"edit-site-typography-panel__full-width-control\">\n\t\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ hasAppearanceControl && (\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) }\n\t\t\t\t{ hasLineHeightEnabled && (\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) }\n\t\t\t\t{ hasLetterSpacingControl && (\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) }\n\t\t\t\t{ hasTextTransformControl && (\n\t\t\t\t\t<div className=\"edit-site-typography-panel__full-width-control\">\n\t\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\t\tshowNone\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</Grid>\n\t\t</PanelBody>\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","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","fluidTypography","fontSizes","fontSizesWithFluidValues","map","font","size","fluid","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","fontSize","setFontSize","hasFontSize","resetFontSize","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","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} 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';\nimport { getTypographyFontSizeValue } from './typography-utils';\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 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 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 [ fluidTypography ] = useSetting( 'typography.fluid', name );\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\n\t// Convert static font size values to fluid font sizes if fluidTypography is activated.\n\tconst fontSizesWithFluidValues = fontSizes.map( ( font ) => {\n\t\tif ( !! fluidTypography ) {\n\t\t\tfont.size = getTypographyFontSizeValue( font, {\n\t\t\t\tfluid: fluidTypography,\n\t\t\t} );\n\t\t}\n\t\treturn font;\n\t} );\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\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\tuseStyleWithReset( 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\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={ fontSizesWithFluidValues }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\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</ToolsPanel>\n\t);\n}\n"]}

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TypographyPreview;
+
+var _element = require("@wordpress/element");
+
+var _hooks = require("./hooks");
+
+/**
+ * Internal dependencies
+ */
+function TypographyPreview(_ref) {
+  let {
+    name,
+    element,
+    headingLevel
+  } = _ref;
+  let prefix = '';
+
+  if (element === 'heading') {
+    prefix = `elements.${headingLevel}.`;
+  } else if (element && element !== 'text') {
+    prefix = `elements.${element}.`;
+  }
+
+  const [fontFamily] = (0, _hooks.useStyle)(prefix + 'typography.fontFamily', name);
+  const [gradientValue] = (0, _hooks.useStyle)(prefix + 'color.gradient', name);
+  const [backgroundColor] = (0, _hooks.useStyle)(prefix + 'color.background', name);
+  const [color] = (0, _hooks.useStyle)(prefix + 'color.text', name);
+  const [fontSize] = (0, _hooks.useStyle)(prefix + 'typography.fontSize', name);
+  const [fontStyle] = (0, _hooks.useStyle)(prefix + 'typography.fontStyle', name);
+  const [fontWeight] = (0, _hooks.useStyle)(prefix + 'typography.fontWeight', name);
+  const [letterSpacing] = (0, _hooks.useStyle)(prefix + 'typography.letterSpacing', name);
+  const extraStyles = element === 'link' ? {
+    textDecoration: 'underline'
+  } : {};
+  return (0, _element.createElement)("div", {
+    className: "edit-site-typography-preview",
+    style: {
+      fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
+      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      color,
+      fontSize,
+      fontStyle,
+      fontWeight,
+      letterSpacing,
+      ...extraStyles
+    }
+  }, "Aa");
+}
+//# sourceMappingURL=typography-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-preview.js"],"names":["TypographyPreview","name","element","headingLevel","prefix","fontFamily","gradientValue","backgroundColor","color","fontSize","fontStyle","fontWeight","letterSpacing","extraStyles","textDecoration","background"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,iBAAT,OAA8D;AAAA,MAAlC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,OAAR;AAAiBC,IAAAA;AAAjB,GAAkC;AAC5E,MAAIC,MAAM,GAAG,EAAb;;AACA,MAAKF,OAAO,KAAK,SAAjB,EAA6B;AAC5BE,IAAAA,MAAM,GAAI,YAAYD,YAAc,GAApC;AACA,GAFD,MAEO,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAA5B,EAAqC;AAC3CE,IAAAA,MAAM,GAAI,YAAYF,OAAS,GAA/B;AACA;;AAED,QAAM,CAAEG,UAAF,IAAiB,qBAAUD,MAAM,GAAG,uBAAnB,EAA4CH,IAA5C,CAAvB;AACA,QAAM,CAAEK,aAAF,IAAoB,qBAAUF,MAAM,GAAG,gBAAnB,EAAqCH,IAArC,CAA1B;AACA,QAAM,CAAEM,eAAF,IAAsB,qBAAUH,MAAM,GAAG,kBAAnB,EAAuCH,IAAvC,CAA5B;AACA,QAAM,CAAEO,KAAF,IAAY,qBAAUJ,MAAM,GAAG,YAAnB,EAAiCH,IAAjC,CAAlB;AACA,QAAM,CAAEQ,QAAF,IAAe,qBAAUL,MAAM,GAAG,qBAAnB,EAA0CH,IAA1C,CAArB;AACA,QAAM,CAAES,SAAF,IAAgB,qBAAUN,MAAM,GAAG,sBAAnB,EAA2CH,IAA3C,CAAtB;AACA,QAAM,CAAEU,UAAF,IAAiB,qBAAUP,MAAM,GAAG,uBAAnB,EAA4CH,IAA5C,CAAvB;AACA,QAAM,CAAEW,aAAF,IAAoB,qBACzBR,MAAM,GAAG,0BADgB,EAEzBH,IAFyB,CAA1B;AAIA,QAAMY,WAAW,GAChBX,OAAO,KAAK,MAAZ,GACG;AACAY,IAAAA,cAAc,EAAE;AADhB,GADH,GAIG,EALJ;AAOA,SACC;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,KAAK,EAAG;AACPT,MAAAA,UAAU,EAAEA,UAAF,aAAEA,UAAF,cAAEA,UAAF,GAAgB,OADnB;AAEPU,MAAAA,UAAU,EAAET,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBC,eAFtB;AAGPC,MAAAA,KAHO;AAIPC,MAAAA,QAJO;AAKPC,MAAAA,SALO;AAMPC,MAAAA,UANO;AAOPC,MAAAA,aAPO;AAQP,SAAGC;AARI;AAFT,UADD;AAiBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nexport default function TypographyPreview( { name, element, headingLevel } ) {\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\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useStyle( prefix + 'typography.fontSize', 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 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\n\treturn (\n\t\t<div\n\t\t\tclassName=\"edit-site-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\tcolor,\n\t\t\t\tfontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tletterSpacing,\n\t\t\t\t...extraStyles,\n\t\t\t} }\n\t\t>\n\t\t\tAa\n\t\t</div>\n\t);\n}\n"]}