[wp-trac] [WordPress Trac] #37257: Minor CSS fix on ".nav-tab-wrapper" class

[WordPress Trac]

#37257: Minor CSS fix on ".nav-tab-wrapper" class
----------------------------+-----------------------------
 Reporter:  ramiy           |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Plugins         |    Version:  trunk
 Severity:  normal          |   Keywords:
  Focuses:  administration  |
----------------------------+-----------------------------
 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 {
         ...
         ...
 }
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37257>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform