Add new actions to Site Health navigation

[ramiy]

The attached patch adds two new actions to allow developers to add new navigation tabs to the Site Health screens.

[ramiy]

@desrosj Any updates?

[desrosj]

Moving Site Health tickets into their lovely new home, the Site Health component.

[Clorith]

Quick update for anyone following this. We're investigating how to solve the problem of tabs when it comes to mobile and IE11 compatibility over on the plugin side of things (so that we can test and iterate in the plugin before any core implementation takes place). The relevant GitHub issue is available at ​https://github.com/WordPress/health-check/issues/344

[ramiy]

There are several approaches to allow developers to add new navigation tabs.

1. Using Actions - With actions developers can inject custom HTML linking to their settings screens.

2. Using Filters - We can replace the hardcoded HTML with an array. Developers can filter the array to add new tabs linking to their settings screens.

---

With actions:

function custom_site_health_tab() {
  ?>
    <a href="<?php echo esc_url( admin_url( 'some-screen' ) ); ?>" class="health-check-tab">
      <?php _e( 'Label' ); ?>
    </a>
  <?php
}
add_action( 'site_health_after_tabs', 'custom_site_health_tab' );

With filters:

function custom_site_health_navigation_tab( $tabs ) {
  $tabs[] = array(
    'id'    => 'some-unique-id',
    'label' => __( 'Label' ),
    'url'   => admin_url( 'some-screen' )
  );
  return $tabs;
}
add_filter( 'site_health_navigation_tabs', 'custom_site_health_navigation_tab' );

[Clorith]

Although I'd love to do this, we've had our focus on the grading and test filters for 5.3, I'm moving this to Future release, with the intention of tackling this for version 5.4

[ramiy]

@Clorith @desrosj Can you change the ticket Milestone to 5.4 ?

[Clorith]

47225.2.patch​ expands on the suggested approach from @ramiy.

Since this needs to account for IE 11, which does not support dynamic grid columns. The patch allows for up to 4 items being displayed at once (which has shown itself to be a good number in the Health Check plugin).

This is done by introducing a new site_health_navigation_tabs filter, taking an assocaited array of tab slugs and labels, as in the example below.

$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' ),
);

This would lead to the example shown in 4-menu-items.PNG​.

If more than 4 menu items are present, then 3 items, and an ellipsis toggle is shown instead, as seen in 5-menu-items-collapsed.PNG​, this maintains a predictable UI for the end user, without overloading the navigation (or requiring a lot of CSS, as each new tab we allow for needs custom CSS in place). Expanding everything leaves you with 5-menu-items-expanded.PNG​.

The actual content of the custom tab is then output with the new action site_health_tab_content , where the current tab is passed as the argument. This means that developers would also be able to extend each others tabs. And thanks to some quick refactoring to make sure core uses the same features for its debug information tab, also extend the debug page to their benefit if they wish to. The exception here is the initial Status tab, which does not trigger the tab action, but is extensible in other ways.

Tab content that should be output would be whatever the developer wishes to output, there is no wrapper, so the full viewport width is available to them.

[Clorith]

In 50764:

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.

[ramiy]

Thank you @Clorith.

[Clorith]

In 50765:

Site Health: Correct array key for the default tab

Use reset to get the label from the first tab entry as the default if no tab is defined.
This ensures even if the tab order is changed, or tabs are removed, no warnings will be thrown.

Follow-up to [50764].

See #47225.