@wordpress/edit-site 4.16.0 → 4.18.0

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

@@ -15,22 +15,30 @@ import { useSetting, useStyle } from './hooks';
 import { useGlobalStylesOutput } from './use-global-styles-output';
 const firstFrame = {
   start: {
-    opacity: 1,
-    display: 'block'
+    scale: 1,
+    opacity: 1
   },
   hover: {
-    opacity: 0,
-    display: 'none'
+    scale: 0,
+    opacity: 0
+  }
+};
+const midFrame = {
+  hover: {
+    opacity: 1
+  },
+  start: {
+    opacity: 0.5
   }
 };
 const secondFrame = {
   hover: {
-    opacity: 1,
-    display: 'block'
+    scale: 1,
+    opacity: 1
   },
   start: {
-    opacity: 0,
-    display: 'none'
+    scale: 0,
+    opacity: 0
   }
 };
 const normalizedWidth = 248;
@@ -40,7 +48,8 @@ const normalizedColorSwatchSize = 32;
 const StylesPreview = _ref => {
   let {
     label,
-    isFocused
+    isFocused,
+    withHoverView
   } = _ref;
   const [fontWeight] = useStyle('typography.fontWeight');
   const [fontFamily = 'serif'] = useStyle('typography.fontFamily');
@@ -48,7 +57,6 @@ const StylesPreview = _ref => {
   const [headingFontWeight = fontWeight] = useStyle('elements.h1.typography.fontWeight');
   const [textColor = 'black'] = useStyle('color.text');
   const [headingColor = textColor] = useStyle('elements.h1.color.text');
-  const [linkColor = 'blue'] = useStyle('elements.link.color.text');
   const [backgroundColor = 'white'] = useStyle('color.background');
   const [gradientValue] = useStyle('color.gradient');
   const [styles] = useGlobalStylesOutput();
@@ -73,7 +81,7 @@ const StylesPreview = _ref => {
   const editorStyles = useMemo(() => {
     if (styles) {
       return [...styles, {
-        css: 'body{min-width: 0;padding: 0;border: none;}',
+        css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',
         isGlobalStyles: true
       }];
     }
@@ -100,7 +108,7 @@ const StylesPreview = _ref => {
       cursor: 'pointer'
     },
     initial: "start",
-    animate: (isHovered || isFocused) && !disableMotion ? 'hover' : 'start'
+    animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start'
   }, createElement(motion.div, {
     variants: firstFrame,
     style: {
@@ -114,35 +122,91 @@ const StylesPreview = _ref => {
       height: '100%',
       overflow: 'hidden'
     }
-  }, createElement("div", {
+  }, createElement(motion.div, {
     style: {
       fontFamily: headingFontFamily,
       fontSize: 65 * ratio,
       color: headingColor,
       fontWeight: headingFontWeight
+    },
+    animate: {
+      scale: 1,
+      opacity: 1
+    },
+    initial: {
+      scale: 0.1,
+      opacity: 0
+    },
+    transition: {
+      delay: 0.3,
+      type: 'tween'
     }
   }, "Aa"), createElement(VStack, {
     spacing: 4 * ratio
-  }, highlightedColors.map(_ref3 => {
+  }, highlightedColors.map((_ref3, index) => {
     let {
       slug,
       color
     } = _ref3;
-    return createElement("div", {
+    return createElement(motion.div, {
       key: slug,
       style: {
         height: normalizedColorSwatchSize * ratio,
         width: normalizedColorSwatchSize * ratio,
         background: color,
         borderRadius: normalizedColorSwatchSize * ratio / 2
+      },
+      animate: {
+        scale: 1,
+        opacity: 1
+      },
+      initial: {
+        scale: 0.1,
+        opacity: 0
+      },
+      transition: {
+        delay: index === 1 ? 0.2 : 0.1
       }
     });
   })))), createElement(motion.div, {
-    variants: secondFrame,
+    variants: withHoverView && midFrame,
+    style: {
+      height: '100%',
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      overflow: 'hidden',
+      filter: 'blur(60px)',
+      opacity: 0.1
+    }
+  }, createElement(HStack, {
+    spacing: 0,
+    justify: "flex-start",
     style: {
       height: '100%',
       overflow: 'hidden'
     }
+  }, paletteColors.slice(0, 4).map((_ref4, index) => {
+    let {
+      color
+    } = _ref4;
+    return createElement("div", {
+      key: index,
+      style: {
+        height: '100%',
+        background: color,
+        flexGrow: 1
+      }
+    });
+  }))), createElement(motion.div, {
+    variants: secondFrame,
+    style: {
+      height: '100%',
+      width: '100%',
+      overflow: 'hidden',
+      position: 'absolute',
+      top: 0
+    }
   }, createElement(VStack, {
     spacing: 3 * ratio,
     justify: "center",
@@ -154,43 +218,14 @@ const StylesPreview = _ref => {
     }
   }, label && createElement("div", {
     style: {
-      fontSize: 35 * ratio,
+      fontSize: 40 * ratio,
       fontFamily: headingFontFamily,
       color: headingColor,
       fontWeight: headingFontWeight,
-      lineHeight: '1em'
-    }
-  }, label), createElement(HStack, {
-    spacing: 2 * ratio,
-    justify: "flex-start"
-  }, createElement("div", {
-    style: {
-      fontFamily,
-      fontSize: 24 * ratio,
-      color: textColor
-    }
-  }, "Aa"), createElement("div", {
-    style: {
-      fontFamily,
-      fontSize: 24 * ratio,
-      color: linkColor
+      lineHeight: '1em',
+      textAlign: 'center'
     }
-  }, "Aa")), paletteColors && createElement(HStack, {
-    spacing: 0
-  }, paletteColors.slice(0, 4).map((_ref4, index) => {
-    let {
-      color
-    } = _ref4;
-    return createElement("div", {
-      key: index,
-      style: {
-        height: 10 * ratio,
-        width: 30 * ratio,
-        background: color,
-        flexGrow: 1
-      }
-    });
-  }))))));
+  }, label)))));
 };
 
 export default StylesPreview;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","useSetting","useStyle","useGlobalStylesOutput","firstFrame","start","opacity","display","hover","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","linkColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","map","slug","borderRadius","padding","boxSizing","lineHeight","index","flexGrow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\thover: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\tstart: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map( ( { slug, color } ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 35 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<HStack spacing={ 2 * ratio } justify=\"flex-start\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: linkColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ paletteColors && (\n\t\t\t\t\t\t\t<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: 10 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 30 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","useSetting","useStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","delay","type","map","index","slug","borderRadius","position","top","flexGrow","padding","boxSizing","lineHeight","textAlign"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion && label\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}

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

@@ -10,11 +10,12 @@ import classnames from 'classnames';
  */
 
 import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { useMemo, useContext, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useContext, useState, useEffect, useRef } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __experimentalGrid as Grid, Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -89,16 +90,19 @@ function Variation(_ref) {
     className: "edit-site-global-styles-variations_item-preview"
   }, createElement(StylesPreview, {
     label: variation === null || variation === void 0 ? void 0 : variation.title,
-    isFocused: isFocused
+    isFocused: isFocused,
+    withHoverView: true
   }))));
 }
 
 function ScreenStyleVariations() {
   const {
-    variations
+    variations,
+    mode
   } = useSelect(select => {
     return {
-      variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()
+      variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations(),
+      mode: select(blockEditorStore).__unstableGetEditorMode()
     };
   }, []);
   const withEmptyVariation = useMemo(() => {
@@ -115,10 +119,36 @@ function ScreenStyleVariations() {
       };
     })];
   }, [variations]);
