@wordpress/block-editor 16.0.0 → 16.1.0

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

@@ -5,7 +5,7 @@ import {
 	FontSizePicker,
 	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	Notice,
 	ToggleControl,
 } from '@wordpress/components';
@@ -38,10 +38,41 @@ import {
 	findNearestStyleAndWeight,
 } from './typography-utils';
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
+import {
+	getInheritanceProps,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
 
+/**
+ * Whether a link color should follow a text color change.
+ *
+ * A link color tracks the text color (e.g. a Button's) unless it was set
+ * deliberately. Raw preset refs are compared rather than decoded hex, since
+ * distinct slots can share a hex (`dark-background`/`dark-text` both `#000`).
+ *
+ * @param {Object} value          Local block styles.
+ * @param {Object} inheritedValue Styles inherited from Global Styles.
+ * @return {boolean} Whether to sync the link color to the text color.
+ */
+function shouldSyncLinkColor( value, inheritedValue ) {
+	const localLinkColor = value?.elements?.link?.color?.text;
+	// A local link color keeps tracking only while it matches the text color;
+	// once it differs it was set deliberately and is left alone.
+	if ( localLinkColor !== undefined ) {
+		return localLinkColor === value?.color?.text;
+	}
+	// With none set, defer to the inherited values.
+	const inheritedLinkColor = inheritedValue?.elements?.link?.color?.text;
+	return (
+		inheritedLinkColor === undefined ||
+		inheritedValue?.color?.text === inheritedLinkColor
+	);
+}
+
 export function useHasTypographyPanel( settings ) {
 	const hasFontFamily = useHasFontFamilyControl( settings );
 	const hasLineHeight = useHasLineHeightControl( settings );
@@ -192,6 +223,29 @@ const DEFAULT_CONTROLS = {
 	textColumns: true,
 };
 
+const EMPTY_VALUES = [ undefined, null, '' ];
+
+function hasValue( value ) {
+	return ! EMPTY_VALUES.includes( value );
+}
+
+/**
+ * Extracts the numeric quantity from a raw CSS value so it can be used as a
+ * unit-control placeholder. The control's unit selector already reflects the
+ * inherited unit, so the placeholder must contain only the number (e.g.
+ * `1.5em` -> `1.5`) rather than the full unit string.
+ *
+ * @param {string|number|undefined} rawValue Inherited value to parse.
+ * @return {number|undefined} The numeric quantity, or `undefined` when absent.
+ */
+function getNumericPlaceholder( rawValue ) {
+	if ( ! hasValue( rawValue ) ) {
+		return undefined;
+	}
+	const [ quantity ] = parseQuantityAndUnitFromRawValue( rawValue );
+	return quantity;
+}
+
 export default function TypographyPanel( {
 	as: Wrapper = TypographyToolsPanel,
 	value,
@@ -201,10 +255,19 @@ export default function TypographyPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	isGlobalStyles = false,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 	contrastWarning,
 } ) {
 	const { colors, allColors, areCustomSolidsEnabled, decodeValue } =
 		useColorGradientSettings( settings );
+	// Always keep the layout className (e.g. `single-column`); only the
+	// inheritance treatment is gated on `showInheritanceLabelIndicators`.
+	const inheritanceProps = ( isInherited, hasLocalOverride, className ) =>
+		getInheritanceProps(
+			showInheritanceLabelIndicators && isInherited,
+			showInheritanceLabelIndicators && hasLocalOverride,
+			className
+		);
 
 	// Text color. Writes to `color.text` (unchanged storage path). The
 	// control is rendered here instead of the Color panel because text
@@ -220,19 +283,13 @@ export default function TypographyPanel( {
 			newSlug
 		);
 		let changedObject = setImmutably( value, [ 'color', 'text' ], encoded );
-		// Keep an in-sync link color following the text color (e.g. a
-		// Button's link color tracks its text color). Compare raw encoded
-		// references (e.g. `var:preset|color|slug`), not decoded hex values.
-		// Two palette entries can share the same hex but carry different
-		// slugs (e.g. `var:preset|color|dark-background` and
-		// `var:preset|color|dark-text` both resolving to `#000`); comparing
-		// decoded values would conflate them and incorrectly force the link
-		// color to follow the text color even when the user deliberately
-		// chose a different palette slot.
-		if (
-			inheritedValue?.color?.text ===
-			inheritedValue?.elements?.link?.color?.text
-		) {
+		// With the experiment off, keep the pre-inheritance comparison on
+		// `inheritedValue`.
+		const syncLinkColor = isGlobalStylesInheritanceEnabled()
+			? shouldSyncLinkColor( value, inheritedValue )
+			: inheritedValue?.color?.text ===
+			  inheritedValue?.elements?.link?.color?.text;
+		if ( syncLinkColor ) {
 			changedObject = setImmutably(
 				changedObject,
 				[ 'elements', 'link', 'color', 'text' ],
@@ -245,7 +302,19 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
+	// Render the local value when set, otherwise the inherited value
+	// as the at-rest preselection. The placeholder boolean is computed
+	// from `value` directly (not from the merged `fontFamily`) so a
+	// locally-set value never trips the at-rest visual treatment, even
+	// when it equals the inherited value.
+	const inheritedFontFamily = decodeValue(
+		inheritedValue?.typography?.fontFamily
+	);
+	const fontFamily =
+		decodeValue( value?.typography?.fontFamily ) ?? inheritedFontFamily;
+	const isFontFamilyPlaceholder =
+		! hasValue( value?.typography?.fontFamily ) &&
+		hasValue( inheritedFontFamily );
 	const { fontFamilies, fontFamilyFaces } = useMemo( () => {
 		return getMergedFontFamiliesAndFontFamilyFaces( settings, fontFamily );
 	}, [ settings, fontFamily ] );
@@ -254,10 +323,13 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
+		const nextFontFamily = slug
+			? `var:preset|font-family|${ slug }`
+			: newValue;
 		let updatedValue = setImmutably(
 			value,
 			[ 'typography', 'fontFamily' ],
-			slug ? `var:preset|font-family|${ slug }` : newValue || undefined
+			hasValue( nextFontFamily ) ? nextFontFamily : undefined
 		);
 
 		// Check if current font style/weight are available in the new font family.
@@ -287,8 +359,12 @@ export default function TypographyPanel( {
 					...updatedValue,
 					typography: {
 						...updatedValue?.typography,
-						fontStyle: nearestFontStyle || undefined,
-						fontWeight: nearestFontWeight || undefined,
+						fontStyle: hasValue( nearestFontStyle )
+							? nearestFontStyle
+							: undefined,
+						fontWeight: hasValue( nearestFontWeight )
+							? nearestFontWeight
+							: undefined,
 					},
 				};
 			} else if ( fontStyle || fontWeight ) {
@@ -306,7 +382,7 @@ export default function TypographyPanel( {
 
 		onChange( updatedValue );
 	};
-	const hasFontFamily = () => !! value?.typography?.fontFamily;
+	const hasFontFamily = () => hasValue( value?.typography?.fontFamily );
 	const resetFontFamily = () => setFontFamily( undefined );
 
 	// Font Size
@@ -314,20 +390,27 @@ export default function TypographyPanel( {
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
 	const mergedFontSizes = getMergedFontSizes( settings );
 
-	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
+	// Local-then-inherited resolution for the rendered value. The slug
+	// extraction reads the same composite raw value so an inherited
+	// preset preselects its chip at rest while a local literal value
+	// renders as a literal in the custom-size input.
+	const rawLocalFontSize = value?.typography?.fontSize;
+	const rawInheritedFontSize = inheritedValue?.typography?.fontSize;
+	const rawFontSizeForDisplay = rawLocalFontSize ?? rawInheritedFontSize;
+	const fontSize = decodeValue( rawFontSizeForDisplay );
+	const inheritedFontSizeDecoded = decodeValue( rawInheritedFontSize );
+	const isFontSizePlaceholder =
+		! hasValue( rawLocalFontSize ) && hasValue( rawInheritedFontSize );
 
-	// Extract the slug from the CSS custom property if it exists
-	const currentFontSizeSlug = ( () => {
-		const rawValue = inheritedValue?.typography?.fontSize;
+	// Extract the slug from the CSS custom property if it exists.
+	const extractSlug = ( rawValue ) => {
 		if ( ! rawValue || typeof rawValue !== 'string' ) {
 			return undefined;
 		}
-
 		// Block supports use `var:preset` format.
 		if ( rawValue.startsWith( 'var:preset|font-size|' ) ) {
 			return rawValue.replace( 'var:preset|font-size|', '' );
 		}
-
 		// Global styles data uses `var(--wp--preset)` format.
 		const cssVarMatch = rawValue.match(
 			/^var\(--wp--preset--font-size--([^)]+)\)$/
@@ -335,9 +418,10 @@ export default function TypographyPanel( {
 		if ( cssVarMatch ) {
 			return cssVarMatch[ 1 ];
 		}
-
 		return undefined;
-	} )();
+	};
+	const currentFontSizeSlug = extractSlug( rawFontSizeForDisplay );
+	const inheritedFontSizeSlug = extractSlug( rawInheritedFontSize );
 
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug
@@ -348,11 +432,31 @@ export default function TypographyPanel( {
 			setImmutably(
 				value,
 				[ 'typography', 'fontSize' ],
-				actualValue || undefined
+				hasValue( actualValue ) ? actualValue : undefined
 			)
 		);
 	};
-	const hasFontSize = () => !! value?.typography?.fontSize;
+	// Display-without-commit interceptor: at-rest, the inner
+	// `FontSizePickerToggleGroup` fires `onChange( undefined )` when the
+	// user activates the already-preselected (inherited) chip. Treat
+	// that as the user's "accept this inherited value" affordance and
+	// commit the inherited value to local. Once committed (no longer
+	// at-rest), the same `undefined` payload represents a normal
+	// deselect, so we let it pass through unchanged. The custom-size
+	// input does not emit `undefined` on focus or activation, so this
+	// hook is correctly scoped to the ToggleGroup activation path.
+	const setFontSizeWithInheritedCommit = ( newValue, metadata ) => {
+		if ( isFontSizePlaceholder && newValue === undefined && ! metadata ) {
+			if ( inheritedFontSizeSlug ) {
+				setFontSize( undefined, { slug: inheritedFontSizeSlug } );
+			} else {
+				setFontSize( inheritedFontSizeDecoded );
+			}
+			return;
+		}
+		setFontSize( newValue, metadata );
+	};
+	const hasFontSize = () => hasValue( value?.typography?.fontSize );
 	const resetFontSize = () => setFontSize( undefined );
 
 	// Appearance
@@ -360,8 +464,22 @@ export default function TypographyPanel( {
 	const appearanceControlLabel = useAppearanceControlLabel( settings );
 	const hasFontStyles = settings?.typography?.fontStyle;
 	const hasFontWeights = settings?.typography?.fontWeight;
-	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
-	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
+	// Render local-then-inherited; placeholder fires only when both
+	// local leaves are unset and at least one inherited leaf exists.
+	const inheritedFontStyle = decodeValue(
+		inheritedValue?.typography?.fontStyle
+	);
+	const inheritedFontWeight = decodeValue(
+		inheritedValue?.typography?.fontWeight
+	);
+	const fontStyle =
+		decodeValue( value?.typography?.fontStyle ) ?? inheritedFontStyle;
+	const fontWeight =
+		decodeValue( value?.typography?.fontWeight ) ?? inheritedFontWeight;
+	const isFontAppearancePlaceholder =
+		! hasValue( value?.typography?.fontStyle ) &&
+		! hasValue( value?.typography?.fontWeight ) &&
+		( hasValue( inheritedFontStyle ) || hasValue( inheritedFontWeight ) );
 	const setFontAppearance = useCallback(
 		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
 			// Only update the font style and weight if they have changed.
@@ -370,55 +488,115 @@ export default function TypographyPanel( {
 					...value,
 					typography: {
 						...value?.typography,
-						fontStyle: newFontStyle || undefined,
-						fontWeight: newFontWeight || undefined,
+						fontStyle: hasValue( newFontStyle )
+							? newFontStyle
+							: undefined,
+						fontWeight: hasValue( newFontWeight )
+							? newFontWeight
+							: undefined,
 					},
 				} );
 			}
 		},
 		[ fontStyle, fontWeight, onChange, value ]
 	);
+	// Display-without-commit interceptor for FontAppearance: when the
+	// control is at rest (no local override, displaying the inherited
+	// font style/weight), activating the already-preselected option
+	// would otherwise be swallowed by the equality short-circuit in
+	// `setFontAppearance`. Treat that activation as the user's
+	// "accept this inherited value" affordance and commit the
+	// inherited values to local explicitly.
+	const setFontAppearanceWithInheritedCommit = useCallback(
+		( next ) => {
+			if (
+				isFontAppearancePlaceholder &&
+				next.fontStyle === fontStyle &&
+				next.fontWeight === fontWeight
+			) {
+				onChange( {
+					...value,
+					typography: {
+						...value?.typography,
+						fontStyle: hasValue( fontStyle )
+							? fontStyle
+							: undefined,
+						fontWeight: hasValue( fontWeight )
+							? fontWeight
+							: undefined,
+					},
+				} );
+				return;
+			}
+			setFontAppearance( next );
+		},
+		[
+			isFontAppearancePlaceholder,
+			fontStyle,
+			fontWeight,
+			onChange,
+			value,
+			setFontAppearance,
+		]
+	);
 	const hasFontAppearance = () =>
-		!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;
+		hasValue( value?.typography?.fontStyle ) ||
+		hasValue( value?.typography?.fontWeight );
 	const resetFontAppearance = useCallback( () => {
 		setFontAppearance( {} );
 	}, [ setFontAppearance ] );
 
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
-	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
+	const localLineHeight = decodeValue( value?.typography?.lineHeight );
+	const inheritedLineHeight = decodeValue(
+		inheritedValue?.typography?.lineHeight
+	);
+	const isLineHeightPlaceholder =
+		! hasValue( value?.typography?.lineHeight ) &&
+		hasValue( inheritedLineHeight );
 	const setLineHeight = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'lineHeight' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
+	const hasLineHeight = () => hasValue( value?.typography?.lineHeight );
 	const resetLineHeight = () => setLineHeight( undefined );
 
 	// Letter Spacing
 	const hasLetterSpacingControl = useHasLetterSpacingControl( settings );
-	const letterSpacing = decodeValue(
+	const localLetterSpacing = decodeValue( value?.typography?.letterSpacing );
+	const inheritedLetterSpacing = decodeValue(
 		inheritedValue?.typography?.letterSpacing
 	);
+	const isLetterSpacingPlaceholder =
+		! hasValue( value?.typography?.letterSpacing ) &&
+		hasValue( inheritedLetterSpacing );
 	const setLetterSpacing = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'letterSpacing' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
+	const hasLetterSpacing = () => hasValue( value?.typography?.letterSpacing );
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
 	// Text Indent
 	const hasTextIndentControl = useHasTextIndentControl( settings );
-	const textIndent = decodeValue( inheritedValue?.typography?.textIndent );
+	const localTextIndent = decodeValue( value?.typography?.textIndent );
+	const inheritedTextIndent = decodeValue(
+		inheritedValue?.typography?.textIndent
+	);
+	const isTextIndentPlaceholder =
+		! hasValue( value?.typography?.textIndent ) &&
+		hasValue( inheritedTextIndent );
 
 	// Get the setting value - can be 'subsequent' (default), 'all', or false.
 	// The setting determines which CSS selector is used for the text-indent style.
@@ -430,7 +608,7 @@ export default function TypographyPanel( {
 			setImmutably(
 				value,
 				[ 'typography', 'textIndent' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
@@ -448,7 +626,7 @@ export default function TypographyPanel( {
 		} );
 	};
 
-	const hasTextIndent = () => !! value?.typography?.textIndent;
+	const hasTextIndent = () => hasValue( value?.typography?.textIndent );
 	const resetTextIndent = () => {
 		onChange(
 			setImmutably( value, [ 'typography', 'textIndent' ], undefined )
@@ -460,82 +638,151 @@ export default function TypographyPanel( {
 
 	// Text Columns
 	const hasTextColumnsControl = useHasTextColumnsControl( settings );
-	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
+	const localTextColumns = decodeValue( value?.typography?.textColumns );
+	const inheritedTextColumns = decodeValue(
+		inheritedValue?.typography?.textColumns
+	);
+	const isTextColumnsPlaceholder =
+		! hasValue( value?.typography?.textColumns ) &&
+		hasValue( inheritedTextColumns );
 	const setTextColumns = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'textColumns' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasTextColumns = () => !! value?.typography?.textColumns;
+	const hasTextColumns = () => hasValue( value?.typography?.textColumns );
 	const resetTextColumns = () => setTextColumns( undefined );
 
 	// Text Transform
 	const hasTextTransformControl = useHasTextTransformControl( settings );
-	const textTransform = decodeValue(
+	const inheritedTextTransform = decodeValue(
 		inheritedValue?.typography?.textTransform
 	);
+	const textTransform =
+		decodeValue( value?.typography?.textTransform ) ??
+		inheritedTextTransform;
+	const isTextTransformPlaceholder =
+		! hasValue( value?.typography?.textTransform ) &&
+		hasValue( inheritedTextTransform );
 	const setTextTransform = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'textTransform' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasTextTransform = () => !! value?.typography?.textTransform;
+	// Display-without-commit interceptor: when at-rest, the inner
+	// `ToggleGroupControl` fires `onChange( undefined )` if the user
+	// activates the already-preselected (inherited) option. We treat
+	// that activation as the user's "accept this inherited value"
+	// affordance and commit the inherited value to local. When
+	// committed (no longer at-rest), the same `undefined` payload
+	// represents a normal `isDeselectable` deselect, so we let it pass
+	// through unchanged.
+	const setTextTransformWithInheritedCommit = ( newValue ) => {
+		if ( isTextTransformPlaceholder && newValue === undefined ) {
+			setTextTransform( inheritedTextTransform );
+			return;
+		}
+		setTextTransform( newValue );
+	};
+	const hasTextTransform = () => hasValue( value?.typography?.textTransform );
 	const resetTextTransform = () => setTextTransform( undefined );
 
 	// Text Decoration
 	const hasTextDecorationControl = useHasTextDecorationControl( settings );
-	const textDecoration = decodeValue(
+	const inheritedTextDecoration = decodeValue(
 		inheritedValue?.typography?.textDecoration
 	);
+	const textDecoration =
+		decodeValue( value?.typography?.textDecoration ) ??
+		inheritedTextDecoration;
+	const isTextDecorationPlaceholder =
+		! hasValue( value?.typography?.textDecoration ) &&
+		hasValue( inheritedTextDecoration );
 	const setTextDecoration = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'textDecoration' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasTextDecoration = () => !! value?.typography?.textDecoration;
+	const setTextDecorationWithInheritedCommit = ( newValue ) => {
+		if ( isTextDecorationPlaceholder && newValue === undefined ) {
+			setTextDecoration( inheritedTextDecoration );
+			return;
+		}
+		setTextDecoration( newValue );
+	};
+	const hasTextDecoration = () =>
+		hasValue( value?.typography?.textDecoration );
 	const resetTextDecoration = () => setTextDecoration( undefined );
 
 	// Text Orientation
 	const hasWritingModeControl = useHasWritingModeControl( settings );
-	const writingMode = decodeValue( inheritedValue?.typography?.writingMode );
+	const inheritedWritingMode = decodeValue(
+		inheritedValue?.typography?.writingMode
+	);
+	const writingMode =
+		decodeValue( value?.typography?.writingMode ) ?? inheritedWritingMode;
+	const isWritingModePlaceholder =
+		! hasValue( value?.typography?.writingMode ) &&
+		hasValue( inheritedWritingMode );
 	const setWritingMode = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'writingMode' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasWritingMode = () => !! value?.typography?.writingMode;
+	const setWritingModeWithInheritedCommit = ( newValue ) => {
+		if ( isWritingModePlaceholder && newValue === undefined ) {
+			setWritingMode( inheritedWritingMode );
+			return;
+		}
+		setWritingMode( newValue );
+	};
+	const hasWritingMode = () => hasValue( value?.typography?.writingMode );
 	const resetWritingMode = () => setWritingMode( undefined );
 
 	// Text Alignment
 	const hasTextAlignmentControl = useHasTextAlignmentControl( settings );
 
-	const textAlign = decodeValue( inheritedValue?.typography?.textAlign );
+	const inheritedTextAlign = decodeValue(
+		inheritedValue?.typography?.textAlign
+	);
+	const textAlign =
+		decodeValue( value?.typography?.textAlign ) ?? inheritedTextAlign;
+	const isTextAlignPlaceholder =
+		! hasValue( value?.typography?.textAlign ) &&
+		hasValue( inheritedTextAlign );
 	const setTextAlign = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'typography', 'textAlign' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasTextAlign = () => !! value?.typography?.textAlign;
+	const setTextAlignWithInheritedCommit = ( newValue ) => {
+		if ( isTextAlignPlaceholder && newValue === undefined ) {
+			setTextAlign( inheritedTextAlign );
+			return;
+		}
+		setTextAlign( newValue );
+	};
+	const hasTextAlign = () => hasValue( value?.typography?.textAlign );
 	const resetTextAlign = () => setTextAlign( undefined );
 
 	const resetAllFilter = useCallback(
@@ -571,8 +818,15 @@ export default function TypographyPanel( {
 					hasValue={ hasTextColorValue }
 					resetValue={ resetTextColor }
 					isShownByDefault={ defaultControls.textColor }
-					indicators={ [ textColor ] }
+					indicators={ [ userTextColor ?? textColor ] }
 					contrastWarning={ contrastWarning }
+					showInheritanceLabelIndicators={
+						showInheritanceLabelIndicators
+					}
+					isPlaceholder={
+						userTextColor === undefined && textColor !== undefined
+					}
+					hasInheritedValue={ textColor !== undefined }
 					tabs={ [
 						{
 							key: 'text',
@@ -582,8 +836,15 @@ export default function TypographyPanel( {
 								inheritedValue?.color?.text,
 								'color'
 							),
+							userSlug: extractPresetSlug(
+								value?.color?.text,
+								'color'
+							),
 							setValue: setTextColor,
 							userValue: userTextColor,
+							isPlaceholder:
+								userTextColor === undefined &&
+								textColor !== undefined,
 						},
 					] }
 					colorGradientControlSettings={ {
@@ -594,7 +855,11 @@ export default function TypographyPanel( {
 				/>
 			) }
 			{ hasFontFamilyEnabled && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isFontFamilyPlaceholder,
+						hasFontFamily() && inheritedFontFamily !== undefined
+					) }
 					label={ __( 'Font' ) }
 					hasValue={ hasFontFamily }
 					onDeselect={ resetFontFamily }
@@ -606,12 +871,17 @@ export default function TypographyPanel( {
 						value={ fontFamily }
 						onChange={ setFontFamily }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasFontSizeEnabled && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isFontSizePlaceholder,
+						hasFontSize() && rawInheritedFontSize !== undefined
+					) }
 					label={ __( 'Size' ) }
 					hasValue={ hasFontSize }
+					hasInlineEndToggle
 					onDeselect={ resetFontSize }
 					isShownByDefault={ defaultControls.fontSize }
 					panelId={ panelId }
@@ -619,16 +889,22 @@ export default function TypographyPanel( {
 					<FontSizePicker
 						value={ currentFontSizeSlug || fontSize }
 						valueMode={ currentFontSizeSlug ? 'slug' : 'literal' }
-						onChange={ setFontSize }
+						onChange={ setFontSizeWithInheritedCommit }
 						fontSizes={ mergedFontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasAppearanceControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isFontAppearancePlaceholder,
+						hasFontAppearance() &&
+							( inheritedFontStyle !== undefined ||
+								inheritedFontWeight !== undefined )
+					) }
 					label={ appearanceControlLabel }
 					hasValue={ hasFontAppearance }
 					onDeselect={ resetFontAppearance }
@@ -640,16 +916,20 @@ export default function TypographyPanel( {
 							fontStyle,
 							fontWeight,
 						} }
-						onChange={ setFontAppearance }
+						onChange={ setFontAppearanceWithInheritedCommit }
 						hasFontStyles={ hasFontStyles }
 						hasFontWeights={ hasFontWeights }
 						fontFamilyFaces={ fontFamilyFaces }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasLineHeightEnabled && (
-				<ToolsPanelItem
-					className="single-column"
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isLineHeightPlaceholder,
+						hasLineHeight() && inheritedLineHeight !== undefined,
+						'single-column'
+					) }
 					label={ __( 'Line height' ) }
 					hasValue={ hasLineHeight }
 					onDeselect={ resetLineHeight }
@@ -658,14 +938,31 @@ export default function TypographyPanel( {
 				>
 					<LineHeightControl
 						__unstableInputWidth="auto"
-						value={ lineHeight }
+						value={ localLineHeight ?? inheritedLineHeight }
 						onChange={ setLineHeight }
+						// Only override the placeholder when there is an
+						// inherited value to surface. Passing `undefined` would
+						// clobber `LineHeightControl`'s own `BASE_DEFAULT_VALUE`
+						// (1.5) placeholder.
+						{ ...( isLineHeightPlaceholder
+							? {
+									placeholder:
+										getNumericPlaceholder(
+											inheritedLineHeight
+										),
+							  }
+							: {} ) }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasLetterSpacingControl && (
-				<ToolsPanelItem
-					className="single-column"
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isLetterSpacingPlaceholder,
+						hasLetterSpacing() &&
+							inheritedLetterSpacing !== undefined,
+						'single-column'
+					) }
 					label={ __( 'Letter spacing' ) }
 					hasValue={ hasLetterSpacing }
 					onDeselect={ resetLetterSpacing }
@@ -673,14 +970,32 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<LetterSpacingControl
-						value={ letterSpacing }
+						// Local-then-inherited: render the inherited value as
+						// the control's value at rest so the unit parses from
+						// it (e.g. "0.02em" keeps the em unit rather than the
+						// value string sitting behind a default px unit). It is
+						// only written to local on user change. Matches the
+						// ToggleGroup/FontSize controls rather than the
+						// native-placeholder pattern.
+						value={ localLetterSpacing ?? inheritedLetterSpacing }
 						onChange={ setLetterSpacing }
 						__unstableInputWidth="auto"
+						placeholder={
+							isLetterSpacingPlaceholder
+								? getNumericPlaceholder(
+										inheritedLetterSpacing
+								  )
+								: undefined
+						}
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasTextIndentControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isTextIndentPlaceholder,
+						hasTextIndent() && inheritedTextIndent !== undefined
+					) }
 					label={ __( 'Line indent' ) }
 					hasValue={ hasTextIndent }
 					onDeselect={ resetTextIndent }
@@ -688,11 +1003,22 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<TextIndentControl
-						value={ textIndent }
+						// Local-then-inherited: render the inherited value as
+						// the control's value at rest so the UnitControl parses
+						// and shows the inherited unit (e.g. `1.5em` selects the
+						// `em` unit) instead of a raw string in the placeholder
+						// while the unit stays at the default `px`. Written to
+						// local only on user change.
+						value={ localTextIndent ?? inheritedTextIndent }
 						onChange={ setTextIndentValue }
 						__unstableInputWidth="auto"
 						withSlider
 						hasBottomMargin={ isGlobalStyles }
+						placeholder={
+							isTextIndentPlaceholder
+								? getNumericPlaceholder( inheritedTextIndent )
+								: undefined
+						}
 					/>
 					{ isGlobalStyles && (
 						<ToggleControl
@@ -702,11 +1028,15 @@ export default function TypographyPanel( {
 							help={ textIndentHelp }
 						/>
 					) }
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasTextColumnsControl && (
-				<ToolsPanelItem
-					className="single-column"
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isTextColumnsPlaceholder,
+						hasTextColumns() && inheritedTextColumns !== undefined,
+						'single-column'
+					) }
 					label={ __( 'Columns' ) }
 					hasValue={ hasTextColumns }
 					onDeselect={ resetTextColumns }
@@ -718,15 +1048,25 @@ export default function TypographyPanel( {
 						max={ MAX_TEXT_COLUMNS }
 						min={ MIN_TEXT_COLUMNS }
 						onChange={ setTextColumns }
+						placeholder={
+							isTextColumnsPlaceholder
+								? inheritedTextColumns
+								: undefined
+						}
 						spinControls="custom"
-						value={ textColumns }
+						value={ localTextColumns }
 						initialPosition={ 1 }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasTextDecorationControl && (
-				<ToolsPanelItem
-					className="single-column"
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isTextDecorationPlaceholder,
+						hasTextDecoration() &&
+							inheritedTextDecoration !== undefined,
+						'single-column'
+					) }
 					label={ __( 'Decoration' ) }
 					hasValue={ hasTextDecoration }
 					onDeselect={ resetTextDecoration }
@@ -735,15 +1075,18 @@ export default function TypographyPanel( {
 				>
 					<TextDecorationControl
 						value={ textDecoration }
-						onChange={ setTextDecoration }
-						size="__unstable-large"
+						onChange={ setTextDecorationWithInheritedCommit }
 						__unstableInputWidth="auto"
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasWritingModeControl && (
-				<ToolsPanelItem
-					className="single-column"
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isWritingModePlaceholder,
+						hasWritingMode() && inheritedWritingMode !== undefined,
+						'single-column'
+					) }
 					label={ __( 'Orientation' ) }
 					hasValue={ hasWritingMode }
 					onDeselect={ resetWritingMode }
@@ -752,13 +1095,17 @@ export default function TypographyPanel( {
 				>
 					<WritingModeControl
 						value={ writingMode }
-						onChange={ setWritingMode }
-						size="__unstable-large"
+						onChange={ setWritingModeWithInheritedCommit }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasTextTransformControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isTextTransformPlaceholder,
+						hasTextTransform() &&
+							inheritedTextTransform !== undefined
+					) }
 					label={ __( 'Letter case' ) }
 					hasValue={ hasTextTransform }
 					onDeselect={ resetTextTransform }
@@ -767,15 +1114,18 @@ export default function TypographyPanel( {
 				>
 					<TextTransformControl
 						value={ textTransform }
-						onChange={ setTextTransform }
+						onChange={ setTextTransformWithInheritedCommit }
 						showNone
 						isBlock
-						size="__unstable-large"
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasTextAlignmentControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isTextAlignPlaceholder,
+						hasTextAlign() && inheritedTextAlign !== undefined
+					) }
 					label={ __( 'Text alignment' ) }
 					hasValue={ hasTextAlign }
 					onDeselect={ resetTextAlign }
@@ -784,9 +1134,8 @@ export default function TypographyPanel( {
 				>
 					<TextAlignmentControl
 						value={ textAlign }
-						onChange={ setTextAlign }
+						onChange={ setTextAlignWithInheritedCommit }
 						options={ [ 'left', 'center', 'right', 'justify' ] }
-						size="__unstable-large"
 					/>
 
 					{ textAlign === 'justify' && (
@@ -798,7 +1147,7 @@ export default function TypographyPanel( {
 							</Notice>
 						</div>
 					) }
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 		</Wrapper>
 	);