npm - @wordpress/edit-site - Versions diffs - 4.8.0 → 4.9.0 - Mend

@wordpress/edit-site 4.8.0 → 4.9.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 (119) 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","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(\n\t\t\t() => setUserConfig( () => EMPTY_CONFIG ),\n\t\t\t[ setUserConfig ]\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(\n\t\t\t() => setUserConfig( () => EMPTY_CONFIG ),\n\t\t\t[ setUserConfig ]\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'buttonColor',\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/palette.js CHANGED Viewed

@@ -48,7 +48,8 @@ function Palette(_ref) {
     isBordered: true,
     isSeparated: true
   }, (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: screenPath
+    path: screenPath,
+    "aria-label": (0, _i18n.__)('Color palettes')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     direction: colors.length === 0 ? 'row-reverse' : 'row'
   }, (0, _element.createElement)(_components.__experimentalZStack, {

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,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"]}
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;AACC,IAAA,IAAI,EAAGF,UADR;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIC,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,CAJD,CADD,CAFD,CADD;AA0BA;;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\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\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/screen-block-list.js CHANGED Viewed

@@ -84,8 +84,11 @@ function BlockMenuItem(_ref) {
     return null;
   }
+  const navigationButtonLabel = (0, _i18n.sprintf)( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+  (0, _i18n.__)('%s block styles'), block.title);
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: '/blocks/' + block.name
+    path: '/blocks/' + block.name,
+    "aria-label": navigationButtonLabel
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_blockEditor.BlockIcon, {

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;AAAEE,IAAAA,IAAI,EAAEM,SAAR;AAAmBL,IAAAA,OAAO,EAAEM;AAA5B,MAA6Cd,UAAU,CAACe,MAAX,CAClDX,WADkD,EAElD;AAAEG,IAAAA,IAAI,EAAE,EAAR;AAAYC,IAAAA,OAAO,EAAE;AAArB,GAFkD,CAAnD;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,wCAAD;~~AAAwB~~,IAAA,IAAI,EAAG,~~aAAahB~~,KAAK,CAACI;~~AAAlD~~,~~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 { 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 { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\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"]}
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","navigationButtonLabel","title","icon","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 { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\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\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + block.name }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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-button-color.js ADDED Viewed

@@ -0,0 +1,80 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _blockEditor = require("@wordpress/block-editor");
+var _header = _interopRequireDefault(require("./header"));
+var _hooks = require("./hooks");
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+function ScreenButtonColor(_ref) {
+  let {
+    name
+  } = _ref;
+  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
+  const [solids] = (0, _hooks.useSetting)('color.palette', name);
+  const [areCustomSolidsEnabled] = (0, _hooks.useSetting)('color.custom', name);
+  const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
+  const [isBackgroundEnabled] = (0, _hooks.useSetting)('color.background', name);
+  const hasButtonColor = supports.includes('buttonColor') && isBackgroundEnabled && (solids.length > 0 || areCustomSolidsEnabled);
+  const [buttonTextColor, setButtonTextColor] = (0, _hooks.useStyle)('elements.button.color.text', name);
+  const [userButtonTextColor] = (0, _hooks.useStyle)('elements.button.color.text', name, 'user');
+  const [buttonBgColor, setButtonBgColor] = (0, _hooks.useStyle)('elements.button.color.background', name);
+  const [userButtonBgColor] = (0, _hooks.useStyle)('elements.button.color.background', name, 'user');
+  if (!hasButtonColor) {
+    return null;
+  }
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    title: (0, _i18n.__)('Buttons'),
+    description: (0, _i18n.__)('Set the default colors used for buttons across the site.')
+  }), (0, _element.createElement)("h4", {
+    className: "edit-site-global-styles-section-title"
+  }, (0, _i18n.__)('Text color')), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    className: "edit-site-screen-button-color__control",
+    colors: colorsPerOrigin,
+    disableCustomColors: !areCustomSolidsEnabled,
+    __experimentalHasMultipleOrigins: true,
+    showTitle: false,
+    enableAlpha: true,
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: buttonTextColor,
+    onColorChange: setButtonTextColor,
+    clearable: buttonTextColor === userButtonTextColor
+  }), (0, _element.createElement)("h4", {
+    className: "edit-site-global-styles-section-title"
+  }, (0, _i18n.__)('Background color')), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    className: "edit-site-screen-button-color__control",
+    colors: colorsPerOrigin,
+    disableCustomColors: !areCustomSolidsEnabled,
+    __experimentalHasMultipleOrigins: true,
+    showTitle: false,
+    enableAlpha: true,
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: buttonBgColor,
+    onColorChange: setButtonBgColor,
+    clearable: buttonBgColor === userButtonBgColor
+  }));
+}
+var _default = ScreenButtonColor;
+exports.default = _default;
+//# sourceMappingURL=screen-button-color.js.map

