diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js index c0e2454224..4435da215f 100644 --- a/src/js/_enqueues/admin/site-health.js +++ b/src/js/_enqueues/admin/site-health.js @@ -443,4 +443,9 @@ jQuery( function( $ ) { recalculateProgression(); } } + + // Trigger a class toggle when the extended menu button is clicked. + $( '.health-check-offscreen-nav-wrapper' ).on( 'click', function() { + $( this ).toggleClass( 'visible' ); + } ); } ); diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css index 51c6b394b0..516142c421 100644 --- a/src/wp-admin/css/site-health.css +++ b/src/wp-admin/css/site-health.css @@ -118,12 +118,22 @@ .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 { + grid-template-columns: 1fr; +} +.health-check-tabs-wrapper.tab-count-2 { grid-template-columns: 1fr 1fr; } +.health-check-tabs-wrapper.tab-count-3 { + grid-template-columns: 1fr 1fr 1fr; +} .health-check-tab { display: block; /* IE 11 */ @@ -134,6 +144,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 */ } @@ -152,6 +199,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; diff --git a/src/wp-admin/includes/class-wp-site-health.php b/src/wp-admin/includes/class-wp-site-health.php index b614e08068..0d697e4566 100644 --- a/src/wp-admin/includes/class-wp-site-health.php +++ b/src/wp-admin/includes/class-wp-site-health.php @@ -50,6 +50,21 @@ class WP_Site_Health { 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 @@ class WP_Site_Health { $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. diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php index 466618be20..8250967c99 100644 --- a/src/wp-admin/site-health-info.php +++ b/src/wp-admin/site-health-info.php @@ -6,18 +6,10 @@ * @subpackage Administration */ -/** WordPress Administration Bootstrap */ -require_once __DIR__ . '/admin.php'; - -$title = __( 'Site Health Info' ); - -if ( ! current_user_can( 'view_site_health_checks' ) ) { - wp_die( __( 'Sorry, you are not allowed to access the debug data.' ), '', 403 ); +if ( ! defined( 'ABSPATH' ) ) { + die(); } -wp_enqueue_style( 'site-health' ); -wp_enqueue_script( 'site-health' ); - if ( ! class_exists( 'WP_Debug_Data' ) ) { require_once ABSPATH . 'wp-admin/includes/class-wp-debug-data.php'; } @@ -26,46 +18,7 @@ if ( ! class_exists( 'WP_Site_Health' ) ) { } $health_check_site_status = WP_Site_Health::get_instance(); - -require_once ABSPATH . 'wp-admin/admin-header.php'; ?> -
-
-

- -

-
- -
-
- -
-
- -
-
- - -
- -

@@ -179,6 +132,3 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- - _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,87 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; -