WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#37257 closed defect (bug) (fixed)

Minor CSS fix on ".nav-tab-wrapper" class

Reported by: ramiy Owned by: ramiy
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

When a plugin author want to create navigation menu with tabs in the plugin settings page, he uses:

<div class="wrap">

	<h1><?php esc_html_e( 'Plugin Name', 'textdomain' ); ?></h1>

	<h2 class="nav-tab-wrapper">
		<a href="?page=plugin_slug&tab=general"  class="nav-tab <?php echo $active_tab == 'general'  ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'General',  'textdomain' ); ?></a>
		<a href="?page=plugin_slug&tab=settings" class="nav-tab <?php echo $active_tab == 'settings' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Settings', 'textdomain' ); ?></a>
		<a href="?page=plugin_slug&tab=addons"   class="nav-tab <?php echo $active_tab == 'addons'   ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Addons',   'textdomain' ); ?></a>
	</h2>

The Problem

When using .nav-tab-wrapper css class, we have to use it only with <h1>, <h2> and <h3> tags.

We can't use <nav>, <div> or any other HTML tag. Because the class applied only h1-h3 tags.

This is why external plugins like WooCommerce (and many others) use <nav> tags and add extra CSS.

The Solution

To fix this and apply .nav-tab-wrapper to all the HTML tags we need to edit the wp-admin/css/common.css and replace this code:

h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
h3.nav-tab-wrapper {
	...
	...
}

with this code:

.wrap .nav-tab-wrapper,
.nav-tab-wrapper {
	...
	...
}

Attachments (4)

37257.patch (505 bytes) - added by ramiy 3 years ago.
37257.2.patch (438 bytes) - added by wppluginsio 3 years ago.
37257.3.patch (474 bytes) - added by afercia 3 years ago.
Simpler selectors
37257.4.patch (608 bytes) - added by ramiy 3 years ago.
with the media query

Download all attachments as: .zip

Change History (16)

@ramiy
3 years ago

#1 follow-up: @ramiy
3 years ago

The attached patch fixes the issue. It was tested on plugins, and on the About Page, verifying this issue on ticket #33559 won't happen again.

#2 @SergeyBiryukov
3 years ago

  • Focuses ui added

#3 in reply to: ↑ 1 ; follow-up: @afercia
3 years ago

Replying to ramiy:

The attached patch fixes the issue. It was tested on plugins, and on the About Page, verifying this issue on ticket #33559 won't happen again.

While I agree that it would be nice to don't use type selectors (h1, h2...), my concern is about backwards compatibility. There's the need of selectors with higher specificity to override .wrap > h2:first-child because there are still plugins that use the "navigation tabs" as a .wrap first-child H2 heading and in this case, as far as I see, the issue on ticket #33559 still happens. Maybe trying to use just .nav-tab-wrapper and keep .wrap h2.nav-tab-wrapper could work? (would need some testing with various plugins)

@wppluginsio
3 years ago

#4 in reply to: ↑ 3 @ramiy
3 years ago

I added another patch under a different username... sorry.

#5 @ramiy
3 years ago

Replying to afercia:

While I agree that it would be nice to don't use type selectors (h1, h2...), my concern is about backwards compatibility. There's the need of selectors with higher specificity to override .wrap > h2:first-child because there are still plugins that use the "navigation tabs" as a .wrap first-child H2 heading and in this case, as far as I see, the issue on ticket #33559 still happens. Maybe trying to use just .nav-tab-wrapper and keep .wrap h2.nav-tab-wrapper could work? (would need some testing with various plugins)

Thanks @afercia!
Good feedback.
My second patch is fixing this and maintaining backwards compatibility.

#6 follow-up: @afercia
3 years ago

  • Component changed from Plugins to Administration
  • Focuses administration removed
  • Keywords has-patch added
  • Version trunk deleted

Thanks @ramiy. We're in beta though, not sure this can make it for 4.6. Also, worth noting that we've discussed the "navigation tabs" in the accessibility team and agreed in the future we should try to change them:

  • when they're just links to other screens, they should probably be inside a <nav> element because in this case they're just a sub-menu
  • when they're used as real tabs to toggle the visibility of in-page content, they should be an ARIA tabbed interface

Your patch makes sense to me, allowing the nav-tab-wrapper CSS class to be used on any element it's a good start for future improvements.

@afercia
3 years ago

Simpler selectors

#7 @afercia
3 years ago

Refresehd patch, probably can be as simple as this. Haven't found in core cases where .nav-tab-wrapper is used on a h3 element and if plugins are using it on a h3 it should still work.

#8 in reply to: ↑ 6 @ramiy
3 years ago

Replying to afercia:

Thanks @ramiy. We're in beta though, not sure this can make it for 4.6.

That's ok, I can wait for 4.7.

Your patch makes sense to me, allowing the nav-tab-wrapper CSS class to be used on any element

Excellent.

it's a good start for future improvements.

Not only future improvements, we need to write documentation for developers to show them how to implement this in current plugins/themes.

Refresehd patch, probably can be as simple as this. Haven't found in core cases where .nav-tab-wrapper is used on a h3 element and if plugins are using it on a h3 it should still work.

The third patch is much simpler and elegant solution.

#9 @afercia
3 years ago

  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to 4.7
  • Owner set to ramiy
  • Status changed from new to assigned

We forgot to update the rule related to nav-tab-wrapper within the max-width: 600px media query. Other than that, allowing to use any element for the tabs wrapper makes sense to me, it's a small improvement that would be nice to see in 4.7.

@ramiy
3 years ago

with the media query

#10 @ramiy
3 years ago

Nice catch @afercia! I've updated the patch.

#11 @ramiy
3 years ago

  • Keywords needs-refresh removed

#12 @SergeyBiryukov
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 38306:

Common CSS: Allow for .nav-tab-wrapper class to be used on elements other than h3 to increase flexibility for custom settings pages.

Props ramiy, afercia.
Fixes #37257.

Note: See TracTickets for help on using tickets.