Admin menu: submenu link groups have less top padding than bottom padding

[trushaamin]

I have just found an issue in the WordPress dashboard sidebar: the padding above and below 'Home' and 'Update' is not equal.

[modi2918]

Patch file for solution

[hellofromTonya]

Hello @trushaamin,

Welcome back to WordPress Core's Trac. Thank you for reporting the issue.

#25858 via [26072] added that CSS declaration. Updating the Version to 3.8.

This ticket appears actionable. Moving it into 6.7 for fix consideration.

[peterwilsoncc]

Without design feedback, I am moving this to the next release.

While the padding may not be equivalent mathematically, I'm reluctant to make the change without feedback as it may be aesthetically equivalent.

[sabernhardt]

it may be aesthetically equivalent

FWIW, I like that the current submenu links are slightly closer to their own top-level link than to the next group. The descender on the letter p and the circle for the update count can make the Updates link look lower, too, even with the extra pixel on the bottom.

Historically, though, the submenu's 7px value seems to have been chosen for a mathematical equivalent.

• ​724106 added the padding with a 1px top margin.
• Then ​761665 and ​762292 removed the top margin before the MP6 plugin's version 2.0.

If the top padding is worth changing to 8 pixels, 7px 0 8px; would be replaced with the shorthand 8px 0; (in both places: ​line 130 and ​line 582).

Trac ticket: https://core.trac.wordpress.org/ticket/61689

This PR fixes #61689 by adjusting the padding for submenu link groups in the admin menu, ensuring consistent top and bottom padding.

[im3dabasia1]

Hi,

I’ve raised a PR (​https://github.com/WordPress/wordpress-develop/pull/7803) for this issue. With my patch, the padding is now consistent on both top and bottom for both small and large screen layouts.

For large screens: ​https://postimg.cc/rDd5rx4m

For small screens: ​https://postimg.cc/zLKWdN0Y

Thank you, please let me know if you have any further feedback

[audrasjb]

I don't know why needs-design-feedback and has-screenshots were removed, but I'm adding back these keywords ad we still need a design feedback on this proposal.

And I'm pinging @karmatosed for a quick review! Thanks!

[karmatosed]

My concern here is that we are changing something without considering the system padding and just going for a consistency. For example inputs and buttons in the work within the design system now are 6px 8px. This would be far more desirable to consider for menus than a change here perhaps.

If I look at menus in the system Storybook I find they are now: 6px 12px.

For me, changing these right now doesn't seem right unless it would be more aligned with those menus: ​https://wordpress.github.io/gutenberg/?path=/docs/components-menugroup--docs&globals=css:wordpress

I think my recommendation would be to either reduce to 6px or not do this. I get the need for equalization and suspect it was done before for visual and/or some browser workaround. Attaching what it looks like at 6px.

[trushaamin]

Replying to karmatosed:

My concern here is that we are changing something without considering the system padding and just going for a consistency. For example inputs and buttons in the work within the design system now are 6px 8px. This would be far more desirable to consider for menus than a change here perhaps.

If I look at menus in the system Storybook I find they are now: 6px 12px.

For me, changing these right now doesn't seem right unless it would be more aligned with those menus: ​https://wordpress.github.io/gutenberg/?path=/docs/components-menugroup--docs&globals=css:wordpress

I think my recommendation would be to either reduce to 6px or not do this. I get the need for equalization and suspect it was done before for visual and/or some browser workaround. Attaching what it looks like at 6px.

Yes, 6px looks good.

[dhrumilk]

Replying to karmatosed:

My concern here is that we are changing something without considering the system padding and just going for a consistency. For example inputs and buttons in the work within the design system now are 6px 8px. This would be far more desirable to consider for menus than a change here perhaps.

If I look at menus in the system Storybook I find they are now: 6px 12px.

For me, changing these right now doesn't seem right unless it would be more aligned with those menus: ​https://wordpress.github.io/gutenberg/?path=/docs/components-menugroup--docs&globals=css:wordpress

I think my recommendation would be to either reduce to 6px or not do this. I get the need for equalization and suspect it was done before for visual and/or some browser workaround. Attaching what it looks like at 6px.

6px also looks good to me.

[im3dabasia1]

Thank you, @karmatosed, for the review.

I have updated the PR to incorporate your suggestions.

Let me know if you'd like any further tweaks!

[karmatosed]

@audrasjb it looks good to me. Let's get this in right before beta 1.

[audrasjb]

In 59875:

Administration: Adjust submenu padding in admin menu.

This changeset adjusts the padding for submenu link groups in the admin menu, ensuring consistent top and bottom padding.

Follow-up to [26072].

Props trushaamin, modi2918, hellofromTonya, peterwilsoncc, sabernhardt, im3dabasia1, audrasjb, karmatosed, dhrumilk.
Fixes #61689.