Size Change: +129 B (+0.01%)

Total Size: 2.58 MB

_{compressed-size-action}

Flaky tests detected in 6386cd4.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19499319480
📝 Reported issues:

• [Flaky Test] should show the original content after revert, clicking undo then redo in the header toolbar #47896 in /test/e2e/specs/site-editor/template-revert.spec.js

Denser menus seem worth trying. Should we update the newer Menu component too? Otherwise we're going to have inconsistent menu dimensions.

It looks great. Nice improvement ✨

Not something to solve here, but since it could help inform our direction towards density as an aspect of theming (#73215) I'm curious about any expectations with regards to how Menu adapts (if at all) to different density modes. In other words, are there cases where 40px menu items remain valid (perhaps for touch devices), or cases where we'd want menu items to be smaller than 32px?

I think there are valid use cases, but they are probably somewhat exotic at this point, so I'd veer towards solving that problem at a later time. And in the mean time just be aware, perhaps.

I'm having to shift gears to some writing tasks at the moment, so it's unlikely I'll be able to address the good feedback already shared today. If you're antsy, feel free to push directly, otherwise I'll come back to this as soon as I can.

I agree this is a good case for the new density theming. While Menu itself doesn't really need density variants at the moment, similar listbox-ish components like Select and Combobox should us the same density scale, and at least Select currently has use cases for an even denser list layout.

That probably suggests the move toward 32px makes even more sense because it can serve as the default and open the door to 40px being the 'comfortable' density variant, and something else—24px might be a stretch being the compact density.

@jasmussen I think we should update Menu too (40px → 32px), otherwise we're going to introduce inconsistent menu sizing xD

Okay, I believe I've updated the Menu component correctly now, but since that's using a particular setup, I would really appreciate some extra eyes on my last commit, and if something is off, feel free to push.

Other than that, this one is ready for a final review, and then I can start updating changelogs.

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.

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

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

Seems to be working 👍

I could go either way on this personally, but with the smaller item height do you think we should tighten other Menu metrics?

This PR	Tightened spacing

The screenshot on the right features reduced inline padding, reduced gap between label/description, reduced hr margin, and reduced gap between icon and text.

I have an ever so slight preference for what exists, but it's not at all a strong opinion, and if you prefer the rightmost one, feel free to push it.

No preference really :)

Okay, I rebased, updated the snapshots and the changelog. Assuming things'll be green soon, would anyone like to give it a final check and perhaps a ✅?

Maybe this could be the start of making everything mode condensed :P

@WordPress/gutenberg-design How are we liking this compact item design? If we're moving forward with it, do I understand correctly that we want the default item heights for Select and Combobox popovers to be compact as well?

I like this 32px design for menu items, especially because it helps substantially the density in those contexts.

I still think it's useful to have both 40 and 32px sizes for most controls, and that 40px is a useful default.

ComboboxControl items are already 32px though, aren't they?

But yes, it makes sense to unify on that density for things like that, which feel very related to menus.

+1 to aligning around 32px item height in popovers.

+1 to 32px

Follow-up question. Assuming we set the default to 32px, should we then either:

1. Keep the 40px item height variant around, for use cases like rendering thumbnail images in the items? (The larger space is probably appreciated in these patterns.)
2. Remove the 40px item height variant, and leave it to the consumers to render at whatever height they want, as long as it's taller than 32px?

I'm slightly leaning towards 2, but 1 may also make sense if we anticipate a lot of images in dropdown items.

I'm drawn to keep the 40px height. There may be use cases we haven’t considered yet where the 8x scale will be necessary to avoid inconsistencies in the spacing approach.

A common item design pattern is thumbnail + label + description. Fitting this into 40px is quite tricky. As an example, in the mockup below each item is 56px tall:

That said, 40px works reasonably well for simpler versions (thumbnail + label):

I think it might be good if sizes were informed by patterns like this rather than arbitrarily.

I think it might be good if sizes were informed by patterns like this rather than arbitrarily.

That makes sense. So maybe like, remove the 40px item height variant, and keep a single 32px min-height item. And for more content-rich use cases, we'll have standard patterns that will render at appropriate heights, adhering to the grid.

Just to be sure, this doesn't mean we revert this initial PR does it? I still think it's super valuable that most of the regular menu items, like the one shown in OP, is compact and dense so you don't have to scroll kebab menus on laptops.

Just to be sure, this doesn't mean we revert this initial PR does it? I still think it's super valuable that most of the regular menu items, like the one shown in OP, is compact and dense so you don't have to scroll kebab menus on laptops.

Right, we're not going to revert. In fact we'll apply the change to more components (selects and comboboxes, not just menus). 32px will be the default for simple items.