Skip to content

Try: 32px tall menu items. #73429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasmussen merged 4 commits into from
Dec 4, 2025
Merged

Try: 32px tall menu items. #73429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05c99e2
Try: 32px tall menu items.
jasmussen Nov 19, 2025
e32a4e5
Update Menu.
jasmussen Nov 24, 2025
be1b489
Update changelog.
jasmussen Dec 4, 2025
198792c
Update snapshots.
jasmussen Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancements

- `Menu` and othr menu items: change default size to be 32px tall rather than 40px to improve menu density. ([#73429](https://github.com/WordPress/gutenberg/pull/73429)).

### Bug Fixes

- `Notice`: Fix notice component spacing issue when actions are present. ([#69430](https://github.com/WordPress/gutenberg/pull/69430))
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
height: $button-size;
align-items: center;
box-sizing: border-box;
padding: 6px 12px;
padding: 4px 12px; // Allows 32px min-height.
Copy link
Contributor Author

@jasmussen jasmussen Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can appear a sensitive change due to how high level and generic this is, so please give it any attention you feel is necessary. But I think it may not be as controversial after all. The height of the button is based on a default icon size of 24px, and then with padding to make the button have its previously-default height of 36px. The math checks out: 24 + 6 + 6 = 36. This is already paired with height: $button-size, where $button-size === 36.

Which means that even if we apply size="compact", which should make the button 32px tall, it still is 36px tall, because 24+6+6 forces it that way. By changing this padding to 4px, we now allow the button to be just 32px tall, but past default buttons should still be 36px tall because the $button-size still maintains that.

Let me know if this logic makes sense.

border-radius: $radius-small;
color: $components-color-foreground;

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
controlSet.map( ( control, indexOfControl ) => (
<Button
__next40pxDefaultSize
size="compact"
key={ [
indexOfSet,
indexOfControl,
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@

.components-menu-item__button,
.components-menu-item__button.components-button {
min-height: $button-size-next-default-40px;
min-height: $grid-unit-40;
height: auto;
text-align: left;
padding-left: $grid-unit-10;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function UnforwardedMenuItem(

return (
<Button
__next40pxDefaultSize
size="compact"
ref={ ref }
// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
aria-checked={
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/menu-item/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`MenuItem should match snapshot when all props provided 1`] = `
<button
aria-checked="true"
class="components-button components-menu-item__button my-class is-next-40px-default-size"
class="components-button components-menu-item__button my-class is-compact"
role="menuitemcheckbox"
type="button"
>
Expand Down Expand Up @@ -35,7 +35,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `

exports[`MenuItem should match snapshot when info is provided 1`] = `
<button
class="components-button components-menu-item__button is-next-40px-default-size"
class="components-button components-menu-item__button is-compact"
role="menuitem"
type="button"
>
Expand All @@ -62,7 +62,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `

exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
<button
class="components-button components-menu-item__button my-class is-next-40px-default-size"
class="components-button components-menu-item__button my-class is-compact"
role="menuitem"
type="button"
>
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally

exports[`MenuItem should match snapshot when only label provided 1`] = `
<button
class="components-button components-menu-item__button is-next-40px-default-size"
class="components-button components-menu-item__button is-compact"
role="menuitem"
type="button"
>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/menu/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const ANIMATION_PARAMS = {
};

const CONTENT_WRAPPER_PADDING = space( 1 );
const ITEM_PADDING_BLOCK = space( 2 );
const ITEM_PADDING_BLOCK = space( 1 );
const ITEM_PADDING_INLINE = space( 3 );

// TODO:
Expand Down Expand Up @@ -152,7 +152,7 @@ const baseItem = css`
all: unset;

position: relative;
min-height: ${ space( 10 ) };
min-height: ${ space( 8 ) };
box-sizing: border-box;

/* Occupy the width of all grid columns (ie. full width) */
Expand Down
Loading