@wordpress/edit-site 4.9.0 → 4.12.0

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

@@ -40,7 +40,9 @@ function BackgroundColorItem(_ref) {
   }, createElement(ColorIndicator, {
     colorValue: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
     "data-testid": "background-color-indicator"
-  })), createElement(FlexItem, null, __('Background'))));
+  })), createElement(FlexItem, {
+    className: "edit-site-global-styles__color-label"
+  }, __('Background'))));
 }
 
 function TextColorItem(_ref2) {
@@ -66,7 +68,9 @@ function TextColorItem(_ref2) {
   }, createElement(ColorIndicator, {
     colorValue: color,
     "data-testid": "text-color-indicator"
-  })), createElement(FlexItem, null, __('Text'))));
+  })), createElement(FlexItem, {
+    className: "edit-site-global-styles__color-label"
+  }, __('Text'))));
 }
 
 function LinkColorItem(_ref3) {
@@ -77,6 +81,7 @@ function LinkColorItem(_ref3) {
   const supports = getSupportedGlobalStylesPanels(name);
   const hasSupport = supports.includes('linkColor');
   const [color] = useStyle('elements.link.color.text', name);
+  const [colorHover] = useStyle('elements.link.:hover.color.text', name);
 
   if (!hasSupport) {
     return null;
@@ -87,19 +92,61 @@ function LinkColorItem(_ref3) {
     "aria-label": __('Colors link styles')
   }, createElement(HStack, {
     justify: "flex-start"
+  }, createElement(ZStack, {
+    isLayered: false,
+    offset: -8
   }, createElement(ColorIndicatorWrapper, {
     expanded: false
   }, createElement(ColorIndicator, {
     colorValue: color
-  })), createElement(FlexItem, null, __('Links'))));
+  })), createElement(ColorIndicatorWrapper, {
+    expanded: false
+  }, createElement(ColorIndicator, {
+    colorValue: colorHover
+  }))), createElement(FlexItem, {
+    className: "edit-site-global-styles__color-label"
+  }, __('Links'))));
 }
 
-function ButtonColorItem(_ref4) {
+function HeadingColorItem(_ref4) {
   let {
     name,
     parentMenu
   } = _ref4;
   const supports = getSupportedGlobalStylesPanels(name);
+  const hasSupport = supports.includes('color');
+  const [color] = useStyle('elements.heading.color.text', name);
+  const [bgColor] = useStyle('elements.heading.color.background', name);
+
+  if (!hasSupport) {
+    return null;
+  }
+
+  return createElement(NavigationButtonAsItem, {
+    path: parentMenu + '/colors/heading',
+    "aria-label": __('Colors heading styles')
+  }, createElement(HStack, {
+    justify: "flex-start"
+  }, createElement(ZStack, {
+    isLayered: false,
+    offset: -8
+  }, createElement(ColorIndicatorWrapper, {
+    expanded: false
+  }, createElement(ColorIndicator, {
+    colorValue: bgColor
+  })), createElement(ColorIndicatorWrapper, {
+    expanded: false
+  }, createElement(ColorIndicator, {
+    colorValue: color
+  }))), createElement(FlexItem, null, __('Headings'))));
+}
+
+function ButtonColorItem(_ref5) {
+  let {
+    name,
+    parentMenu
+  } = _ref5;
+  const supports = getSupportedGlobalStylesPanels(name);
   const hasSupport = supports.includes('buttonColor');
   const [color] = useStyle('elements.button.color.text', name);
   const [bgColor] = useStyle('elements.button.color.background', name);
@@ -123,13 +170,15 @@ function ButtonColorItem(_ref4) {
     expanded: false
   }, createElement(ColorIndicator, {
     colorValue: color
-  }))), createElement(FlexItem, null, __('Buttons'))));
+  }))), createElement(FlexItem, {
+    className: "edit-site-global-styles__color-label"
+  }, __('Buttons'))));
 }
 
