npm - @wordpress/edit-site - Versions diffs - 4.4.0 → 4.7.0 - Mend

@wordpress/edit-site 4.4.0 → 4.7.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 (134) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["EMPTY_CONFIG","isGlobalStylesUserThemeJSON","version","useGlobalStylesReset","user","config","setUserConfig","GlobalStylesContext","canReset","useSetting","path","blockName","source","merged","mergedConfig","base","baseConfig","userConfig","fullPath","setSetting","newValue","currentConfig","newUserConfig","pathToSet","PATHS_WITH_MERGE","getSettingValueForContext","name","currentPath","getSettingValue","configToUse","result","custom","theme","default","resultWithFallback","useStyle","finalPath","setStyle","settings","ROOT_BLOCK_SUPPORTS","getSupportedGlobalStylesPanels","blockType","supportKeys","Object","keys","STYLE_PROPERTY","forEach","styleName","support","requiresOptOut","supports","push","useColorsPerOrigin","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","length","colors","useGradientsPerOrigin","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","gradients"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { get, cloneDeep, set, isEqual, has } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { _x } from '@wordpress/i18n';\nimport { useContext, useCallback, useMemo } from '@wordpress/element';\nimport {\n\tgetBlockType,\n\t__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,\n\t__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,\n} from '@wordpress/blocks';\n\n/\n Internal dependencies\n */\nimport { getValueFromVariable, getPresetVariableFromValue } from './utils';\nimport { GlobalStylesContext } from './context';\n\nconst EMPTY_CONFIG = { isGlobalStylesUserThemeJSON: true, version: 1 };\n\nexport const useGlobalStylesReset = () => {\n\tconst { user: config, setUserConfig } = useContext( GlobalStylesContext );\n\tconst canReset = !! config && ! isEqual( config, EMPTY_CONFIG );\n\treturn [\n\t\tcanReset,\n\t\tuseCallback( () => setUserConfig( () => EMPTY_CONFIG ), [\n\t\t\tsetUserConfig,\n\t\t] ),\n\t];\n};\n\nexport function useSetting( path, blockName, source = 'all' ) {\n\tconst {\n\t\tmerged: mergedConfig,\n\t\tbase: baseConfig,\n\t\tuser: userConfig,\n\t\tsetUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst fullPath = ! blockName\n\t\t? `settings.${ path }`\n\t\t: `settings.blocks.${ blockName }.${ path }`;\n\n\tconst setSetting = ( newValue ) => {\n\t\tsetUserConfig( ( currentConfig ) => {\n\t\t\tconst newUserConfig = cloneDeep( currentConfig );\n\t\t\tconst pathToSet = PATHS_WITH_MERGE[ path ]\n\t\t\t\t? fullPath + '.custom'\n\t\t\t\t: fullPath;\n\t\t\tset( newUserConfig, pathToSet, newValue );\n\n\t\t\treturn newUserConfig;\n\t\t} );\n\t};\n\n\tconst getSettingValueForContext = ( name ) => {\n\t\tconst currentPath = ! name\n\t\t\t? `settings.${ path }`\n\t\t\t: `settings.blocks.${ name }.${ path }`;\n\n\t\tconst getSettingValue = ( configToUse ) => {\n\t\t\tconst result = get( configToUse, currentPath );\n\t\t\tif ( PATHS_WITH_MERGE[ path ] ) {\n\t\t\t\treturn result?.custom ?? result?.theme ?? result?.default;\n\t\t\t}\n\t\t\treturn result;\n\t\t};\n\n\t\tlet result;\n\t\tswitch ( source ) {\n\t\t\tcase 'all':\n\t\t\t\tresult = getSettingValue( mergedConfig );\n\t\t\t\tbreak;\n\t\t\tcase 'user':\n\t\t\t\tresult = getSettingValue( userConfig );\n\t\t\t\tbreak;\n\t\t\tcase 'base':\n\t\t\t\tresult = getSettingValue( baseConfig );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthrow 'Unsupported source';\n\t\t}\n\n\t\treturn result;\n\t};\n\n\t// Unlike styles settings get inherited from top level settings.\n\tconst resultWithFallback =\n\t\tgetSettingValueForContext( blockName ) ?? getSettingValueForContext();\n\n\treturn [ resultWithFallback, setSetting ];\n}\n\nexport function useStyle( path, blockName, source = 'all' ) {\n\tconst {\n\t\tmerged: mergedConfig,\n\t\tbase: baseConfig,\n\t\tuser: userConfig,\n\t\tsetUserConfig,\n\t} = useContext( GlobalStylesContext );\n\tconst finalPath = ! blockName\n\t\t? `styles.${ path }`\n\t\t: `styles.blocks.${ blockName }.${ path }`;\n\n\tconst setStyle = ( newValue ) => {\n\t\tsetUserConfig( ( currentConfig ) => {\n\t\t\tconst newUserConfig = cloneDeep( currentConfig );\n\t\t\tset(\n\t\t\t\tnewUserConfig,\n\t\t\t\tfinalPath,\n\t\t\t\tgetPresetVariableFromValue(\n\t\t\t\t\tmergedConfig.settings,\n\t\t\t\t\tblockName,\n\t\t\t\t\tpath,\n\t\t\t\t\tnewValue\n\t\t\t\t)\n\t\t\t);\n\t\t\treturn newUserConfig;\n\t\t} );\n\t};\n\n\tlet result;\n\tswitch ( source ) {\n\t\tcase 'all':\n\t\t\tresult = getValueFromVariable(\n\t\t\t\tmergedConfig.settings,\n\t\t\t\tblockName,\n\t\t\t\tget( userConfig, finalPath ) ?? get( baseConfig, finalPath )\n\t\t\t);\n\t\t\tbreak;\n\t\tcase 'user':\n\t\t\tresult = getValueFromVariable(\n\t\t\t\tmergedConfig.settings,\n\t\t\t\tblockName,\n\t\t\t\tget( userConfig, finalPath )\n\t\t\t);\n\t\t\tbreak;\n\t\tcase 'base':\n\t\t\tresult = getValueFromVariable(\n\t\t\t\tbaseConfig.settings,\n\t\t\t\tblockName,\n\t\t\t\tget( baseConfig, finalPath )\n\t\t\t);\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tthrow 'Unsupported source';\n\t}\n\n\treturn [ result, setStyle ];\n}\n\nconst ROOT_BLOCK_SUPPORTS = [\n\t'background',\n\t'backgroundColor',\n\t'color',\n\t'linkColor',\n\t'fontFamily',\n\t'fontSize',\n\t'fontStyle',\n\t'fontWeight',\n\t'lineHeight',\n\t'textDecoration',\n\t'textTransform',\n\t'padding',\n];\n\nexport function getSupportedGlobalStylesPanels( name ) {\n\tif ( ! name ) {\n\t\treturn ROOT_BLOCK_SUPPORTS;\n\t}\n\n\tconst blockType = getBlockType( name );\n\n\tif ( ! blockType ) {\n\t\treturn [];\n\t}\n\n\tconst supportKeys = [];\n\tObject.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {\n\t\tif ( ! STYLE_PROPERTY[ styleName ].support ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Opting out means that, for certain support keys like background color,\n\t\t// blocks have to explicitly set the support value false. If the key is\n\t\t// unset, we still enable it.\n\t\tif ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {\n\t\t\tif (\n\t\t\t\thas(\n\t\t\t\t\tblockType.supports,\n\t\t\t\t\tSTYLE_PROPERTY[ styleName ].support[ 0 ]\n\t\t\t\t) &&\n\t\t\t\tget(\n\t\t\t\t\tblockType.supports,\n\t\t\t\t\tSTYLE_PROPERTY[ styleName ].support\n\t\t\t\t) !== false\n\t\t\t) {\n\t\t\t\treturn supportKeys.push( styleName );\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tget(\n\t\t\t\tblockType.supports,\n\t\t\t\tSTYLE_PROPERTY[ styleName ].support,\n\t\t\t\tfalse\n\t\t\t)\n\t\t) {\n\t\t\treturn supportKeys.push( styleName );\n\t\t}\n\t} );\n\n\treturn supportKeys;\n}\n\nexport function useColorsPerOrigin( name ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom', name );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme', name );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default', name );\n\tconst [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customColors, themeColors, defaultColors ] );\n}\n\nexport function useGradientsPerOrigin( name ) {\n\tconst [ customGradients ] = useSetting( 'color.gradients.custom', name );\n\tconst [ themeGradients ] = useSetting( 'color.gradients.theme', name );\n\tconst [ defaultGradients ] = useSetting( 'color.gradients.default', name );\n\tconst [ shouldDisplayDefaultGradients ] = useSetting(\n\t\t'color.defaultGradients'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["EMPTY_CONFIG","settings","styles","useGlobalStylesReset","user","config","setUserConfig","GlobalStylesContext","canReset","useSetting","path","blockName","source","merged","mergedConfig","base","baseConfig","userConfig","fullPath","setSetting","newValue","currentConfig","newUserConfig","pathToSet","PATHS_WITH_MERGE","getSettingValueForContext","name","currentPath","getSettingValue","configToUse","result","custom","theme","default","resultWithFallback","useStyle","finalPath","setStyle","ROOT_BLOCK_SUPPORTS","getSupportedGlobalStylesPanels","blockType","supportKeys","Object","keys","STYLE_PROPERTY","forEach","styleName","support","requiresOptOut","supports","push","useColorsPerOrigin","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","length","colors","useGradientsPerOrigin","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","gradients"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { get, cloneDeep, set, isEqual, has } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { _x } from '@wordpress/i18n';\nimport { useContext, useCallback, useMemo } from '@wordpress/element';\nimport {\n\tgetBlockType,\n\t__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,\n\t__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,\n} from '@wordpress/blocks';\n\n/\n Internal dependencies\n */\nimport { getValueFromVariable, getPresetVariableFromValue } from './utils';\nimport { GlobalStylesContext } from './context';\n\nconst EMPTY_CONFIG = { settings: {}, styles: {} };\n\nexport const useGlobalStylesReset = () => {\n\tconst { user: config, setUserConfig } = useContext( GlobalStylesContext );\n\tconst canReset = !! config && ! isEqual( config, EMPTY_CONFIG );\n\treturn [\n\t\tcanReset,\n\t\tuseCallback( () => setUserConfig( () => EMPTY_CONFIG ), [\n\t\t\tsetUserConfig,\n\t\t] ),\n\t];\n};\n\nexport function useSetting( path, blockName, source = 'all' ) {\n\tconst {\n\t\tmerged: mergedConfig,\n\t\tbase: baseConfig,\n\t\tuser: userConfig,\n\t\tsetUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst fullPath = ! blockName\n\t\t? `settings.${ path }`\n\t\t: `settings.blocks.${ blockName }.${ path }`;\n\n\tconst setSetting = ( newValue ) => {\n\t\tsetUserConfig( ( currentConfig ) => {\n\t\t\tconst newUserConfig = cloneDeep( currentConfig );\n\t\t\tconst pathToSet = PATHS_WITH_MERGE[ path ]\n\t\t\t\t? fullPath + '.custom'\n\t\t\t\t: fullPath;\n\t\t\tset( newUserConfig, pathToSet, newValue );\n\n\t\t\treturn newUserConfig;\n\t\t} );\n\t};\n\n\tconst getSettingValueForContext = ( name ) => {\n\t\tconst currentPath = ! name\n\t\t\t? `settings.${ path }`\n\t\t\t: `settings.blocks.${ name }.${ path }`;\n\n\t\tconst getSettingValue = ( configToUse ) => {\n\t\t\tconst result = get( configToUse, currentPath );\n\t\t\tif ( PATHS_WITH_MERGE[ path ] ) {\n\t\t\t\treturn result?.custom ?? result?.theme ?? result?.default;\n\t\t\t}\n\t\t\treturn result;\n\t\t};\n\n\t\tlet result;\n\t\tswitch ( source ) {\n\t\t\tcase 'all':\n\t\t\t\tresult = getSettingValue( mergedConfig );\n\t\t\t\tbreak;\n\t\t\tcase 'user':\n\t\t\t\tresult = getSettingValue( userConfig );\n\t\t\t\tbreak;\n\t\t\tcase 'base':\n\t\t\t\tresult = getSettingValue( baseConfig );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthrow 'Unsupported source';\n\t\t}\n\n\t\treturn result;\n\t};\n\n\t// Unlike styles settings get inherited from top level settings.\n\tconst resultWithFallback =\n\t\tgetSettingValueForContext( blockName ) ?? getSettingValueForContext();\n\n\treturn [ resultWithFallback, setSetting ];\n}\n\nexport function useStyle( path, blockName, source = 'all' ) {\n\tconst {\n\t\tmerged: mergedConfig,\n\t\tbase: baseConfig,\n\t\tuser: userConfig,\n\t\tsetUserConfig,\n\t} = useContext( GlobalStylesContext );\n\tconst finalPath = ! blockName\n\t\t? `styles.${ path }`\n\t\t: `styles.blocks.${ blockName }.${ path }`;\n\n\tconst setStyle = ( newValue ) => {\n\t\tsetUserConfig( ( currentConfig ) => {\n\t\t\tconst newUserConfig = cloneDeep( currentConfig );\n\t\t\tset(\n\t\t\t\tnewUserConfig,\n\t\t\t\tfinalPath,\n\t\t\t\tgetPresetVariableFromValue(\n\t\t\t\t\tmergedConfig.settings,\n\t\t\t\t\tblockName,\n\t\t\t\t\tpath,\n\t\t\t\t\tnewValue\n\t\t\t\t)\n\t\t\t);\n\t\t\treturn newUserConfig;\n\t\t} );\n\t};\n\n\tlet result;\n\tswitch ( source ) {\n\t\tcase 'all':\n\t\t\tresult = getValueFromVariable(\n\t\t\t\tmergedConfig.settings,\n\t\t\t\tblockName,\n\t\t\t\tget( userConfig, finalPath ) ?? get( baseConfig, finalPath )\n\t\t\t);\n\t\t\tbreak;\n\t\tcase 'user':\n\t\t\tresult = getValueFromVariable(\n\t\t\t\tmergedConfig.settings,\n\t\t\t\tblockName,\n\t\t\t\tget( userConfig, finalPath )\n\t\t\t);\n\t\t\tbreak;\n\t\tcase 'base':\n\t\t\tresult = getValueFromVariable(\n\t\t\t\tbaseConfig.settings,\n\t\t\t\tblockName,\n\t\t\t\tget( baseConfig, finalPath )\n\t\t\t);\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tthrow 'Unsupported source';\n\t}\n\n\treturn [ result, setStyle ];\n}\n\nconst ROOT_BLOCK_SUPPORTS = [\n\t'background',\n\t'backgroundColor',\n\t'color',\n\t'linkColor',\n\t'fontFamily',\n\t'fontSize',\n\t'fontStyle',\n\t'fontWeight',\n\t'lineHeight',\n\t'textDecoration',\n\t'textTransform',\n\t'padding',\n];\n\nexport function getSupportedGlobalStylesPanels( name ) {\n\tif ( ! name ) {\n\t\treturn ROOT_BLOCK_SUPPORTS;\n\t}\n\n\tconst blockType = getBlockType( name );\n\n\tif ( ! blockType ) {\n\t\treturn [];\n\t}\n\n\tconst supportKeys = [];\n\tObject.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {\n\t\tif ( ! STYLE_PROPERTY[ styleName ].support ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Opting out means that, for certain support keys like background color,\n\t\t// blocks have to explicitly set the support value false. If the key is\n\t\t// unset, we still enable it.\n\t\tif ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {\n\t\t\tif (\n\t\t\t\thas(\n\t\t\t\t\tblockType.supports,\n\t\t\t\t\tSTYLE_PROPERTY[ styleName ].support[ 0 ]\n\t\t\t\t) &&\n\t\t\t\tget(\n\t\t\t\t\tblockType.supports,\n\t\t\t\t\tSTYLE_PROPERTY[ styleName ].support\n\t\t\t\t) !== false\n\t\t\t) {\n\t\t\t\treturn supportKeys.push( styleName );\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tget(\n\t\t\t\tblockType.supports,\n\t\t\t\tSTYLE_PROPERTY[ styleName ].support,\n\t\t\t\tfalse\n\t\t\t)\n\t\t) {\n\t\t\treturn supportKeys.push( styleName );\n\t\t}\n\t} );\n\n\treturn supportKeys;\n}\n\nexport function useColorsPerOrigin( name ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom', name );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme', name );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default', name );\n\tconst [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customColors, themeColors, defaultColors ] );\n}\n\nexport function useGradientsPerOrigin( name ) {\n\tconst [ customGradients ] = useSetting( 'color.gradients.custom', name );\n\tconst [ themeGradients ] = useSetting( 'color.gradients.theme', name );\n\tconst [ defaultGradients ] = useSetting( 'color.gradients.default', name );\n\tconst [ shouldDisplayDefaultGradients ] = useSetting(\n\t\t'color.defaultGradients'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n}\n"]}

package/build/components/global-styles/navigation-button.js CHANGED Viewed

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NavigationBackButton = NavigationBackButton;
-exports.NavigationButton = NavigationButton;
+exports.NavigationBackButtonAsItem = NavigationBackButtonAsItem;
+exports.NavigationButtonAsItem = NavigationButtonAsItem;
 var _element = require("@wordpress/element");
@@ -37,13 +37,13 @@ function GenericNavigationButton(_ref) {
   }), (0, _element.createElement)(_components.FlexItem, null, children)), !icon && children);
 }
-function NavigationButton(props) {
+function NavigationButtonAsItem(props) {
   return (0, _element.createElement)(_components.__experimentalNavigatorButton, (0, _extends2.default)({
     as: GenericNavigationButton
   }, props));
 }
-function NavigationBackButton(props) {
+function NavigationBackButtonAsItem(props) {
   return (0, _element.createElement)(_components.__experimentalNavigatorBackButton, (0, _extends2.default)({
     as: GenericNavigationButton
   }, props));

package/build/components/global-styles/navigation-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["GenericNavigationButton","icon","children","props","~~NavigationButton~~","~~NavigationBackButton~~"],"mappings":";;;;;;;;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGA,SAASA,uBAAT,OAAiE;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkB,OAAGC;AAArB,GAA+B;AAChE,SACC,4BAAC,8BAAD,EAAWA,KAAX,EACGF,IAAI,IACL,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,0CAAD;AAAsB,IAAA,IAAI,EAAGA,IAA7B;AAAoC,IAAA,IAAI,EAAG;AAA3C,IADD,EAEC,4BAAC,oBAAD,QAAYC,QAAZ,CAFD,CAFF,EAOG,CAAED,IAAF,IAAUC,QAPb,CADD;AAWA;;AAED,SAASE,~~gBAAT~~,~~CAA2BD~~,~~KAA3B~~,~~EAAmC~~;~~AAClC~~,SAAO,4BAAC,yCAAD;AAAiB,IAAA,EAAE,EAAGH;AAAtB,KAAqDG,KAArD,EAAP;AACA;;AAED,SAASE,~~oBAAT~~,~~CAA+BF~~,~~KAA/B~~,~~EAAuC~~;~~AACtC~~,SAAO,4BAAC,6CAAD;AAAqB,IAAA,EAAE,EAAGH;AAA1B,KAAyDG,KAAzD,EAAP;AACA","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction ~~NavigationButton~~( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction ~~NavigationBackButton~~( props ) {\n\treturn <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;\n}\n\nexport { ~~NavigationButton~~, ~~NavigationBackButton~~ };\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["GenericNavigationButton","icon","children","props","NavigationButtonAsItem","NavigationBackButtonAsItem"],"mappings":";;;;;;;;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGA,SAASA,uBAAT,OAAiE;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkB,OAAGC;AAArB,GAA+B;AAChE,SACC,4BAAC,8BAAD,EAAWA,KAAX,EACGF,IAAI,IACL,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,0CAAD;AAAsB,IAAA,IAAI,EAAGA,IAA7B;AAAoC,IAAA,IAAI,EAAG;AAA3C,IADD,EAEC,4BAAC,oBAAD,QAAYC,QAAZ,CAFD,CAFF,EAOG,CAAED,IAAF,IAAUC,QAPb,CADD;AAWA;;AAED,SAASE,sBAAT,CAAiCD,KAAjC,EAAyC;AACxC,SAAO,4BAAC,yCAAD;AAAiB,IAAA,EAAE,EAAGH;AAAtB,KAAqDG,KAArD,EAAP;AACA;;AAED,SAASE,0BAAT,CAAqCF,KAArC,EAA6C;AAC5C,SAAO,4BAAC,6CAAD;AAAqB,IAAA,EAAE,EAAGH;AAA1B,KAAyDG,KAAzD,EAAP;AACA","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"]}

package/build/components/global-styles/palette.js CHANGED Viewed

@@ -47,7 +47,7 @@ function Palette(_ref) {
   }, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Palette')), (0, _element.createElement)(_components.__experimentalItemGroup, {
     isBordered: true,
     isSeparated: true
-  }, (0, _element.createElement)(_navigationButton.NavigationButton, {
+  }, (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: screenPath
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     direction: colors.length === 0 ? 'row-reverse' : 'row'

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","colors","screenPath","paletteButtonText","length","slice","map","color"],"mappings":";;;;;;;;;AAYA;;AATA;;AAQA;;AAMA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAYA;AACA;AACA;AAMA,MAAMA,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,OAA6B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC5B,QAAM,CAAEC,YAAF,IAAmB,uBAAY,sBAAZ,CAAzB;AACA,QAAM,CAAEC,WAAF,IAAkB,uBAAY,qBAAZ,CAAxB;AACA,QAAM,CAAEC,aAAF,IAAoB,uBAAY,uBAAZ,CAA1B;AAEA,QAAM,CAAEC,qBAAF,IAA4B,uBACjC,sBADiC,EAEjCJ,IAFiC,CAAlC;AAIA,QAAMK,MAAM,GAAG,sBACd,MAAM,CACL,IAAKJ,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADQ,EAQd,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARc,CAAf;AAWA,QAAME,UAAU,GAAG,CAAEN,IAAF,GAChB,iBADgB,GAEhB,aAAaA,IAAb,GAAoB,iBAFvB;AAGA,QAAMO,iBAAiB,GACtBF,MAAM,CAACG,MAAP,GAAgB,CAAhB,GACG,oBACA;AACA,gBAAI,UAAJ,EAAgB,WAAhB,EAA6BH,MAAM,CAACG,MAApC,CAFA,EAGAH,MAAM,CAACG,MAHP,CADH,GAMG,cAAI,mBAAJ,CAPJ;AASA,SACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,SAAJ,CAAZ,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAGF;~~AAAzB~~,KACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EACRD,MAAM,CAACG,MAAP,KAAkB,CAAlB,GAAsB,aAAtB,GAAsC;AAFxC,KAKC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGH,MAAM,CAACI,KAAP,CAAc,CAAd,EAAiB,CAAjB,EAAqBC,GAArB,CAA0B;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAC3B,4BAAC,8BAAD;AAAuB,MAAA,GAAG,EAAGA;AAA7B,OACC,4BAAC,0BAAD;AAAgB,MAAA,UAAU,EAAGA;AAA7B,MADD,CAD2B;AAAA,GAA1B,CADH,CALD,EAYC,4BAAC,oBAAD,QAAYJ,iBAAZ,CAZD,CADD,CADD,CAFD,CADD;AAuBA;;eAEcR,O","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { ~~NavigationButton~~ } from './navigation-button';\nimport { useSetting } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors \|\| EMPTY_COLORS ),\n\t\t\t...( themeColors \|\| EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + name + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<~~NavigationButton~~ path={ screenPath }>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t<ColorIndicatorWrapper key={ color }>\n\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</~~NavigationButton~~>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","colors","screenPath","paletteButtonText","length","slice","map","color"],"mappings":";;;;;;;;;AAYA;;AATA;;AAQA;;AAMA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAYA;AACA;AACA;AAMA,MAAMA,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,OAA6B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC5B,QAAM,CAAEC,YAAF,IAAmB,uBAAY,sBAAZ,CAAzB;AACA,QAAM,CAAEC,WAAF,IAAkB,uBAAY,qBAAZ,CAAxB;AACA,QAAM,CAAEC,aAAF,IAAoB,uBAAY,uBAAZ,CAA1B;AAEA,QAAM,CAAEC,qBAAF,IAA4B,uBACjC,sBADiC,EAEjCJ,IAFiC,CAAlC;AAIA,QAAMK,MAAM,GAAG,sBACd,MAAM,CACL,IAAKJ,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADQ,EAQd,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARc,CAAf;AAWA,QAAME,UAAU,GAAG,CAAEN,IAAF,GAChB,iBADgB,GAEhB,aAAaA,IAAb,GAAoB,iBAFvB;AAGA,QAAMO,iBAAiB,GACtBF,MAAM,CAACG,MAAP,GAAgB,CAAhB,GACG,oBACA;AACA,gBAAI,UAAJ,EAAgB,WAAhB,EAA6BH,MAAM,CAACG,MAApC,CAFA,EAGAH,MAAM,CAACG,MAHP,CADH,GAMG,cAAI,mBAAJ,CAPJ;AASA,SACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,SAAJ,CAAZ,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,wCAAD;AAAwB,IAAA,IAAI,EAAGF;AAA/B,KACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EACRD,MAAM,CAACG,MAAP,KAAkB,CAAlB,GAAsB,aAAtB,GAAsC;AAFxC,KAKC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGH,MAAM,CAACI,KAAP,CAAc,CAAd,EAAiB,CAAjB,EAAqBC,GAArB,CAA0B;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAC3B,4BAAC,8BAAD;AAAuB,MAAA,GAAG,EAAGA;AAA7B,OACC,4BAAC,0BAAD;AAAgB,MAAA,UAAU,EAAGA;AAA7B,MADD,CAD2B;AAAA,GAA1B,CADH,CALD,EAYC,4BAAC,oBAAD,QAAYJ,iBAAZ,CAZD,CADD,CADD,CAFD,CADD;AAuBA;;eAEcR,O","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors \|\| EMPTY_COLORS ),\n\t\t\t...( themeColors \|\| EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + name + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t<ColorIndicatorWrapper key={ color }>\n\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}

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

@@ -79,11 +79,22 @@ const StylesPreview = _ref => {
       color
     } = _ref2;
     return color !== backgroundColor && color !== headingColor;
-  }).slice(0, 2);
+  }).slice(0, 2); // Reset leaked styles from WP common.css.
+  const editorStyles = (0, _element.useMemo)(() => {
+    if (styles) {
+      return [...styles, {
+        css: 'body{min-width: 0;}',
+        isGlobalStyles: true
+      }];
+    }
+    return styles;
+  }, [styles]);
   return (0, _element.createElement)(_blockEditor.__unstableIframe, {
     className: "edit-site-global-styles-preview__iframe",
     head: (0, _element.createElement)(_blockEditor.__unstableEditorStyles, {
-      styles: styles
+      styles: editorStyles
     }),
     style: {
       height: normalizedHeight * ratio,

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

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

package/build/components/global-styles/screen-block-list.js CHANGED Viewed

@@ -84,7 +84,7 @@ function BlockMenuItem(_ref) {
     return null;
   }
-  return (0, _element.createElement)(_navigationButton.NavigationButton, {
+  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: '/blocks/' + block.name
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"

package/build/components/global-styles/screen-block-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","speak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":";;;;;;;;;AAWA;;AARA;;AACA;;AACA;;AAKA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAxBA;AACA;AACA;;AAcA;AACA;AACA;AAQA,SAASA,mBAAT,GAA+B;AAC9B,QAAMC,UAAU,GAAG,qBAChBC,MAAF,IAAcA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,aAAtB,EADI,EAElB,EAFkB,CAAnB,CAD8B,CAK9B;AACA;AACA;AACA;AACA;;AACA,QAAMC,WAAW,GAAG,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AACxC,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAoBH,MAA1B;AACA,UAAMI,IAAI,GAAGH,KAAK,CAACI,IAAN,CAAWC,UAAX,CAAuB,OAAvB,IAAmCJ,IAAnC,GAA0CC,OAAvD;AACAC,IAAAA,IAAI,CAACG,IAAL,CAAWN,KAAX;AACA,WAAOD,MAAP;AACA,GALD;;AAMA,QAAM;AACLE,IAAAA,IAAI,EAAEM,SADD;AAELL,IAAAA,OAAO,EAAEM;AAFJ,MAGFd,UAAU,CAACe,MAAX,CAAmBX,WAAnB,EAAgC;AAAEG,IAAAA,IAAI,EAAE,EAAR;AAAYC,IAAAA,OAAO,EAAE;AAArB,GAAhC,CAHJ;AAIA,SAAO,CAAE,GAAGK,SAAL,EAAgB,GAAGC,YAAnB,CAAP;AACA;;AAED,SAASE,aAAT,OAAoC;AAAA,MAAZ;AAAEV,IAAAA;AAAF,GAAY;AACnC,QAAMW,kBAAkB,GAAG,4CAAuBX,KAAK,CAACI,IAA7B,CAA3B;AACA,QAAMQ,aAAa,GAAG,kCAAkBZ,KAAK,CAACI,IAAxB,CAAtB;AACA,QAAMS,cAAc,GAAG,oCAAmBb,KAAK,CAACI,IAAzB,CAAvB;AACA,QAAMU,kBAAkB,GAAG,4CAAuBd,KAAK,CAACI,IAA7B,CAA3B;AACA,QAAMW,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBL,kBAAkB,IAAIC,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAG,aAAahB,KAAK,CAACI;~~AAA5C~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,sBAAD;AAAW,IAAA,IAAI,EAAGJ,KAAK,CAACiB;AAAxB,IADD,EAEC,4BAAC,oBAAD,QAAYjB,KAAK,CAACkB,KAAlB,CAFD,CADD,CADD;AAQA;;AAED,SAASC,eAAT,GAA2B;AAC1B,QAAMC,gBAAgB,GAAG3B,mBAAmB,EAA5C;AACA,QAAM,CAAE4B,WAAF,EAAeC,cAAf,IAAkC,uBAAU,EAAV,CAAxC;AACA,QAAMC,cAAc,GAAG,0BAAaC,WAAb,EAAoB,GAApB,CAAvB;AACA,QAAMC,oBAAoB,GAAG,qBAC1B9B,MAAF,IAAcA,MAAM,CAAEC,aAAF,CAAN,CAAsB6B,oBADR,EAE5B,EAF4B,CAA7B;AAIA,QAAMC,kBAAkB,GAAG,sBAAS,MAAM;AACzC,QAAK,CAAEL,WAAP,EAAqB;AACpB,aAAOD,gBAAP;AACA;;AACD,WAAOA,gBAAgB,CAACO,MAAjB,CAA2BC,SAAF,IAC/BH,oBAAoB,CAAEG,SAAF,EAAaP,WAAb,CADd,CAAP;AAGA,GAP0B,EAOxB,CAAEA,WAAF,EAAeD,gBAAf,EAAiCK,oBAAjC,CAPwB,CAA3B;AASA,QAAMI,iBAAiB,GAAG,sBAA1B,CAjB0B,CAmB1B;;AACA,0BAAW,MAAM;AAChB,QAAK,CAAER,WAAP,EAAqB;AACpB;AACA,KAHe,CAIhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,UAAMS,KAAK,GAAGD,iBAAiB,CAACE,OAAlB,CAA0BC,iBAAxC;AACA,UAAMC,mBAAmB,GAAG;AAC3B;AACA,kBAAI,kBAAJ,EAAwB,mBAAxB,EAA6CH,KAA7C,CAF2B,EAG3BA,KAH2B,CAA5B;AAKAP,IAAAA,cAAc,CAAEU,mBAAF,EAAuBH,KAAvB,CAAd;AACA,GAnBD,EAmBG,CAAET,WAAF,EAAeE,cAAf,CAnBH;AAqBA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,qEADa;AAFf,IADD,EAOC,4BAAC,yBAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,QAAQ,EAAGD,cAFZ;AAGC,IAAA,KAAK,EAAGD,WAHT;AAIC,IAAA,KAAK,EAAG,cAAI,mBAAJ,CAJT;AAKC,IAAA,WAAW,EAAG,cAAI,QAAJ;AALf,IAPD,EAcC;AACC,IAAA,GAAG,EAAGQ,iBADP;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGH,kBAAkB,CAACQ,GAAnB,CAA0BlC,KAAF,IACzB,4BAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACI;AAFjC,IADC,CAJH,CAdD,CADD;AA4BA;;eAEce,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/\n Internal dependencies\n /\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { ~~NavigationButton~~ } from './navigation-button';\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst {\n\t\tcore: coreItems,\n\t\tnoncore: nonCoreItems,\n\t} = blockItems.reduce( groupByType, { core: [], noncore: [] } );\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel \|\| hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel \|\| hasColorPanel \|\| hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<~~NavigationButton~~ path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</~~NavigationButton~~>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/ translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","speak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/\n Internal dependencies\n /\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst {\n\t\tcore: coreItems,\n\t\tnoncore: nonCoreItems,\n\t} = blockItems.reduce( groupByType, { core: [], noncore: [] } );\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel \|\| hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel \|\| hasColorPanel \|\| hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/ translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

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

@@ -46,7 +46,7 @@ function BackgroundColorItem(_ref) {
     return null;
   }
-  return (0, _element.createElement)(_navigationButton.NavigationButton, {
+  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: parentMenu + '/colors/background'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -70,7 +70,7 @@ function TextColorItem(_ref2) {
     return null;
   }
-  return (0, _element.createElement)(_navigationButton.NavigationButton, {
+  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: parentMenu + '/colors/text'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -94,7 +94,7 @@ function LinkColorItem(_ref3) {
     return null;
   }
-  return (0, _element.createElement)(_navigationButton.NavigationButton, {
+  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: parentMenu + '/colors/link'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAWA;;AACA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAUA;AACA;AACA;AAQA,SAASA,mBAAT,OAAqD;AAAA,MAAvB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAuB;AACpD,QAAMC,QAAQ,GAAG,2CAAgCF,IAAhC,CAAjB;AACA,QAAMG,UAAU,GACfD,QAAQ,CAACE,QAAT,CAAmB,iBAAnB,KACAF,QAAQ,CAACE,QAAT,CAAmB,YAAnB,CAFD;AAGA,QAAM,CAAEC,eAAF,IAAsB,qBAAU,kBAAV,EAA8BL,IAA9B,CAA5B;AACA,QAAM,CAAEM,aAAF,IAAoB,qBAAU,gBAAV,EAA4BN,IAA5B,CAA1B;;AAEA,MAAK,CAAEG,UAAP,EAAoB;AACnB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAGF,UAAU,GAAG;~~AAAtC~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,8BAAD;AAAuB,IAAA,QAAQ,EAAG;AAAlC,KACC,4BAAC,0BAAD;AACC,IAAA,UAAU,EAAGK,aAAH,aAAGA,aAAH,cAAGA,aAAH,GAAoBD;AAD/B,IADD,CADD,EAMC,4BAAC,oBAAD,QAAY,cAAI,YAAJ,CAAZ,CAND,CADD,CADD;AAYA;;AAED,SAASE,aAAT,QAA+C;AAAA,MAAvB;AAAEP,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAuB;AAC9C,QAAMC,QAAQ,GAAG,2CAAgCF,IAAhC,CAAjB;AACA,QAAMG,UAAU,GAAGD,QAAQ,CAACE,QAAT,CAAmB,OAAnB,CAAnB;AACA,QAAM,CAAEI,KAAF,IAAY,qBAAU,YAAV,EAAwBR,IAAxB,CAAlB;;AAEA,MAAK,CAAEG,UAAP,EAAoB;AACnB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAGF,UAAU,GAAG;~~AAAtC~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,8BAAD;AAAuB,IAAA,QAAQ,EAAG;AAAlC,KACC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGO;AAA7B,IADD,CADD,EAIC,4BAAC,oBAAD,QAAY,cAAI,MAAJ,CAAZ,CAJD,CADD,CADD;AAUA;;AAED,SAASC,aAAT,QAA+C;AAAA,MAAvB;AAAET,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAuB;AAC9C,QAAMC,QAAQ,GAAG,2CAAgCF,IAAhC,CAAjB;AACA,QAAMG,UAAU,GAAGD,QAAQ,CAACE,QAAT,CAAmB,WAAnB,CAAnB;AACA,QAAM,CAAEI,KAAF,IAAY,qBAAU,0BAAV,EAAsCR,IAAtC,CAAlB;;AAEA,MAAK,CAAEG,UAAP,EAAoB;AACnB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAGF,UAAU,GAAG;~~AAAtC~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,8BAAD;AAAuB,IAAA,QAAQ,EAAG;AAAlC,KACC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGO;AAA7B,IADD,CADD,EAIC,4BAAC,oBAAD,QAAY,cAAI,OAAJ,CAAZ,CAJD,CADD,CADD;AAUA;;AAED,SAASE,YAAT,QAAkC;AAAA,MAAX;AAAEV,IAAAA;AAAF,GAAW;AACjC,QAAMC,UAAU,GAAGD,IAAI,KAAKW,SAAT,GAAqB,EAArB,GAA0B,aAAaX,IAA1D;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,iFADa;AAFf,IADD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,IADD,EAGC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,UAAJ,CAAZ,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,mBAAD;AACC,IAAA,IAAI,EAAGA,IADR;AAEC,IAAA,UAAU,EAAGC;AAFd,IADD,EAKC,4BAAC,aAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC;AAFd,IALD,EASC,4BAAC,aAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC;AAFd,IATD,CAFD,CAHD,CADD,CARD,CADD;AAkCA;;eAEcS,Y","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { ~~NavigationButton~~ } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) \|\|\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<~~NavigationButton~~ path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</~~NavigationButton~~>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<~~NavigationButton~~ path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</~~NavigationButton~~>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<~~NavigationButton~~ path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</~~NavigationButton~~>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\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\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\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<BackgroundColorItem\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/>\n\t\t\t\t\t\t\t<TextColorItem\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/>\n\t\t\t\t\t\t\t<LinkColorItem\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/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) \|\|\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\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\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\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<BackgroundColorItem\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/>\n\t\t\t\t\t\t\t<TextColorItem\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/>\n\t\t\t\t\t\t\t<LinkColorItem\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/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

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

@@ -45,14 +45,24 @@ function ScreenRoot() {
   return (0, _element.createElement)(_components.Card, {
     size: "small"
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 2
-  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardMedia, null, (0, _element.createElement)(_preview.default, null))), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_navigationButton.NavigationButton, {
+    spacing: 4
+  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardMedia, null, (0, _element.createElement)(_preview.default, null))), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: "/variations"
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"
   }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Browse styles')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
     icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-  }))))), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_contextMenu.default, null)), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_components.__experimentalItem, null, (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')), (0, _element.createElement)(_navigationButton.NavigationButton, {
+  })))), (0, _element.createElement)(_contextMenu.default, null))), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    as: "p",
+    paddingTop: 2
+    /*
+     * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
+     * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+     */
+    ,
+    paddingX: "13px",
+    marginBottom: 4
+  }, (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')), (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: "/blocks"
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAWA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAiBA;AACA;AACA;AAMA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBC,eADiB,CAAN,CAEVC,mDAFU;AADN,KAAP;AAKA,GANsB,EAMpB,EANoB,CAAvB;AAQA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gBAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEH,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEI,MAAd,CAAD,IACD,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAC;~~AAAvB~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,~~QAAY~~,cAAI,eAAJ,~~CAAZ~~,CADD,~~EAEC~~,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,~~IAFD~~,CADD,CAPF,CADD,CADD,~~EAuBC~~,4BAAC,oBAAD,QACC,4BAAC,~~oBAAD~~,~~OADD~~,~~CAvBD~~,~~EA2BC~~,~~4BAAC~~,~~uBAAD~~,~~OA3BD~~,~~EA6BC~~,~~4BAAC~~,~~oBAAD~~,~~QACC~~,~~4BAAC~~,~~mCAAD~~,~~QACC~~,~~4BAAC~~,~~8BAAD~~,~~QACG,~~cACD,iEADC,~~CADH~~,CADD,~~EAMC~~,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAC;~~AAAvB~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CADD,~~CAND,~~CADD,~~CA7BD~~,CADD;~~AAiDA~~;;eAEcP,U","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\~~t__experimentalItem~~ as ~~Item~~,\n\~~t__experimentalHStack~~ as ~~HStack~~,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/\n Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ~~NavigationButton~~ } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<~~NavigationButton~~ path=\"/variations\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Browse styles' ) }</FlexItem>\n\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</HStack>\n\t\t\t\t\t\t</~~NavigationButton~~>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<~~ContextMenu />\~~n\t\t\t~~</CardBody>\n~~\n\t\t\t~~<CardDivider~~ ~~/>\~~n\n\t\t\t~~<CardBody>\~~n\t\t\t\t~~<ItemGroup>\~~n\t\t\t\t\t~~<Item>\~~n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t~~</Item~~>\n\t\t\t\t\t<~~NavigationButton~~ path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</~~NavigationButton~~>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAWA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAiBA;AACA;AACA;AAMA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBC,eADiB,CAAN,CAEVC,mDAFU;AADN,KAAP;AAKA,GANsB,EAMpB,EANoB,CAAvB;AAQA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gBAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEH,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEI,MAAd,CAAD,IACD,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AAAwB,IAAA,IAAI,EAAC;AAA7B,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACG,cAAI,eAAJ,CADH,CADD,EAIC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IAJD,CADD,CADD,CAPF,EAsBC,4BAAC,oBAAD,OAtBD,CADD,CADD,EA4BC,4BAAC,uBAAD,OA5BD,EA8BC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG;AACb;AACL;AACA;AACA;AANI;AAOC,IAAA,QAAQ,EAAC,MAPV;AAQC,IAAA,YAAY,EAAG;AARhB,KAUG,cACD,iEADC,CAVH,CADD,EAeC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AAAwB,IAAA,IAAI,EAAC;AAA7B,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CADD,CADD,CAfD,CA9BD,CADD;AA2DA;;eAEcP,U","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/\n Internal dependencies\n /\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem path=\"/variations\">\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}

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

