Components: Standardize input field labels to sentence case by JanaMW27 · Pull Request #77202 · WordPress/gutenberg

JanaMW27 · 2026-04-09T16:26:55Z

What?

Remove text-transform: uppercase from BaseControl labels and text-transform: capitalize from DataForm panel labels, replacing ALL CAPS styling with sentence case.

Update label typography to use design system type tokens: fontSize (13px), fontWeightMedium (499), and foreground color — matching the individual tokens used by the heading-md variant.

Why?

Input field labels use ALL CAPS while other form elements (checkboxes, toggles, radio buttons) already use sentence case. This inconsistency hurts readability, accessibility (screen readers, dyslexia), and internationalization (languages without uppercase).

Closes #76673

How?

packages/components/src/utils/base-label.ts: Removed text-transform: uppercase, updated font-size from 11px to CONFIG.fontSize (13px), added color: COLORS.theme.foreground.
packages/dataviews/src/components/dataform-layouts/panel/style.scss: Removed text-transform: capitalize, updated color from $gray-700 to $gray-900.

Note: DataViews table headers intentionally keep ALL CAPS per design system guidance — they are not affected by this change.

Testing Instructions

Open the block editor and inspect input field labels (e.g., Typography panel, Dimensions panel).
Verify labels display in sentence case (not ALL CAPS).
Check DataForm panel labels match the updated style.
Confirm DataViews table column headers remain in ALL CAPS.

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com

Remove `text-transform: uppercase` from BaseControl labels and `text-transform: capitalize` from DataForm panel labels, replacing ALL CAPS styling with sentence case for improved readability, accessibility, and internationalization consistency. Update label font-size from 11px to 13px and color to foreground (gray-900) to match heading-md type tokens per design system guidance. Closes WordPress#76673 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-09T16:27:06Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @JanaMW27.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: JanaMW27.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: poligilad-auto <poligilad@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-04-09T16:27:06Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Required label: Any label starting with [Type].
Labels found: [Package] Components, First-time Contributor, [Package] DataViews.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

github-actions · 2026-04-09T16:27:06Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Required label: Any label starting with [Type].
Labels found: [Package] Components, [Package] DataViews.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

github-actions · 2026-04-09T16:27:34Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @JanaMW27! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

JanaMW27 · 2026-04-09T16:33:00Z

BEFORE / AFTER screenshots:

BEFORE

AFTER:

ciampo

I'll keep my review focused on the code changes, letting @jameskoster and other folks from @WordPress/gutenberg-design handle the design part.

A few general comments, on top of dedicated inline feedback:

we should re-generate snapshots;
we should add CHANGELOG entries as needed (components package, dataviews package)

Most notably, the changes in this PR are not comprehensive. Several components duplicate the 11px + uppercase pattern outside baseLabelTypography and are currently remaining unchanged, potentially introducing more discrepancies than it aims to fix.

Here is a detailed audit

Audit: Components left behind with old `11px + uppercase` label styles

This PR updates baseLabelTypography (which only has 2 consumers: BaseControl labels and InputControl labels) and one DataForm panel SCSS rule. However, many other locations across the codebase hardcode the same font-size: 11px; text-transform: uppercase; font-weight: 499 pattern independently and would not be updated, creating a patchwork of old and new label treatments.

Same package (`@wordpress/components`)

Component	File	Context
`ColorHeading`	`src/color-palette/styles.ts`	Section heading for color palettes
`PaletteHeading`	`src/palette-edit/styles.ts`	Section heading for palette editor
`ResetLabel`	`src/tools-panel/styles.ts`	"Reset" label in ToolsPanel dropdown
`MenuGroup` label	`src/menu-group/style.scss`	Group labels in dropdown menus

ResetLabel is particularly notable — it sits visually adjacent to the field labels this PR modifies, so the inconsistency would be immediately visible in any ToolsPanel.

Other packages

