Admin: Standardize accordions UI on Menus screen and in Customizer

[abcd95]

There are padding inconsistencies within the "Add menu items" accordion sections on both the main Appearance > Menus screen and the Menus panel within the Customizer. This affects the lists of available items (like Pages, Posts) and the content of the "Custom Links" section.

Issues:

Available Item Lists (Pages, Posts, etc.):

• The .available-menu-items-list (inside #available-menu-items .accordion-section-content) has a padding-top of 1px, while its left, right, and bottom paddings are 15px.
• Effect: The first item in these lists appears too close to the top border of the accordion content area.
• Context: This 1px top padding is a legacy value. For instance, in customize-nav-menus.css, changeset [51727] refactored CSS shorthand for a similar rule (padding: 1px 15px 15px 15px; to padding: 1px 15px 15px;), carrying over the 1px top padding. This suggests the 1px wasn't an active design decision during that refactor but an existing value that was preserved.

Custom Links Section:

• The .accordion-section-content for #new-custom-menu-item has 0px top padding.
• Effect: The "URL" input field and its label are flush against the top border of the accordion content area, creating a cramped appearance.

These inconsistencies lead to an unbalanced and slightly unpolished UI in these core features.

[abcd95]

For the before/after screencast, please refer to this ​PR

[nikunj8866]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8800

Steps to Reproduce / Test

1. Navigate to Appearance > Customizer.
2. Click on Menus in the left sidebar panel.
3. Click on the Create New Menu button.
4. Enter a menu name and click on the Next button.
5. Click on the Add Items button.
6. Expand the Custom Links accordion section.
7. 🐞 Issue: Notice the spacing issue between the accordion heading and its content.

Expected Results

When testing a patch to validate it works as expected:

• ✅ Proper spacing is displayed in the Custom Links accordion section.

When reproducing a bug:

• ❌ There is no spacing between the accordion section heading and its content.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Eleven 4.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

When reproducing a bug/defect:

• ❌ Spacing issue is present in the Custom Links accordion.
• ​https://ibb.co/9HVdT7CH

When testing the bugfix patch:

• ✅ Spacing issue is resolved and layout appears as expected.
• ​https://ibb.co/wN0cp706

[wildworks]

I've identified this issue as first occurring in WordPress 6.7. Prior to WordPress 6.6, the blue outline would not appear when clicking on an accordion header, so it wasn't unnatural.

[wildworks]

Comparison of Accordion Header in WordPress 6.6 and 6.7