package/build/components/global-styles/screen-button-color.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["ScreenButtonColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,iBAAT,OAAuC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACtC,QAAMC,QAAQ,GAAG,2CAAgCD,IAAhC,CAAjB;AACA,QAAM,CAAEE,MAAF,IAAa,uBAAY,eAAZ,EAA6BF,IAA7B,CAAnB;AACA,QAAM,CAAEG,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BH,IAA5B,CAAnC;AAEA,QAAMI,eAAe,GAAG,+BAAoBJ,IAApB,CAAxB;AAEA,QAAM,CAAEK,mBAAF,IAA0B,uBAAY,kBAAZ,EAAgCL,IAAhC,CAAhC;AAEA,QAAMM,cAAc,GACnBL,QAAQ,CAACM,QAAT,CAAmB,aAAnB,KACAF,mBADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,eAAF,EAAmBC,kBAAnB,IAA0C,qBAC/C,4BAD+C,EAE/CV,IAF+C,CAAhD;AAIA,QAAM,CAAEW,mBAAF,IAA0B,qBAC/B,4BAD+B,EAE/BX,IAF+B,EAG/B,MAH+B,CAAhC;AAMA,QAAM,CAAEY,aAAF,EAAiBC,gBAAjB,IAAsC,qBAC3C,kCAD2C,EAE3Cb,IAF2C,CAA5C;AAIA,QAAM,CAAEc,iBAAF,IAAwB,qBAC7B,kCAD6B,EAE7Bd,IAF6B,EAG7B,MAH6B,CAA9B;;AAMA,MAAK,CAAEM,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,SAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,0DADa;AAFf,IADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,YAAJ,CADH,CARD,EAYC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGF,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,eARd;AASC,IAAA,aAAa,EAAGC,kBATjB;AAUC,IAAA,SAAS,EAAGD,eAAe,KAAKE;AAVjC,IAZD,EAyBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,kBAAJ,CADH,CAzBD,EA6BC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGP,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGS,aARd;AASC,IAAA,aAAa,EAAGC,gBATjB;AAUC,IAAA,SAAS,EAAGD,aAAa,KAAKE;AAV/B,IA7BD,CADD;AA4CA;;eAEcf,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenButtonColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}

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

@@ -47,13 +47,15 @@ function BackgroundColorItem(_ref) {
   }
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/background'
+    path: parentMenu + '/colors/background',
+    "aria-label": (0, _i18n.__)('Colors background styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
     expanded: false
   }, (0, _element.createElement)(_components.ColorIndicator, {
-    colorValue: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
+    colorValue: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+    "data-testid": "background-color-indicator"
   })), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Background'))));
 }
@@ -71,13 +73,15 @@ function TextColorItem(_ref2) {
   }
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/text'
+    path: parentMenu + '/colors/text',
+    "aria-label": (0, _i18n.__)('Colors text styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
     expanded: false
   }, (0, _element.createElement)(_components.ColorIndicator, {
-    colorValue: color
+    colorValue: color,
+    "data-testid": "text-color-indicator"
   })), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Text'))));
 }
