@wordpress/edit-site 4.11.0 → 4.12.0

package/build-style/style.css

@@ -722,6 +722,11 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-radius: 2px;
 }
 
+.edit-site-typography-panel__half-width-control {
+  width: calc((100% - 24px) / 2);
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
   margin: 16px;
 }
@@ -741,6 +746,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  flex-shrink: 0;
 }
 
 .edit-site-global-styles-header__description,
@@ -770,10 +776,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   padding: 16px;
 }
 
-.edit-site-screen-background-color__control .block-editor-color-gradient-control__tab-panel {
-  padding: 16px;
-}
-
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
 }
@@ -798,6 +800,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles__color-indicator-wrapper {
   height: 24px;
+  flex-shrink: 0;
+}
+
+.edit-site-global-styles__color-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .edit-site-header {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.11.0",
+	"version": "4.12.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.14.0",
-		"@wordpress/api-fetch": "^6.11.0",
-		"@wordpress/block-editor": "^9.6.0",
-		"@wordpress/block-library": "^7.11.0",
-		"@wordpress/blocks": "^11.13.0",
-		"@wordpress/components": "^19.16.0",
-		"@wordpress/compose": "^5.12.0",
-		"@wordpress/core-data": "^4.12.0",
-		"@wordpress/data": "^6.14.0",
-		"@wordpress/deprecated": "^3.14.0",
-		"@wordpress/editor": "^12.13.0",
-		"@wordpress/element": "^4.12.0",
-		"@wordpress/hooks": "^3.14.0",
-		"@wordpress/html-entities": "^3.14.0",
-		"@wordpress/i18n": "^4.14.0",
-		"@wordpress/icons": "^9.5.0",
-		"@wordpress/interface": "^4.13.0",
-		"@wordpress/keyboard-shortcuts": "^3.12.0",
-		"@wordpress/keycodes": "^3.14.0",
-		"@wordpress/media-utils": "^4.5.0",
-		"@wordpress/notices": "^3.14.0",
-		"@wordpress/plugins": "^4.12.0",
-		"@wordpress/preferences": "^2.6.0",
-		"@wordpress/reusable-blocks": "^3.12.0",
-		"@wordpress/style-engine": "^0.13.0",
-		"@wordpress/url": "^3.15.0",
-		"@wordpress/viewport": "^4.12.0",
+		"@wordpress/a11y": "^3.15.0",
+		"@wordpress/api-fetch": "^6.12.0",
+		"@wordpress/block-editor": "^9.7.0",
+		"@wordpress/block-library": "^7.12.0",
+		"@wordpress/blocks": "^11.14.0",
+		"@wordpress/components": "^19.17.0",
+		"@wordpress/compose": "^5.13.0",
+		"@wordpress/core-data": "^4.13.0",
+		"@wordpress/data": "^6.15.0",
+		"@wordpress/deprecated": "^3.15.0",
+		"@wordpress/editor": "^12.14.0",
+		"@wordpress/element": "^4.13.0",
+		"@wordpress/hooks": "^3.15.0",
+		"@wordpress/html-entities": "^3.15.0",
+		"@wordpress/i18n": "^4.15.0",
+		"@wordpress/icons": "^9.6.0",
+		"@wordpress/interface": "^4.14.0",
+		"@wordpress/keyboard-shortcuts": "^3.13.0",
+		"@wordpress/keycodes": "^3.15.0",
+		"@wordpress/media-utils": "^4.6.0",
+		"@wordpress/notices": "^3.15.0",
+		"@wordpress/plugins": "^4.13.0",
+		"@wordpress/preferences": "^2.7.0",
+		"@wordpress/reusable-blocks": "^3.13.0",
+		"@wordpress/style-engine": "^0.14.0",
+		"@wordpress/url": "^3.16.0",
+		"@wordpress/viewport": "^4.13.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
+	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -192,9 +192,18 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 							isBlock
 							as={ Button }
 							onClick={ () => {
-								const { slug, title, description } =
-									entityForSuggestions.template;
-								onSelect( { slug, title, description } );
+								const {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} = entityForSuggestions.template;
+								onSelect( {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} );
 							} }
 						>
 							<Text as="span" weight={ 600 }>

package/src/components/add-new-template/new-template.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -38,6 +40,7 @@ import {
 	useDefaultTemplateTypes,
 	useTaxonomiesMenuItems,
 	usePostTypeMenuItems,
+	useAuthorMenuItem,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -90,7 +93,19 @@ export default function NewTemplate( { postType } ) {
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		try {
-			const { title, description, slug } = template;
+			const { title, description, slug, templatePrefix } = template;
+			let templateContent = template.content;
+			// Try to find fallback content from existing templates.
+			if ( ! templateContent ) {
+				const fallbackTemplate = await apiFetch( {
+					path: addQueryArgs( '/wp/v2/templates/lookup', {
+						slug,
+						is_custom: ! isWPSuggestion,
+						template_prefix: templatePrefix,
+					} ),
+				} );
+				templateContent = fallbackTemplate.content;
+			}
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -100,6 +115,7 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
+					content: templateContent,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
 					is_wp_suggestion: isWPSuggestion,
 				},
@@ -243,26 +259,30 @@ function useMissingTemplates(
 		useTaxonomiesMenuItems( onClickMenuItem );
 	const { defaultPostTypesMenuItems, postTypesMenuItems } =
 		usePostTypeMenuItems( onClickMenuItem );
-	[ ...defaultTaxonomiesMenuItems, ...defaultPostTypesMenuItems ].forEach(
-		( menuItem ) => {
-			if ( ! menuItem ) {
-				return;
-			}
-			const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
-				( template ) => template.slug === menuItem.slug
-			);
-			// Some default template types might have been filtered above from
-			// `missingDefaultTemplates` because they only check for the general
-			// template. So here we either replace or append the item, augmented
-			// with the check if it has available specific item to create a
-			// template for.
-			if ( matchIndex > -1 ) {
-				enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
-			} else {
-				enhancedMissingDefaultTemplateTypes.push( menuItem );
-			}
+
+	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
+	[
+		...defaultTaxonomiesMenuItems,
+		...defaultPostTypesMenuItems,
+		authorMenuItem,
+	].forEach( ( menuItem ) => {
+		if ( ! menuItem ) {
+			return;
 		}
-	);
+		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
+			( template ) => template.slug === menuItem.slug
+		);
+		// Some default template types might have been filtered above from
+		// `missingDefaultTemplates` because they only check for the general
+		// template. So here we either replace or append the item, augmented
+		// with the check if it has available specific item to create a
+		// template for.
+		if ( matchIndex > -1 ) {
+			enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
+		} else {
+			enhancedMissingDefaultTemplateTypes.push( menuItem );
+		}
+	} );
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
 		return (

package/src/components/add-new-template/utils.js

@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { blockMeta, post } from '@wordpress/icons';
 
@@ -152,7 +152,10 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 				);
 			}
 			const menuItem = defaultTemplateType
-				? { ...defaultTemplateType }
+				? {
+						...defaultTemplateType,
+						templatePrefix: templatePrefixes[ slug ],
+				  }
 				: {
 						slug: generalTemplateSlug,
 						title: menuItemTitle,
@@ -167,6 +170,7 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 						icon: icon?.startsWith( 'dashicons-' )
 							? icon.slice( 10 )
 							: post,
+						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
 			// We have a different template creation flow only if they have entities.
@@ -201,15 +205,16 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 								if ( _needsUniqueIdentifier ) {
 									title = sprintf(
 										// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the post type, e.g. "Project: Hello (project_type)"
-										__( '%1$s %2$s' ),
+										__( '%1$s (%2$s)' ),
 										title,
-										`(${ slug })`
+										slug
 									);
 								}
 								return {
 									title,
 									description,
 									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
 						},
@@ -317,7 +322,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 				);
 			}
 			const menuItem = defaultTemplateType
-				? { ...defaultTemplateType }
+				? {
+						...defaultTemplateType,
+						templatePrefix: templatePrefixes[ slug ],
+				  }
 				: {
 						slug: generalTemplateSlug,
 						title: menuItemTitle,
@@ -327,6 +335,7 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 							labels.singular_name
 						),
 						icon: blockMeta,
+						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = taxonomiesInfo?.[ slug ]?.hasEntities;
 			// We have a different template creation flow only if they have entities.
@@ -360,15 +369,16 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 								if ( _needsUniqueIdentifier ) {
 									title = sprintf(
 										// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the taxonomy, e.g. "Category: shoes (product_tag)"
-										__( '%1$s %2$s' ),
+										__( '%1$s (%2$s)' ),
 										title,
-										`(${ slug })`
+										slug
 									);
 								}
 								return {
 									title,
 									description,
 									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
 						},
@@ -408,14 +418,120 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	return taxonomiesMenuItems;
 };
 