Package	Selector / File	Context
`block-editor`	`.block-editor-inserter__panel-title` in `inserter/style.scss`	Section labels in the block inserter
`block-editor`	`.block-editor-block-navigation__label` in `block-navigation/style.scss`	Block navigation labels
`block-library`	`.link-control-transform__subheading` in `navigation-link/editor.scss`	Subheading in link transform UI
`block-library`	`video/editor.scss`	Video track editor labels
`interface`	`complementary-area/style.scss` — sidebar `h3`	Inspector panel section subheadings
`edit-site`	`sidebar-navigation-screen-patterns/style.scss` — `h2`	Site editor sidebar section headers
`global-styles-ui`	`.global-styles-ui-subtitle` in `style.scss`	Global styles subtitles
`global-styles-ui`	`font-library/style.scss` (3 selectors: subtitle, page-selection, fonts-title)	Font library modal
`editor`	`entities-saved-states/style.scss`	Save entities panel button label
`commands`	`[cmdk-group-heading]` in `style.scss`	Command palette group headings

DataViews (intentionally kept per the PR description)

Selector / File	Context
`th` and `.dataviews-view-table-header-button` in `table/style.scss`	Table column headers
`dataviews-pagination/style.scss`	Pagination label (less clearly intentional)

Native / Mobile

File	Context
`text/styles/text-mixins.native.js` — `sectionHeading` variant	Exact native equivalent of `baseLabelTypography` — native labels will diverge from web

Snapshot files that will need regeneration

packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap (4 occurrences)
packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap (2 occurrences)
packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap (1 occurrence)

New design system (`@wordpress/ui`)

packages/ui/src/utils/css/field.module.css also uses text-transform: uppercase + font-size: var(--wpds-font-size-xs) for field labels. If the token resolves to 11px, the new design system would also retain the old pattern.

Summary: ~17+ locations across the codebase hardcode the same visual pattern and would remain on the old 11px + uppercase style. The most jarring inconsistencies would appear within the same panels (e.g., ResetLabel in ToolsPanel, inserter section titles, command palette group headings) where old and new styles coexist side by side.

ciampo · 2026-04-10T12:48:09Z

 	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: 1.4;
-	text-transform: uppercase;
+	color: ${ COLORS.theme.foreground };


I'm not sure this is the right place to add a color rule — this mixin is specifically aimed at typography rules (not color), as the JSDoc suggests.

For example, BaseControl deliberately sets color at the component level — StyledHelp uses color: COLORS.gray[700] while the label relied on color inheritance. The InputControl's BaseLabel also has no explicit color, likely relying on cascaded or inherited color for different contexts (e.g., disabled states, dark themes, accent-colored containers).

If the intent is to ensure foreground color on labels, that should be applied in the consumers (StyledLabel, StyledVisualLabel, BaseLabel), not in the shared typography mixin.

ciampo · 2026-04-10T12:49:02Z

 * Internal dependencies
 */
 import CONFIG from './config-values.js';
+import { COLORS } from './colors-values';


We should be consistent in our import paths — ie. adding the .js extension as in the line above

Suggested change

import { COLORS } from './colors-values';

import { COLORS } from './colors-values.js';