-function ScreenColors(_ref5) {
+function ScreenColors(_ref6) {
   let {
     name
-  } = _ref5;
+  } = _ref6;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Colors'),
@@ -154,6 +203,9 @@ function ScreenColors(_ref5) {
   }), createElement(LinkColorItem, {
     name: name,
     parentMenu: parentMenu
+  }), createElement(HeadingColorItem, {
+    name: name,
+    parentMenu: parentMenu
   }), createElement(ButtonColorItem, {
     name: name,
     parentMenu: parentMenu

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalZStack","ZStack","FlexItem","ColorIndicator","ScreenHeader","Palette","NavigationButtonAsItem","getSupportedGlobalStylesPanels","useStyle","Subtitle","ColorIndicatorWrapper","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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalZStack","ZStack","FlexItem","ColorIndicator","ScreenHeader","Palette","NavigationButtonAsItem","getSupportedGlobalStylesPanels","useStyle","Subtitle","ColorIndicatorWrapper","BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","colorHover","HeadingColorItem","bgColor","ButtonColorItem","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 className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t</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 className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t</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\tconst [ colorHover ] = useStyle( 'elements.link.:hover.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<ZStack isLayered={ false } offset={ -8 }>\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\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ colorHover } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Links' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction HeadingColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'elements.heading.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.heading.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\taria-label={ __( 'Colors heading styles' ) }\n\t\t>\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>{ __( 'Headings' ) }</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 className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Buttons' ) }\n\t\t\t\t</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<HeadingColorItem\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-module/components/global-styles/screen-heading-color.js

@@ -0,0 +1,143 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import ScreenHeader from './header';
+import { getSupportedGlobalStylesPanels, useSetting, useStyle, useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+
+function ScreenHeadingColor(_ref) {
+  let {
+    name
+  } = _ref;
+  const [selectedLevel, setCurrentTab] = useState('heading');
+  const supports = getSupportedGlobalStylesPanels(name);
+  const [solids] = useSetting('color.palette', name);
+  const [gradients] = useSetting('color.gradients', name);
+  const [areCustomSolidsEnabled] = useSetting('color.custom', name);
+  const [areCustomGradientsEnabled] = useSetting('color.customGradient', name);
+  const [isTextEnabled] = useSetting('color.text', name);
+  const [isBackgroundEnabled] = useSetting('color.background', name);
+  const colorsPerOrigin = useColorsPerOrigin(name);
+  const gradientsPerOrigin = useGradientsPerOrigin(name);
+  const hasTextColor = supports.includes('color') && isTextEnabled && (solids.length > 0 || areCustomSolidsEnabled);
+  const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (solids.length > 0 || areCustomSolidsEnabled);
+  const hasGradientColor = supports.includes('background') && (gradients.length > 0 || areCustomGradientsEnabled);
+  const [color, setColor] = useStyle('elements.' + selectedLevel + '.color.text', name);
+  const [userColor] = useStyle('elements.' + selectedLevel + '.color.text', name, 'user');
+  const [backgroundColor, setBackgroundColor] = useStyle('elements.' + selectedLevel + '.color.background', name);
+  const [userBackgroundColor] = useStyle('elements.' + selectedLevel + '.color.background', name, 'user');
+  const [gradient, setGradient] = useStyle('elements.' + selectedLevel + '.color.gradient', name);
+  const [userGradient] = useStyle('elements.' + selectedLevel + '.color.gradient', name, 'user');
+
+  if (!hasTextColor && !hasBackgroundColor && !hasGradientColor) {
+    return null;
+  }
+
+  let backgroundSettings = {};
+
+  if (hasBackgroundColor) {
+    backgroundSettings = {
+      colorValue: backgroundColor,
+      onColorChange: setBackgroundColor
+    };
+
+    if (backgroundColor) {
+      backgroundSettings.clearable = backgroundColor === userBackgroundColor;
+    }
+  }
+
+  let gradientSettings = {};
+
+  if (hasGradientColor) {
+    gradientSettings = {
+      gradientValue: gradient,
+      onGradientChange: setGradient
+    };
+
+    if (gradient) {
+      gradientSettings.clearable = gradient === userGradient;
+    }
+  }
+
+  const controlProps = { ...backgroundSettings,
+    ...gradientSettings
+  };
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('Headings'),
+    description: __('Set the default color used for headings across the site.')
+  }), createElement("div", {
+    className: "edit-site-global-styles-screen-heading-color"
+  }, createElement("h4", null, __('Select heading level')), createElement(ToggleGroupControl, {
+    label: __('Select heading level'),
+    hideLabelFromVision: true,
+    value: selectedLevel,
+    onChange: setCurrentTab,
+    isBlock: true
+  }, createElement(ToggleGroupControlOption, {
+    value: "heading"
+    /* translators: 'All' refers to selecting all heading levels 
+    and applying the same style to h1-h6. */
+    ,
+    label: __('All')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h1",
+    label: __('H1')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h2",
+    label: __('H2')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h3",
+    label: __('H3')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h4",
+    label: __('H4')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h5",
+    label: __('H5')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h6",
+    label: __('H6')
+  }))), hasTextColor && createElement("div", {
+    className: "edit-site-global-styles-screen-heading-color"
+  }, createElement("h4", null, selectedLevel === 'heading' ? __('Text color for all heading levels') : sprintf(
+  /* translators: %s: heading level (h1-h6) */
+  __('Text color for %s'), selectedLevel.toUpperCase())), createElement(ColorGradientControl, {
+    className: "edit-site-screen-heading-text-color__control",
+    colors: colorsPerOrigin,
+    disableCustomColors: !areCustomSolidsEnabled,
+    __experimentalHasMultipleOrigins: true,
+    showTitle: false,
+    enableAlpha: true,
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: color,
+    onColorChange: setColor,
+    clearable: color === userColor
+  })), hasBackgroundColor && createElement("div", {
+    className: "edit-site-global-styles-screen-heading-color"
+  }, createElement("h4", null, selectedLevel === 'heading' ? __('Background color for all heading levels') : sprintf(
+  /* translators: %s: heading level (h1-h6) */
+  __('Background color for %s'), selectedLevel.toUpperCase())), createElement(ColorGradientControl, _extends({
+    className: "edit-site-screen-heading-background-color__control",
+    colors: colorsPerOrigin,
+    gradients: gradientsPerOrigin,
+    disableCustomColors: !areCustomSolidsEnabled,
+    disableCustomGradients: !areCustomGradientsEnabled,
+    __experimentalHasMultipleOrigins: true,
+    showTitle: false,
+    enableAlpha: true,
+    __experimentalIsRenderedInSidebar: true
+  }, controlProps))));
+}
+
+export default ScreenHeadingColor;
+//# sourceMappingURL=screen-heading-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["sprintf","__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalColorGradientControl","ColorGradientControl","useState","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","useGradientsPerOrigin","ScreenHeadingColor","name","selectedLevel","setCurrentTab","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\n\nfunction ScreenHeadingColor( { name } ) {\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\n\tconst [ color, setColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h4>{ __( 'Select heading level' ) }</h4>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}

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

