From 307c25faab4a3962bb6aa49162f3ecde641f0d38 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 1 Oct 2026 15:44:25 +0100 Subject: [PATCH 1/2] Menu: Align group labels and separators with indented item labels. When a radio or checkbox column shifts item labels, headings and dividers follow that same inset so the menu reads as one column. Co-authored-by: Cursor --- packages/ui/CHANGELOG.md | 1 + packages/ui/src/menu/style.module.css | 23 +++++++++++++++++------ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 2510846a0d0283..2d35a454ccf051 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -17,6 +17,7 @@ ### Enhancements +- `Menu`: Align group labels and separators with item labels when a radio or checkbox column indents those labels. - `Checkbox`, `CheckboxControl`, `CheckboxGroup`: Mark as recommended for use in a WordPress environment ([#83771](https://github.com/WordPress/gutenberg/pull/83771)). - `Spinner`: Show a trackless half-circle like the `Button` loading indicator, with a `color` prop that accepts any CSS color value and defaults to weak neutral foreground. Keep the arc visible in forced-colors mode ([#83775](https://github.com/WordPress/gutenberg/pull/83775)). - Native text inputs and textareas use at least 16px below 600px to avoid iOS Safari zoom. Prefix and suffix text on `Input` match that size. Select and combobox trigger text stay at the `md` font size. ([#82764](https://github.com/WordPress/gutenberg/pull/82764)) diff --git a/packages/ui/src/menu/style.module.css b/packages/ui/src/menu/style.module.css index 0e9afb092df0e3..f32ad61848999a 100644 --- a/packages/ui/src/menu/style.module.css +++ b/packages/ui/src/menu/style.module.css @@ -11,7 +11,8 @@ --wp-ui-menu-min-width: 160px; --wp-ui-menu-max-width: var(--wpds-dimension-surface-width-md); --wp-ui-menu-item-padding-inline: var(--wpds-dimension-padding-md); - --wp-ui-menu-group-head-padding-inline: var(--wpds-dimension-padding-md); + --_wp-ui-menu-group-head-padding-base: var(--wpds-dimension-padding-md); + --wp-ui-menu-group-head-padding-inline: var(--_wp-ui-menu-group-head-padding-base); --wp-ui-menu-selection-indicator-track-size: 0px; --wp-ui-menu-selection-indicator-size: var(--wpds-dimension-size-sm); --wp-ui-menu-selection-indicator-gap: 0px; @@ -57,7 +58,8 @@ /* * The list is the implicit alignment group for direct items. Explicit * groups and radio groups each establish an independent prefix track while - * inheriting the menu-wide selection tracks. + * inheriting the menu-wide selection tracks. Group labels and separators + * follow that shared selection track so they line up with item labels. */ .list, .group, @@ -88,13 +90,22 @@ --wp-ui-menu-group-prefix-gap: var(--wpds-dimension-gap-xs); } + /* + * Start after the selection track (`prefix-start`) and stop before the + * trailing item padding (`content-end`). A zero-width prefix track keeps + * this on the label line; a real prefix stays in its own column so one + * group's icons do not shift every heading and divider. + * `--wp-ui-menu-group-head-padding-inline` still nudges both edges. Its + * default matches the item padding the grid already applies. + */ .group-label { - grid-column: 1 / -1; + grid-column: prefix-start / content-end; display: flex; align-items: center; + min-width: 0; min-height: var(--wpds-dimension-size-md); padding-block: var(--wpds-dimension-padding-xs); - padding-inline: var(--wp-ui-menu-group-head-padding-inline); + margin-inline: calc(var(--wp-ui-menu-group-head-padding-inline) - var(--_wp-ui-menu-group-head-padding-base)); font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-xs); font-weight: var(--wpds-typography-font-weight-emphasis); @@ -104,10 +115,10 @@ } .separator { - grid-column: 1 / -1; + grid-column: prefix-start / content-end; height: var(--wpds-border-width-xs); margin-block: var(--wpds-dimension-gap-xs); - margin-inline: var(--wp-ui-menu-group-head-padding-inline); + margin-inline: calc(var(--wp-ui-menu-group-head-padding-inline) - var(--_wp-ui-menu-group-head-padding-base)); background-color: var(--wpds-color-stroke-surface-neutral-weak); @media ( forced-colors: active ) { From 910974a482774f8443de90259c31fc4be7469270 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 1 Oct 2026 15:51:31 +0100 Subject: [PATCH 2/2] Menu: Link the alignment changelog entry to the pull request. Co-authored-by: Cursor --- packages/ui/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 2d35a454ccf051..cf7b2a24c868ac 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -17,7 +17,7 @@ ### Enhancements -- `Menu`: Align group labels and separators with item labels when a radio or checkbox column indents those labels. +- `Menu`: Align group labels and separators with item labels when a radio or checkbox column indents those labels ([#83993](https://github.com/WordPress/gutenberg/pull/83993)). - `Checkbox`, `CheckboxControl`, `CheckboxGroup`: Mark as recommended for use in a WordPress environment ([#83771](https://github.com/WordPress/gutenberg/pull/83771)). - `Spinner`: Show a trackless half-circle like the `Button` loading indicator, with a `color` prop that accepts any CSS color value and defaults to weak neutral foreground. Keep the arc visible in forced-colors mode ([#83775](https://github.com/WordPress/gutenberg/pull/83775)). - Native text inputs and textareas use at least 16px below 600px to avoid iOS Safari zoom. Prefix and suffix text on `Input` match that size. Select and combobox trigger text stay at the `md` font size. ([#82764](https://github.com/WordPress/gutenberg/pull/82764))