Index: 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/src/js/_enqueues/admin/site-health.js (revision 50763) +++ b/src/js/_enqueues/admin/site-health.js (date 1618615450837) @@ -443,4 +443,9 @@ recalculateProgression(); } } + + // Trigger a class toggle when the extended menu button is clicked. + $( '.health-check-offscreen-nav-wrapper' ).on( 'click', function() { + $( this ).toggleClass( 'visible' ); + } ); } ); Index: 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/src/wp-admin/css/site-health.css (revision 50763) +++ b/src/wp-admin/css/site-health.css (date 1618615977230) @@ -118,12 +118,25 @@ .health-check-tabs-wrapper { /* IE 11 */ display: -ms-inline-grid; - -ms-grid-columns: 1fr 1fr; + -ms-grid-columns: 1fr 1fr 1fr 1fr; vertical-align: top; /* modern browsers */ display: inline-grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.health-check-tabs-wrapper.tab-count-1 { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; +} +.health-check-tabs-wrapper.tab-count-2 { + -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } +.health-check-tabs-wrapper.tab-count-3 { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; +} .health-check-tab { display: block; /* IE 11 */ @@ -134,6 +147,43 @@ transition: box-shadow 0.5s ease-in-out; } +.health-check-offscreen-nav-wrapper { + position: relative; + background: transparent; + border: none; +} +.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { + left: initial; +} + +.health-check-offscreen-nav { + display: none; + position: absolute; + padding-top: 10px; + right: 0; + top: 100%; + width: 13rem; +} +.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { + display: inline-block; +} +.health-check-offscreen-nav:before { + position: absolute; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 5px 10px; + border-color: transparent transparent #ffffff transparent; + right: 20px; + top: 5px; +} + +.health-check-offscreen-nav .health-check-tab { + background: #fff; + box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); +} + .health-check-tab:nth-child(1) { -ms-grid-column: 1; /* IE 11 */ } @@ -142,6 +192,14 @@ -ms-grid-column: 2; /* IE 11 */ } +.health-check-tab:nth-child(3) { + -ms-grid-column: 3; /* IE 11 */ +} + +.health-check-tab:nth-child(4) { + -ms-grid-column: 3; /* IE 11 */ +} + .health-check-tab:focus { color: #1d2327; outline: 1px solid #787c82; @@ -152,6 +210,10 @@ box-shadow: inset 0 -3px #3582c4; font-weight: 600; } +.health-check-offscreen-nav .health-check-tab.active { + box-shadow: inset 3px 0 #3582c4; + font-weight: 600; +} .health-check-body { max-width: 800px; Index: 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/src/wp-admin/includes/class-wp-site-health.php (revision 50763) +++ b/src/wp-admin/includes/class-wp-site-health.php (date 1618614161418) @@ -50,6 +50,21 @@ add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); add_action( 'wp_site_health_scheduled_check', array( $this, 'wp_cron_scheduled_check' ) ); + + add_action( 'site_health_tab_content', array( $this, 'show_site_health_tab' ) ); + } + + /** + * Output the content of a tab in the Site Health screen. + * + * @since 5.8.0 + * + * @param string $tab Slug of the current tab being displayed. + */ + public function show_site_health_tab( $tab ) { + if ( 'debug' === $tab ) { + require_once ABSPATH . '/wp-admin/site-health-info.php'; + } } /** @@ -103,7 +118,7 @@ $health_check_js_variables['site_status']['issues'] = $issue_counts; } - if ( 'site-health' === $screen->id && ! isset( $_GET['tab'] ) ) { + if ( 'site-health' === $screen->id && ( ! isset( $_GET['tab'] ) || empty( $_GET['tab'] ) ) ) { $tests = WP_Site_Health::get_tests(); // Don't run https test on development environments. Index: src/wp-admin/site-health.php =================================================================== diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php --- a/src/wp-admin/site-health.php (revision 50763) +++ b/src/wp-admin/site-health.php (date 1618617471649) @@ -6,17 +6,41 @@ * @subpackage Administration */ -if ( isset( $_GET['tab'] ) && 'debug' === $_GET['tab'] ) { - require_once __DIR__ . '/site-health-info.php'; - return; -} - /** WordPress Administration Bootstrap */ require_once __DIR__ . '/admin.php'; wp_reset_vars( array( 'action' ) ); -$title = __( 'Site Health Status' ); +$tabs = array( + /* translators: Tab heading for Site Health Status page. */ + '' => _x( 'Status', 'Site Health' ), + /* translators: Tab heading for Site Health Info page. */ + 'debug' => _x( 'Info', 'Site Health' ), +); + +/** + * An associated array of extra tabs for the Site Health navigation bar. + * + * Add a custom page to the Site Health screen, based on a tab slug and label. + * The label you provide will also be used as part of the site title. + * + * @since 5.8.0 + * + * @param array $tabs An associated array of tab slugs and their label. + */ +$tabs = apply_filters( 'site_health_navigation_tabs', $tabs ); + +$wrapper_classes = array( + 'health-check-tabs-wrapper', + 'hide-if-no-js', + 'tab-count-' . count( $tabs ), +); + +$title = sprintf( + // translators: %s: The currently displayed tab. + __( 'Site Health %s' ), + ( isset( $_GET['tab'] ) ? esc_html( $tabs[ $_GET['tab'] ] ) : esc_html( $tabs[0] ) ) +); if ( ! current_user_can( 'view_site_health_checks' ) ) { wp_die( __( 'Sorry, you are not allowed to access site health information.' ), '', 403 ); @@ -86,25 +110,88 @@ -