Suggestion: use the "site-health" look & feel for BP Admin tabs

[imath]

This ​look & feel seems to be the way tabs should be styled in WordPress Admin. For instance, Privacy settings are now using it.

I believe we should us this new appearance for our settings and tools BP Admin tabs. Here's a preview of how BP Settings pages could look like:

Here's a preview of how BP Tools pages could look like:

The attached patch is also including a backcompat function to make sure plugins adding custom tabs are also styled this way. Here's a preview of the BP Rewrites plugin URLs settings tab.

It includes a doing it wrong to inform plugin authors they should use another way to generate their custom tabs.

What do you think of this suggestion?

[oztaser]

Hi @imath,
Thanks for bring this idea. I love this ui and I liked the idea of have it in BuddyPress.

I've tested your patch and played a little bit with it. I have some suggestions about ui:

• There were an issue on mobile resolutions. I've added some margin to .buddypress-content like .health-content has.
• I've added background and border to tables, I believe page is looking more clean and user friendly.
• I've also added BuddyPress logo to header. I'm not sure about it but it looks better I think.

P.S: I haven't test my patch with BP Rewrites or an another plugin which has custom tabs but I believe there should be no problem.

[imath]

Hi @oztaser

Thanks a lot for your addictions to the patch. I'll test it asap. I'm not sure about the size/place of the logo. I believe we should make it smaller, on the same line than the main title (<h1>BuddyPress Settings||Tools</h1>) and instead of using an SVG, we can enjoy the ​available dashicon for us (using our bright red #d84800 font color). There's actually a .bp-badge class available in common.css that we don't use anymore, we could recycle it there using a span, eg:

<h1><span class="bp-badge"></span> <?php echo esc_html( $title ); ?></h1>

What do you think?

[imath]

​8588.3.patch is 8588.2.patch + my latest comment applied. Here's a screenshot:

[oztaser]

Hey, it looks great. Thanks for update.

[imath]

In 13137:

Use WordPress "site-health" style tabs for BP Admin tabs

The BuddyPress settings and tools screens admin tabs are now using the "site-health" style. As aside from the "site-health" screens, the Privacy screens are also using this tabs' style, we think using this style will improve the way BuddyPress Admin screens integrate inside the WordPress Administration.

We've put a back compatibility process for plugins extending the BuddyPress settings or/and tools screens adding their custom tabs, so that they are automatically converted into these new tabs. Plugin developers are encouraged to progressively update the way they are adding these tabs.

• bp_core_admin_tabbed_screen_header() has been introduced to generate the BuddyPress Admin screens headers using tabs.
• bp_core_get_admin_settings_tabs() has been introduced to return the settings tabs, using the 'bp_core_get_admin_settings_tabs' filter, plugin developers can add their custom tab to the BuddyPress settings screens.
• bp_core_get_admin_settings_tabs() has been introduced to return the settings tabs. Using the 'bp_core_get_admin_settings_tabs' filter, plugin developers can add their custom tabs to the BuddyPress settings screens.
• bp_core_get_admin_tools_tabs() has been introduced to return the tools tabs. Using the 'bp_core_get_admin_tools_tabs' filter, plugin developers can add their custom tabs to the BuddyPress tools screens.
• To make sure BuddyPress generate the inline style to custom tabs, plugin developers need to hook the 'bp_admin_submenu_pages' action which passes by reference an associative array keyed according to the screens to style (settings or tools) and containing the plugin page hookname of their custom screens.

Props oztaser

Fixes #8588

[oztaser]

Hi @imath,

I've tested screens after your commit and I think I found a something need to mention.

As you know we've added some styling to tables. After adding this style, an empty box appeared on the pages page if registration is disabled. I think we need to add this table to the page if registration allowed.

[imath]

Thanks for your tests @oztaser I guess I was a bit too eager to have this in. We also need to fix an issue with Multisite configs. I'll include your patch to the one I'm working on.

[imath]

Here's how it looks after fixing the issue on multisite and applying @oztaser's patch:

When you enable registrations:

I'll commit the fix/patch asap.

[imath]

In 13138:

BP Admin Tabs: improve the Pages settings screen display

This commit also makes sure the BP Admin Tabs are well displayed in Multisite configs when BuddyPress is network activated.

Props oztaser

Fixes #8588