WordPress.org

Make WordPress Core

Ticket #51086: 51086.diff

File 51086.diff, 6.7 KB (added by stevegrunwell, 6 months ago)

Introduces do_tabbed_settings_sections()

  • Gruntfile.js

     
    269269                                        [ WORKING_DIR + 'wp-admin/js/postbox.js' ]: [ './src/js/_enqueues/admin/postbox.js' ],
    270270                                        [ WORKING_DIR + 'wp-admin/js/revisions.js' ]: [ './src/js/_enqueues/wp/revisions.js' ],
    271271                                        [ WORKING_DIR + 'wp-admin/js/set-post-thumbnail.js' ]: [ './src/js/_enqueues/admin/set-post-thumbnail.js' ],
     272                                        [ WORKING_DIR + 'wp-admin/js/settings-tabs.js' ]: [ './src/js/_enqueues/admin/settings-tabs.js' ],
    272273                                        [ WORKING_DIR + 'wp-admin/js/svg-painter.js' ]: [ './src/js/_enqueues/wp/svg-painter.js' ],
    273274                                        [ WORKING_DIR + 'wp-admin/js/tags-box.js' ]: [ './src/js/_enqueues/admin/tags-box.js' ],
    274275                                        [ WORKING_DIR + 'wp-admin/js/tags-suggest.js' ]: [ './src/js/_enqueues/admin/tags-suggest.js' ],
  • src/wp-admin/includes/template.php

     
    16981698}
    16991699
    17001700/**
     1701 * Render settings sections for a particular page using a tabbed interface.
     1702 *
     1703 * This function operates the same as do_settings_sections() as part of the Settings API.
     1704 *
     1705 * @global array $wp_settings_sections Storage array of all settings sections added to admin pages.
     1706 * @global array $wp_settings_fields   Storage array of settings fields and info about their pages/sections.
     1707 *
     1708 * @param string $page The slug name of the page whose settings sections you want to output.
     1709 */
     1710function do_tabbed_settings_sections( $page ) {
     1711        global $wp_settings_sections, $wp_settings_fields;
     1712
     1713        if ( ! isset( $wp_settings_sections[ $page ] ) ) {
     1714                return;
     1715        }
     1716
     1717        $sections = (array) $wp_settings_sections[ $page ];
     1718
     1719        // If there's only one section, don't bother rendering tabs.
     1720        if ( 1 >= count( $sections ) ) {
     1721                return do_settings_sections( $page );
     1722        }
     1723
     1724        // Render the list of tabs, then each section.
     1725        echo '<nav class="nav-tab-wrapper hide-if-no-js" role="tablist">';
     1726        foreach ( $sections as $section ) {
     1727                printf(
     1728                        '<a href="#%1$s" id="nav-tab-%1$s" class="nav-tab" role="tab">%2$s</a>',
     1729                        esc_attr( $section['id'] ),
     1730                        esc_html( $section['title'] )
     1731                );
     1732        }
     1733        echo '</nav>';
     1734
     1735        foreach ( (array) $wp_settings_sections[ $page ] as $section ) {
     1736                echo '<section id="tab-' . esc_attr( $section['id'] ) . '" role="tabpanel" aria-labelledby="nav-tab-' . esc_attr( $section['id'] ) . '">';
     1737                if ( $section['title'] ) {
     1738                        printf( '<h2>%1$s</h2>' . PHP_EOL, esc_html( $section['title'] ) );
     1739                }
     1740
     1741                if ( $section['callback'] ) {
     1742                        call_user_func( $section['callback'], $section );
     1743                }
     1744
     1745                if ( ! isset( $wp_settings_fields ) || ! isset( $wp_settings_fields[ $page ] ) || ! isset( $wp_settings_fields[ $page ][ $section['id'] ] ) ) {
     1746                        continue;
     1747                }
     1748                echo '<table class="form-table" role="presentation">';
     1749                do_settings_fields( $page, $section['id'] );
     1750                echo '</table>';
     1751                echo '</section>';
     1752        }
     1753
     1754        // Finally, ensure the necessary scripts are enqueued.
     1755        wp_enqueue_script( 'settings-tabs' );
     1756}
     1757
     1758/**
    17011759 * Print out the settings fields for a particular settings section.
    17021760 *
    17031761 * Part of the Settings API. Use this in a settings page to output
  • src/wp-includes/script-loader.php

     
    10791079        // JS-only version of hoverintent (no dependencies).
    10801080        $scripts->add( 'hoverintent-js', '/wp-includes/js/hoverintent-js.min.js', array(), '2.2.1', 1 );
    10811081
     1082        $scripts->add( 'settings-tabs', "/wp-admin/js/settings-tabs$suffix.js", array(), false, 1 );
     1083
    10821084        $scripts->add( 'customize-base', "/wp-includes/js/customize-base$suffix.js", array( 'jquery', 'json2', 'underscore' ), false, 1 );
    10831085        $scripts->add( 'customize-loader', "/wp-includes/js/customize-loader$suffix.js", array( 'customize-base' ), false, 1 );
    10841086        $scripts->add( 'customize-preview', "/wp-includes/js/customize-preview$suffix.js", array( 'wp-a11y', 'customize-base' ), false, 1 );
  • tests/phpunit/tests/admin/includesTemplate.php

     
    33 * @group admin
    44 */
    55class Tests_Admin_includesTemplate extends WP_UnitTestCase {
     6        /**
     7         * Clean up some global settings before each test.
     8         *
     9         * @global $wp_settings_sections
     10         */
     11        public function setUp() {
     12                global $wp_settings_sections;
     13
     14                parent::setUp();
     15
     16                $wp_settings_sections = [];
     17                wp_dequeue_script( 'settings-tabs' );
     18        }
     19
    620        function test_equal() {
    721                $this->assertEquals( ' selected=\'selected\'', selected( 'foo', 'foo', false ) );
    822                $this->assertEquals( ' checked=\'checked\'', checked( 'foo', 'foo', false ) );
     
    204218                );
    205219        }
    206220
     221        /**
     222         * @ticket
     223         * @covers ::do_tabbed_settings_sections()
     224         */
     225        public function test_do_tabbed_settings_sections_with_multiple_sections()
     226        {
     227                add_settings_section(
     228                        'tabbed-settings-1',
     229                        'Tabbed settings 1',
     230                        '__return_empty_string',
     231                        'tabbed-settings'
     232                );
     233                add_settings_section(
     234                        'tabbed-setting-2',
     235                        'Tabbed settings 2',
     236                        '__return_empty_string',
     237                        'tabbed-settings'
     238                );
     239
     240                ob_start();
     241                do_tabbed_settings_sections( 'tabbed-settings' );
     242                $output = ob_get_clean();
     243
     244                $this->assertContains( '<nav class="nav-tab-wrapper', $output );
     245                $this->assertContains(
     246                        '<a href="#tabbed-settings-1" id="nav-tab-tabbed-settings-1" class="nav-tab" role="tab">Tabbed settings 1</a>',
     247                        $output
     248                );
     249                $this->assertContains( '<section id="tab-tabbed-settings-1" role="tabpanel"', $output );
     250
     251                $this->assertTrue(
     252                        wp_script_is( 'settings-tabs', 'enqueued' ),
     253                        'The tab script should have been enqueued.'
     254                );
     255        }
     256
     257        /**
     258         * @ticket
     259         * @covers ::do_tabbed_settings_sections()
     260         */
     261        public function test_do_tabbed_settings_sections_with_a_single_section()
     262        {
     263                add_settings_section(
     264                        'tabbed-settings-1',
     265                        'Tabbed settings 1',
     266                        '__return_empty_string',
     267                        'tabbed-settings'
     268                );
     269
     270                ob_start();
     271                do_tabbed_settings_sections( 'tabbed-settings' );
     272                $output = ob_get_clean();
     273
     274                $this->assertNotContains( '<nav class="nav-tab-wrapper', $output );
     275                $this->assertNotContains(
     276                        '<a href="#tabbed-settings-1" id="nav-tab-tabbed-settings-1" class="nav-tab" role="tab">Tabbed settings 1</a>',
     277                        $output
     278                );
     279                $this->assertNotContains( '<section id="tab-tabbed-settings-1" role="tabpanel"', $output );
     280
     281                $this->assertFalse(
     282                        wp_script_is( 'settings-tabs', 'enqueued' ),
     283                        'The tab script is unnecessary if content is not being tabbed.'
     284                );
     285        }
    207286}