+function useAuthorNeedsUniqueIndentifier() {
+	const authors = useSelect(
+		( select ) =>
+			select( coreStore ).getUsers( { who: 'authors', per_page: -1 } ),
+		[]
+	);
+	const authorsCountByName = useMemo( () => {
+		return ( authors || [] ).reduce( ( authorsCount, { name } ) => {
+			authorsCount[ name ] = ( authorsCount[ name ] || 0 ) + 1;
+			return authorsCount;
+		}, {} );
+	}, [ authors ] );
+	return useCallback(
+		( name ) => {
+			return authorsCountByName[ name ] > 1;
+		},
+		[ authorsCountByName ]
+	);
+}
+
+const USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX = { user: 'author' };
+const USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS = { user: { who: 'authors' } };
+export function useAuthorMenuItem( onClickMenuItem ) {
+	const existingTemplates = useExistingTemplates();
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const authorInfo = useEntitiesInfo(
+		'root',
+		USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX,
+		USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS
+	);
+	const authorNeedsUniqueId = useAuthorNeedsUniqueIndentifier();
+	let authorMenuItem = defaultTemplateTypes?.find(
+		( { slug } ) => slug === 'author'
+	);
+	if ( ! authorMenuItem ) {
+		authorMenuItem = {
+			description: __(
+				'Displays latest posts written by a single author.'
+			),
+			slug: 'author',
+			title: 'Author',
+		};
+	}
+	const hasGeneralTemplate = !! existingTemplates?.find(
+		( { slug } ) => slug === 'author'
+	);
+	if ( authorInfo.user?.hasEntities ) {
+		authorMenuItem = { ...authorMenuItem, templatePrefix: 'author' };
+		authorMenuItem.onClick = ( template ) => {
+			onClickMenuItem( {
+				type: 'root',
+				slug: 'user',
+				config: {
+					queryArgs: ( { search } ) => {
+						return {
+							_fields: 'id,name,slug,link',
+							orderBy: search ? 'name' : 'registered_date',
+							exclude: authorInfo.user.existingEntitiesIds,
+							who: 'authors',
+						};
+					},
+					getSpecificTemplate: ( suggestion ) => {
+						const needsUniqueId = authorNeedsUniqueId(
+							suggestion.name
+						);
+						const title = needsUniqueId
+							? sprintf(
+									// translators: %1$s: Represents the name of an author e.g: "Jorge", %2$s: Represents the slug of an author e.g: "author-jorge-slug".
+									__( 'Author: %1$s (%2$s)' ),
+									suggestion.name,
+									suggestion.slug
+							  )
+							: sprintf(
+									// translators: %s: Represents the name of an author e.g: "Jorge".
+									__( 'Author: %s' ),
+									suggestion.name
+							  );
+						const description = sprintf(
+							// translators: %s: Represents the name of an author e.g: "Jorge".
+							__( 'Template for Author: %s' ),
+							suggestion.name
+						);
+						return {
+							title,
+							description,
+							slug: `author-${ suggestion.slug }`,
+							templatePrefix: 'author',
+						};
+					},
+				},
+				labels: {
+					singular_name: __( 'Author' ),
+					search_items: __( 'Search Authors' ),
+					not_found: __( 'No authors found.' ),
+					all_items: __( 'All Authors' ),
+				},
+				hasGeneralTemplate,
+				template,
+			} );
+		};
+	}
+	if ( ! hasGeneralTemplate || authorInfo.user?.hasEntities ) {
+		return authorMenuItem;
+	}
+}
+
 /**
  * Helper hook that filters all the existing templates by the given
  * object with the entity's slug as key and the template prefix as value.
  *
  * Example:
- * `existingTemplates` is: [ { slug: tag-apple }, { slug: page-about }, { slug: tag } ]
+ * `existingTemplates` is: [ { slug: 'tag-apple' }, { slug: 'page-about' }, { slug: 'tag' } ]
  * `templatePrefixes` is: { post_tag: 'tag' }
- * It will return: { post_tag: [apple] }
+ * It will return: { post_tag: ['apple'] }
  *
  * Note: We append the `-` to the given template prefix in this function for our checks.
  *
@@ -456,11 +572,16 @@ const useExistingTemplateSlugs = ( templatePrefixes ) => {
  * Helper hook that finds the existing records with an associated template,
  * as they need to be excluded from the template suggestions.
  *
- * @param {string}                entityName       The entity's name.
- * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
  * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
  */
