Ticket #51086: 51086.2.diff

Gruntfile.js

@@ -269 +269 @@
                                         [ 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' ],

src/wp-admin/includes/template.php

@@ -1698 +1698 @@
 }
 
 /**
+ * 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 ) {
+                echo '<section id="tab-' . esc_attr( $section['id'] ) . '" role="tabpanel" aria-labelledby="nav-tab-' . esc_attr( $section['id'] ) . '">';
+                if ( $section['title'] ) {
+                        printf( '<h2>%1$s</h2>' . PHP_EOL, esc_html( $section['title'] ) );
+                }
+
+                if ( $section['callback'] ) {
+                        call_user_func( $section['callback'], $section );
+                }
+
+                if ( ! isset( $wp_settings_fields ) || ! isset( $wp_settings_fields[ $page ] ) || ! isset( $wp_settings_fields[ $page ][ $section['id'] ] ) ) {
+                        continue;
+                }
+                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

src/wp-includes/script-loader.php

@@ -1079 +1079 @@
         // 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 );

tests/phpunit/tests/admin/includesTemplate.php

@@ -3 +3 @@
  * @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 +218 @@
                 );
         }
 
+        /**
+         * @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.'
+                );
+        }
 }