Ticket #8588: 8588.3.patch

src/bp-core/admin/bp-core-admin-components.php

@@ -17 +17 @@
  *
  */
 function bp_core_admin_components_settings() {
-?>
-
-        <div class="wrap">
+        bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Components', 'buddypress' ) );
+        ?>
 
-                <h1 class="wp-heading-inline"><?php _e( 'BuddyPress Settings', 'buddypress' ); ?> </h1>
-                <hr class="wp-header-end">
+        <div class="buddypress-body">
 
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Components', 'buddypress' ) ); ?></h2>
                 <form action="" method="post" id="bp-admin-component-form">
 
                         <?php bp_core_admin_components_options(); ?>

src/bp-core/admin/bp-core-admin-functions.php

@@ -390 +390 @@
 
 /** UI/Styling ****************************************************************/
 
+/**
+ * Outputs the BP Admin Tabbed header.
+ *
+ * @since 10.0.0
+ *
+ * @param string $title      The title of the Admin page.
+ * @param string $active_tab The current displayed tab.
+ * @param string $context    The context of use for the tabs. Defaults to 'settings'.
+ *                           Possible values are 'settings' & 'tools'.
+ */
+function bp_core_admin_tabbed_screen_header( $title = '', $active_tab = '', $context = 'settings' ) {
+        $bp = buddypress();
+
+        // Globalize the active tab for backcompat purpose.
+        $bp->admin->active_nav_tab = $active_tab;
+
+        /**
+         * Fires before the output of the BP Admin tabbed screen header.
+         *
+         * @since 10.0.0
+         *
+         * @param string $active_tab The BP Admin active tab.
+         * @param string $context    The context of use for the tabs.
+         */
+        do_action( 'bp_core_admin_tabbed_screen_header', $active_tab, $context );
+        ?>
+        <div class="buddypress-header">
+                <div class="buddypress-title-section">
+                        <h1><span class="bp-badge"></span> <?php echo esc_html( $title ); ?></h1>
+                </div>
+                <nav class="buddypress-tabs-wrapper">
+                        <?php if ( isset( $bp->admin->nav_tabs ) ) : ?>
+                                <?php foreach ( $bp->admin->nav_tabs as $nav_tab ) : ?>
+
+                                        <?php echo $nav_tab; ?>
+
+                                <?php endforeach; ?>
+                        <?php else : ?>
+                                <?php bp_core_admin_tabs( esc_html( $active_tab ), $context ); ?>
+                        <?php endif; ?>
+                </nav>
+        </div>
+
+        <hr class="wp-header-end">
+        <?php
+}
+
 /**
  * Output the tabs in the admin area.
  *
@@ -400 +447 @@
  * @param string $context    The context of use for the tabs. Defaults to 'settings'.
  *                           Possible values are 'settings' & 'tools'.
  */
-function bp_core_admin_tabs( $active_tab = '', $context = 'settings' ) {
+function bp_core_admin_tabs( $active_tab = '', $context = 'settings', $echo = true ) {
         $tabs_html    = '';
-        $idle_class   = 'nav-tab';
-        $active_class = 'nav-tab nav-tab-active';
+        $idle_class   = 'buddypress-nav-tab';
+        $active_class = 'buddypress-nav-tab active';
 
         /**
          * Filters the admin tabs to be displayed.
@@ -412 +459 @@
          *
          * @param array $value Array of tabs to output to the admin area.
          */
-        $tabs = apply_filters( 'bp_core_admin_tabs', bp_core_get_admin_tabs( $active_tab, $context ) );
+        $tabs         = apply_filters( 'bp_core_admin_tabs', bp_core_get_admin_tabs( $active_tab, $context ) );
+        $tabs_html    = array();
 
         // Loop through tabs and build navigation.
         foreach ( array_values( $tabs ) as $tab_data ) {
-                $is_current = (bool) ( $tab_data['name'] == $active_tab );
-                $tab_class  = $is_current ? $active_class : $idle_class;
-                $tabs_html .= '<a href="' . esc_url( $tab_data['href'] ) . '" class="' . esc_attr( $tab_class ) . '">' . esc_html( $tab_data['name'] ) . '</a>';
+                $is_current     = (bool) ( $tab_data['name'] == $active_tab );
+                $tab_class      = $is_current ? $active_class : $idle_class;
+                $tabs_html[]    = '<a href="' . esc_url( $tab_data['href'] ) . '" class="' . esc_attr( $tab_class ) . '">' . esc_html( $tab_data['name'] ) . '</a>';
         }
 
-        echo $tabs_html;
+        if ( ! $echo ) {
+                return $tabs_html;
+        }
 
+        echo implode( "\n", $tabs_html );
         /**
          * Fires after the output of tabs for the admin area.
          *
          * @since 1.5.0
          * @since 8.0.0 Adds the `$context` parameter.
+         * @since 10.0.0 Adds the `$active_tab` parameter.
          *
          * @param string $context The context of use for the tabs.
          */
-        do_action( 'bp_admin_tabs', $context );
+        do_action( 'bp_admin_tabs', $context, $active_tab );
+}
+
+/**
+ * Returns the BP Admin settings tabs.
+ *
+ * @since 10.0.0
+ *
+ * @param bool $apply_filters Whether to apply filters or not.
+ * @return array              The BP Admin settings tabs.
+ */
+function bp_core_get_admin_settings_tabs( $apply_filters = true ) {
+        $settings_tabs = array(
+                '0' => array(
+                        'id'   => 'bp-components',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), 'admin.php' ) ),
+                        'name' => __( 'Components', 'buddypress' ),
+                ),
+                '2' => array(
+                        'id'   => 'bp-settings',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), 'admin.php' ) ),
+                        'name' => __( 'Options', 'buddypress' ),
+                ),
+                '1' => array(
+                        'id'   => 'bp-page-settings',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-page-settings' ), 'admin.php' ) ),
+                        'name' => __( 'Pages', 'buddypress' ),
+                ),
+                '3' => array(
+                        'id'   => 'bp-credits',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-credits' ), 'admin.php' ) ),
+                        'name' => __( 'Credits', 'buddypress' ),
+                ),
+        );
+
+        if ( ! $apply_filters ) {
+                return $settings_tabs;
+        }
+
+        /**
+         * Filter here to edit the BP Admin settings tabs.
+         *
+         * @since 10.0.0
+         *
+         * @param array $settings_tabs The BP Admin settings tabs.
+         */
+        return apply_filters( 'bp_core_get_admin_settings_tabs', $settings_tabs );
+}
+
+/**
+ * Returns the BP Admin tools tabs.
+ *
+ * @since 10.0.0
+ *
+ * @param bool $apply_filters Whether to apply filters or not.
+ * @return array              The BP Admin tools tabs.
+ */
+function bp_core_get_admin_tools_tabs( $apply_filters = true ) {
+        $tools_page = 'tools.php';
+        if ( bp_core_do_network_admin() ) {
+                $tools_page = 'admin.php';
+        }
+
+        $tools_tabs = array(
+                '0' => array(
+                        'id'   => 'bp-tools',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-tools' ), $tools_page ) ),
+                        'name' => __( 'Repair', 'buddypress' ),
+                ),
+                '1' => array(
+                        'id'   => 'bp-members-invitations',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-members-invitations' ), $tools_page ) ),
+                        'name' => __( 'Manage Invitations', 'buddypress' ),
+                ),
+                '2' => array(
+                        'id'   => 'bp-optouts',
+                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-optouts' ), $tools_page ) ),
+                        'name' => __( 'Manage Opt-outs', 'buddypress' ),
+                ),
+        );
+
+        if ( ! $apply_filters ) {
+                return $tools_tabs;
+        }
+
+        /**
+         * Filter here to edit the BP Admin tools tabs.
+         *
+         * @since 10.0.0
+         *
+         * @param array $tools_tabs The BP Admin tools tabs.
+         */
+        return apply_filters( 'bp_core_get_admin_tools_tabs', $tools_tabs );
 }
 
 /**
@@ -449 +593 @@
         $tabs = array();
 
         if ( 'settings' === $context ) {
-                $tabs = array(
-                        '0' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), 'admin.php' ) ),
-                                'name' => __( 'Components', 'buddypress' ),
-                        ),
-                        '2' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), 'admin.php' ) ),
-                                'name' => __( 'Options', 'buddypress' ),
-                        ),
-                        '1' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-page-settings' ), 'admin.php' ) ),
-                                'name' => __( 'Pages', 'buddypress' ),
-                        ),
-                        '3' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-credits' ), 'admin.php' ) ),
-                                'name' => __( 'Credits', 'buddypress' ),
-                        ),
-                );
+                $tabs = bp_core_get_admin_settings_tabs();
         } elseif ( 'tools' === $context ) {
-                $tools_page = 'tools.php';
-                if ( bp_core_do_network_admin() ) {
-                        $tools_page = 'admin.php';
-                }
-
-                $tabs = array(
-                        '0' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-tools' ), $tools_page ) ),
-                                'name' => __( 'Repair', 'buddypress' ),
-                        ),
-                        '1' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-members-invitations' ), $tools_page ) ),
-                                'name' => __( 'Manage Invitations', 'buddypress' ),
-                        ),
-                        '2' => array(
-                                'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-optouts' ), $tools_page ) ),
-                                'name' => __( 'Manage Opt-outs', 'buddypress' ),
-                        ),
-                );
+                $tabs = bp_core_get_admin_tools_tabs();
         }
 
         /**
@@ -501 +610 @@
         return apply_filters( 'bp_core_get_admin_tabs', $tabs, $context );
 }
 
+/**
+ * Makes sure plugins using `bp_core_admin_tabs()` to output their custom BP Admin Tabs are well displayed
+ * inside the 10.0.0 tabbed header.
+ *
+ * @since 10.0.0
+ *
+ * @param string $context    The context of use for the tabs.
+ * @param string $active_tab The active tab.
+ */
+function bp_backcompat_admin_tabs( $context = '', $active_tab = '' ) {
+        $bp = buddypress();
+
+        // Only add the back compat for Settings or Tools sub pages.
+        if ( 'settings' !== $context && 'tools' !== $context ) {
+                return;
+        }
+
+        // Globalize the active tab for backcompat purpose.
+        if ( ! $bp->admin->active_nav_tab || $active_tab !== $bp->admin->active_nav_tab ) {
+                _doing_it_wrong(
+                        'bp_core_admin_tabs()',
+                        __( 'BuddyPress Settings and Tools Screens are now using a new tabbed header. Please use `bp_core_admin_tabbed_screen_header()` instead of bp_core_admin_tabs() to output tabs.', 'buddypress' ),
+                        '10.0.0'
+                );
+
+                // Let's try to use JavaScript to force the use of the 10.0.0 Admin tabbed screen header.
+                wp_enqueue_script(
+                        'bp-backcompat-admin-tabs',
+                        sprintf( '%1$sbackcompat-admin-tabs%2$s.js', $bp->admin->js_url, bp_core_get_minified_asset_suffix() ),
+                        array(),
+                        bp_get_version(),
+                        true
+                );
+        }
+}
+add_action( 'bp_admin_tabs', 'bp_backcompat_admin_tabs', 1, 2 );
+
 /** Help **********************************************************************/
 
 /**
@@ -1291 +1437 @@
  *
  * @since 2.8.0
  *
- * @param string $classes CSS classes for the body tag in the admin, a comma separated string.
+ * @param string $classes CSS classes for the body tag in the admin, a space separated string.
  *
  * @return string
  */
 function bp_core_admin_body_classes( $classes ) {
-        return $classes . ' buddypress';
+        $bp = buddypress();
+
+        $bp_class = ' buddypress';
+        if ( isset( $bp->admin->nav_tabs ) && $bp->admin->nav_tabs ) {
+                $bp_class .= ' bp-is-tabbed-screen';
+        }
+
+        return $classes . $bp_class;
 }
 add_filter( 'admin_body_class', 'bp_core_admin_body_classes' );
 

