WordPress.org
Get WordPress

Make WordPress Core

Changeset 50764


Ignore:
Timestamp:
04/17/2021 01:12:25 AM (5 years ago)
Author:
Clorith
Message:

Site Health: Support custom sub-menus and pages.

Allow developers to extend the Site Health screen with their own custom navigation tabs and pages.

This implements a new filter, site_health_navigation_tabs, which takes an associated array of tab identifiers/slugs, and tab labels, allowing developers to add their own subpage to the Site Health interface as new tabs.

To output a custom page, or add to an existing page, the site_health_tab_content action is triggered whenever the tab query argument is present and not empty. This action includes the current tab as its argument, which a developer would match against to only output content when relevant.

Props ramiy for initial patch.
Fixes #47225.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/site-health.js

    r50547 r50764  
    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} );

  • trunk/src/wp-admin/css/site-health.css

    r50278 r50764  
    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        grid-template-columns: 1fr;
     130}
     131.health-check-tabs-wrapper.tab-count-2 {
    125132        grid-template-columns: 1fr 1fr;
     133}
     134.health-check-tabs-wrapper.tab-count-3 {
     135        grid-template-columns: 1fr 1fr 1fr;
    126136}
    127137
    … …  
    135145}
    136146
     147.health-check-offscreen-nav-wrapper {
     148        position: relative;
     149        background: transparent;
     150        border: none;
     151}
     152.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
     153        left: initial;
     154}
     155
     156.health-check-offscreen-nav {
     157        display: none;
     158        position: absolute;
     159        padding-top: 10px;
     160        right: 0;
     161        top: 100%;
     162        width: 13rem;
     163}
     164.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
     165        display: inline-block;
     166}
     167.health-check-offscreen-nav:before {
     168        position: absolute;
     169        content: "";
     170        width: 0;
     171        height: 0;
     172        border-style: solid;
     173        border-width: 0 10px 5px 10px;
     174        border-color: transparent transparent #ffffff transparent;
     175        right: 20px;
     176        top: 5px;
     177}
     178
     179.health-check-offscreen-nav .health-check-tab {
     180        background: #fff;
     181        box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
     182}
     183
    137184.health-check-tab:nth-child(1) {
    138185        -ms-grid-column: 1; /* IE 11 */
    … …  
    151198.health-check-tab.active {
    152199        box-shadow: inset 0 -3px #3582c4;
     200        font-weight: 600;
     201}
     202.health-check-offscreen-nav .health-check-tab.active {
     203        box-shadow: inset 3px 0 #3582c4;
    153204        font-weight: 600;
    154205}

  • trunk/src/wp-admin/includes/class-wp-site-health.php

    r50710 r50764  
    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
    … …  
    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

  • trunk/src/wp-admin/site-health-info.php

    r48233 r50764  
    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' ) ) {
    … …  
    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">
    … …  
    180133        </div>
    181134</div>
    182 
    183 <?php
    184 require_once ABSPATH . 'wp-admin/admin-footer.php';

  • trunk/src/wp-admin/site-health.php

    r50131 r50764  
    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';
    … …  
    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' ) ) {
    … …  
    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>
    96 
    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>
     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                ?>
     141
     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">
     174
     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        ?>
    107193
    108194<div class="notice notice-error hide-if-js">
    … …  
    194280</script>
    195281
    196 <?php
     282        <?php
     283}
    197284require_once ABSPATH . 'wp-admin/admin-footer.php';
Note: See TracChangeset for help on using the changeset viewer.