Global Styles: Expose additional elements in Typography and Colors

packages/block-editor/CHANGELOG.md

@@ -15,6 +15,7 @@
 
 ### Enhancements
 
+-   Allow Global Styles to supply additional element color controls to the shared Colors panel ([#80852](https://github.com/WordPress/gutenberg/pull/80852)).
 -   Creating a new block next to a sibling of the same type now inherits the sibling's attributes consistently, whether it is created by the appender, the inserter, or Enter at the edge of the text. Everything except the sibling's content (attributes with the `content` role) and its `metadata` is copied. The `attributesToCopy` list of a default block is removed: the copied attributes derive from the block's attribute roles.
 
 ### Enhancements

packages/block-editor/src/components/global-styles/color-panel.js

@@ -142,6 +142,7 @@ export default function ColorPanel( {
 	label,
 	children,
 	contrastWarning,
+	additionalElements,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const {
@@ -259,8 +260,19 @@ export default function ColorPanel( {
 				label: __( 'H6' ),
 				showPanel: showHeadingPanel,
 			},
+			...( additionalElements?.map( ( element ) => ( {
+				...element,
+				showPanel: hasSolidColors || hasGradientColors,
+			} ) ) ?? [] ),
 		],
-		[ showCaptionPanel, showButtonPanel, showHeadingPanel ]
+		[
+			additionalElements,
+			hasGradientColors,
+			hasSolidColors,
+			showCaptionPanel,
+			showButtonPanel,
+			showHeadingPanel,
+		]
 	);
 
 	const resetAllFilter = useCallback(

packages/block-editor/src/components/global-styles/test/color-panel.js

@@ -258,6 +258,30 @@ describe( 'ColorPanel — duplicate-hex preset slug identity', () => {
 	} );
 } );
 
+describe( 'ColorPanel — additional elements', () => {
+	it( 'renders additional element color controls', () => {
+		render(
+			<ColorPanel
+				value={ {} }
+				settings={ settingsWithColors( {
+					text: true,
+					background: true,
+				} ) }
+				onChange={ () => {} }
+				panelId="test-panel"
+				additionalElements={ [
+					{ name: 'textInput', label: 'Inputs' },
+				] }
+				defaultControls={ { textInput: true } }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: /^Inputs/ } )
+		).toBeVisible();
+	} );
+} );
+
 describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 	describe( 'Link color', () => {
 		it( 'exposes an accessible reset when local link.text overrides the inherited value', () => {

packages/global-styles-ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Expose typography and color controls for citations, inputs, and selects in Global Styles ([#80852](https://github.com/WordPress/gutenberg/pull/80852)).
+
 ## 1.20.0 (2026-08-12)
 
 ### Internal

packages/global-styles-ui/src/global-styles-ui.tsx

@@ -246,9 +246,18 @@ export function GlobalStylesUI( {
 					<GlobalStylesNavigationScreen path="/typography/caption">
 						<ScreenTypographyElement element="caption" />
 					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/cite">
+						<ScreenTypographyElement element="cite" />
+					</GlobalStylesNavigationScreen>
 					<GlobalStylesNavigationScreen path="/typography/button">
 						<ScreenTypographyElement element="button" />
 					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/textInput">
+						<ScreenTypographyElement element="textInput" />
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/select">
+						<ScreenTypographyElement element="select" />
+					</GlobalStylesNavigationScreen>
 					<GlobalStylesNavigationScreen path="/blocks">
 						<ScreenBlockList />
 					</GlobalStylesNavigationScreen>

packages/global-styles-ui/src/screen-colors.tsx

@@ -16,6 +16,22 @@ const { useSettingsForBlockElement, ColorPanel: StylesColorPanel } = unlock(
 	blockEditorPrivateApis
 );
 
+const ADDITIONAL_ELEMENTS = [
+	{ name: 'cite', label: __( 'Citations' ) },
+	{ name: 'textInput', label: __( 'Inputs' ) },
+	{ name: 'select', label: __( 'Selects' ) },
+];
+
+const DEFAULT_CONTROLS = {
+	link: true,
+	heading: true,
+	button: true,
+	caption: true,
+	cite: true,
+	textInput: true,
+	select: true,
+};
+
 function ScreenColors() {
 	// Get user styles for editing
 	const [ style, setStyle ] = useStyle< GlobalStylesStyles >(
@@ -53,6 +69,8 @@ function ScreenColors() {
 				value={ style }
 				onChange={ setStyle }
 				settings={ settings }
+				additionalElements={ ADDITIONAL_ELEMENTS }
+				defaultControls={ DEFAULT_CONTROLS }
 				showInheritanceLabelIndicators={ false }
 			/>
 		</>

packages/global-styles-ui/src/screen-typography-element.tsx

@@ -26,10 +26,22 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on captions.' ),
 		title: __( 'Captions' ),
 	},
+	cite: {
+		description: __( 'Manage the fonts and typography used on citations.' ),
+		title: __( 'Citations' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),
 	},
+	textInput: {
+		description: __( 'Manage the fonts and typography used on inputs.' ),
+		title: __( 'Inputs' ),
+	},
+	select: {
+		description: __( 'Manage the fonts and typography used on selects.' ),
+		title: __( 'Selects' ),
+	},
 };
 
 interface ScreenTypographyElementProps {

packages/global-styles-ui/src/typography-elements.tsx

@@ -93,11 +93,26 @@ function TypographyElements() {
 					element="caption"
 					label={ __( 'Captions' ) }
 				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="cite"
+					label={ __( 'Citations' ) }
+				/>
 				<ElementItem
 					parentMenu={ parentMenu }
 					element="button"
 					label={ __( 'Buttons' ) }
 				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="textInput"
+					label={ __( 'Inputs' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="select"
+					label={ __( 'Selects' ) }
+				/>
 			</ItemGroup>
 		</VStack>
 	);