src/bp-core/admin/bp-core-admin-optouts.php

@@ -316 +316 @@
                 $_SERVER['REQUEST_URI']
         );
 
+        bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Opt-outs', 'buddypress' ), 'tools' );
         ?>
 
-        <div class="wrap">
-                <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress tools', 'buddypress' ); ?></h1>
-                <hr class="wp-header-end">
-
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Manage Opt-outs', 'buddypress' ), 'tools' ); ?></h2>
-
+        <div class="buddypress-body">
                 <?php
                 if ( $usersearch ) {
                         $num_results = (int) $bp_optouts_list_table->total_items;
@@ -425 +421 @@
                 'optouts_' . $action
         );
 
+        bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Opt-outs', 'buddypress' ), 'tools' );
         ?>
 
-        <div class="wrap">
-                <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress tools', 'buddypress' ); ?></h1>
-                <hr class="wp-header-end">
-
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Manage Opt-outs', 'buddypress' ), 'tools' ); ?></h2>
+        <div class="buddypress-body">
 
                 <p><?php echo esc_html( $helper_text ); ?></p>
 

src/bp-core/admin/bp-core-admin-settings.php

@@ -288 +288 @@
 
         // We're saving our own options, until the WP Settings API is updated to work with Multisite.
         $form_action = add_query_arg( 'page', 'bp-settings', bp_get_admin_url( 'admin.php' ) );
-
+        bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Options', 'buddypress' ) );
         ?>
 
-        <div class="wrap">
-
-                <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Settings', 'buddypress' ); ?></h1>
-                <hr class="wp-header-end">
-
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( esc_html__( 'Options', 'buddypress' ) ); ?></h2>
-
+        <div class="buddypress-body">
                 <form action="<?php echo esc_url( $form_action ) ?>" method="post">
 
                         <?php settings_fields( 'buddypress' ); ?>

src/bp-core/admin/bp-core-admin-slugs.php

@@ -17 +17 @@
  * @todo Use settings API
  */
 function bp_core_admin_slugs_settings() {
+        bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Pages', 'buddypress' ) );
 ?>
 
-        <div class="wrap">
-
-                <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Settings', 'buddypress' ); ?> </h1>
-                <hr class="wp-header-end">
-
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( esc_html__( 'Pages', 'buddypress' ) ); ?></h2>
+        <div class="buddypress-body">
                 <form action="" method="post" id="bp-admin-page-form">
 
                         <?php bp_core_admin_slugs_options(); ?>

src/bp-core/admin/bp-core-admin-tools.php

@@ -16 +16 @@
  * @since 2.0.0
  */
 function bp_core_admin_tools() {
+        bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Repair', 'buddypress' ), 'tools' );
         ?>
-        <div class="wrap">
-
-                <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Tools', 'buddypress' ) ?></h1>
-                <hr class="wp-header-end">
-
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Repair', 'buddypress' ), 'tools' ); ?></h2>
+        <div class="buddypress-body">
 
                 <p><?php esc_html_e( 'BuddyPress keeps track of various relationships between members, groups, and activity items.', 'buddypress' ); ?></p>
                 <p><?php esc_html_e( 'Occasionally these relationships become out of sync, most often after an import, update, or migration.', 'buddypress' ); ?></p>

src/bp-core/admin/css/common-rtl.css

@@ -35 +35 @@
 .bp-badge {
         color: #d84800;
         display: inline-block;
-        font: 400 150px/1 dashicons !important;
+        font: 400 150px/1 dashicons;
 }
 
 .bp-badge:before {
@@ -120 +120 @@
         margin-left: 10px;
         padding-bottom: 15px;
         height: 70px;
-        width: 280px;
+        width: 250px;
 }
 
 .bp-about-wrap .compact .wp-person {
         height: auto;
-        width: 180px;
+        width: 150px;
         padding-bottom: 0;
         margin-bottom: 0;
 }
@@ -556 +556 @@
 #buddypress-update.not-shiny .update-message:before {
         content: "\f534";
 }
+
+/*------------------------------------------------------------------------------
+ * 7.0 Admins page with tabbed nav.
+ *----------------------------------------------------------------------------*/
+body.bp-is-tabbed-screen #wpcontent {
+        padding-right: 0;
+}
+
+.buddypress-header {
+        text-align: center;
+        margin: 0 0 1rem;
+        background: #fff;
+        border-bottom: 1px solid #dcdcde;
+}
+
+.buddypress-title-section {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        clear: both;
+        padding: 1rem 0;
+}
+
+.buddypress-title-section h1 {
+        display: inline-block;
+        font-weight: 600;
+        margin: 0 0.8rem;
+        font-size: 23px;
+        padding: 9px 0 4px;
+        line-height: 1.3;
+}
+
+.buddypress-title-section h1 .bp-badge {
+        font-size: 32px;
+        vertical-align: top;
+}
+
+.buddypress-tabs-wrapper {
+
+        /* IE 11 */
+        display: -ms-inline-grid;
+        -ms-grid-columns: 1fr 1fr;
+        vertical-align: top;
+
+        /* modern browsers */
+        display: inline-grid; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+        grid-template-columns: 1fr 1fr;
+}
+
+.buddypress-tabs-wrapper .buddypress-nav-tab {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+        padding: 0.5rem 1rem 1rem;
+        margin: 0 1rem;
+        transition: box-shadow 0.5s ease-in-out;
+}
+
+.buddypress-tabs-wrapper .buddypress-nav-tab.active {
+        box-shadow: inset 0 -3px #3582c4;
+        font-weight: 600;
+}
+
+.buddypress-body {
+        max-width: 800px;
+        margin: 0 auto;
+}
+
+.buddypress-body .form-table {
+        border: 1px solid #dcdcde;
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        border-collapse: inherit;
+}
+
+/* Media queries */
+@media screen and (max-width: 782px) {
+
+        .buddypress-body {
+                margin: 0 12px;
+                width: auto;
+        }
+}
+
+@media only screen and (max-width: 1004px) {
+
+        .buddypress-body {
+                margin: 0 22px;
+                width: auto;
+        }
+}

