npm - @wordpress/edit-site - Versions diffs - 5.30.0 → 5.31.0 - Mend

@wordpress/edit-site 5.30.0 → 5.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (305) hide show

package/build-module/components/global-styles/preview-iframe.js CHANGED Viewed

@@ -98,7 +98,6 @@ export default function PreviewIframe({
   }, containerResizeListener), isReady && createElement(Iframe, {
     className: "edit-site-global-styles-preview__iframe",
     style: {
-      width: '100%',
       height: normalizedHeight * ratio
     },
     onMouseEnter: () => setIsHovered(true),

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState \|\| 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough \|\| ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t /\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t /\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;cursor: pointer;}',\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\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\~~twidth: '100%',\n\t\t\t\t\t\~~theight: normalizedHeight ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered \|\| isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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~~MACPnB~~,~~KAAK,EAAE,~~MAAM~~;MACbsB~~,~~MAAM,~~EAAEtC,gBAAgB,GAAG4B;IAC5B,CAAG;IACHW,YAAY,EAAGA,CAAA,KAAMzB,YAAY,CAAE,IAAK,CAAG;IAC3C0B,YAAY,EAAGA,CAAA,KAAM1B,YAAY,CAAE,KAAM,CAAG;IAC5C2B,QAAQ,EAAG,CAAC;EAAG,GAEfR,aAAA,CAAChD,YAAY;IAAC0B,MAAM,EAAGkB;EAAc,CAAE,CAAC,EACxCI,aAAA,CAAC5C,MAAM,CAACqD,GAAG;IACVP,KAAK,EAAG;MACPG,MAAM,EAAEtC,gBAAgB,GAAG4B,KAAK;MAChCZ,KAAK,EAAE,MAAM;MACb2B,UAAU,EAAEjC,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAID,eAAe;MAC5CmC,MAAM,EAAEpC,aAAa,GAAG,SAAS,GAAGqC;IACrC,CAAG;IACHC,OAAO,EAAC,OAAO;IACfC,OAAO,EACN,CAAElC,SAAS,IAAIN,SAAS,KACxB,CAAEK,aAAa,IACfN,KAAK,GACF,OAAO,GACP;EACH,GAEC,EAAE,CACF0C,MAAM,CAAE3C,QAAS,CAAC,CAAC;EAAA,CACnB4C,GAAG,CAAE,CAAEC,KAAK,EAAEC,GAAG,KAAMD,KAAK,CAAE;IAAEtB,KAAK;IAAEuB;EAAI,CAAE,CAAE,CACtC,CACL,CAER,CAAC;AAEL"}
1	+ {"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState \|\| 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough \|\| ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t /\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t /\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;cursor: pointer;}',\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\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered \|\| isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,gBAAgB,IAAIC,MAAM,EAC1BC,sBAAsB,IAAIC,YAAY,EACtCC,WAAW,IAAIC,sBAAsB,QAC/B,yBAAyB;AAChC,SAASC,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;AAClE,SACCC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,QACX,oBAAoB;AAC3B,SAASC,eAAe,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,oBAAoB;;AAEvE;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC,cAAc;EAAEC;AAAsB,CAAC,GAAGF,MAAM,CACvDT,sBACD,CAAC;AAED,MAAMY,eAAe,GAAG,GAAG;AAC3B,MAAMC,gBAAgB,GAAG,GAAG;;AAE5B;AACA;AACA,MAAMC,gBAAgB,GAAG;EACxBC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;AACX,CAAC;AAED,eAAe,SAASC,aAAaA,CAAE;EACtCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,eAAe,GAAG,OAAO,CAAE,GAAGZ,cAAc,CAAE,kBAAmB,CAAC;EAC1E,MAAM,CAAEa,aAAa,CAAE,GAAGb,cAAc,CAAE,gBAAiB,CAAC;EAC5D,MAAM,CAAEc,MAAM,CAAE,GAAGb,qBAAqB,CAAC,CAAC;EAC1C,MAAMc,aAAa,GAAGrB,gBAAgB,CAAC,CAAC;EACxC,MAAM,CAAEsB,SAAS,EAAEC,YAAY,CAAE,GAAGpB,QAAQ,CAAE,KAAM,CAAC;EACrD,MAAM,CAAEqB,uBAAuB,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAGxB,iBAAiB,CAAC,CAAC;EAClE,MAAM,CAAEyB,cAAc,EAAEC,sBAAsB,CAAE,GAAGxB,QAAQ,CAAEsB,KAAM,CAAC;EACpE,MAAM,CAAEG,UAAU,EAAEC,aAAa,CAAE,GAAG1B,QAAQ,CAAC,CAAC;EAEhD,MAAM2B,iBAAiB,GAAG/B,WAAW,CACpC4B,sBAAsB,EACtB,GAAG,EACHjB,gBACD,CAAC;;EAED;EACA;EACAR,eAAe,CAAE,MAAM;IACtB,IAAKuB,KAAK,EAAG;MACZK,iBAAiB,CAAEL,KAAM,CAAC;IAC3B;EACD,CAAC,EAAE,CAAEA,KAAK,EAAEK,iBAAiB,CAAG,CAAC;;EAEjC;EACA;EACA5B,eAAe,CAAE,MAAM;IACtB,MAAM6B,QAAQ,GAAGL,cAAc,GAAGA,cAAc,GAAGlB,eAAe,GAAG,CAAC;IACtE,MAAMwB,SAAS,GAAGD,QAAQ,IAAKH,UAAU,IAAI,CAAC,CAAE;;IAEhD;IACA;IACA;IACA;IACA,MAAMK,oBAAoB,GAAGC,IAAI,CAACC,GAAG,CAAEH,SAAU,CAAC,GAAG,GAAG;IAExD,IAAKC,oBAAoB,IAAI,CAAEL,UAAU,EAAG;MAC3CC,aAAa,CAAEE,QAAS,CAAC;IAC1B;EACD,CAAC,EAAE,CAAEL,cAAc,EAAEE,UAAU,CAAG,CAAC;;EAEnC;EACA,MAAMQ,aAAa,GAAGX,KAAK,GAAGA,KAAK,GAAGjB,eAAe,GAAG,CAAC;EACzD;AACD;AACA;AACA;AACA;AACA;EACC,MAAM6B,KAAK,GAAGT,UAAU,GAAGA,UAAU,GAAGQ,aAAa;;EAErD;AACD;AACA;AACA;AACA;EACC,MAAME,YAAY,GAAGlC,OAAO,CAAE,MAAM;IACnC,IAAKgB,MAAM,EAAG;MACb,OAAO,CACN,GAAGA,MAAM,EACT;QACCmB,GAAG,EAAE,kFAAkF;QACvFC,cAAc,EAAE;MACjB,CAAC,CACD;IACF;IAEA,OAAOpB,MAAM;EACd,CAAC,EAAE,CAAEA,MAAM,CAAG,CAAC;EACf,MAAMqB,OAAO,GAAG,CAAC,CAAEhB,KAAK;EAExB,OACCiB,aAAA,CAAAC,QAAA,QACCD,aAAA;IAAKE,KAAK,EAAG;MAAEC,QAAQ,EAAE;IAAW;EAAG,GACpCrB,uBACE,CAAC,EACJiB,OAAO,IACRC,aAAA,CAAClD,MAAM;IACNsD,SAAS,EAAC,yCAAyC;IACnDF,KAAK,EAAG;MACPG,MAAM,EAAEtC,gBAAgB,GAAG4B;IAC5B,CAAG;IACHW,YAAY,EAAGA,CAAA,KAAMzB,YAAY,CAAE,IAAK,CAAG;IAC3C0B,YAAY,EAAGA,CAAA,KAAM1B,YAAY,CAAE,KAAM,CAAG;IAC5C2B,QAAQ,EAAG,CAAC;EAAG,GAEfR,aAAA,CAAChD,YAAY;IAAC0B,MAAM,EAAGkB;EAAc,CAAE,CAAC,EACxCI,aAAA,CAAC5C,MAAM,CAACqD,GAAG;IACVP,KAAK,EAAG;MACPG,MAAM,EAAEtC,gBAAgB,GAAG4B,KAAK;MAChCZ,KAAK,EAAE,MAAM;MACb2B,UAAU,EAAEjC,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAID,eAAe;MAC5CmC,MAAM,EAAEpC,aAAa,GAAG,SAAS,GAAGqC;IACrC,CAAG;IACHC,OAAO,EAAC,OAAO;IACfC,OAAO,EACN,CAAElC,SAAS,IAAIN,SAAS,KACxB,CAAEK,aAAa,IACfN,KAAK,GACF,OAAO,GACP;EACH,GAEC,EAAE,CACF0C,MAAM,CAAE3C,QAAS,CAAC,CAAC;EAAA,CACnB4C,GAAG,CAAE,CAAEC,KAAK,EAAEC,GAAG,KAAMD,KAAK,CAAE;IAAEtB,KAAK;IAAEuB;EAAI,CAAE,CAAE,CACtC,CACL,CAER,CAAC;AAEL"}

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

@@ -10,7 +10,7 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, __unsta
  */
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
-import PreviewTypography from './preview-typography';
+import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
 import PreviewIframe from './preview-iframe';
 const {
@@ -80,7 +80,7 @@ const PreviewStyles = ({
       height: '100%',
       overflow: 'hidden'
     }
-  }, createElement(PreviewTypography, {
+  }, createElement(TypographyExample, {
     fontSize: 65 * ratio,
     variation: variation
   }), createElement(VStack, {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","~~PreviewTypography~~","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport ~~PreviewTypography~~ from './~~preview~~-~~typography~~';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\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 midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\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 PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\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<~~PreviewTypography~~\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\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) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\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) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\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) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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"}
1	+ {"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\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 midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\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 PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\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<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\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) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\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) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\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) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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"}

package/build-module/components/global-styles/screen-colors.js CHANGED Viewed

@@ -13,7 +13,6 @@ import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations/variations-color';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 const {
   useGlobalStyle,
   useGlobalSetting,
@@ -29,20 +28,14 @@ function ScreenColors() {
   });
   const [rawSettings] = useGlobalSetting('');
   const settings = useSettingsForBlockElement(rawSettings);
-  const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'color',
-    filter: variation => variation?.settings?.color && Object.keys(variation?.settings?.color).length
-  });
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Colors'),
     description: __('Manage palettes and the default color of different global elements on the site.')
   }), createElement("div", {
     className: "edit-site-global-styles-screen-colors"
   }, createElement(VStack, {
-    spacing: 3
-  }, !!colorVariations.length && createElement(ColorVariations, {
-    variations: colorVariations
-  }), createElement(Palette, null), createElement(StylesColorPanel, {
+    spacing: 6
+  }, createElement(ColorVariations, null), createElement(Palette, null), createElement(StylesColorPanel, {
     inheritedValue: inheritedStyle,
     value: style,
     onChange: setStyle,

package/build-module/components/global-styles/screen-colors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","__experimentalVStack","VStack","privateApis","blockEditorPrivateApis","ScreenHeader","Palette","unlock","ColorVariations","~~useCurrentMergeThemeStyleVariationsWithUserConfig","~~useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","ScreenColors","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","settings","~~colorVariations","property","filter","variation","color","Object","keys","length","~~createElement","Fragment","title","description","className","spacing","~~variations","~~inheritedValue","value","onChange"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { unlock } from '../../lock-unlock';\nimport ColorVariations from './variations/variations-color';\~~nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\~~n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors() {\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t\tfilter: ( variation ) =>\n\t\t\tvariation?.settings?.color &&\n\t\t\tObject.keys( variation?.settings?.color ).length,\n\t} );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t~~{ !! colorVariations.length && (\n\t\t\t\t\t\t~~<ColorVariations ~~variations={ colorVariations }~~ />\n\t\t\t\t\t~~) }\n\n\t\t\t\t\t~~<Palette />\n\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,OAAO,MAAM,WAAW;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,eAAe,MAAM,+BAA+B;~~AAC3D~~,~~SAASC,iDAAiD,QAAQ,+EAA+E;AAEjJ,~~MAAM;EACLC,cAAc;EACdC,gBAAgB;EAChBC,0BAA0B;EAC1BC,UAAU,EAAEC;AACb,CAAC,~~GAAGP~~,MAAM,CAAEH,sBAAuB,CAAC;AAEpC,~~SAASW~~,YAAYA,CAAA,EAAG;EACvB,MAAM,CAAEC,KAAK,CAAE,GAAGN,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,MAAM,EAAE;IACxDC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEC,cAAc,EAAEC,QAAQ,CAAE,GAAGV,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,KAAK,EAAE;IAC1EC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEG,WAAW,CAAE,GAAGV,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMW,QAAQ,GAAGV,0BAA0B,CAAES,WAAY,CAAC;EAE1D,~~MAAME~~,~~eAAe,GAAGd,iDAAiD,CAAE;IAC1Ee,QAAQ,EAAE,OAAO;IACjBC,MAAM,EAAIC,SAAS,IAClBA,SAAS,EAAEJ,QAAQ,EAAEK,KAAK,IAC1BC,MAAM,CAACC,IAAI,CAAEH,SAAS,EAAEJ,QAAQ,EAAEK,KAAM,CAAC,CAACG;EAC5C,CAAE,CAAC;EACH,OACCC,~~aAAA,CAAAC,QAAA,QACCD,aAAA,~~CAAC1B~~,YAAY;~~IACZ4B~~,KAAK,~~EAAGjC~~,EAAE,CAAE,QAAS,CAAG;~~IACxBkC~~,WAAW,~~EAAGlC~~,EAAE,CACf,iFACD;EAAG,CACH,CAAC,~~EACF+B~~,aAAA;IAAKI,SAAS,EAAC;EAAuC,GACrDJ,aAAA,~~CAAC7B~~,MAAM;~~IAACkC~~,OAAO,EAAG;EAAG,~~GAClB~~,~~CAAC,CAAEb,eAAe,CAACO,MAAM,IAC1BC,~~aAAA,~~CAACvB~~,eAAe~~;IAAC6B~~,~~UAAU~~,~~EAAGd;EAAiB~~,~~CAAE~~,~~CACjD,EAEDQ,~~aAAA,~~CAACzB~~,OAAO,MAAE,CAAC,~~EAEXyB~~,aAAA,~~CAACjB~~,gBAAgB;~~IAChBwB~~,cAAc,~~EAAGnB~~,cAAgB;~~IACjCoB~~,KAAK,~~EAAGvB~~,KAAO;~~IACfwB~~,QAAQ,~~EAAGpB~~,QAAU;IACrBE,QAAQ,EAAGA;EAAU,CACrB,CACM,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeP,YAAY"}
1	+ {"version":3,"names":["__","__experimentalVStack","VStack","privateApis","blockEditorPrivateApis","ScreenHeader","Palette","unlock","ColorVariations","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","ScreenColors","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","settings","createElement","Fragment","title","description","className","spacing","inheritedValue","value","onChange"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { unlock } from '../../lock-unlock';\nimport ColorVariations from './variations/variations-color';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors() {\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t<ColorVariations />\n\t\t\t\t\t<Palette />\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,OAAO,MAAM,WAAW;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,eAAe,MAAM,+BAA+B;AAE3D,MAAM;EACLC,cAAc;EACdC,gBAAgB;EAChBC,0BAA0B;EAC1BC,UAAU,EAAEC;AACb,CAAC,GAAGN,MAAM,CAAEH,sBAAuB,CAAC;AAEpC,SAASU,YAAYA,CAAA,EAAG;EACvB,MAAM,CAAEC,KAAK,CAAE,GAAGN,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,MAAM,EAAE;IACxDC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEC,cAAc,EAAEC,QAAQ,CAAE,GAAGV,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,KAAK,EAAE;IAC1EC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEG,WAAW,CAAE,GAAGV,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMW,QAAQ,GAAGV,0BAA0B,CAAES,WAAY,CAAC;EAE1D,OACCE,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACjB,YAAY;IACZmB,KAAK,EAAGxB,EAAE,CAAE,QAAS,CAAG;IACxByB,WAAW,EAAGzB,EAAE,CACf,iFACD;EAAG,CACH,CAAC,EACFsB,aAAA;IAAKI,SAAS,EAAC;EAAuC,GACrDJ,aAAA,CAACpB,MAAM;IAACyB,OAAO,EAAG;EAAG,GACpBL,aAAA,CAACd,eAAe,MAAE,CAAC,EACnBc,aAAA,CAAChB,OAAO,MAAE,CAAC,EACXgB,aAAA,CAACT,gBAAgB;IAChBe,cAAc,EAAGV,cAAgB;IACjCW,KAAK,EAAGd,KAAO;IACfe,QAAQ,EAAGX,QAAU;IACrBE,QAAQ,EAAGA;EAAU,CACrB,CACM,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeP,YAAY"}

package/build-module/components/global-styles/screen-typography.js CHANGED Viewed

@@ -14,13 +14,8 @@ import TypographyElements from './typography-elements';
 import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 function ScreenTypography() {
   const fontLibraryEnabled = useSelect(select => select(editorStore).getEditorSettings().fontLibraryEnabled, []);
-  const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'typography',
-    filter: variation => variation?.settings?.typography?.fontFamilies && Object.keys(variation?.settings?.typography?.fontFamilies).length
-  });
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Typography'),
     description: __('Manage the typography settings for different elements.')
@@ -28,7 +23,7 @@ function ScreenTypography() {
     className: "edit-site-global-styles-screen-typography"
   }, createElement(VStack, {
     spacing: 6
-  }, !!typographyVariations.length && createElement(TypographyVariations, null), !window.__experimentalDisableFontLibrary && createElement(VStack, {
+  }, createElement(TypographyVariations, null), !window.__experimentalDisableFontLibrary && createElement(VStack, {
     spacing: 3
   }, fontLibraryEnabled && createElement(FontFamilies, null)), createElement(TypographyElements, null))));
 }

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__","__experimentalVStack","VStack","store","editorStore","useSelect","TypographyElements","TypographyVariations","FontFamilies","ScreenHeader","~~useCurrentMergeThemeStyleVariationsWithUserConfig","~~ScreenTypography","fontLibraryEnabled","select","getEditorSettings","~~typographyVariations","property","filter","variation","settings","typography","fontFamilies","Object","keys","length","~~createElement","Fragment","title","description","className","spacing","window","__experimentalDisableFontLibrary"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/\n Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\~~nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\~~n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\~~tconst typographyVariations =\~~n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t\tfilter: ( variation ) =>\n\t\t\t\tvariation?.settings?.typography?.fontFamilies &&\n\t\t\t\tObject.keys( variation?.settings?.typography?.fontFamilies )\n\t\t\t\t\t.length,\n\t\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t~~{ !! typographyVariations.length && (\n\t\t\t\t\t\t~~<TypographyVariations />\n\t\t\t\t\t~~) }\n\t\t\t\t\t~~{ ! window.__experimentalDisableFontLibrary && (\n\t\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,oBAAoB,MAAM,oCAAoC;AACrE,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,YAAY,MAAM,UAAU;~~AACnC~~,SAASC,~~iDAAiD,QAAQ,+EAA+E;AAEjJ,SAASC,~~gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,~~GAAGP~~,SAAS,~~CACjCQ~~,MAAM,IACPA,MAAM,~~CAAET~~,WAAY,CAAC,~~CAACU~~,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;~~EACD~~,~~MAAMG~~,oBAAoB,GACzBL,iDAAiD,CAAE;IAClDM,QAAQ,EAAE,YAAY;IACtBC,MAAM,EAAIC,SAAS,IAClBA,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAY,IAC7CC,MAAM,CAACC,IAAI,CAAEL,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAa,CAAC,CAC1DG;EACJ,CAAE,CAAC;EAEJ,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,~~CAAChB~~,YAAY;~~IACZkB~~,KAAK,~~EAAG3B~~,EAAE,CAAE,YAAa,CAAG;~~IAC5B4B~~,WAAW,~~EAAG5B~~,EAAE,CACf,wDACD;EAAG,CACH,CAAC,~~EACFyB~~,aAAA;IAAKI,SAAS,EAAC;EAA2C,GACzDJ,aAAA,~~CAACvB~~,MAAM;~~IAAC4B~~,OAAO,EAAG;EAAG,~~GAClB~~,~~CAAC,CAAEf,oBAAoB,CAACS,MAAM,IAC/BC,~~aAAA,~~CAAClB~~,oBAAoB,MAAE,~~CACvB~~,~~EACC~~,~~CAAEwB~~,MAAM,CAACC,gCAAgC,IAC1CP,aAAA,~~CAACvB~~,MAAM;~~IAAC4B~~,OAAO,EAAG;EAAG,~~GAClBlB~~,kBAAkB,~~IAAIa~~,aAAA,~~CAACjB~~,YAAY,MAAE,CAChC,CACR,~~EACDiB~~,aAAA,~~CAACnB~~,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,~~eAAeK~~,gBAAgB"}
1	+ {"version":3,"names":["__","__experimentalVStack","VStack","store","editorStore","useSelect","TypographyElements","TypographyVariations","FontFamilies","ScreenHeader","ScreenTypography","fontLibraryEnabled","select","getEditorSettings","createElement","Fragment","title","description","className","spacing","window","__experimentalDisableFontLibrary"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/\n Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t<TypographyVariations />\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary && (\n\t\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,oBAAoB,MAAM,oCAAoC;AACrE,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,YAAY,MAAM,UAAU;AAEnC,SAASC,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAGN,SAAS,CACjCO,MAAM,IACPA,MAAM,CAAER,WAAY,CAAC,CAACS,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;EAED,OACCG,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACL,YAAY;IACZO,KAAK,EAAGhB,EAAE,CAAE,YAAa,CAAG;IAC5BiB,WAAW,EAAGjB,EAAE,CACf,wDACD;EAAG,CACH,CAAC,EACFc,aAAA;IAAKI,SAAS,EAAC;EAA2C,GACzDJ,aAAA,CAACZ,MAAM;IAACiB,OAAO,EAAG;EAAG,GACpBL,aAAA,CAACP,oBAAoB,MAAE,CAAC,EACtB,CAAEa,MAAM,CAACC,gCAAgC,IAC1CP,aAAA,CAACZ,MAAM;IAACiB,OAAO,EAAG;EAAG,GAClBR,kBAAkB,IAAIG,aAAA,CAACN,YAAY,MAAE,CAChC,CACR,EACDM,aAAA,CAACR,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeI,gBAAgB"}

package/build-module/components/global-styles/typography-elements.js CHANGED Viewed

@@ -20,6 +20,7 @@ function ElementItem({
   element,
   label
 }) {
+  var _ref;
   const prefix = element === 'text' || !element ? '' : `elements.${element}.`;
   const extraStyles = element === 'link' ? {
     textDecoration: 'underline'
@@ -29,6 +30,7 @@ function ElementItem({
   const [fontWeight] = useGlobalStyle(prefix + 'typography.fontWeight');
   const [letterSpacing] = useGlobalStyle(prefix + 'typography.letterSpacing');
   const [backgroundColor] = useGlobalStyle(prefix + 'color.background');
+  const [fallbackBackgroundColor] = useGlobalStyle('color.background');
   const [gradientValue] = useGlobalStyle(prefix + 'color.gradient');
   const [color] = useGlobalStyle(prefix + 'color.text');
   const navigationButtonLabel = sprintf(
@@ -43,7 +45,7 @@ function ElementItem({
     className: "edit-site-global-styles-screen-typography__indicator",
     style: {
       fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      background: (_ref = gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor) !== null && _ref !== void 0 ? _ref : fallbackBackgroundColor,
       color,
       fontStyle,
       fontWeight,

package/build-module/components/global-styles/typography-elements.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","Subtitle","unlock","useGlobalStyle","ElementItem","parentMenu","element","label","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","createElement","path","justify","className","style","background","TypographyElements","spacing","level","isBordered","isSeparated"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-elements.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\n\nimport { unlock } from '../../lock-unlock';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ElementItem( { parentMenu, element, label } ) {\n\tconst prefix =\n\t\telement === 'text' \|\| ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t }\n\t\t\t: {};\n\tconst [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );\n\tconst [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing'\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text' );\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: ~~gradientValue~~ ~~?? backgroundColor~~,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,uBAAuB,IAAIC,SAAS,EACpCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,QAAQ,QACF,uBAAuB;AAC9B,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,MAAM;EAAEC;AAAe,CAAC,GAAGD,MAAM,CAAEH,sBAAuB,CAAC;AAE3D,SAASK,WAAWA,CAAE;EAAEC,UAAU;EAAEC,OAAO;EAAEC;AAAM,CAAC,EAAG;EACtD,MAAMC,MAAM,~~GACXF~~,OAAO,KAAK,MAAM,IAAI,CAAEA,OAAO,GAAG,EAAE,GAAI,YAAYA,OAAS,GAAE;EAChE,~~MAAMG~~,WAAW,~~GAChBH~~,OAAO,KAAK,MAAM,GACf;~~IACAI~~,cAAc,EAAE;EAChB,CAAC,GACD,CAAC,CAAC;EACN,MAAM,CAAEC,UAAU,CAAE,~~GAAGR~~,cAAc,~~CAAEK~~,MAAM,GAAG,uBAAwB,CAAC;EACzE,MAAM,CAAEI,SAAS,CAAE,~~GAAGT~~,cAAc,~~CAAEK~~,MAAM,GAAG,sBAAuB,CAAC;EACvE,MAAM,CAAEK,UAAU,CAAE,~~GAAGV~~,cAAc,~~CAAEK~~,MAAM,GAAG,uBAAwB,CAAC;EACzE,MAAM,CAAEM,aAAa,CAAE,~~GAAGX~~,cAAc,~~CACvCK~~,MAAM,GAAG,0BACV,CAAC;EACD,MAAM,CAAEO,eAAe,CAAE,~~GAAGZ~~,cAAc,~~CAAEK~~,MAAM,GAAG,kBAAmB,CAAC;EACzE,MAAM,CAAEQ,aAAa,CAAE,~~GAAGb~~,cAAc,~~CAAEK~~,MAAM,GAAG,gBAAiB,CAAC;EACrE,MAAM,~~CAAES~~,KAAK,CAAE,~~GAAGd~~,cAAc,~~CAAEK~~,MAAM,GAAG,YAAa,CAAC;EAEzD,~~MAAMU~~,qBAAqB,~~GAAG5B~~,OAAO;EACpC;EACAD,EAAE,CAAE,sBAAuB,CAAC,EAC5BkB,KACD,CAAC;EAED,~~OACCY~~,aAAA,~~CAACnB~~,sBAAsB;~~IACtBoB~~,IAAI,~~EAAGf~~,UAAU,GAAG,cAAc,GAAGC,OAAS;IAC9C,~~cAAaY~~;EAAuB,GAEpCC,aAAA,~~CAACvB~~,MAAM;~~IAACyB~~,OAAO,EAAC;EAAY,GAC3BF,aAAA,~~CAACtB~~,QAAQ;~~IACRyB~~,SAAS,EAAC,sDAAsD;IAChEC,KAAK,EAAG;~~MACPZ~~,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,OAAO;~~MACjCa~~,UAAU,~~EAAER~~,aAAa,aAAbA,aAAa,cAAbA,aAAa,~~GAAID~~,eAAe;~~MAC5CE~~,KAAK;~~MACLL~~,SAAS;MACTC,UAAU;MACVC,aAAa;MACb,GAAGL;IACJ;EAAG,~~GAEDpB~~,EAAE,CAAE,IAAK,CACF,CAAC,~~EACX8B~~,aAAA,~~CAACtB~~,QAAQ,QAAGU,KAAiB,CACtB,CACe,CAAC;AAE3B;AAEA,~~SAASkB~~,kBAAkBA,CAAA,EAAG;EAC7B,~~MAAMpB~~,UAAU,GAAG,EAAE;EAErB,~~OACCc~~,aAAA,~~CAACzB~~,MAAM;~~IAACgC~~,OAAO,EAAG;EAAG,GACpBP,aAAA,~~CAAClB~~,QAAQ;~~IAAC0B~~,KAAK,EAAG;EAAG,~~GAAGtC~~,EAAE,CAAE,UAAW,CAAa,CAAC,~~EACrD8B~~,aAAA,~~CAAC3B~~,SAAS;~~IAACoC~~,UAAU;IAACC,WAAW;EAAA,GAChCV,aAAA,~~CAACf~~,WAAW;IACXC,UAAU,EAAGA,UAAY;IACzBC,OAAO,EAAC,MAAM;IACdC,KAAK,EAAGlB,EAAE,CAAE,MAAO;EAAG,CACtB,CAAC,~~EACF8B~~,aAAA,~~CAACf~~,WAAW;IACXC,UAAU,EAAGA,UAAY;IACzBC,OAAO,EAAC,MAAM;IACdC,KAAK,EAAGlB,EAAE,CAAE,OAAQ;EAAG,CACvB,CAAC,~~EACF8B~~,aAAA,~~CAACf~~,WAAW;IACXC,UAAU,EAAGA,UAAY;IACzBC,OAAO,EAAC,SAAS;IACjBC,KAAK,EAAGlB,EAAE,CAAE,UAAW;EAAG,CAC1B,CAAC,~~EACF8B~~,aAAA,~~CAACf~~,WAAW;IACXC,UAAU,EAAGA,UAAY;IACzBC,OAAO,EAAC,SAAS;IACjBC,KAAK,EAAGlB,EAAE,CAAE,UAAW;EAAG,CAC1B,CAAC,~~EACF8B~~,aAAA,~~CAACf~~,WAAW;IACXC,UAAU,EAAGA,UAAY;IACzBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAGlB,EAAE,CAAE,SAAU;EAAG,CACzB,CACS,CACJ,CAAC;AAEX;AAEA,~~eAAeoC~~,kBAAkB"}
1	+ {"version":3,"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","Subtitle","unlock","useGlobalStyle","ElementItem","parentMenu","element","label","_ref","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","fallbackBackgroundColor","gradientValue","color","navigationButtonLabel","createElement","path","justify","className","style","background","TypographyElements","spacing","level","isBordered","isSeparated"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-elements.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\n\nimport { unlock } from '../../lock-unlock';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ElementItem( { parentMenu, element, label } ) {\n\tconst prefix =\n\t\telement === 'text' \|\| ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t }\n\t\t\t: {};\n\tconst [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );\n\tconst [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing'\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );\n\tconst [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text' );\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\tbackgroundColor ??\n\t\t\t\t\t\t\tfallbackBackgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],"mappings":"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"}

package/build-module/components/global-styles/{preview-typography.js → typography-example.js} RENAMED Viewed

@@ -36,7 +36,6 @@ export default function PreviewTypography({
     headingPreviewStyle.fontSize = fontSize;
   }
   return createElement(motion.div, {
-    className: "edit-site-global-styles_preview-typography",
     animate: {
       scale: 1,
       opacity: 1
@@ -48,6 +47,9 @@ export default function PreviewTypography({
     transition: {
       delay: 0.3,
       type: 'tween'
+    },
+    style: {
+      textAlign: 'center'
     }
   }, createElement("span", {
     style: headingPreviewStyle
@@ -55,4 +57,4 @@ export default function PreviewTypography({
     style: bodyPreviewStyle
   }, _x('a', 'Lowercase letter A')));
 }
-//# sourceMappingURL=preview-typography.js.map
+//# sourceMappingURL=typography-example.js.map

package/build-module/components/global-styles/typography-example.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["useContext","__unstableMotion","motion","_x","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","unlock","getFamilyPreviewStyle","getFontFamilies","GlobalStylesContext","PreviewTypography","fontSize","variation","base","config","bodyFontFamilies","headingFontFamilies","bodyPreviewStyle","headingPreviewStyle","createElement","div","animate","scale","opacity","initial","transition","delay","type","style","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-example.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { unlock } from '../../lock-unlock';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport { getFontFamilies } from './utils';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nexport default function PreviewTypography( { fontSize, variation } ) {\n\tconst { base } = useContext( GlobalStylesContext );\n\tlet config = base;\n\tif ( variation ) {\n\t\tconfig = mergeBaseAndUserConfigs( base, variation );\n\t}\n\tconst [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );\n\tconst bodyPreviewStyle = bodyFontFamilies\n\t\t? getFamilyPreviewStyle( bodyFontFamilies )\n\t\t: {};\n\tconst headingPreviewStyle = headingFontFamilies\n\t\t? getFamilyPreviewStyle( headingFontFamilies )\n\t\t: {};\n\n\tif ( fontSize ) {\n\t\tbodyPreviewStyle.fontSize = fontSize;\n\t\theadingPreviewStyle.fontSize = fontSize;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: 0.3,\n\t\t\t\ttype: 'tween',\n\t\t\t} }\n\t\t\tstyle={ {\n\t\t\t\ttextAlign: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t<span style={ headingPreviewStyle }>\n\t\t\t\t{ _x( 'A', 'Uppercase letter A' ) }\n\t\t\t</span>\n\t\t\t<span style={ bodyPreviewStyle }>\n\t\t\t\t{ _x( 'a', 'Lowercase letter A' ) }\n\t\t\t</span>\n\t\t</motion.div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;AAClE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,qBAAqB,QAAQ,2CAA2C;AACjF,SAASC,eAAe,QAAQ,SAAS;AAEzC,MAAM;EAAEC;AAAoB,CAAC,GAAGH,MAAM,CAAEF,sBAAuB,CAAC;AAEhE,eAAe,SAASM,iBAAiBA,CAAE;EAAEC,QAAQ;EAAEC;AAAU,CAAC,EAAG;EACpE,MAAM;IAAEC;EAAK,CAAC,GAAGd,UAAU,CAAEU,mBAAoB,CAAC;EAClD,IAAIK,MAAM,GAAGD,IAAI;EACjB,IAAKD,SAAS,EAAG;IAChBE,MAAM,GAAGT,uBAAuB,CAAEQ,IAAI,EAAED,SAAU,CAAC;EACpD;EACA,MAAM,CAAEG,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGR,eAAe,CAAEM,MAAO,CAAC;EAC3E,MAAMG,gBAAgB,GAAGF,gBAAgB,GACtCR,qBAAqB,CAAEQ,gBAAiB,CAAC,GACzC,CAAC,CAAC;EACL,MAAMG,mBAAmB,GAAGF,mBAAmB,GAC5CT,qBAAqB,CAAES,mBAAoB,CAAC,GAC5C,CAAC,CAAC;EAEL,IAAKL,QAAQ,EAAG;IACfM,gBAAgB,CAACN,QAAQ,GAAGA,QAAQ;IACpCO,mBAAmB,CAACP,QAAQ,GAAGA,QAAQ;EACxC;EAEA,OACCQ,aAAA,CAAClB,MAAM,CAACmB,GAAG;IACVC,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAE,GAAG;MACVC,IAAI,EAAE;IACP,CAAG;IACHC,KAAK,EAAG;MACPC,SAAS,EAAE;IACZ;EAAG,GAEHV,aAAA;IAAMS,KAAK,EAAGV;EAAqB,GAChChB,EAAE,CAAE,GAAG,EAAE,oBAAqB,CAC3B,CAAC,EACPiB,aAAA;IAAMS,KAAK,EAAGX;EAAkB,GAC7Bf,EAAE,CAAE,GAAG,EAAE,oBAAqB,CAC3B,CACK,CAAC;AAEf"}

package/build-module/components/global-styles/typography-preview.js CHANGED Viewed

@@ -16,6 +16,7 @@ export default function TypographyPreview({
   element,
   headingLevel
 }) {
+  var _ref;
   let prefix = '';
   if (element === 'heading') {
     prefix = `elements.${headingLevel}.`;
@@ -25,6 +26,7 @@ export default function TypographyPreview({
   const [fontFamily] = useGlobalStyle(prefix + 'typography.fontFamily', name);
   const [gradientValue] = useGlobalStyle(prefix + 'color.gradient', name);
   const [backgroundColor] = useGlobalStyle(prefix + 'color.background', name);
+  const [fallbackBackgroundColor] = useGlobalStyle('color.background');
   const [color] = useGlobalStyle(prefix + 'color.text', name);
   const [fontSize] = useGlobalStyle(prefix + 'typography.fontSize', name);
   const [fontStyle] = useGlobalStyle(prefix + 'typography.fontStyle', name);
@@ -37,7 +39,7 @@ export default function TypographyPreview({
     className: "edit-site-typography-preview",
     style: {
       fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      background: (_ref = gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor) !== null && _ref !== void 0 ? _ref : fallbackBackgroundColor,
       color,
       fontSize,
       fontStyle,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["privateApis","blockEditorPrivateApis","unlock","useGlobalStyle","TypographyPreview","name","element","headingLevel","prefix","fontFamily","gradientValue","backgroundColor","color","fontSize","fontStyle","fontWeight","letterSpacing","extraStyles","textDecoration","createElement","className","style","background"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-preview.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\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 ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAe,CAAC,GAAGD,MAAM,CAAED,sBAAuB,CAAC;AAE3D,eAAe,SAASG,iBAAiBA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAa,CAAC,EAAG;EAC5E,IAAIC,MAAM,GAAG,EAAE;EACf,~~IAAKF~~,OAAO,KAAK,SAAS,EAAG;~~IAC5BE~~,MAAM,GAAI,~~YAAYD~~,YAAc,GAAE;EACvC,CAAC,MAAM,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAAM,EAAG;~~IAC3CE~~,MAAM,GAAI,~~YAAYF~~,OAAS,GAAE;EAClC;EAEA,MAAM,~~CAAEG~~,UAAU,CAAE,~~GAAGN~~,cAAc,~~CACpCK~~,MAAM,GAAG,uBAAuB,~~EAChCH~~,IACD,CAAC;EACD,MAAM,~~CAAEK~~,aAAa,CAAE,~~GAAGP~~,cAAc,~~CAAEK~~,MAAM,GAAG,gBAAgB,~~EAAEH~~,IAAK,CAAC;EAC3E,MAAM,~~CAAEM~~,eAAe,CAAE,~~GAAGR~~,cAAc,~~CACzCK~~,MAAM,GAAG,kBAAkB,~~EAC3BH~~,IACD,CAAC;EACD,MAAM,~~CAAEO~~,KAAK,CAAE,~~GAAGT~~,cAAc,~~CAAEK~~,MAAM,GAAG,YAAY,~~EAAEH~~,IAAK,CAAC;EAC/D,MAAM,~~CAAEQ~~,QAAQ,CAAE,~~GAAGV~~,cAAc,~~CAAEK~~,MAAM,GAAG,qBAAqB,~~EAAEH~~,IAAK,CAAC;EAC3E,MAAM,~~CAAES~~,SAAS,CAAE,~~GAAGX~~,cAAc,~~CACnCK~~,MAAM,GAAG,sBAAsB,EAC/BH,IACD,CAAC;EACD,MAAM,~~CAAEU~~,UAAU,CAAE,~~GAAGZ~~,cAAc,~~CACpCK~~,MAAM,GAAG,uBAAuB,~~EAChCH~~,IACD,CAAC;EACD,MAAM,~~CAAEW~~,aAAa,CAAE,~~GAAGb~~,cAAc,~~CACvCK~~,MAAM,GAAG,0BAA0B,~~EACnCH~~,IACD,CAAC;EACD,~~MAAMY~~,WAAW,~~GAChBX~~,OAAO,KAAK,MAAM,GACf;~~IACAY~~,cAAc,EAAE;EAChB,CAAC,GACD,CAAC,CAAC;EAEN,OACCC,aAAA;IACCC,SAAS,EAAC,8BAA8B;IACxCC,KAAK,EAAG;~~MACPZ~~,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,OAAO;~~MACjCa~~,UAAU,~~EAAEZ~~,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIC,eAAe;~~MAC5CC~~,KAAK;MACLC,QAAQ;MACRC,SAAS;MACTC,UAAU;MACVC,aAAa;MACb,GAAGC;IACJ;EAAG,GACH,IAEI,CAAC;AAER"}
1	+ {"version":3,"names":["privateApis","blockEditorPrivateApis","unlock","useGlobalStyle","TypographyPreview","name","element","headingLevel","_ref","prefix","fontFamily","gradientValue","backgroundColor","fallbackBackgroundColor","color","fontSize","fontStyle","fontWeight","letterSpacing","extraStyles","textDecoration","createElement","className","style","background"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-preview.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\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 ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\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:\n\t\t\t\t\tgradientValue ?? backgroundColor ?? fallbackBackgroundColor,\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAe,CAAC,GAAGD,MAAM,CAAED,sBAAuB,CAAC;AAE3D,eAAe,SAASG,iBAAiBA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAa,CAAC,EAAG;EAAA,IAAAC,IAAA;EAC5E,IAAIC,MAAM,GAAG,EAAE;EACf,IAAKH,OAAO,KAAK,SAAS,EAAG;IAC5BG,MAAM,GAAI,YAAYF,YAAc,GAAE;EACvC,CAAC,MAAM,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAAM,EAAG;IAC3CG,MAAM,GAAI,YAAYH,OAAS,GAAE;EAClC;EAEA,MAAM,CAAEI,UAAU,CAAE,GAAGP,cAAc,CACpCM,MAAM,GAAG,uBAAuB,EAChCJ,IACD,CAAC;EACD,MAAM,CAAEM,aAAa,CAAE,GAAGR,cAAc,CAAEM,MAAM,GAAG,gBAAgB,EAAEJ,IAAK,CAAC;EAC3E,MAAM,CAAEO,eAAe,CAAE,GAAGT,cAAc,CACzCM,MAAM,GAAG,kBAAkB,EAC3BJ,IACD,CAAC;EACD,MAAM,CAAEQ,uBAAuB,CAAE,GAAGV,cAAc,CAAE,kBAAmB,CAAC;EACxE,MAAM,CAAEW,KAAK,CAAE,GAAGX,cAAc,CAAEM,MAAM,GAAG,YAAY,EAAEJ,IAAK,CAAC;EAC/D,MAAM,CAAEU,QAAQ,CAAE,GAAGZ,cAAc,CAAEM,MAAM,GAAG,qBAAqB,EAAEJ,IAAK,CAAC;EAC3E,MAAM,CAAEW,SAAS,CAAE,GAAGb,cAAc,CACnCM,MAAM,GAAG,sBAAsB,EAC/BJ,IACD,CAAC;EACD,MAAM,CAAEY,UAAU,CAAE,GAAGd,cAAc,CACpCM,MAAM,GAAG,uBAAuB,EAChCJ,IACD,CAAC;EACD,MAAM,CAAEa,aAAa,CAAE,GAAGf,cAAc,CACvCM,MAAM,GAAG,0BAA0B,EACnCJ,IACD,CAAC;EACD,MAAMc,WAAW,GAChBb,OAAO,KAAK,MAAM,GACf;IACAc,cAAc,EAAE;EAChB,CAAC,GACD,CAAC,CAAC;EAEN,OACCC,aAAA;IACCC,SAAS,EAAC,8BAA8B;IACxCC,KAAK,EAAG;MACPb,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,OAAO;MACjCc,UAAU,GAAAhB,IAAA,GACTG,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIC,eAAe,cAAAJ,IAAA,cAAAA,IAAA,GAAIK,uBAAuB;MAC5DC,KAAK;MACLC,QAAQ;MACRC,SAAS;MACTC,UAAU;MACVC,aAAa;MACb,GAAGC;IACJ;EAAG,GACH,IAEI,CAAC;AAER"}

package/build-module/components/global-styles/utils.js CHANGED Viewed

@@ -11,7 +11,7 @@ export function getVariationClassName(variation) {
   return `is-style-${variation}`;
 }
 function getFontFamilyFromSetting(fontFamilies, setting) {
-  if (!setting) {
+  if (!Array.isArray(fontFamilies) || !setting) {
     return null;
   }
   const fontFamilyVariable = setting.replace('var(', '').replace(')', '');

package/build-module/components/global-styles/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["getVariationClassName","variation","getFontFamilyFromSetting","fontFamilies","setting","fontFamilyVariable","replace","fontFamilySlug","split","slice","find","fontFamily","slug","getFontFamilies","themeJson","settings","typography","theme","bodyFontFamilySetting","styles","bodyFontFamily","headingFontFamilySetting","elements","heading","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/utils.js"],"sourcesContent":["/*\n \n * @param {string} variation The variation name.\n \n @return {string} The variation class name.\n */\nexport function getVariationClassName( variation ) {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nfunction getFontFamilyFromSetting( fontFamilies, setting ) {\n\tif ( ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\nexport function getFontFamilies( themeJson ) {\n\tconst fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,qBAAqBA,CAAEC,SAAS,EAAG;EAClD,IAAK,CAAEA,SAAS,EAAG;IAClB,OAAO,EAAE;EACV;EACA,OAAQ,YAAYA,SAAW,EAAC;AACjC;AAEA,SAASC,wBAAwBA,CAAEC,YAAY,EAAEC,OAAO,EAAG;EAC1D,IAAK,~~CAAEA~~,OAAO,EAAG;~~IAChB~~,OAAO,IAAI;EACZ;EAEA,~~MAAMC~~,kBAAkB,~~GAAGD~~,OAAO,~~CAACE~~,OAAO,CAAE,MAAM,EAAE,EAAG,CAAC,CAACA,OAAO,CAAE,GAAG,EAAE,EAAG,CAAC;EAC3E,MAAMC,cAAc,GAAGF,kBAAkB,EAAEG,KAAK,CAAE,IAAK,CAAC,CAACC,KAAK,CAAE,CAAC,CAAE,CAAC,CAAE,CAAC,CAAE;EAEzE,~~OAAON~~,YAAY,~~CAACO~~,IAAI,CACrBC,UAAU,IAAMA,UAAU,CAACC,IAAI,KAAKL,cACvC,CAAC;AACF;AAEA,OAAO,SAASM,eAAeA,CAAEC,SAAS,EAAG;EAC5C,~~MAAMX~~,YAAY,~~GAAGW~~,SAAS,EAAEC,QAAQ,EAAEC,UAAU,~~EAAEb~~,YAAY,~~EAAEc~~,KAAK,CAAC,CAAC;EAC3E,MAAMC,qBAAqB,GAAGJ,SAAS,EAAEK,MAAM,EAAEH,UAAU,EAAEL,UAAU;EACvE,MAAMS,cAAc,~~GAAGlB~~,wBAAwB,CAC9CC,YAAY,~~EACZe~~,qBACD,CAAC;EAED,MAAMG,wBAAwB,GAC7BP,SAAS,EAAEK,MAAM,EAAEG,QAAQ,EAAEC,OAAO,EAAEP,UAAU,EAAEL,UAAU;EAE7D,IAAIa,iBAAiB;EACrB,IAAK,CAAEH,wBAAwB,EAAG;IACjCG,iBAAiB,GAAGJ,cAAc;EACnC,CAAC,MAAM;IACNI,iBAAiB,~~GAAGtB~~,wBAAwB,CAC3CC,YAAY,~~EACZW~~,SAAS,EAAEK,MAAM,EAAEG,QAAQ,EAAEC,OAAO,EAAEP,UAAU,EAAEL,UACnD,CAAC;EACF;EAEA,OAAO,CAAES,cAAc,EAAEI,iBAAiB,CAAE;AAC7C"}
1	+ {"version":3,"names":["getVariationClassName","variation","getFontFamilyFromSetting","fontFamilies","setting","Array","isArray","fontFamilyVariable","replace","fontFamilySlug","split","slice","find","fontFamily","slug","getFontFamilies","themeJson","settings","typography","theme","bodyFontFamilySetting","styles","bodyFontFamily","headingFontFamilySetting","elements","heading","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/utils.js"],"sourcesContent":["/*\n \n * @param {string} variation The variation name.\n \n @return {string} The variation class name.\n */\nexport function getVariationClassName( variation ) {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nfunction getFontFamilyFromSetting( fontFamilies, setting ) {\n\tif ( ! Array.isArray( fontFamilies ) \|\| ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\nexport function getFontFamilies( themeJson ) {\n\tconst fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,qBAAqBA,CAAEC,SAAS,EAAG;EAClD,IAAK,CAAEA,SAAS,EAAG;IAClB,OAAO,EAAE;EACV;EACA,OAAQ,YAAYA,SAAW,EAAC;AACjC;AAEA,SAASC,wBAAwBA,CAAEC,YAAY,EAAEC,OAAO,EAAG;EAC1D,IAAK,CAAEC,KAAK,CAACC,OAAO,CAAEH,YAAa,CAAC,IAAI,CAAEC,OAAO,EAAG;IACnD,OAAO,IAAI;EACZ;EAEA,MAAMG,kBAAkB,GAAGH,OAAO,CAACI,OAAO,CAAE,MAAM,EAAE,EAAG,CAAC,CAACA,OAAO,CAAE,GAAG,EAAE,EAAG,CAAC;EAC3E,MAAMC,cAAc,GAAGF,kBAAkB,EAAEG,KAAK,CAAE,IAAK,CAAC,CAACC,KAAK,CAAE,CAAC,CAAE,CAAC,CAAE,CAAC,CAAE;EAEzE,OAAOR,YAAY,CAACS,IAAI,CACrBC,UAAU,IAAMA,UAAU,CAACC,IAAI,KAAKL,cACvC,CAAC;AACF;AAEA,OAAO,SAASM,eAAeA,CAAEC,SAAS,EAAG;EAC5C,MAAMb,YAAY,GAAGa,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEf,YAAY,EAAEgB,KAAK,CAAC,CAAC;EAC3E,MAAMC,qBAAqB,GAAGJ,SAAS,EAAEK,MAAM,EAAEH,UAAU,EAAEL,UAAU;EACvE,MAAMS,cAAc,GAAGpB,wBAAwB,CAC9CC,YAAY,EACZiB,qBACD,CAAC;EAED,MAAMG,wBAAwB,GAC7BP,SAAS,EAAEK,MAAM,EAAEG,QAAQ,EAAEC,OAAO,EAAEP,UAAU,EAAEL,UAAU;EAE7D,IAAIa,iBAAiB;EACrB,IAAK,CAAEH,wBAAwB,EAAG;IACjCG,iBAAiB,GAAGJ,cAAc;EACnC,CAAC,MAAM;IACNI,iBAAiB,GAAGxB,wBAAwB,CAC3CC,YAAY,EACZa,SAAS,EAAEK,MAAM,EAAEG,QAAQ,EAAEC,OAAO,EAAEP,UAAU,EAAEL,UACnD,CAAC;EACF;EAEA,OAAO,CAAES,cAAc,EAAEI,iBAAiB,CAAE;AAC7C"}

package/build-module/components/global-styles/variations/variations-color.js CHANGED Viewed

@@ -3,24 +3,23 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { __experimentalGrid as Grid, __experimentalVStack as VStack } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Subtitle from '../subtitle';
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
-export default function ColorVariations({
-  variations
-}) {
+import { useColorVariations } from '../hooks';
+export default function ColorVariations() {
+  const colorVariations = useColorVariations();
+  if (!colorVariations?.length) {
+    return null;
+  }
   return createElement(VStack, {
     spacing: 3
-  }, createElement(Subtitle, {
-    level: 3
-  }, __('Presets')), createElement(Grid, {
+  }, createElement(Grid, {
     columns: 3
-  }, variations.map((variation, index) => createElement(Variation, {
+  }, colorVariations.map((variation, index) => createElement(Variation, {
     key: index,
     variation: variation
   }, () => createElement(StylesPreviewColors, null)))));

package/build-module/components/global-styles/variations/variations-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","VStack","__","~~Subtitle~~","~~Variation~~","~~StylesPreviewColors~~","~~ColorVariations~~","~~variations~~","createElement","spacing","~~level","~~columns","map","variation","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\~~nimport { __ } from '@wordpress/i18n';\~~n\n/\n Internal dependencies\n */\nimport ~~Subtitle~~ from '~~../subtitle~~';\nimport ~~Variation~~ from '~~./variation~~';\nimport ~~StylesPreviewColors~~ from '../~~preview-colors~~';\n\nexport default function ColorVariations( { ~~variations~~ } ) {\n\~~treturn~~ (\n\t\~~t<VStack~~ ~~spacing={ 3 }>\~~n\t\t\t<~~Subtitle~~ ~~level~~={ 3 }~~>{ __( 'Presets' ) }</Subtitle~~>\n\t\t\t<Grid columns={ 3 }>\n\t\t\t\t{ ~~variations~~.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB~~;AAC9B,SAASC,EAAE,QAAQ,iBAAiB~~;;~~AAEpC~~;AACA;AACA;AACA,OAAOC,~~QAAQ~~,MAAM,aAAa;~~AAClC~~,OAAOC,~~SAAS~~,MAAM,~~aAAa~~;~~AACnC~~,~~OAAOC~~,~~mBAAmB~~,~~MAAM~~,~~mBAAmB~~;~~AAEnD~~,eAAe,SAASC,eAAeA,~~CAAE~~;~~EAAEC;AAAW~~,CAAC,~~EAAG~~;~~EACzD~~,~~OACCC~~,~~aAAA~~,~~CAACP~~,MAAM;~~IAACQ~~,OAAO,~~EAAG~~;~~EAAG~~,~~GACpBD~~,aAAA,~~CAACL~~,~~QAAQ~~;~~IAACO~~,~~KAAK~~,EAAG;EAAG,~~GAAGR~~,~~EAAE,CAAE,SAAU,CAAa,CAAC,EACpDM,~~aAAA,CAACT,IAAI;~~IAACY~~,OAAO,EAAG;EAAG,GAChBJ,~~UAAU~~,CAACK,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,~~KACnCN~~,aAAA,~~CAACJ~~,SAAS;~~IAACW~~,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,~~MAAML~~,aAAA,~~CAACH~~,mBAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}
1	+ {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","VStack","Variation","StylesPreviewColors","useColorVariations","ColorVariations","colorVariations","length","createElement","spacing","columns","map","variation","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport Variation from './variation';\nimport StylesPreviewColors from '../preview-colors';\nimport { useColorVariations } from '../hooks';\n\nexport default function ColorVariations() {\n\tconst colorVariations = useColorVariations();\n\n\tif ( ! colorVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Grid columns={ 3 }>\n\t\t\t\t{ colorVariations.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,mBAAmB;AACnD,SAASC,kBAAkB,QAAQ,UAAU;AAE7C,eAAe,SAASC,eAAeA,CAAA,EAAG;EACzC,MAAMC,eAAe,GAAGF,kBAAkB,CAAC,CAAC;EAE5C,IAAK,CAAEE,eAAe,EAAEC,MAAM,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAACP,MAAM;IAACQ,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACT,IAAI;IAACW,OAAO,EAAG;EAAG,GAChBJ,eAAe,CAACK,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KACxCL,aAAA,CAACN,SAAS;IAACY,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,MAAMJ,aAAA,CAACL,mBAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}

package/build-module/components/global-styles/variations/variations-typography.js CHANGED Viewed

@@ -2,55 +2,45 @@ import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import { __experimentalGrid as Grid, __experimentalVStack as VStack } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalGrid as Grid, __experimentalVStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
-import { unlock } from '../../../lock-unlock';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import PreviewTypography from '../preview-typography';
-import Subtitle from '../subtitle';
-import { getFontFamilies } from '../utils';
+import { useTypographyVariations } from '../hooks';
+import TypographyExample from '../typography-example';
+import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
-const {
-  GlobalStylesContext
-} = unlock(blockEditorPrivateApis);
 export default function TypographyVariations() {
-  const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'typography',
-    filter: variation => variation?.settings?.typography?.fontFamilies && Object.keys(variation?.settings?.typography?.fontFamilies).length
-  });
-  const {
-    base
-  } = useContext(GlobalStylesContext);
-  /*
-   * Filter duplicate variations based on the font families used in the variation.
-   */
-  const uniqueTypographyVariations = typographyVariations?.length ? Object.values(typographyVariations.reduce((acc, variation) => {
-    const [bodyFontFamily, headingFontFamily] = getFontFamilies(mergeBaseAndUserConfigs(base, variation));
-    if (headingFontFamily?.name && bodyFontFamily?.name && !acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`]) {
-      acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`] = variation;
-    }
-    return acc;
-  }, {})) : [];
+  const typographyVariations = useTypographyVariations();
+  if (!typographyVariations?.length) {
+    return null;
+  }
   return createElement(VStack, {
     spacing: 3
-  }, createElement(Subtitle, {
-    level: 3
-  }, __('Presets')), createElement(Grid, {
+  }, createElement(Grid, {
     columns: 3,
     className: "edit-site-global-styles-style-variations-container"
-  }, typographyVariations && typographyVariations.length ? uniqueTypographyVariations.map((variation, index) => createElement(Variation, {
+  }, typographyVariations && typographyVariations.length && typographyVariations.map((variation, index) => createElement(Variation, {
     key: index,
     variation: variation
-  }, () => createElement(PreviewTypography, {
-    variation: variation
-  }))) : null));
+  }, isFocused => createElement(PreviewIframe, {
+    label: variation?.title,
+    isFocused: isFocused
+  }, ({
+    ratio,
+    key
+  }) => createElement(HStack, {
+    key: key,
+    spacing: 10 * ratio,
+    justify: "center",
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, createElement(TypographyExample, {
+    variation: variation,
+    fontSize: 85 * ratio
+  })))))));
 }
 //# sourceMappingURL=variations-typography.js.map

package/build-module/components/global-styles/variations/variations-typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~useContext","~~__experimentalGrid","Grid","__experimentalVStack","~~VStack~~","__","~~privateApis~~","~~blockEditorPrivateApis~~","~~mergeBaseAndUserConfigs~~","~~unlock","useCurrentMergeThemeStyleVariationsWithUserConfig","PreviewTypography","Subtitle","getFontFamilies","~~Variation","~~GlobalStylesContext","~~TypographyVariations","typographyVariations","~~property~~","~~filter~~","~~variation~~","~~settings~~","~~typography~~","~~fontFamilies~~","~~Object~~","~~keys~~","~~length~~","~~base~~","~~uniqueTypographyVariations~~","~~values~~","~~reduce~~","~~acc~~","~~bodyFontFamily~~","~~headingFontFamily~~","~~name~~","~~createElement~~"~~,"spacing","level","columns","className","map","index","key"~~],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { ~~useContext } from '@wordpress/element';\nimport {~~\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as ~~VStack~~,\n} ~~from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis~~ as ~~blockEditorPrivateApis~~ } from '@wordpress/~~block-editor~~';\n\n/\n Internal dependencies\n /\nimport { ~~mergeBaseAndUserConfigs~~ } from '../~~global-styles-provider~~';\nimport { ~~unlock }~~ from '~~../../../lock~~-~~unlock~~';\nimport { ~~useCurrentMergeThemeStyleVariationsWithUserConfig }~~ from '~~../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport PreviewTypography from '~~../preview-~~typography~~';\nimport ~~Subtitle from '../subtitle';\nimport { getFontFamilies } from '../utils';\nimport~~ Variation from './variation';\n\~~nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\~~nexport default function TypographyVariations() {\n\tconst typographyVariations =\n\t\~~tuseCurrentMergeThemeStyleVariationsWithUserConfig~~( {\n\t\t\~~tproperty:~~ ~~'typography',\~~n\t\t~~\tfilter:~~ ( ~~variation~~ ~~) =>\~~n\t\t\t\~~tvariation?.settings?.typography?.fontFamilies &&\~~n\t\t\t\~~tObject.keys(~~ ~~variation?.settings?.typography?.fontFamilies~~ )\n\t\t\t\t\t~~.length,\~~n\t\t~~} );\n~~\n\~~tconst~~ { ~~base~~ ~~} = useContext( GlobalStylesContext );\~~n\n\t~~/\n~~\t * Filter duplicate variations based on the font families used in the variation.\n\t */\n\~~tconst~~ ~~uniqueTypographyVariations = typographyVariations?.length\~~n\t\t~~? Object.values(~~\n\t\t\t\ttypographyVariations.~~reduce~~( ( ~~acc~~, ~~variation~~ ) => {\n\t\t\t\t\~~tconst~~ [ ~~bodyFontFamily,~~ ~~headingFontFamily~~ ] =\n\t\t\t\t\t\~~tgetFontFamilies~~(\n\t\t\t\t\t\t\~~tmergeBaseAndUserConfigs( base, variation )\n\~~t\t\t\t\t\t~~);\n~~\t\t\t\t\~~tif~~ (\n\t\t\t\t\t\~~theadingFontFamily?.name &&\n~~\t\t\t\t\t\~~tbodyFontFamily?.name &&\n~~\t\t\t\t\t\t~~! acc[~~\n\t\t\t\t\t\t\t`${ ~~headingFontFamily?.name~~ ~~}:$~~{ ~~bodyFontFamily?.name~~ }`\n\t\t\t\t\t\t]\n\t\t\t\t\t~~) {~~\n\t\t\t\t\t\~~tacc[~~\n\t\t\t\t\t\t\t`${ ~~headingFontFamily?.name~~ ~~}:${~~ ~~bodyFontFamily?.name~~ }`\n\t\t\t\t\t\t~~] = variation;\n~~\t\t\t\t\t}\n\n\t\t\t\t\~~treturn acc;\n~~\t\t\t\t}, {~~} )~~\n\t\t )\n\t\t: ~~[];\~~n\n\~~treturn (~~\n\t\t~~<VStack spacing={ 3 }>\n~~\t\t\t~~<Subtitle~~ ~~level={ 3 }>{ __(~~ '~~Presets~~' ~~) }</Subtitle>\~~n\t\t\t~~<Grid~~\n\t\t\t\~~tcolumns={~~ 3 }\n\t\t\t\~~tclassName=\"edit-site-global-styles-style-variations-container~~\"\n\t\t\t>\n\t\t\t\t~~{ typographyVariations && typographyVariations.length~~\n\t\t\t\t\t~~? uniqueTypographyVariations.map( ( variation, index ) => (~~\n\t\t\t\t\t\t\t~~<Variation key~~={ ~~index }~~ variation={ ~~variation~~ }>\n\t\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t\t~~<PreviewTypography~~\n\t\t\t\t\t\t\t\t\t\~~tvariation={ variation }\~~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~~</Variation>\~~n\t\t\t\t\t ~~) )~~\n\t\t\t\t\t: ~~null~~ }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,~~SAASA~~,~~UAAU,QAAQ,oBAAoB;AAC/C,SACCC,~~kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,~~QACxB~~,~~uBAAuB;AAC9B~~,~~SAASC~~,~~EAAE~~,~~QAAQ~~,~~iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB~~;;~~AAE/E~~;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,~~2BAA2B~~;~~AACnE~~,~~SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,iDAAiD,QAAQ,kFAAkF;AACpJ,~~OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,~~QAAQ~~,MAAM,~~aAAa~~;~~AAClC~~,~~SAASC,eAAe,QAAQ,UAAU;AAC1C,~~OAAOC,SAAS,MAAM,aAAa;AAEnC,~~MAAM;EAAEC;AAAoB,CAAC,GAAGN,MAAM,CAAEF,sBAAuB,CAAC;AAEhE,~~eAAe,~~SAASS~~,oBAAoBA,CAAA,EAAG;EAC9C,MAAMC,oBAAoB,~~GACzBP~~,~~iDAAiD~~,~~CAAE;IAClDQ~~,~~QAAQ,EAAE,YAAY~~;~~IACtBC~~,~~MAAM~~,~~EAAIC~~,~~SAAS~~,~~IAClBA,SAAS,~~EAAEC,~~QAAQ~~,~~EAAEC~~,~~UAAU~~,~~EAAEC,YAAY,IAC7CC,MAAM,CAACC,~~IAAI,~~CAAEL~~,~~SAAS~~,~~EAAEC~~,~~QAAQ~~,~~EAAEC~~,~~UAAU~~,~~EAAEC~~,~~YAAa~~,~~CAAC~~,~~CAC1DG~~;~~EACJ~~,~~CAAE~~,~~CAAC;EAEJ~~,~~MAAM~~;~~IAAEC;EAAK~~,~~CAAC~~,~~GAAG3B,UAAU,CAAEe,mBAAoB,CAAC;;EAElD~~;~~AACD;AACA;EACC~~,~~MAAMa~~,~~0BAA0B~~,~~GAAGX~~,oBAAoB,~~EAAES~~,MAAM,~~GAC5DF~~,~~MAAM,CAACK,MAAM,CACbZ,~~oBAAoB,~~CAACa~~,~~MAAM~~,CAAE,CAAEC,~~GAAG,EAAEX,~~SAAS,~~KAAM;IAClD,MAAM,CAAEY,cAAc,~~EAAEC,~~iBAAiB~~,~~CAAE~~,~~GAC1CpB~~,~~eAAe~~,~~CACdL,uBAAuB,CAAEmB,IAAI,EAAEP,SAAU,CAC1C,CAAC~~;~~IACF~~,~~IACCa,iBAAiB,EAAEC,IAAI,IACvBF,cAAc,EAAEE,IAAI,IACpB,CAAEH,~~GAAG,~~CACH~~,~~GAAGE~~,~~iBAAiB~~,~~EAAEC~~,~~IAAM~~,~~IAAIF~~,~~cAAc~~,~~EAAEE~~,~~IAAM~~,~~EAAC,CACxD,EACA~~;~~MACDH~~,~~GAAG~~,~~CACD~~,~~GAAGE~~,~~iBAAiB~~,~~EAAEC~~,~~IAAM,IAAIF,cAAc,EAAEE,IAAM,EAAC,CACxD,GAAGd,~~SAAS~~;IACd;IAEA~~,~~OAAOW,GAAG~~;~~EACX~~,~~CAAC~~,~~EAAE,CAAC,~~CAAE,~~CACN~~,CAAC,~~GACD~~,~~EAAE;EAEL,OACCI,~~aAAA,~~CAAC/B~~,MAAM;~~IAACgC~~,~~OAAO~~,~~EAAG;EAAG~~,~~GACpBD,aAAA,CAACvB,QAAQ~~;~~IAACyB~~,~~KAAK~~,EAAG~~;EAAG~~,~~GAAGhC,~~EAAE,~~CAAE~~,~~SAAU,CAAa,CAAC,EACpD8B,aAAA,CAACjC,IAAI~~;~~IACJoC~~,OAAO,~~EAAG~~,~~CAAG~~;~~IACbC~~,~~SAAS~~,~~EAAC~~;~~EAAoD~~,~~GAE5DtB~~,~~oBAAoB~~,~~IAAIA,oBAAoB,CAACS,~~MAAM,~~GAClDE~~,~~0BAA0B~~,~~CAACY~~,~~GAAG,CAAE,CAAEpB,SAAS,EAAEqB,KAAK,KAClDN,~~aAAA,~~CAACrB~~,~~SAAS~~;~~IAAC4B~~,~~GAAG,EAAGD,KAAO;IAACrB,~~SAAS,EAAGA;~~EAAW~~,~~GAC7C~~,~~MACDe~~,~~aAAA~~,~~CAACxB,iBAAiB~~;~~IACjBS~~,~~SAAS,EAAGA;EAAW,~~CACvB,~~CAEQ~~,~~CACT~~,~~CAAC~~,~~GACH~~,~~IACE~~,CACC,CAAC;AAEX"}
1	+ {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","HStack","VStack","useTypographyVariations","TypographyExample","PreviewIframe","Variation","TypographyVariations","typographyVariations","length","createElement","spacing","columns","className","map","variation","index","key","isFocused","label","title","ratio","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { useTypographyVariations } from '../hooks';\nimport TypographyExample from '../typography-example';\nimport PreviewIframe from '../preview-iframe';\nimport Variation from './variation';\n\nexport default function TypographyVariations() {\n\tconst typographyVariations = useTypographyVariations();\n\n\tif ( ! typographyVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations &&\n\t\t\t\t\ttypographyVariations.length &&\n\t\t\t\t\ttypographyVariations.map( ( variation, index ) => (\n\t\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t\t\t<PreviewIframe\n\t\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\t\t\t\t\t\tjustify=\"center\"\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: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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\t\t<TypographyExample\n\t\t\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</PreviewIframe>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Variation>\n\t\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BD,oBAAoB,IAAIE,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,UAAU;AAClD,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,SAAS,MAAM,aAAa;AAEnC,eAAe,SAASC,oBAAoBA,CAAA,EAAG;EAC9C,MAAMC,oBAAoB,GAAGL,uBAAuB,CAAC,CAAC;EAEtD,IAAK,CAAEK,oBAAoB,EAAEC,MAAM,EAAG;IACrC,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAACR,MAAM;IAACS,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACX,IAAI;IACJa,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC;EAAoD,GAE5DL,oBAAoB,IACrBA,oBAAoB,CAACC,MAAM,IAC3BD,oBAAoB,CAACM,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KAC3CN,aAAA,CAACJ,SAAS;IAACW,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC3CG,SAAS,IACZR,aAAA,CAACL,aAAa;IACbc,KAAK,EAAGJ,SAAS,EAAEK,KAAO;IAC1BF,SAAS,EAAGA;EAAW,GAErB,CAAE;IAAEG,KAAK;IAAEJ;EAAI,CAAC,KACjBP,aAAA,CAACT,MAAM;IACNgB,GAAG,EAAGA,GAAK;IACXN,OAAO,EAAG,EAAE,GAAGU,KAAO;IACtBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHf,aAAA,CAACN,iBAAiB;IACjBW,SAAS,EAAGA,SAAW;IACvBW,QAAQ,EAAG,EAAE,GAAGL;EAAO,CACvB,CACM,CAEK,CAEN,CACV,CACE,CACC,CAAC;AAEX"}

package/build-module/components/header-edit-mode/index.js CHANGED Viewed

@@ -129,7 +129,8 @@ export default function HeaderEditMode() {
     onClick: () => {
       setIsBlockToolsCollapsed(collapsed => !collapsed);
     },
-    label: isBlockToolsCollapsed ? __('Show block tools') : __('Hide block tools')
+    label: isBlockToolsCollapsed ? __('Show block tools') : __('Hide block tools'),
+    size: "compact"
   }))), !isDistractionFree && createElement("div", {
     className: classnames('edit-site-header-edit-mode__center', {
       'is-collapsed': !isBlockToolsCollapsed && showTopToolbar