Skip to:

Opened 7 weeks ago

Closed 4 weeks ago

#8588 closed enhancement (fixed)

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

Reported by: imath Owned by: imath
Milestone: 10.0.0 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit


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?

Attachments (5)

8588.patch (32.0 KB) - added by imath 7 weeks ago.
8588.2.patch (35.5 KB) - added by oztaser 6 weeks ago.
Screenshot 2021-10-22 at 19-16-36 BuddyPress Options ‹ BuddyPress — WordPress.png (157.7 KB) - added by oztaser 6 weeks ago.
8588.3.patch (33.4 KB) - added by imath 6 weeks ago.
8588-empty-table.patch (2.9 KB) - added by oztaser 4 weeks ago.

Download all attachments as: .zip

Change History (15)

7 weeks ago

#1 @oztaser
6 weeks ago

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.

6 weeks ago

#2 @imath
6 weeks ago

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?

6 weeks ago

#3 @imath
6 weeks ago

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

#4 @oztaser
6 weeks ago

Hey, it looks great. Thanks for update.

This ticket was mentioned in Slack in #buddypress by imath. View the logs.

5 weeks ago

#6 @imath
4 weeks ago

  • Owner set to imath
  • Resolution set to fixed
  • Status changed from new to closed

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

#7 @oztaser
4 weeks ago

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.

#8 @imath
4 weeks ago

  • Keywords needs-patch added; has-patch dev-feedback removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#9 @imath
4 weeks ago

  • Keywords has-patch commit added; needs-patch removed

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.

#10 @imath
4 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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

Note: See TracTickets for help on using tickets.