-const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
+const useTemplatesToExclude = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
 	const slugsToExcludePerEntity =
 		useExistingTemplateSlugs( templatePrefixes );
 	const recordsToExcludePerEntity = useSelect(
@@ -473,6 +594,7 @@ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
 						_fields: 'id',
 						context: 'view',
 						slug: slugsWithTemplates,
+						...additionalQueryParameters[ slug ],
 					} );
 					if ( entitiesWithTemplates?.length ) {
 						accumulator[ slug ] = entitiesWithTemplates;
@@ -497,14 +619,20 @@ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
  * First we need to find the existing records with an associated template,
  * to query afterwards for any remaining record, by excluding them.
  *
- * @param {string}                entityName       The entity's name.
- * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
  * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the EntitiesInfo as value.
  */
-const useEntitiesInfo = ( entityName, templatePrefixes ) => {
+const useEntitiesInfo = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
-		templatePrefixes
+		templatePrefixes,
+		additionalQueryParameters
 	);
 	const entitiesInfo = useSelect(
 		( select ) => {
@@ -523,6 +651,7 @@ const useEntitiesInfo = ( entityName, templatePrefixes ) => {
 								_fields: 'id',
 								context: 'view',
 								exclude: existingEntitiesIds,
+								...additionalQueryParameters[ slug ],
 							}
 						)?.length,
 						existingEntitiesIds,

package/src/components/global-styles/dimensions-panel.js

@@ -160,8 +160,9 @@ function usePaddingProps( name ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const hasPaddingValue = () =>
-		!! paddingValues && Object.keys( paddingValues ).length;
+	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
+	const hasPaddingValue = () => !! userSetPaddingValue;
 
 	return {
 		paddingValues,
@@ -204,7 +205,8 @@ function useMarginProps( name ) {
 function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
 	const resetGapValue = () => setGapValue( undefined );
-	const hasGapValue = () => !! gapValue;
+	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const hasGapValue = () => !! userSetGapValue;
 	return {
 		gapValue,
 		setGapValue,

package/src/components/global-styles/hooks.js

@@ -170,6 +170,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'padding',
 	'contentSize',
 	'wideSize',
+	'blockGap',
 ];
 
 export function getSupportedGlobalStylesPanels( name ) {

package/src/components/global-styles/screen-color-palette.js

@@ -24,7 +24,7 @@ function ScreenColorPalette( { name } ) {
 				tabs={ [
 					{
 						name: 'solid',
-						title: 'Solid color',
+						title: 'Solid',
 						value: 'solid',
 					},
 					{

package/src/components/global-styles/screen-colors.js

@@ -45,7 +45,9 @@ function BackgroundColorItem( { name, parentMenu } ) {
 						data-testid="background-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
-				<FlexItem>{ __( 'Background' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Background' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -72,7 +74,9 @@ function TextColorItem( { name, parentMenu } ) {
 						data-testid="text-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
-				<FlexItem>{ __( 'Text' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Text' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -102,7 +106,39 @@ function LinkColorItem( { name, parentMenu } ) {
 						<ColorIndicator colorValue={ colorHover } />
 					</ColorIndicatorWrapper>
 				</ZStack>
-				<FlexItem>{ __( 'Links' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Links' ) }
+				</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+function HeadingColorItem( { name, parentMenu } ) {
+	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 (
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/heading' }
+			aria-label={ __( 'Colors heading styles' ) }
+		>
+			<HStack justify="flex-start">
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ bgColor } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+				</ZStack>
+				<FlexItem>{ __( 'Headings' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -129,7 +165,9 @@ function ButtonColorItem( { name, parentMenu } ) {
 						<ColorIndicator colorValue={ color } />
 					</ColorIndicatorWrapper>
 				</ZStack>
-				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Buttons' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -166,6 +204,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<HeadingColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }