Ticket #51086: 51086.5.diff

Index: Gruntfile.js
===================================================================
--- Gruntfile.js        (revision 48834)
+++ Gruntfile.js        (working copy)
@@ -269,6 +269,7 @@
                                        [ WORKING_DIR + 'wp-admin/js/postbox.js' ]: [ './src/js/_enqueues/admin/postbox.js' ],
                                        [ WORKING_DIR + 'wp-admin/js/revisions.js' ]: [ './src/js/_enqueues/wp/revisions.js' ],
                                        [ WORKING_DIR + 'wp-admin/js/set-post-thumbnail.js' ]: [ './src/js/_enqueues/admin/set-post-thumbnail.js' ],
+                                       [ WORKING_DIR + 'wp-admin/js/settings-tabs.js' ]: [ './src/js/_enqueues/admin/settings-tabs.js' ],
                                        [ WORKING_DIR + 'wp-admin/js/svg-painter.js' ]: [ './src/js/_enqueues/wp/svg-painter.js' ],
                                        [ WORKING_DIR + 'wp-admin/js/tags-box.js' ]: [ './src/js/_enqueues/admin/tags-box.js' ],
                                        [ WORKING_DIR + 'wp-admin/js/tags-suggest.js' ]: [ './src/js/_enqueues/admin/tags-suggest.js' ],
Index: src/js/_enqueues/admin/settings-tabs.js
===================================================================
--- src/js/_enqueues/admin/settings-tabs.js     (nonexistent)
+++ src/js/_enqueues/admin/settings-tabs.js     (working copy)
@@ -0,0 +1,51 @@
+/**
+ * Scripting for WP-Admin Tabs.
+ *
+ * @output wp-admin/js/settings-tabs.js
+ */
+
+( function ( window, document ) {
+       const tabWrapper = document.querySelector( '.nav-tab-wrapper' );
+       const tabs = tabWrapper.querySelectorAll( '.nav-tab' );
+       const panels = document.querySelectorAll( 'section[role="tabpanel"]' );
+
+       /**
+        * Set the current tab by its ID.
+        *
+        * @param {string} tabId - The ID of the active tab.
+        */
+       function setActiveTab( tabId ) {
+               tabs.forEach( function ( tab ) {
+                       const current = tab.id === tabId;
+                       tab.classList.toggle( 'nav-tab-active', current );
+                       tab.setAttribute( 'aria-selected', current );
+               } );
+
+               panels.forEach( function ( panel ) {
+                       if ( panel.getAttribute('aria-labelledby') === tabId ) {
+                               panel.removeAttribute( 'hidden' );
+                       } else {
+                               panel.setAttribute( 'hidden', true );
+                       }
+               } );
+       }
+
+       // Return early if there are no tabs on the page.
+       if ( ! tabs || ! panels ) {
+               return;
+       }
+
+       // Determine which tab should be selected.
+       let currentTab = window.location.hash.substr( 1 );
+       currentTab = currentTab ? 'nav-tab-' + currentTab : tabs[0].getAttribute( 'id' );
+
+       // Set the current tab and register the event listener.
+       setActiveTab( currentTab );
+       tabWrapper.addEventListener( 'click', function ( e ) {
+               if ( 'A' !== e.target.tagName ) {
+                       return;
+               }
+
+               setActiveTab( e.target.id );
+       } );
+}( window, document) );

Property changes on: src/js/_enqueues/admin/settings-tabs.js
___________________________________________________________________
Added: svn:eol-style
## -0,0 +1 ##
+native
\ No newline at end of property
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Index: src/wp-admin/includes/template.php
===================================================================
--- src/wp-admin/includes/template.php  (revision 48834)
+++ src/wp-admin/includes/template.php  (working copy)
@@ -1698,6 +1698,64 @@
 }

 /**
+ * Render settings sections for a particular page using a tabbed interface.
+ *
+ * This function operates the same as do_settings_sections() as part of the Settings API.
+ *
+ * @global array $wp_settings_sections Storage array of all settings sections added to admin pages.
+ * @global array $wp_settings_fields   Storage array of settings fields and info about their pages/sections.
+ *
+ * @param string $page The slug name of the page whose settings sections you want to output.
+ */
+function do_tabbed_settings_sections( $page ) {
+       global $wp_settings_sections, $wp_settings_fields;
+
+       if ( ! isset( $wp_settings_sections[ $page ] ) ) {
+               return;
+       }
+
+       $sections = (array) $wp_settings_sections[ $page ];
+
+       // If there's only one section, don't bother rendering tabs.
+       if ( 1 >= count( $sections ) ) {
+               return do_settings_sections( $page );
+       }
+
+       // Render the list of tabs, then each section.
+       echo '<nav class="nav-tab-wrapper hide-if-no-js" role="tablist">';
+       foreach ( $sections as $section ) {
+               printf(
+                       '<a href="#%1$s" id="nav-tab-%1$s" class="nav-tab" role="tab">%2$s</a>',
+                       esc_attr( $section['id'] ),
+                       esc_html( $section['title'] )
+               );
+       }
+       echo '</nav>';
+
+       foreach ( (array) $wp_settings_sections[ $page ] as $section ) {
+               printf( '<section id="tab-%1$s" role="tabpanel" aria-labelledby="nav-tab-%1$s">', esc_attr( $section['id'] ) );
+               if ( $section['title'] ) {
+                       printf( '<h2>%1$s</h2>%2$s', esc_html( $section['title'] ), PHP_EOL );
+               }
+
+               if ( is_callable( $section['callback'] ) ) {
+                       call_user_func( $section['callback'], $section );
+               }
+
+               if ( isset( $wp_settings_fields[ $page ][ $section['id'] ] ) ) {
+                       echo '<table class="form-table" role="presentation">';
+                       do_settings_fields( $page, $section['id'] );
+                       echo '</table>';
+               }
+               echo '</section>';
+       }
+
+       // Finally, ensure the necessary scripts are enqueued.
+       wp_enqueue_script( 'settings-tabs' );
+}
+
+/**
  * Print out the settings fields for a particular settings section.
  *
  * Part of the Settings API. Use this in a settings page to output
Index: src/wp-includes/script-loader.php
===================================================================
--- src/wp-includes/script-loader.php   (revision 48834)
+++ src/wp-includes/script-loader.php   (working copy)
@@ -1079,6 +1079,8 @@
        // JS-only version of hoverintent (no dependencies).
        $scripts->add( 'hoverintent-js', '/wp-includes/js/hoverintent-js.min.js', array(), '2.2.1', 1 );

+       $scripts->add( 'settings-tabs', "/wp-admin/js/settings-tabs$suffix.js", array(), false, 1 );
+
        $scripts->add( 'customize-base', "/wp-includes/js/customize-base$suffix.js", array( 'jquery', 'json2', 'underscore' ), false, 1 );
        $scripts->add( 'customize-loader', "/wp-includes/js/customize-loader$suffix.js", array( 'customize-base' ), false, 1 );
        $scripts->add( 'customize-preview', "/wp-includes/js/customize-preview$suffix.js", array( 'wp-a11y', 'customize-base' ), false, 1 );
Index: tests/phpunit/tests/admin/includesTemplate.php
===================================================================
--- tests/phpunit/tests/admin/includesTemplate.php      (revision 48834)
+++ tests/phpunit/tests/admin/includesTemplate.php      (working copy)
@@ -3,6 +3,20 @@
  * @group admin
  */
 class Tests_Admin_includesTemplate extends WP_UnitTestCase {
+       /**
+        * Clean up some global settings before each test.
+        *
+        * @global $wp_settings_sections
+        */
+       public function setUp() {
+               global $wp_settings_sections;
+
+               parent::setUp();
+
+               $wp_settings_sections = array();
+               wp_dequeue_script( 'settings-tabs' );
+       }
+
        function test_equal() {
                $this->assertEquals( ' selected=\'selected\'', selected( 'foo', 'foo', false ) );
                $this->assertEquals( ' checked=\'checked\'', checked( 'foo', 'foo', false ) );
@@ -204,4 +218,69 @@
                );
        }

+       /**
+        * @ticket
+        * @covers ::do_tabbed_settings_sections()
+        */
+       public function test_do_tabbed_settings_sections_with_multiple_sections()
+       {
+               add_settings_section(
+                       'tabbed-settings-1',
+                       'Tabbed settings 1',
+                       '__return_empty_string',
+                       'tabbed-settings'
+               );
+               add_settings_section(
+                       'tabbed-setting-2',
+                       'Tabbed settings 2',
+                       '__return_empty_string',
+                       'tabbed-settings'
+               );
+
+               ob_start();
+               do_tabbed_settings_sections( 'tabbed-settings' );
+               $output = ob_get_clean();
+
+               $this->assertContains( '<nav class="nav-tab-wrapper', $output );
+               $this->assertContains(
+                       '<a href="#tabbed-settings-1" id="nav-tab-tabbed-settings-1" class="nav-tab" role="tab">Tabbed settings 1</a>',
+                       $output
+               );
+               $this->assertContains( '<section id="tab-tabbed-settings-1" role="tabpanel"', $output );
+
+               $this->assertTrue(
+                       wp_script_is( 'settings-tabs', 'enqueued' ),
+                       'The tab script should have been enqueued.'
+               );


+       }
+
+       /**
+        * @ticket
+        * @covers ::do_tabbed_settings_sections()
+        */
+       public function test_do_tabbed_settings_sections_with_a_single_section()
+       {
+               add_settings_section(
+                       'tabbed-settings-1',
+                       'Tabbed settings 1',
+                       '__return_empty_string',
+                       'tabbed-settings'
+               );
+
+               ob_start();
+               do_tabbed_settings_sections( 'tabbed-settings' );
+               $output = ob_get_clean();
+
+               $this->assertNotContains( '<nav class="nav-tab-wrapper', $output );
+               $this->assertNotContains(
+                       '<a href="#tabbed-settings-1" id="nav-tab-tabbed-settings-1" class="nav-tab" role="tab">Tabbed settings 1</a>',
+                       $output
+               );
+               $this->assertNotContains( '<section id="tab-tabbed-settings-1" role="tabpanel"', $output );
+
+               $this->assertFalse(
+                       wp_script_is( 'settings-tabs', 'enqueued' ),
+                       'The tab script is unnecessary if content is not being tabbed.'
+               );
+       }
 }