@@ -95,7 +99,8 @@ function LinkColorItem(_ref3) {
   }
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/link'
+    path: parentMenu + '/colors/link',
+    "aria-label": (0, _i18n.__)('Colors link styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
@@ -105,10 +110,42 @@ function LinkColorItem(_ref3) {
   })), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Links'))));
 }
-function ScreenColors(_ref4) {
+function ButtonColorItem(_ref4) {
   let {
-    name
+    name,
+    parentMenu
   } = _ref4;
+  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
+  const hasSupport = supports.includes('buttonColor');
+  const [color] = (0, _hooks.useStyle)('elements.button.color.text', name);
+  const [bgColor] = (0, _hooks.useStyle)('elements.button.color.background', name);
+  if (!hasSupport) {
+    return null;
+  }
+  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    path: parentMenu + '/colors/button'
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start"
+  }, (0, _element.createElement)(_components.__experimentalZStack, {
+    isLayered: false,
+    offset: -8
+  }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
+    expanded: false
+  }, (0, _element.createElement)(_components.ColorIndicator, {
+    colorValue: bgColor
+  })), (0, _element.createElement)(_colorIndicatorWrapper.default, {
+    expanded: false
+  }, (0, _element.createElement)(_components.ColorIndicator, {
+    colorValue: color
+  }))), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Buttons'))));
+}
+function ScreenColors(_ref5) {
+  let {
+    name
+  } = _ref5;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Colors'),
@@ -133,6 +170,9 @@ function ScreenColors(_ref4) {
   }), (0, _element.createElement)(LinkColorItem, {
     name: name,
     parentMenu: parentMenu
+  }), (0, _element.createElement)(ButtonColorItem, {
+    name: name,
+    parentMenu: parentMenu
   }))))));
 }

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,wCAAD;~~AAAwB~~,IAAA,IAAI,EAAGF,UAAU,GAAG;~~AAA5C~~,~~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,wCAAD;~~AAAwB~~,IAAA,IAAI,EAAGF,UAAU,GAAG;~~AAA5C~~,~~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,wCAAD;~~AAAwB~~,IAAA,IAAI,EAAGF,UAAU,GAAG;~~AAA5C~~,~~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 { 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"]}
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","ButtonColorItem","bgColor","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\t__experimentalZStack as ZStack,\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\n\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\taria-label={ __( 'Colors background styles' ) }\n\t\t>\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\tdata-testid=\"background-color-indicator\"\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\n\t\t\tpath={ parentMenu + '/colors/text' }\n\t\t\taria-label={ __( 'Colors text styles' ) }\n\t\t>\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={ color }\n\t\t\t\t\t\tdata-testid=\"text-color-indicator\"\n\t\t\t\t\t/>\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\n\t\t\tpath={ parentMenu + '/colors/link' }\n\t\t\taria-label={ __( 'Colors link styles' ) }\n\t\t>\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 ButtonColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'buttonColor' );\n\tconst [ color ] = useStyle( 'elements.button.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.button.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem>{ __( 'Buttons' ) }</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\t<ButtonColorItem\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

@@ -47,7 +47,8 @@ function ScreenRoot() {
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
     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"
+    path: "/variations",
+    "aria-label": (0, _i18n.__)('Browse styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"
   }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Browse styles')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
@@ -63,7 +64,8 @@ function ScreenRoot() {
     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"
+    path: "/blocks",
+    "aria-label": (0, _i18n.__)('Blocks styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"
   }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Blocks')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {

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,EACTC,MAAM,CACLC,eADK,CAAN,CAEEC,mDAFF;AAFK,KAAP;AAMA,GAPsB,EAOpB,EAPoB,CAAvB;AASA,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:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\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"]}
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,EACTC,MAAM,CACLC,eADK,CAAN,CAEEC,mDAFF;AAFK,KAAP;AAMA,GAPsB,EAOpB,EAPoB,CAAvB;AASA,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;AACC,IAAA,IAAI,EAAC,aADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,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,CAJD,CADD,CAPF,EAyBC,4BAAC,oBAAD,OAzBD,CADD,CADD,EA+BC,4BAAC,uBAAD,OA/BD,EAiCC,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;AACC,IAAA,IAAI,EAAC,SADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,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,CAJD,CADD,CAfD,CAjCD,CADD;AAiEA;;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:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\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\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\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\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\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-element.js CHANGED Viewed

@@ -30,6 +30,10 @@ const elements = {
   link: {
     description: (0, _i18n.__)('Manage the fonts and typography used on the links.'),
     title: (0, _i18n.__)('Links')
+  },
+  button: {
+    description: (0, _i18n.__)('Manage the fonts and typography used on buttons.'),
+    title: (0, _i18n.__)('Buttons')
   }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["elements","text","description","title","link","ScreenTypographyElement","name","element"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF;~~AALU~~,CAAjB;;~~AAWA~~,~~SAASE~~,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,~~EAAGP~~,QAAQ,~~CAAEO~~,OAAF,CAAR,~~CAAoBJ~~,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,~~CAAEO~~,OAAF,CAAR,~~CAAoBL~~;AAFnC,IADD,EAKC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,~~EAAGI~~,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;eAEcF,uB","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["elements","text","description","title","link","button","ScreenTypographyElement","name","element"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF,GALU;AAShBE,EAAAA,MAAM,EAAE;AACPH,IAAAA,WAAW,EAAE,cAAI,kDAAJ,CADN;AAEPC,IAAAA,KAAK,EAAE,cAAI,SAAJ;AAFA;AATQ,CAAjB;;AAeA,SAASG,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGR,QAAQ,CAAEQ,OAAF,CAAR,CAAoBL,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEQ,OAAF,CAAR,CAAoBN;AAFnC,IADD,EAKC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGK,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;eAEcF,uB","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}

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

@@ -54,8 +54,11 @@ function Item(_ref) {
     return null;
   }
+  const navigationButtonLabel = (0, _i18n.sprintf)( // translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
+  (0, _i18n.__)('Typography %s styles'), label);
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/typography/' + element
+    path: parentMenu + '/typography/' + element,
+    "aria-label": navigationButtonLabel
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_components.FlexItem, {
@@ -97,6 +100,11 @@ function ScreenTypography(_ref2) {
     parentMenu: parentMenu,
     element: "link",
     label: (0, _i18n.__)('Links')
+  }), (0, _element.createElement)(Item, {
+    name: name,
+    parentMenu: parentMenu,
+    element: "button",
+    label: (0, _i18n.__)('Buttons')
   })))), !!name && (0, _element.createElement)(_typographyPanel.default, {
     name: name,
     element: "text"

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

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

@@ -35,6 +35,8 @@ var _screenTextColor = _interopRequireDefault(require("./screen-text-color"));
 var _screenLinkColor = _interopRequireDefault(require("./screen-link-color"));
+var _screenButtonColor = _interopRequireDefault(require("./screen-button-color"));
 var _screenLayout = _interopRequireDefault(require("./screen-layout"));
 var _screenStyleVariations = _interopRequireDefault(require("./screen-style-variations"));
@@ -75,6 +77,11 @@ function ContextScreens(_ref2) {
   }, (0, _element.createElement)(_screenTypographyElement.default, {
     name: name,
     element: "link"
+  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/typography/button'
+  }, (0, _element.createElement)(_screenTypographyElement.default, {
+    name: name,
+    element: "button"
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors'
   }, (0, _element.createElement)(_screenColors.default, {
@@ -95,6 +102,10 @@ function ContextScreens(_ref2) {
     path: parentMenu + '/colors/link'
   }, (0, _element.createElement)(_screenLinkColor.default, {
     name: name
+  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/colors/button'
+  }, (0, _element.createElement)(_screenButtonColor.default, {
+    name: name
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, (0, _element.createElement)(_screenLayout.default, {