src/bp-core/admin/css/common.css

@@ -35 +35 @@
 .bp-badge {
         color: #d84800;
         display: inline-block;
-        font: 400 150px/1 dashicons !important;
+        font: 400 150px/1 dashicons;
 }
 
 .bp-badge:before {
@@ -120 +120 @@
         margin-right: 10px;
         padding-bottom: 15px;
         height: 70px;
-        width: 280px;
+        width: 250px;
 }
 
 .bp-about-wrap .compact .wp-person {
         height: auto;
-        width: 180px;
+        width: 150px;
         padding-bottom: 0;
         margin-bottom: 0;
 }
@@ -556 +556 @@
 #buddypress-update.not-shiny .update-message:before {
         content: "\f534";
 }
+
+/*------------------------------------------------------------------------------
+ * 7.0 Admins page with tabbed nav.
+ *----------------------------------------------------------------------------*/
+body.bp-is-tabbed-screen #wpcontent {
+        padding-left: 0;
+}
+
+.buddypress-header {
+        text-align: center;
+        margin: 0 0 1rem;
+        background: #fff;
+        border-bottom: 1px solid #dcdcde;
+}
+
+.buddypress-title-section {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        clear: both;
+        padding: 1rem 0;
+}
+
+.buddypress-title-section h1 {
+        display: inline-block;
+        font-weight: 600;
+        margin: 0 0.8rem;
+        font-size: 23px;
+        padding: 9px 0 4px;
+        line-height: 1.3;
+}
+
+.buddypress-title-section h1 .bp-badge {
+        font-size: 32px;
+        vertical-align: top;
+}
+
+.buddypress-tabs-wrapper {
+
+        /* IE 11 */
+        display: -ms-inline-grid;
+        -ms-grid-columns: 1fr 1fr;
+        vertical-align: top;
+
+        /* modern browsers */
+        display: inline-grid; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+        grid-template-columns: 1fr 1fr;
+}
+
+.buddypress-tabs-wrapper .buddypress-nav-tab {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+        padding: 0.5rem 1rem 1rem;
+        margin: 0 1rem;
+        transition: box-shadow 0.5s ease-in-out;
+}
+
+.buddypress-tabs-wrapper .buddypress-nav-tab.active {
+        box-shadow: inset 0 -3px #3582c4;
+        font-weight: 600;
+}
+
+.buddypress-body {
+        max-width: 800px;
+        margin: 0 auto;
+}
+
+.buddypress-body .form-table {
+        border: 1px solid #dcdcde;
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        border-collapse: inherit;
+}
+
+/* Media queries */
+@media screen and (max-width: 782px) {
+
+        .buddypress-body {
+                margin: 0 12px;
+                width: auto;
+        }
+}
+
+@media only screen and (max-width: 1004px) {
+
+        .buddypress-body {
+                margin: 0 22px;
+                width: auto;
+        }
+}