ciampo · 2026-04-10T12:51:28Z

 // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
 export const baseLabelTypography = css`
-	font-size: 11px;
+	font-size: ${ CONFIG.fontSize };


This change causes a font size jump from 11px to 13px, which I guess is what @jameskoster also highlighted in the original issue:

One observation is that this change would result in a minor loss of typographical hierarchy in the block inspector.

- Remove color from baseLabelTypography mixin (typography-only) - Apply foreground color in BaseControl and InputControl consumers - Regenerate snapshots (7 updated) - Add CHANGELOG entries for components and dataviews packages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

JanaMW27 · 2026-04-10T13:11:48Z

Thanks for the thorough review @ciampo! I've pushed a follow-up commit addressing your inline feedback:

Color moved out of the typography mixin — baseLabelTypography is now purely typography. The color: foreground is applied in the consumers (StyledLabel/StyledVisualLabel in BaseControl and BaseLabel in InputControl) instead.
Import extension fixed — removed the unnecessary COLORS import from base-label.ts entirely since color is no longer set there.
Snapshots regenerated — 7 snapshots updated across 3 test suites.
CHANGELOG entries added — for both @wordpress/components and @wordpress/dataviews.

Regarding the font-size jump (11px → 13px) and the comprehensive audit of ~17 other locations with hardcoded 11px + uppercase:

@jameskoster — could you weigh in on two questions?

Font size: Should labels use 13px (matching heading-md tokens) or stay at 11px/12px for hierarchy? The 11→13 jump is noticeable.
Scope: Should this PR also update the other ~17 locations ciampo identified (e.g., ColorHeading, PaletteHeading, ResetLabel, inserter panel titles, etc.), or should those be handled in follow-up PRs?

Happy to adjust either way — just want to make sure we're aligned on the design intent before expanding scope.

jameskoster · 2026-04-10T13:40:16Z

For me the labels should be 13px. But I'd also try normal font-weight; the heavier weight is causing some tension between panel headings and labels:

The most jarring inconsistencies would appear within the same panels (e.g., ResetLabel in ToolsPanel, inserter section titles, command palette group headings) where old and new styles coexist side by side.

To be sure I'm not missing something, this is already the case on trunk:

If it's not a label we shouldn't touch it in this PR, imo. I think the 11px all-caps style is still valid for small headings and certain buttons (DataViews table column headers).

@jameskoster

Change font-weight from fontWeightMedium (499) to fontWeight (normal) to reduce visual tension between panel headings and labels, as suggested by @jameskoster. Regenerate snapshots. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

JanaMW27 · 2026-04-10T14:02:34Z

New BEFORE / AFTER with the 400 weight

BEFORE

AFTER

cc @poligilad-auto for awareness that we are going with the 400 weight rather than the 500 weight

jameskoster · 2026-04-29T15:45:48Z

@JanaMW27 are we still wanting to pursue this?

JanaMW27 · 2026-04-29T16:02:55Z

I think it would be a general improvement to the DS but I am not 100% sure if its necesary.

JanaMW27 requested review from a team, ajitbohra, gigitux, ntsekouras and oandregal as code owners April 9, 2026 16:26

github-actions Bot added [Package] Components /packages/components [Package] DataViews /packages/dataviews labels Apr 9, 2026

github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 9, 2026

oandregal requested a review from jameskoster April 9, 2026 17:17

ciampo reviewed Apr 10, 2026

View reviewed changes

JanaMW27 requested a review from ellatrix as a code owner April 10, 2026 13:10

github-actions Bot added [Package] Editor /packages/editor [Package] Block editor /packages/block-editor labels Apr 10, 2026

	import { COLORS } from './colors-values';
	import { COLORS } from './colors-values.js';

Conversation

JanaMW27 commented Apr 9, 2026

What?

Why?

How?

Testing Instructions

Uh oh!

github-actions Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

github-actions Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

JanaMW27 commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Audit: Components left behind with old 11px + uppercase label styles

Same package (@wordpress/components)

Other packages

DataViews (intentionally kept per the PR description)

Native / Mobile

Snapshot files that will need regeneration

New design system (@wordpress/ui)

Uh oh!

ciampo Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

JanaMW27 commented Apr 10, 2026

Uh oh!

jameskoster commented Apr 10, 2026

Uh oh!

JanaMW27 commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jameskoster commented Apr 29, 2026

Uh oh!

JanaMW27 commented Apr 29, 2026 • edited by jameskoster Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Apr 9, 2026 •

edited

Loading

github-actions Bot commented Apr 9, 2026 •

edited

Loading

JanaMW27 commented Apr 9, 2026 •

edited

Loading

Audit: Components left behind with old `11px + uppercase` label styles

Same package (`@wordpress/components`)

New design system (`@wordpress/ui`)

JanaMW27 commented Apr 10, 2026 •

edited

Loading

JanaMW27 commented Apr 29, 2026 •

edited by jameskoster

Loading