From b06d515b7ff01e3699472c4d7ee7795de75cb2ee Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 18 Aug 2022 15:31:38 +1000
Subject: [PATCH] Add Letter Case to Global Styles

---
 .../src/components/global-styles/hooks.js     |  1 -
 .../global-styles/typography-panel.js         | 26 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 9f9a7c789d6ae..f6df419a46d00 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -168,7 +168,6 @@ const ROOT_BLOCK_SUPPORTS = [
 	'fontWeight',
 	'lineHeight',
 	'textDecoration',
-	'textTransform',
 	'padding',
 	'contentSize',
 	'wideSize',
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 22ae62e962748..fc17569464291 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -6,6 +6,7 @@ import {
 	__experimentalFontFamilyControl as FontFamilyControl,
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
+	__experimentalTextTransformControl as TextTransformControl,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -65,6 +66,18 @@ function useHasLetterSpacingControl( name, element ) {
 	return supports.includes( 'letterSpacing' );
 }
 
+function useHasTextTransformControl( name, element ) {
+	const setting = useSetting( 'typography.textTransform', name )[ 0 ];
+	if ( ! setting ) {
+		return false;
+	}
+	if ( ! name && element === 'heading' ) {
+		return true;
+	}
+	const supports = getSupportedGlobalStylesPanels( name );
+	return supports.includes( 'textTransform' );
+}
+
 export default function TypographyPanel( { name, element } ) {
 	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -89,6 +102,7 @@ export default function TypographyPanel( { name, element } ) {
 	const hasLineHeightEnabled = useHasLineHeightControl( name );
 	const hasAppearanceControl = useHasAppearanceControl( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
+	const hasTextTransformControl = useHasTextTransformControl( name, element );
 
 	/* Disable font size controls when the option to style all headings is selected. */
 	let hasFontSizeEnabled = supports.includes( 'fontSize' );
@@ -121,6 +135,10 @@ export default function TypographyPanel( { name, element } ) {
 		prefix + 'typography.letterSpacing',
 		name
 	);
+	const [ textTransform, setTextTransform ] = useStyle(
+		prefix + 'typography.textTransform',
+		name
+	);
 	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
 	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
 	const [ color ] = useStyle( prefix + 'color.text', name );
@@ -252,6 +270,14 @@ export default function TypographyPanel( { name, element } ) {
 						__unstableInputWidth="auto"
 					/>
 				) }
+				{ hasTextTransformControl && (
+					<TextTransformControl
+						value={ textTransform }
+						onChange={ setTextTransform }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				) }
 			</Grid>
 		</PanelBody>
 	);