src/bp-core/admin/js/backcompat-admin-tabs.js

@@ +1 @@
+( function() {
+        var bpBackCompatAdminTabs = function() {
+                var wrap = document.querySelector( '.nav-tab-wrapper' ).closest( '.wrap' );
+
+                if ( wrap ) {
+                        // 1. Add the tabbed class to the body tag.
+                        document.body.classList.add( 'bp-is-tabbed-screen' );
+
+                        // 2. Make the wrapping div the BuddyPress body.
+                        wrap.classList.add( 'buddypress-body' );
+                        wrap.classList.remove( 'wrap' );
+
+                        // 3. Create the BuddyPress header.
+                        var buddypressHeader = document.createElement( 'div' );
+                        buddypressHeader.classList.add( 'buddypress-header' );
+
+                        var headings = wrap.querySelectorAll( 'h1' );
+                        var buddypressTitleSection = document.createElement( 'div' );
+                        buddypressTitleSection.classList.add( 'buddypress-title-section' );
+
+                        // 4. Move the document title in it.
+                        if ( headings && headings[0] ) {
+                                buddypressTitleSection.appendChild( headings[0] );
+                        }
+
+                        buddypressHeader.appendChild( buddypressTitleSection );
+
+                        // 5. Move the tabs in it.
+                        var headerNavTabs = document.createElement( 'nav' );
+                        headerNavTabs.classList.add( 'buddypress-tabs-wrapper' );
+
+                        var bpAdminTabs = document.querySelectorAll( '.buddypress-nav-tab' );
+                        var columns = [];
+                        bpAdminTabs.forEach( function( tabItem ) {
+                                headerNavTabs.appendChild( tabItem );
+                                columns.push( '1fr' );
+                        } );
+
+                        // 6. Add the header's nav tabs into the header.
+                        buddypressHeader.appendChild( headerNavTabs );
+
+                        // 7. Edit the number of grid columns.
+                        if ( columns.length > 0 ) {
+                                headerNavTabs.setAttribute( 'style', '-ms-grid-columns: ' + columns.join( ' ' ) + '; grid-template-columns: ' + columns.join( ' ' ) + ';');
+                        }
+
+                        // 8. Create the header's separator.
+                        var headerSeparator = document.createElement( 'hr' );
+                        headerSeparator.classList.add( 'wp-header-end' );
+
+                        // 9. Insert the BuddyPress header into the document.
+                        document.querySelector('#wpbody-content').insertBefore( buddypressHeader, wrap );
+                        document.querySelector('#wpbody-content').insertBefore( headerSeparator, wrap );
+                }
+        };
+
+        if ( 'loading' === document.readyState ) {
+                document.addEventListener( 'DOMContentLoaded', bpBackCompatAdminTabs );
+        } else {
+                bpBackCompatAdminTabs;
+        }
+} )();

src/bp-core/classes/class-bp-admin.php

@@ -75 +75 @@
          */
         public $notices = array();
 
+        /**
+         * BuddyPress admin screens nav tabs.
+         *
+         * @since 10.0.0
+         * @var array()
+         */
+        public $nav_tabs = array();
+
+        /**
+         * BuddyPress admin active nav tab.
+         *
+         * @since 10.0.0
+         * @var string()
+         */
+        public $active_nav_tab = '';
+
+        /**
+         * BuddyPress admin screens submenu pages.
+         *
+         * @since 10.0.0
+         * @var array()
+         */
+        public $submenu_pages = array();
+
         /** Methods ***************************************************************/
 
         /**
@@ -229 +253 @@
                 );
 
                 // Add the option pages.
-                $hooks[] = add_submenu_page(
+                $bp_components_page = add_submenu_page(
                         $this->settings_page,
                         __( 'BuddyPress Components', 'buddypress' ),
                         __( 'BuddyPress', 'buddypress' ),
@@ -238 +262 @@
                         'bp_core_admin_components_settings'
                 );
 
-                $hooks[] = add_submenu_page(
+                $this->submenu_pages['settings']['bp-components'] = $bp_components_page;
+                $hooks[]                                          = $bp_components_page;
+
+                $bp_page_settings_page = add_submenu_page(
                         $this->settings_page,
                         __( 'BuddyPress Pages', 'buddypress' ),
                         __( 'BuddyPress Pages', 'buddypress' ),
@@ -247 +274 @@
                         'bp_core_admin_slugs_settings'
                 );
 
-                $hooks[] = add_submenu_page(
+                $this->submenu_pages['settings']['bp-page-settings'] = $bp_page_settings_page;
+                $hooks[]                                             = $bp_page_settings_page;
+
+                $bp_settings_page = add_submenu_page(
                         $this->settings_page,
                         __( 'BuddyPress Options', 'buddypress' ),
                         __( 'BuddyPress Options', 'buddypress' ),
@@ -256 +286 @@
                         'bp_core_admin_settings'
                 );
 
+                $this->submenu_pages['settings']['bp-settings'] = $bp_settings_page;
+                $hooks[]                                        = $bp_settings_page;
+
                 // Credits.
-                $hooks[] = add_submenu_page(
+                $bp_credits_page = add_submenu_page(
                         $this->settings_page,
                         __( 'BuddyPress Credits', 'buddypress' ),
                         __( 'BuddyPress Credits', 'buddypress' ),
@@ -266 +299 @@
                         array( $this, 'credits_screen' )
                 );
 
+                $this->submenu_pages['settings']['bp-credits'] = $bp_credits_page;
+                $hooks[]                                       = $bp_credits_page;
+
                 // For consistency with non-Multisite, we add a Tools menu in
                 // the Network Admin as a home for our Tools panel.
                 if ( is_multisite() && bp_core_do_network_admin() ) {
@@ -293 +329 @@
                         $tools_parent = 'tools.php';
                 }
 
-                $hooks[] = add_submenu_page(
+                // Init the Tools submenu pages global.
+                $this->submenu_pages['tools'] = array();
+
+                $bp_repair_tools = add_submenu_page(
                         $tools_parent,
                         __( 'BuddyPress Tools', 'buddypress' ),
                         __( 'BuddyPress', 'buddypress' ),
@@ -302 +341 @@
                         'bp_core_admin_tools'
                 );
 
-                $hooks[] = add_submenu_page(
+                $this->submenu_pages['tools']['bp-tools'] = $bp_repair_tools;
+                $hooks[]                                  = $bp_repair_tools;
+
+                $bp_optouts_tools = add_submenu_page(
                         $tools_parent,
                         __( 'Manage Opt-outs', 'buddypress' ),
                         __( 'Manage Opt-outs', 'buddypress' ),
@@ -311 +353 @@
                         'bp_core_optouts_admin'
                 );
 
+                $this->submenu_pages['tools']['bp-optouts'] = $bp_optouts_tools;
+                $hooks[]                                    = $bp_optouts_tools;
+
                 // For network-wide configs, add a link to (the root site's) Emails screen.
                 if ( is_network_admin() && bp_is_network_activated() ) {
                         $email_labels = bp_get_email_post_type_labels();
@@ -333 +378 @@
                 foreach( $hooks as $hook ) {
                         add_action( "admin_head-$hook", 'bp_core_modify_admin_menu_highlight' );
                 }
+
+                /**
+                 * Fires before adding inline styles for BP Admin tabs.
+                 *
+                 * @since 10.0.0
+                 *
+                 * @param array $submenu_pages The BP_Admin submenu pages passed by reference?
+                 */
+                do_action_ref_array( 'bp_admin_submenu_pages', array( &$this->submenu_pages ) );
+
+                foreach( $this->submenu_pages as $subpage_hooks ) {
+                        foreach ( $subpage_hooks as $subpage_hook ) {
+                                add_action( "admin_print_styles-{$subpage_hook}", array( $this, 'add_inline_styles' ), 20 );
+                        }
+                }
         }
 
         /**
@@ -810 +870 @@
          * @since 1.7.0
          */
         public function credits_screen() {
+                bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Credits', 'buddypress' ) );
         ?>
 
-                <div class="wrap bp-about-wrap">
-
-                <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Settings', 'buddypress' ); ?></h1>
-                <hr class="wp-header-end">
-
-                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( esc_html__( 'Credits', 'buddypress' ) ); ?></h2>
+                <div class="buddypress-body bp-about-wrap">
 
                         <p class="about-description"><?php esc_html_e( 'Meet the contributors behind BuddyPress:', 'buddypress' ); ?></p>
 
@@ -1224 +1280 @@
                         wp_register_script( $id, $script['file'], $script['dependencies'], $version, $script['footer'] );
                 }
         }
