WordPress.org
Get WordPress

Make WordPress Core

Changeset 50764


Ignore:
Timestamp:
04/17/2021 01:12:25 AM (4 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.