Audit extraneous HTML/CSS for the admin menu

[helen]

In working on #18380, I've noticed quite a bit of cruft that has built up over time, some of it directly related to the split between colors and structure. For example, the .wp-menu-arrow is no longer visible in the 3.8 redesign, but the HTML and CSS remain. Once #18380 and #26669 are complete, we should take a closer look at this.

[azaozz]

Yes, it's a solid chunk of HTML with far too many classes. There are about 800-900 lines of CSS (including colors), I bet it doesn't need more than 200-250 :)

The way it works can be simpler too. Not sure it needs the user controllable auto-fold at 900px as it goes into "mobile" mode at 782px.

[helen]

#28934 was marked as a duplicate.

[helen]

#29200 was marked as a duplicate.

[jbkkd]

from #29200

[pbearne]

refreshing patch

…s break down the changes:

• src/wp-admin/menu-header.php: The primary change is the removal of the $arrow variable and its inclusion in the menu item's HTML. Every instance of $arrow within the <a> tag has been deleted. This directly removes the arrow element from the rendered output.

• src/wp-admin/css/admin-menu.css: The CSS changes further support the removal of the arrow. The rules related to .wp-menu-arrow are removed. Specifically:
  • #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow div is changed to remove .wp-menu-arrow and .wp-menu-arrow div. This removes styling for the arrow itself and for parent menu items.
  • The /* A new arrow */ comment block and the following .wp-menu-arrow style block, which hid the arrow (display: none !important;), is completely deleted. Since the arrow element is no longer present in the HTML, these styles are unnecessary.

In summary, these changes effectively delete the arrow that typically appears next to WordPress admin menu items that have submenus. The HTML generating the arrow is removed, and the corresponding CSS styling is deleted. This results in a cleaner, more minimalist look for the admin menu.

[flixos90]

I'm happy to give this a review and test. If it only removes HTML and CSS that isn't meaningful in any way, that should not be too controversial of a change.

That said, it would still be good to get UI and design input here. @karmatosed Are you able to help out here potentially?

[flixos90]

@helen It looks like the PR ​https://github.com/WordPress/wordpress-develop/pull/8016 is a good attempt at removing the unnecessary .wp-menu-arrow HTML and CSS.

While you mention that in the description, the ticket is also about further auditing, which seems a much larger effort. Would you like for it to remain that way, or should we mark it as fixed by the .wp-menu-arrow removal?

[audrasjb]

I think we can start with this changeset and open new tickets if any related improvements are identified :)

[audrasjb]

In 59690:

Administration: Remove useless arrow icon from WordPress admin menu.

This changeset deletes the arrow that is typically added next to WordPress admin menu items that have submenus. The .wp-menu-arrow element is no longer visible since the WP 3.8 redesign, but the HTML and CSS remained. With this changeset, the HTML generating the arrow is removed, and the corresponding CSS styling is deleted.

Props helen, azaozz, jbkkd, pbearne, flixos90.
Fixes #26960.

committed in https://core.trac.wordpress.org/changeset/59690