Make WordPress Core

Ticket #47225: 47225.2.patch

File 47225.2.patch, 11.7 KB (added by Clorith, 4 years ago)
  • src/js/_enqueues/admin/site-health.js

    diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js
    a b  
    443443                        recalculateProgression();
    444444                }
    445445        }
     446
     447        // Trigger a class toggle when the extended menu button is clicked.
     448        $( '.health-check-offscreen-nav-wrapper' ).on( 'click', function() {
     449                $( this ).toggleClass( 'visible' );
     450        } );
    446451} );
  • src/wp-admin/css/site-health.css

    diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
    a b  
    118118.health-check-tabs-wrapper {
    119119        /* IE 11 */
    120120        display: -ms-inline-grid;
    121         -ms-grid-columns: 1fr 1fr;
     121        -ms-grid-columns: 1fr 1fr 1fr 1fr;
    122122        vertical-align: top;
    123123        /* modern browsers */
    124124        display: inline-grid;
     125        grid-template-columns: 1fr 1fr 1fr 1fr;
     126}
     127
     128.health-check-tabs-wrapper.tab-count-1 {
     129        -ms-grid-columns: 1fr;
     130        grid-template-columns: 1fr;
     131}
     132.health-check-tabs-wrapper.tab-count-2 {
     133        -ms-grid-columns: 1fr 1fr;
    125134        grid-template-columns: 1fr 1fr;
    126135}
     136.health-check-tabs-wrapper.tab-count-3 {
     137        -ms-grid-columns: 1fr 1fr 1fr;
     138        grid-template-columns: 1fr 1fr 1fr;
     139}
    127140
    128141.health-check-tab {
    129142        display: block; /* IE 11 */
     
    134147        transition: box-shadow 0.5s ease-in-out;
    135148}
    136149
     150.health-check-offscreen-nav-wrapper {
     151        position: relative;
     152        background: transparent;
     153        border: none;
     154}
     155.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
     156        left: initial;
     157}
     158
     159.health-check-offscreen-nav {
     160        display: none;
     161        position: absolute;
     162        padding-top: 10px;
     163        right: 0;
     164        top: 100%;
     165        width: 13rem;
     166}
     167.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
     168        display: inline-block;
     169}
     170.health-check-offscreen-nav:before {
     171        position: absolute;
     172        content: "";
     173        width: 0;
     174        height: 0;
     175        border-style: solid;
     176        border-width: 0 10px 5px 10px;
     177        border-color: transparent transparent #ffffff transparent;
     178        right: 20px;
     179        top: 5px;
     180}
     181
     182.health-check-offscreen-nav .health-check-tab {
     183        background: #fff;
     184        box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
     185}
     186
    137187.health-check-tab:nth-child(1) {
    138188        -ms-grid-column: 1; /* IE 11 */
    139189}
     
    142192        -ms-grid-column: 2; /* IE 11 */
    143193}
    144194
     195.health-check-tab:nth-child(3) {
     196        -ms-grid-column: 3; /* IE 11 */
     197}
     198
     199.health-check-tab:nth-child(4) {
     200        -ms-grid-column: 3; /* IE 11 */
     201}
     202
    145203.health-check-tab:focus {
    146204        color: #1d2327;
    147205        outline: 1px solid #787c82;
     
    152210        box-shadow: inset 0 -3px #3582c4;
    153211        font-weight: 600;
    154212}
     213.health-check-offscreen-nav .health-check-tab.active {
     214        box-shadow: inset 3px 0 #3582c4;
     215        font-weight: 600;
     216}
    155217
    156218.health-check-body {
    157219        max-width: 800px;
  • src/wp-admin/includes/class-wp-site-health.php

    diff --git a/src/wp-admin/includes/class-wp-site-health.php b/src/wp-admin/includes/class-wp-site-health.php
    a b  
    5050
    5151                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
    5252                add_action( 'wp_site_health_scheduled_check', array( $this, 'wp_cron_scheduled_check' ) );
     53
     54                add_action( 'site_health_tab_content', array( $this, 'show_site_health_tab' ) );
     55        }
     56
     57        /**
     58         * Output the content of a tab in the Site Health screen.
     59         *
     60         * @since 5.8.0
     61         *
     62         * @param string $tab Slug of the current tab being displayed.
     63         */
     64        public function show_site_health_tab( $tab ) {
     65                if ( 'debug' === $tab ) {
     66                        require_once ABSPATH . '/wp-admin/site-health-info.php';
     67                }
    5368        }
    5469
    5570        /**
     
    103118                        $health_check_js_variables['site_status']['issues'] = $issue_counts;
    104119                }
    105120
    106                 if ( 'site-health' === $screen->id && ! isset( $_GET['tab'] ) ) {
     121                if ( 'site-health' === $screen->id && ( ! isset( $_GET['tab'] ) || empty( $_GET['tab'] ) ) ) {
    107122                        $tests = WP_Site_Health::get_tests();
    108123
    109124                        // Don't run https test on development environments.
  • src/wp-admin/site-health.php

    diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php
    a b  
    66 * @subpackage Administration
    77 */
    88
    9 if ( isset( $_GET['tab'] ) && 'debug' === $_GET['tab'] ) {
    10         require_once __DIR__ . '/site-health-info.php';
    11         return;
    12 }
    13 
    149/** WordPress Administration Bootstrap */
    1510require_once __DIR__ . '/admin.php';
    1611
    1712wp_reset_vars( array( 'action' ) );
    1813
    19 $title = __( 'Site Health Status' );
     14$tabs = array(
     15        /* translators: Tab heading for Site Health Status page. */
     16        ''      => _x( 'Status', 'Site Health' ),
     17        /* translators: Tab heading for Site Health Info page. */
     18        'debug' => _x( 'Info', 'Site Health' ),
     19);
     20
     21/**
     22 * An associated array of extra tabs for the Site Health navigation bar.
     23 *
     24 * Add a custom page to the Site Health screen, based on a tab slug and label.
     25 * The label you provide will also be used as part of the site title.
     26 *
     27 * @since 5.8.0
     28 *
     29 * @param array $tabs An associated array of tab slugs and their label.
     30 */
     31$tabs = apply_filters( 'site_health_navigation_tabs', $tabs );
     32
     33$wrapper_classes = array(
     34        'health-check-tabs-wrapper',
     35        'hide-if-no-js',
     36        'tab-count-' . count( $tabs ),
     37);
     38
     39$title = sprintf(
     40        // translators: %s: The currently displayed tab.
     41        __( 'Site Health %s' ),
     42        ( isset( $_GET['tab'] ) ? esc_html( $tabs[ $_GET['tab'] ] ) : esc_html( $tabs[0] ) )
     43);
    2044
    2145if ( ! current_user_can( 'view_site_health_checks' ) ) {
    2246        wp_die( __( 'Sorry, you are not allowed to access site health information.' ), '', 403 );
     
    86110                </div>
    87111        </div>
    88112
    89         <nav class="health-check-tabs-wrapper hide-if-no-js" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    90                 <a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab active" aria-current="true">
    91                         <?php
    92                         /* translators: Tab heading for Site Health Status page. */
    93                         _ex( 'Status', 'Site Health' );
    94                         ?>
    95                 </a>
     113        <nav class="<?php echo implode( ' ', $wrapper_classes ); ?>" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     114                <?php
     115                $tabs_slice = $tabs;
     116
     117                /*
     118                 * If there are more than 4 tabs, only output the first 3 inline,
     119                 * the remaining links will be added to a sub-navigation.
     120                 */
     121                if ( count( $tabs ) > 4 ) {
     122                        $tabs_slice = array_slice( $tabs, 0, 3 );
     123                }
     124
     125                foreach ( $tabs_slice as $slug => $label ) {
     126                        printf(
     127                                '<a href="%s" class="health-check-tab %s">%s</a>',
     128                                esc_url(
     129                                        add_query_arg(
     130                                                array(
     131                                                        'tab' => $slug,
     132                                                ),
     133                                                admin_url( 'site-health.php' )
     134                                        )
     135                                ),
     136                                ( isset( $_GET['tab'] ) && $_GET['tab'] === $slug ? 'active' : '' ),
     137                                esc_html( $label )
     138                        );
     139                }
     140                ?>
    96141
    97                 <a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="health-check-tab">
    98                         <?php
    99                         /* translators: Tab heading for Site Health Info page. */
    100                         _ex( 'Info', 'Site Health' );
    101                         ?>
    102                 </a>
     142                <?php if ( count( $tabs ) > 4 ) : ?>
     143                        <button type="button" class="health-check-tab health-check-offscreen-nav-wrapper" aria-haspopup="true">
     144                                <span class="dashicons dashicons-ellipsis"></span>
     145                                <span class="screen-reader-text"><?php _e( 'Toggle extra menu items' ); ?></span>
     146
     147                                <div class="health-check-offscreen-nav">
     148                                        <?php
     149                                        // Remove the first few entries from the array as being already output.
     150                                        $tabs_slice = array_slice( $tabs, 3 );
     151                                        foreach ( $tabs_slice as $slug => $label ) {
     152                                                printf(
     153                                                        '<a href="%s" class="health-check-tab %s">%s</a>',
     154                                                        esc_url(
     155                                                                add_query_arg(
     156                                                                        array(
     157                                                                                'tab' => $slug,
     158                                                                        ),
     159                                                                        admin_url( 'site-health.php' )
     160                                                                )
     161                                                        ),
     162                                                        ( isset( $_GET['tab'] ) && $_GET['tab'] === $slug ? 'active' : '' ),
     163                                                        esc_html( $label )
     164                                                );
     165                                        }
     166                                        ?>
     167                                </div>
     168                        </button>
     169                <?php endif; ?>
    103170        </nav>
    104171</div>
    105172
    106173<hr class="wp-header-end">
    107174
     175<?php
     176if ( isset( $_GET['tab'] ) && ! empty( $_GET['tab'] ) ) {
     177        /**
     178         * Output content of a custom Site Health tab.
     179         *
     180         * This action fires right after the Site Health header, and users are still subject to
     181         * the capability checks for the Site Health page to view any custom tabs and their contents.
     182         *
     183         * @since 5.8.0
     184         *
     185         * @param string $tab The slug of the tab that was requested.
     186         */
     187        do_action( 'site_health_tab_content', $_GET['tab'] );
     188
     189        require_once ABSPATH . 'wp-admin/admin-footer.php';
     190        return;
     191} else {
     192        // start if empty tab.
     193        ?>
     194
    108195<div class="notice notice-error hide-if-js">
    109196        <p><?php _e( 'The Site Health check requires JavaScript.' ); ?></p>
    110197</div>
     
    193280        </div>
    194281</script>
    195282
    196 <?php
     283        <?php
     284}
     285// end if empty tab.
    197286require_once ABSPATH . 'wp-admin/admin-footer.php';
  • src/wp-admin/site-health-info.php

    diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php
    a b  
    66 * @subpackage Administration
    77 */
    88
    9 /** WordPress Administration Bootstrap */
    10 require_once __DIR__ . '/admin.php';
    11 
    12 $title = __( 'Site Health Info' );
    13 
    14 if ( ! current_user_can( 'view_site_health_checks' ) ) {
    15         wp_die( __( 'Sorry, you are not allowed to access the debug data.' ), '', 403 );
     9if ( ! defined( 'ABSPATH' ) ) {
     10        die();
    1611}
    17 
    18 wp_enqueue_style( 'site-health' );
    19 wp_enqueue_script( 'site-health' );
    2012
    2113if ( ! class_exists( 'WP_Debug_Data' ) ) {
    2214        require_once ABSPATH . 'wp-admin/includes/class-wp-debug-data.php';
     
    2618}
    2719
    2820$health_check_site_status = WP_Site_Health::get_instance();
    29 
    30 require_once ABSPATH . 'wp-admin/admin-header.php';
    3121?>
    32 <div class="health-check-header">
    33         <div class="health-check-title-section">
    34                 <h1>
    35                         <?php _e( 'Site Health' ); ?>
    36                 </h1>
    37         </div>
    38 
    39         <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
    40                 <div class="site-health-progress">
    41                         <svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    42                                 <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    43                                 <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    44                         </svg>
    45                 </div>
    46                 <div class="site-health-progress-label">
    47                         <?php _e( 'Results are still loading&hellip;' ); ?>
    48                 </div>
    49         </div>
    50 
    51         <nav class="health-check-tabs-wrapper hide-if-no-js" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    52                 <a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab">
    53                         <?php
    54                         /* translators: Tab heading for Site Health Status page. */
    55                         _ex( 'Status', 'Site Health' );
    56                         ?>
    57                 </a>
    58 
    59                 <a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="health-check-tab active" aria-current="true">
    60                         <?php
    61                         /* translators: Tab heading for Site Health Info page. */
    62                         _ex( 'Info', 'Site Health' );
    63                         ?>
    64                 </a>
    65         </nav>
    66 </div>
    67 
    68 <hr class="wp-header-end">
    6922
    7023<div class="notice notice-error hide-if-js">
    7124        <p><?php _e( 'The Site Health check requires JavaScript.' ); ?></p>
     
    179132                <?php } ?>
    180133        </div>
    181134</div>
    182 
    183 <?php
    184 require_once ABSPATH . 'wp-admin/admin-footer.php';