+
+        /**
+         * Adds inline styles to adapt the number of grid columns according to the number of BP Admin tabs.
+         *
+         * @since 10.0.0
+         */
+        public function add_inline_styles() {
+                $screen                  = get_current_screen();
+                $current_settings_tab_id = array_search( $screen->id, $this->submenu_pages['settings'], true );
+                $current_tools_tab_id    = array_search( $screen->id, $this->submenu_pages['tools'], true );
+                $current_tab_id          = '';
+                $tabs                    = array();
+                $context                 = '';
+
+                if ( $current_settings_tab_id ) {
+                        $current_tab_id = $current_settings_tab_id;
+                        $tabs           = wp_list_pluck( bp_core_get_admin_settings_tabs(), 'name', 'id' );
+                        $context        = 'settings';
+                } elseif ( $current_tools_tab_id ) {
+                        $current_tab_id = $current_tools_tab_id;
+                        $tabs           = wp_list_pluck( bp_core_get_admin_tools_tabs(), 'name', 'id' );
+                        $context        = 'tools';
+                }
+
+                if ( $current_tab_id && isset( $tabs[ $current_tab_id ] ) ) {
+                        $this->nav_tabs = bp_core_admin_tabs( $tabs[ $current_tab_id ], $context, false );
+                        $grid_columns   = array_fill( 0, count( $this->nav_tabs ), '1fr');
+                        $help_tab_css   = '';
+
+                        if ( $screen->get_help_tabs() ) {
+                                $help_tab_css  = '#screen-meta { margin-right: 0; } #screen-meta-links { position: absolute; right: 0; }';
+                        }
+
+                        wp_add_inline_style(
+                                'bp-admin-common-css',
+                                sprintf(
+                                        '.buddypress-tabs-wrapper {
+                                                -ms-grid-columns: %1$s;
+                                                grid-template-columns: %1$s;
+                                        }
+                                        %2$s',
+                                        implode( " ", $grid_columns ),
+                                        $help_tab_css
+                                )
+                        );
+                }
+        }
 }
 endif; // End class_exists check.

