@wordpress/edit-site 4.19.0 → 5.1.0

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

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

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

@@ -36,7 +36,6 @@ function ScreenTextColor(_ref) {
     className: "edit-site-screen-text-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenTextColor","name","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AACA,QAAM,CAAEI,aAAF,IAAoBR,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMK,eAAe,GAAGP,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsBb,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,CAApC;AACA,QAAM,CAAEW,SAAF,IAAgBd,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,EAAsB,MAAtB,CAA9B;;AAEA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,sDADe;AAFjB,IADD,EAOC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGc,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,KARd;AASC,IAAA,aAAa,EAAGC,QATjB;AAUC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AAVvB,IAPD,CADD;AAsBA;;AAED,eAAeZ,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-text-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenTextColor","name","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AACA,QAAM,CAAEI,aAAF,IAAoBR,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMK,eAAe,GAAGP,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsBb,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,CAApC;AACA,QAAM,CAAEW,SAAF,IAAgBd,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,EAAsB,MAAtB,CAA9B;;AAEA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,sDADe;AAFjB,IADD,EAOC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGc,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGM,KAPd;AAQC,IAAA,aAAa,EAAGC,QARjB;AASC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AATvB,IAPD,CADD;AAqBA;;AAED,eAAeZ,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-text-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}

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

@@ -14,6 +14,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function Item(_ref) {
   let {
@@ -68,6 +69,8 @@ function ScreenTypography(_ref2) {
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Typography'),
     description: __('Manage the typography settings for different elements.')
+  }), createElement(BlockPreviewPanel, {
+    name: name
   }), !name && createElement("div", {
     className: "edit-site-global-styles-screen-typography"
   }, createElement(VStack, {

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen } from '@wordpress/components';
+import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
 /**
  * Internal dependencies
@@ -24,6 +24,9 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import ScreenBorder from './screen-border';
+import StyleBook from '../style-book';
+import ScreenCSS from './screen-css';
 
 function GlobalStylesNavigationScreen(_ref) {
   let {
@@ -39,7 +42,7 @@ function ContextScreens(_ref2) {
   let {
     name
   } = _ref2;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
   return createElement(Fragment, null, createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography'
   }, createElement(ScreenTypography, {
@@ -92,6 +95,10 @@ function ContextScreens(_ref2) {
     path: parentMenu + '/colors/button'
   }, createElement(ScreenButtonColor, {
     name: name
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/border'
+  }, createElement(ScreenBorder, {
+    name: name
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, createElement(ScreenLayout, {
@@ -99,7 +106,39 @@ function ContextScreens(_ref2) {
   })));
 }
 
-function GlobalStylesUI() {
+function GlobalStylesStyleBook(_ref3) {
+  let {
+    onClose
+  } = _ref3;
+  const navigator = useNavigator();
+  const {
+    path
+  } = navigator.location;
+  return createElement(StyleBook, {
+    isSelected: blockName => // Match '/blocks/core%2Fbutton' and
+    // '/blocks/core%2Fbutton/typography', but not
+    // '/blocks/core%2Fbuttons'.
+    path === `/blocks/${encodeURIComponent(blockName)}` || path.startsWith(`/blocks/${encodeURIComponent(blockName)}/`),
+    onSelect: blockName => {
+      // Clear navigator history by going back to the root.
+      const depth = path.match(/\//g).length;
+
+      for (let i = 0; i < depth; i++) {
+        navigator.goBack();
+      } // Now go to the selected block.
+
+
+      navigator.goTo('/blocks/' + encodeURIComponent(blockName));
+    },
+    onClose: onClose
+  });
+}
+
+function GlobalStylesUI(_ref4) {
+  let {
+    isStyleBookOpened,
+    onCloseStyleBook
+  } = _ref4;
   const blocks = getBlockTypes();
   return createElement(NavigatorProvider, {
     className: "edit-site-global-styles-sidebar__navigator-provider",
@@ -112,13 +151,17 @@ function GlobalStylesUI() {
     path: "/blocks"
   }, createElement(ScreenBlockList, null)), blocks.map(block => createElement(GlobalStylesNavigationScreen, {
     key: 'menu-block-' + block.name,
-    path: '/blocks/' + block.name
+    path: '/blocks/' + encodeURIComponent(block.name)
   }, createElement(ScreenBlock, {
     name: block.name
   }))), createElement(ContextScreens, null), blocks.map(block => createElement(ContextScreens, {
     key: 'screens-block-' + block.name,
     name: block.name
-  })));
+  })), isStyleBookOpened && createElement(GlobalStylesStyleBook, {
+    onClose: onCloseStyleBook
+  }), createElement(GlobalStylesNavigationScreen, {
+    path: "/css"
+  }, createElement(ScreenCSS, null)));
 }
 
 export default GlobalStylesUI;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenHeadingColor","ScreenButtonColor","ScreenLayout","ScreenStyleVariations","GlobalStylesNavigationScreen","className","props","filter","Boolean","join","ContextScreens","name","parentMenu","undefined","GlobalStylesUI","blocks","map","block"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { getBlockTypes } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackgroundColor from './screen-background-color';\nimport ScreenTextColor from './screen-text-color';\nimport ScreenLinkColor from './screen-link-color';\nimport ScreenHeadingColor from './screen-heading-color';\nimport ScreenButtonColor from './screen-button-color';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ContextScreens( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>\n\t\t\t\t<ScreenTypography name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/text' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/link' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/heading' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/button' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\t>\n\t\t\t\t<ScreenBackgroundColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\t>\n\t\t\t\t<ScreenHeadingColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/button' }\n\t\t\t>\n\t\t\t\t<ScreenButtonColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\n\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + block.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalUseNavigator","useNavigator","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenHeadingColor","ScreenButtonColor","ScreenLayout","ScreenStyleVariations","ScreenBorder","StyleBook","ScreenCSS","GlobalStylesNavigationScreen","className","props","filter","Boolean","join","ContextScreens","name","parentMenu","undefined","encodeURIComponent","GlobalStylesStyleBook","onClose","navigator","path","location","blockName","startsWith","depth","match","length","i","goBack","goTo","GlobalStylesUI","isStyleBookOpened","onCloseStyleBook","blocks","map","block"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { getBlockTypes } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackgroundColor from './screen-background-color';\nimport ScreenTextColor from './screen-text-color';\nimport ScreenLinkColor from './screen-link-color';\nimport ScreenHeadingColor from './screen-heading-color';\nimport ScreenButtonColor from './screen-button-color';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenBorder from './screen-border';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ContextScreens( { name } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '' : '/blocks/' + encodeURIComponent( name );\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>\n\t\t\t\t<ScreenTypography name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/text' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/link' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/heading' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/button' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\t>\n\t\t\t\t<ScreenBackgroundColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\t>\n\t\t\t\t<ScreenHeadingColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/button' }\n\t\t\t>\n\t\t\t\t<ScreenButtonColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>\n\t\t\t\t<ScreenBorder name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook( { onClose } ) {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` ||\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Clear navigator history by going back to the root.\n\t\t\t\tconst depth = path.match( /\\//g ).length;\n\t\t\t\tfor ( let i = 0; i < depth; i++ ) {\n\t\t\t\t\tnavigator.goBack();\n\t\t\t\t}\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t\tonClose={ onClose }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {\n\tconst blocks = getBlockTypes();\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ isStyleBookOpened && (\n\t\t\t\t<GlobalStylesStyleBook onClose={ onCloseStyleBook } />\n\t\t\t) }\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}

package/build-module/components/global-styles/use-global-styles-output.js

@@ -787,7 +787,7 @@ export function useGlobalStylesOutput() {
     return !!getSettings().disableLayoutStyles;
   });
   return useMemo(() => {
-    var _mergedConfig, _mergedConfig2;
+    var _mergedConfig, _mergedConfig2, _mergedConfig$styles$;
 
     if (!((_mergedConfig = mergedConfig) !== null && _mergedConfig !== void 0 && _mergedConfig.styles) || !((_mergedConfig2 = mergedConfig) !== null && _mergedConfig2 !== void 0 && _mergedConfig2.settings)) {
       return [];
@@ -804,6 +804,10 @@ export function useGlobalStylesOutput() {
     }, {
       css: globalStyles,
       isGlobalStyles: true
+    }, // Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
+    {
+      css: (_mergedConfig$styles$ = mergedConfig.styles.css) !== null && _mergedConfig$styles$ !== void 0 ? _mergedConfig$styles$ : '',
+      isGlobalStyles: true
     }];
     return [stylesheets, mergedConfig.settings, filters];
   }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles]);