@@ -54,7 +54,7 @@ function Item(_ref) {
     return null;
   }
-  return (0, _element.createElement)(_navigationButton.NavigationButton, {
+  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: parentMenu + '/typography/' + element
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AASA;AACA;AACA;AAOA,SAASA,IAAT,OAAsD;AAAA,MAAvC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAR;AAAoBC,IAAAA,OAApB;AAA6BC,IAAAA;AAA7B,GAAuC;AACrD,QAAMC,UAAU,GAAG,CAAEJ,IAArB;AACA,QAAMK,MAAM,GACXH,OAAO,KAAK,MAAZ,IAAsB,CAAEA,OAAxB,GAAkC,EAAlC,GAAwC,YAAYA,OAAS,GAD9D;AAEA,QAAMI,WAAW,GAChBJ,OAAO,KAAK,MAAZ,GACG;AACAK,IAAAA,cAAc,EAAE;AADhB,GADH,GAIG,EALJ;AAMA,QAAM,CAAEC,UAAF,IAAiB,qBAAUH,MAAM,GAAG,uBAAnB,EAA4CL,IAA5C,CAAvB;AACA,QAAM,CAAES,SAAF,IAAgB,qBAAUJ,MAAM,GAAG,sBAAnB,EAA2CL,IAA3C,CAAtB;AACA,QAAM,CAAEU,UAAF,IAAiB,qBAAUL,MAAM,GAAG,uBAAnB,EAA4CL,IAA5C,CAAvB;AACA,QAAM,CAAEW,aAAF,IAAoB,qBACzBN,MAAM,GAAG,0BADgB,EAEzBL,IAFyB,CAA1B;AAIA,QAAM,CAAEY,eAAF,IAAsB,qBAAUP,MAAM,GAAG,kBAAnB,EAAuCL,IAAvC,CAA5B;AACA,QAAM,CAAEa,aAAF,IAAoB,qBAAUR,MAAM,GAAG,gBAAnB,EAAqCL,IAArC,CAA1B;AACA,QAAM,CAAEc,KAAF,IAAY,qBAAUT,MAAM,GAAG,YAAnB,EAAiCL,IAAjC,CAAlB;;AAEA,MAAK,CAAEI,UAAP,EAAoB;AACnB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,~~kCAAD~~;~~AAAkB~~,IAAA,IAAI,EAAGH,UAAU,GAAG,cAAb,GAA8BC;~~AAAvD~~,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sDADX;AAEC,IAAA,KAAK,EAAG;AACPM,MAAAA,UAAU,EAAEA,UAAF,aAAEA,UAAF,cAAEA,UAAF,GAAgB,OADnB;AAEPO,MAAAA,UAAU,EAAEF,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD,eAFtB;AAGPE,MAAAA,KAHO;AAIPL,MAAAA,SAJO;AAKPC,MAAAA,UALO;AAMPC,MAAAA,aANO;AAOP,SAAGL;AAPI;AAFT,KAYG,cAAI,IAAJ,CAZH,CADD,EAeC,4BAAC,oBAAD,QAAYH,KAAZ,CAfD,CADD,CADD;AAqBA;;AAED,SAASa,gBAAT,QAAsC;AAAA,MAAX;AAAEhB,IAAAA;AAAF,GAAW;AACrC,QAAMC,UAAU,GAAGD,IAAI,KAAKiB,SAAT,GAAqB,EAArB,GAA0B,aAAajB,IAA1D;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,YAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,wDADa;AAFf,IADD,EAQG,CAAEA,IAAF,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,UAAJ,CAAZ,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGA,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,MAHT;AAIC,IAAA,KAAK,EAAG,cAAI,MAAJ;AAJT,IADD,EAOC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,MAHT;AAIC,IAAA,KAAK,EAAG,cAAI,OAAJ;AAJT,IAPD,CAFD,CADD,CATF,EA8BG,CAAC,CAAED,IAAH,IAAW,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGA,IAAxB;AAA+B,IAAA,OAAO,EAAC;AAAvC,IA9Bd,CADD;AAkCA;;eAEcgB,gB","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } 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 { ~~NavigationButton~~ } 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\treturn (\n\t\t<~~NavigationButton~~ path={ parentMenu + '/typography/' + element }>\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</~~NavigationButton~~>\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</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"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } 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\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>\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</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/components/global-styles/use-global-styles-output.js CHANGED Viewed

@@ -203,14 +203,8 @@ function getStylesDeclarations() {
   }, []); // The goal is to move everything to server side generated engine styles
   // This is temporary as we absorb more and more styles into the engine.
-  const extraRules = (0, _styleEngine.getCSSRules)(blockStyles, {
-    selector: 'self'
-  });
+  const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
   extraRules.forEach(rule => {
-    if (rule.selector !== 'self') {
-      throw "This style can't be added as inline style";
-    }
     const cssProperty = rule.key.startsWith('--') ? rule.key : (0, _lodash.kebabCase)(rule.key);
     output.push(`${cssProperty}: ${compileStyleValue(rule.value)}`);
   });