#47225 closed enhancement (fixed)
Add new actions to Site Health navigation
Reported by: | ramiy | Owned by: | Clorith |
---|---|---|---|
Milestone: | 5.8 | Priority: | normal |
Severity: | normal | Version: | 5.2 |
Component: | Site Health | Keywords: | site-health has-screenshots has-patch needs-dev-note needs-docs |
Focuses: | administration | Cc: |
Description
The attached patch adds two new actions to allow developers to add new navigation tabs to the Site Health screens.
Attachments (6)
Change History (21)
#1
@
5 years ago
- Component changed from Script Loader to Administration
- Keywords site-health has-screenshots has-patch added
#4
@
5 years ago
- Component changed from Administration to Site Health
Moving Site Health tickets into their lovely new home, the Site Health component.
#5
@
5 years ago
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
This ticket was mentioned in Slack in #core-php by ramiy. View the logs.
5 years ago
#7
@
5 years ago
There are several approaches to allow developers to add new navigation tabs.
- Using Actions - With actions developers can inject custom HTML linking to their settings screens.
- 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' );
#8
@
5 years ago
- Milestone changed from 5.3 to Future Release
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
#10
@
4 years ago
- Milestone changed from Future Release to 5.8
- Version set to 5.2
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.
@desrosj Any updates?