From dba84c6c231030953f90b3919da23db579d97837 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 9 Nov 2022 10:26:11 -0700
Subject: [PATCH 1/2] Global Styles: Elements: Add a text decoration control to
 link elements

---
 .../global-styles/typography-panel.js         | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

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 3e53486af2121c..30616896d43f9d 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -7,6 +7,7 @@ import {
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 	__experimentalTextTransformControl as TextTransformControl,
+	__experimentalTextDecorationControl as TextDecorationControl,
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
@@ -101,6 +102,15 @@ function useHasTextTransformControl( name, element ) {
 	return supports.includes( 'textTransform' );
 }
 
+function useHasTextDecorationControl( name, element ) {
+	// This is an exception for link elements.
+	// We shouldn't allow other blocks or elements to set textDecoration
+	// because this will be inherited by their children.
+	if ( ! name && element === 'link' ) {
+		return true;
+	}
+}
+
 function useStyleWithReset( path, blockName ) {
 	const [ style, setStyle ] = useStyle( path, blockName );
 	const [ userStyle ] = useStyle( path, blockName, 'user' );
@@ -190,6 +200,10 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	const appearanceControlLabel = useAppearanceControlLabel( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
 	const hasTextTransformControl = useHasTextTransformControl( name, element );
+	const hasTextDecorationControl = useHasTextDecorationControl(
+		name,
+		element
+	);
 
 	/* Disable font size controls when the option to style all headings is selected. */
 	let hasFontSizeEnabled = supports.includes( 'fontSize' );
@@ -223,6 +237,12 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 		hasTextTransform,
 		resetTextTransform,
 	] = useStyleWithReset( prefix + 'typography.textTransform', name );
+	const [
+		textDecoration,
+		setTextDecoration,
+		hasTextDecoration,
+		resetTextDecoration,
+	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
 
 	const resetAll = () => {
 		resetFontFamily();
@@ -347,6 +367,22 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextDecorationControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text decoration' ) }
+					hasValue={ hasTextDecoration }
+					onDeselect={ resetTextDecoration }
+					isShownByDefault
+				>
+					<TextDecorationControl
+						value={ textDecoration }
+						onChange={ setTextDecoration }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }

From 5c67534ce31d8ed6451204262768dc095c96f414 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 9 Nov 2022 11:16:37 -0700
Subject: [PATCH 2/2] Update
 packages/edit-site/src/components/global-styles/typography-panel.js

Co-authored-by: Robert Anderson <robert@noisysocks.com>
---
 .../src/components/global-styles/typography-panel.js          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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 30616896d43f9d..82f7dc796d92f1 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -106,9 +106,7 @@ function useHasTextDecorationControl( name, element ) {
 	// This is an exception for link elements.
 	// We shouldn't allow other blocks or elements to set textDecoration
 	// because this will be inherited by their children.
-	if ( ! name && element === 'link' ) {
-		return true;
-	}
+	return ! name && element === 'link';
 }
 
 function useStyleWithReset( path, blockName ) {