src/bp-members/classes/class-bp-members-admin.php

@@ -149 +149 @@
                 if ( ! empty( $this->subsite_activated ) ) {
                         $this->capability = 'manage_network_users';
                 }
+
+                /*
+                 * For consistency with non-Multisite, we add a Tools menu in
+                 * the Network Admin as a home for our Tools panel.
+                 */
+                if ( is_multisite() && bp_core_do_network_admin() ) {
+                        $this->tools_parent = 'network-tools';
+                } else {
+                        $this->tools_parent = 'tools.php';
+                }
         }
 
         /**
@@ -246 +256 @@
                         // Filter WP admin users list table to include users of the specified type.
                         add_filter( 'pre_get_users', array( $this, 'users_table_filter_by_type' ) );
                 }
+
+                // Add the Members invitations submenu page to the tools submenu pages.
+                add_action( 'bp_admin_submenu_pages', array( $this, 'set_submenu_page' ), 10, 1 );
         }
 
         /**
@@ -501 +514 @@
                         );
                 }
 
-                // For consistency with non-Multisite, we add a Tools menu in
-                // the Network Admin as a home for our Tools panel.
-                if ( is_multisite() && bp_core_do_network_admin() ) {
-                        $tools_parent = 'network-tools';
-                } else {
-                        $tools_parent = 'tools.php';
-                }
-
                 $hooks['members_invitations'] = $this->members_invites_page = add_submenu_page(
-                        $tools_parent,
+                        $this->tools_parent,
                         __( 'Manage Invitations',  'buddypress' ),
                         __( 'Manage Invitations',  'buddypress' ),
                         $this->capability,
@@ -562 +567 @@
                 add_action( "admin_head-{$this->members_invites_page}", 'bp_core_modify_admin_menu_highlight' );
         }
 
+        /**
+         * Include the Members Invitations tab to the Admin tabs needing specific inline styles.
+         *
+         * @since 10.0.0
+         *
+         * @param array $submenu_pages The BP_Admin submenu pages passed by reference.
+         */
+        public function set_submenu_page( &$submenu_pages ) {
+                if ( isset( $submenu_pages['tools'] ) ) {
+                        $submenu_pages['tools']['bp-members-invitations'] = get_plugin_page_hookname( 'bp-members-invitations', $this->tools_parent );
+                }
+        }
+
         /**
          * Highlight the Users menu if on Edit Profile and check if on the user's admin profile.
          *
@@ -2990 +3008 @@
                         ), $_SERVER['REQUEST_URI']
                 );
 
+                bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Invitations', 'buddypress' ), 'tools' );
                 ?>
 
-                <div class="wrap">
-                        <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress tools', 'buddypress' ); ?></h1>
-                        <hr class="wp-header-end">
-
-                        <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Manage Invitations', 'buddypress' ), 'tools' ); ?></h2>
-
+                <div class="buddypress-body">
                         <?php
                         if ( $usersearch ) {
                                 printf( '<span class="subtitle">' . __( 'Search results for &#8220;%s&#8221;', 'buddypress' ) . '</span>', esc_html( $usersearch ) );
@@ -3111 +3125 @@
                         'invitations_' . $action
                 );
 
+                bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Invitations', 'buddypress' ), 'tools' );
                 ?>
 
-                <div class="wrap">
-                        <h1 class="wp-heading-inline"><?php echo esc_html( $header_text ); ?></h1>
-                        <hr class="wp-header-end">
+                <div class="buddypress-body">
+                        <h2><?php echo esc_html( $header_text ); ?></h2>
 
                         <p><?php echo esc_html( $helper_text ); ?></p>