+  const {
+    __unstableSetEditorMode
+  } = useDispatch(blockEditorStore);
+  const shouldRevertInitialMode = useRef(null);
+  useEffect(() => {
+    // ignore changes to zoom-out mode as we explictily change to it on mount.
+    if (mode !== 'zoom-out') {
+      shouldRevertInitialMode.current = false;
+    }
+  }, [mode]); // Intentionality left without any dependency.
+  // This effect should only run the first time the component is rendered.
+  // The effect opens the zoom-out view if it is not open before when applying a style variation.
+
+  useEffect(() => {
+    if (mode !== 'zoom-out') {
+      __unstableSetEditorMode('zoom-out');
+
+      shouldRevertInitialMode.current = true;
+      return () => {
+        // if there were not mode changes revert to the initial mode when unmounting.
+        if (shouldRevertInitialMode.current) {
+          __unstableSetEditorMode(mode);
+        }
+      };
+    }
+  }, []);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     back: "/",
     title: __('Browse styles'),
-    description: __('Choose a different style combination for the theme styles')
+    description: __('Choose a variation to change the look of the site.')
   }), createElement(Card, {
     size: "small",
     isBorderless: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","Card","CardBody","__","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","ScreenStyleVariations","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useDispatch","useMemo","useContext","useState","useEffect","useRef","ENTER","__experimentalGrid","Grid","Card","CardBody","__","blockEditorStore","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","__experimentalGetCurrentThemeGlobalStylesVariations","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

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

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
  */
 
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getTypographyFontSizeValue } from './typography-utils';
 export function useHasTypographyPanel(name) {
   const hasFontFamily = useHasFontFamilyControl(name);
   const hasLineHeight = useHasLineHeightControl(name);
@@ -133,7 +134,18 @@ export default function TypographyPanel(_ref) {
     prefix = `elements.${element}.`;
   }
 
-  const [fontSizes] = useSetting('typography.fontSizes', name);
+  const [fluidTypography] = useSetting('typography.fluid', name);
+  const [fontSizes] = 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 = getTypographyFontSizeValue(font, {
+        fluid: fluidTypography
+      });
+    }
+
+    return font;
+  });
   const disableCustomFontSizes = !useSetting('typography.customFontSize', name)[0];
   const [fontFamilies] = useSetting('typography.fontFamilies', name);
   const hasFontStyles = useSetting('typography.fontStyle', name)[0] && supports.includes('fontStyle');
@@ -197,9 +209,10 @@ export default function TypographyPanel(_ref) {
   }, createElement(FontSizePicker, {
     value: fontSize,
     onChange: setFontSize,
-    fontSizes: fontSizes,
+    fontSizes: fontSizesWithFluidValues,
     disableCustomFontSizes: disableCustomFontSizes,
     withReset: false,
+    withSlider: true,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
   })), hasAppearanceControl && createElement(ToolsPanelItem, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["LineHeightControl","__experimentalFontFamilyControl","FontFamilyControl","__experimentalFontAppearanceControl","FontAppearanceControl","__experimentalLetterSpacingControl","LetterSpacingControl","__experimentalTextTransformControl","TextTransformControl","FontSizePicker","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","__","getSupportedGlobalStylesPanels","useSetting","useStyle","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","fontSizes","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';\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 [ 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 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={ fontSizes }\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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["LineHeightControl","__experimentalFontFamilyControl","FontFamilyControl","__experimentalFontAppearanceControl","FontAppearanceControl","__experimentalLetterSpacingControl","LetterSpacingControl","__experimentalTextTransformControl","TextTransformControl","FontSizePicker","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","__","getSupportedGlobalStylesPanels","useSetting","useStyle","getTypographyFontSizeValue","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\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</ToolsPanel>\n\t);\n}\n"]}