@@ -5,6 +5,7 @@ import { createElement, Fragment } from "@wordpress/element";
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { TabPanel } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -22,27 +23,59 @@ function ScreenLinkColor(_ref) {
   const colorsPerOrigin = useColorsPerOrigin(name);
   const [isLinkEnabled] = useSetting('color.link', name);
   const hasLinkColor = supports.includes('linkColor') && isLinkEnabled && (solids.length > 0 || areCustomSolidsEnabled);
-  const [linkColor, setLinkColor] = useStyle('elements.link.color.text', name);
-  const [userLinkColor] = useStyle('elements.link.color.text', name, 'user');
+  const pseudoStates = {
+    default: {
+      label: __('Default'),
+      value: useStyle('elements.link.color.text', name)[0],
+      handler: useStyle('elements.link.color.text', name)[1],
+      userValue: useStyle('elements.link.color.text', name, 'user')[0]
+    },
+    hover: {
+      label: __('Hover'),
+      value: useStyle('elements.link.:hover.color.text', name)[0],
+      handler: useStyle('elements.link.:hover.color.text', name)[1],
+      userValue: useStyle('elements.link.:hover.color.text', name, 'user')[0]
+    }
+  };
 
   if (!hasLinkColor) {
     return null;
   }
 
+  const tabs = Object.entries(pseudoStates).map(_ref2 => {
+    let [selector, config] = _ref2;
+    return {
+      name: selector,
+      title: config.label,
+      className: `color-text-${selector}`
+    };
+  });
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Links'),
-    description: __('Set the default color used for links across the site.')
-  }), createElement(ColorGradientControl, {
-    className: "edit-site-screen-link-color__control",
-    colors: colorsPerOrigin,
-    disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
-    showTitle: false,
-    enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true,
-    colorValue: linkColor,
-    onColorChange: setLinkColor,
-    clearable: linkColor === userLinkColor
+    description: __('Set the colors used for links across the site.')
+  }), createElement(TabPanel, {
+    tabs: tabs
+  }, tab => {
+    var _pseudoStates$tab$nam;
+
+    const pseudoSelectorConfig = (_pseudoStates$tab$nam = pseudoStates[tab.name]) !== null && _pseudoStates$tab$nam !== void 0 ? _pseudoStates$tab$nam : null;
+
+    if (!pseudoSelectorConfig) {
+      return null;
+    }
+
+    return createElement(Fragment, null, createElement(ColorGradientControl, {
+      className: "edit-site-screen-link-color__control",
+      colors: colorsPerOrigin,
+      disableCustomColors: !areCustomSolidsEnabled,
+      __experimentalHasMultipleOrigins: true,
+      showTitle: false,
+      enableAlpha: true,
+      __experimentalIsRenderedInSidebar: true,
+      colorValue: pseudoSelectorConfig.value,
+      onColorChange: pseudoSelectorConfig.handler,
+      clearable: pseudoSelectorConfig.value === pseudoSelectorConfig.userValue
+    }));
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AAEA,QAAMI,eAAe,GAAGN,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAM,CAAEK,aAAF,IAAoBT,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,WAAnB,KACAF,aADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,SAAF,EAAaC,YAAb,IAA8Bb,QAAQ,CAC3C,0BAD2C,EAE3CG,IAF2C,CAA5C;AAIA,QAAM,CAAEW,aAAF,IAAoBd,QAAQ,CACjC,0BADiC,EAEjCG,IAFiC,EAGjC,MAHiC,CAAlC;;AAMA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,uDADe;AAFjB,IADD,EAOC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGa,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,SARd;AASC,IAAA,aAAa,EAAGC,YATjB;AAUC,IAAA,SAAS,EAAGD,SAAS,KAAKE;AAV3B,IAPD,CADD;AAsBA;;AAED,eAAeZ,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { 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 [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ linkColor, setLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ userLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-link-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={ linkColor }\n\t\t\t\tonColorChange={ setLinkColor }\n\t\t\t\tclearable={ linkColor === userLinkColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","TabPanel","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { 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 [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useStyle( 'elements.link.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}

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

@@ -19,6 +19,10 @@ const elements = {
     description: __('Manage the fonts and typography used on the links.'),
     title: __('Links')
   },
+  heading: {
+    description: __('Manage the fonts and typography used on headings.'),
+    title: __('Headings')
+  },
   button: {
     description: __('Manage the fonts and typography used on buttons.'),
     title: __('Buttons')

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","button","ScreenTypographyElement","name","element"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ,GALU;AAShBQ,EAAAA,MAAM,EAAE;AACPH,IAAAA,WAAW,EAAEL,EAAE,CAAE,kDAAF,CADR;AAEPM,IAAAA,KAAK,EAAEN,EAAE,CAAE,SAAF;AAFF;AATQ,CAAjB;;AAeA,SAASS,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGR,QAAQ,CAAEQ,OAAF,CAAR,CAAoBL,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEQ,OAAF,CAAR,CAAoBN;AAFnC,IADD,EAKC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGK,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;AAED,eAAeF,uBAAf","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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","heading","button","ScreenTypographyElement","name","element"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ,GALU;AAShBQ,EAAAA,OAAO,EAAE;AACRH,IAAAA,WAAW,EAAEL,EAAE,CAAE,mDAAF,CADP;AAERM,IAAAA,KAAK,EAAEN,EAAE,CAAE,UAAF;AAFD,GATO;AAahBS,EAAAA,MAAM,EAAE;AACPJ,IAAAA,WAAW,EAAEL,EAAE,CAAE,kDAAF,CADR;AAEPM,IAAAA,KAAK,EAAEN,EAAE,CAAE,SAAF;AAFF;AAbQ,CAAjB;;AAmBA,SAASU,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGT,QAAQ,CAAES,OAAF,CAAR,CAAoBN,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAES,OAAF,CAAR,CAAoBP;AAFnC,IADD,EAKC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGM,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;AAED,eAAeF,uBAAf","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\theading: {\n\t\tdescription: __( 'Manage the fonts and typography used on headings.' ),\n\t\ttitle: __( 'Headings' ),\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-module/components/global-styles/screen-typography.js

@@ -85,6 +85,11 @@ function ScreenTypography(_ref2) {
     parentMenu: parentMenu,
     element: "link",
     label: __('Links')
+  }), createElement(Item, {
+    name: name,
+    parentMenu: parentMenu,
+    element: "heading",
+    label: __('Headings')
   }), createElement(Item, {
     name: name,
     parentMenu: parentMenu,

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

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