Ticket #8132: 8132.patch

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

@@ -9 +9 @@
 1.0 - Typography and colour
 2.0 - Dashicons
 3.0 - Elements
-        3.1 - Backdrop and container
-        3.2 - Modal footer
-        3.3 - Modal header
-        3.4 - Modal content
+        3.1 - Modal footer
+        3.2 - Modal content
 4.0 - Content styles
-        4.1 - Backdrop and container
-        4.2 - Footer content
-        4.3 - Header content
-        4.4 - Content content
+        4.1 - Footer content
+        4.2 - Header content
+        4.3 - Content content
 5.0 - Media
 6.0 - Media Queries
         6.1 - Desktop Medium
-        6.2 - Desktop Large
 ------------------------------------------------------------------------------*/
 /*------------------------------------------------------------------------------
  * 1.0 - Typography and colour
@@ -32 +28 @@
         --bp-hello-container-size: 15%;
 }
 
-#bp-hello-container a {
-        color: var(--bp-hello-color-primary);
-}
-
-#bp-hello-container a:hover {
-        transition: all 0.1s ease-in-out;
-        color: black;
+.bp-hello-content p {
+        font-size: 16px;
 }
 
-#bp-hello-container .bp-hello-header h1 {
-        line-height: 1.7;
-        font-size: 21px;
-        font-weight: 400;
+.bp-hello-content ul, .bp-hello-content ol {
+        list-style: inherit;
 }
 
-.bp-hello-content p {
-        font-size: 16px;
+.bp-hello-content h3 {
+        font-size: 1.1em;
+        font-weight: 500;
 }
 
 /*------------------------------------------------------------------------------
  * 2.0 - Dashicons
  *----------------------------------------------------------------------------*/
-.bp-hello-close .button {
-        padding: 5px !important;
-}
-
-.bp-hello-close .close-modal:before {
-        content: "\f158";
-        color: #23282d;
-        /* wp toolbar */
-        font: 400 1.5em/1 dashicons;
-        speak: none;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        background-image: none !important;
-}
-
-.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
-        transition: all 0.1s ease-in-out;
-        color: var(--bp-hello-color-primary);
-}
 
 .bp-hello-social li a:before {
         color: #23282d;
@@ -97 +68 @@
         content: "\f301";
 }
 
-/*------------------------------------------------------------------------------
- * 3.0 - Elements
- *----------------------------------------------------------------------------*/
-/*
- * 3.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 9998;
-        display: none;
+div.dashicons {
+        width: fit-content;
 }
 
-#bp-hello-container {
-        position: fixed;
-        top: 0;
-        bottom: 80px;
-        z-index: 99999;
-}
-
-.bp-disable-scroll {
-        overflow: hidden;
+div.dashicons.big {
+        font-size: 128px;
+        display: block;
+        color: var(--bp-hello-color-primary );
+        height: 128px;
+        width: 128px;
 }
 
+/*------------------------------------------------------------------------------
+ * 3.0 - Elements
+ *----------------------------------------------------------------------------*/
 /*
- * 3.2 - Modal footer
+ * 3.1 - Modal footer
  */
-.bp-hello-footer {
+#plugin-information-footer {
         display: flex;
         flex-wrap: wrap;
-        height: 58px;
-        max-height: 58px;
+        padding: 0 16px;
+        height: auto;
+}
+
+#plugin-information-footer .dashicons-heart {
+        color: #be3631;
 }
 
 .bp-hello-social-cta,
@@ -156 +119 @@
 }
 
 /*
- * 3.3 - Modal header
+ * 3.2 - Modal content
  */
-.bp-hello-header {
-        height: 58px;
-        max-height: 58px;
+#bp-hello-container {
+        display: none;
 }
 
-/*
- * 3.4 - Modal content
- */
 .bp-hello-content {
         padding: 0 25px;
-        height: calc(100% - 58px);
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
+        padding-bottom: 20px;
 }
 
-/*------------------------------------------------------------------------------
- * 4.0 - Content styles
- *----------------------------------------------------------------------------*/
-/*
- * 4.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-        background-color: rgba(0, 0, 0, 0.8);
-        transition: opacity 0.15s ease-out;
+#dynamic-content {
+        padding-bottom: 40px;
+        display: none;
 }
 
-#bp-hello-container {
-        background-color: white;
+#dynamic-content.show {
+        display: block;
 }
 
-/*
- * 4.2 - Footer content
- */
-.bp-hello-footer {
-        border-radius: 0 0 3px 3px;
-        background-color: white;
-        border-top: 1px solid var(--bp-hello-color-secondary);
-        padding: 6px 25px;
+.plugin-details-modal #TB_title {
+        height: 0;
+        background: none;
+        border: none;
 }
 
-.bp-hello-footer p {
-        font-size: 15px;
+#TB_window.plugin-details-modal.thickbox-loading:before {
+        z-index: 10;
+        margin-top: 40px;
+        background-color: none;
 }
 
-.bp-hello-social-cta {
-        text-align: left;
+.bp-hello-aligncenter * {
+        margin: 10px auto;
 }
 
-.bp-hello-social-links {
-        text-align: right;
+.bp-hello-alignleft {
+        float: left;
 }
 
-.bp-hello-social li a {
-        text-decoration: none;
+.bp-hello-alignleft::after {
+        content: '';
+        clear: left;
 }
 
-/*
- * 4.3 - Header content
- */
-.bp-hello-header {
-        padding: 6px 25px;
+.bp-hello-alignright {
+        float: right;
 }
 
-.bp-hello-header h1 {
-        width: calc(100% - 51px);
+.bp-hello-alignright::after {
+        content: '';
+        clear: right;
 }
 
-#bp-hello-container .bp-hello-header {
-        border-bottom: 1px solid var(--bp-hello-color-secondary);
+.bp-hello-divider {
+        clear: both;
+        border: none;
+        margin-bottom: 20px;
 }
 
-.bp-hello-title {
+/*------------------------------------------------------------------------------
+ * 4.0 - Content styles
+ *----------------------------------------------------------------------------*/
+/*
+ * 4.1 - Footer content
+ */
+
+.bp-hello-social-cta {
         text-align: left;
 }
 
-.bp-hello-close {
-        position: absolute;
-        top: 20px;
-        right: 25px;
+.bp-hello-social-links {
         text-align: right;
 }
 
+.bp-hello-social li a {
+        text-decoration: none;
+}
+
 /*
- * 4.4 - Content content
+ * 4.2 - Header content
+ */
+#plugin-information-title.with-banner {
+        background-image: url( 'https://ps.w.org/buddypress/assets/banner-772x250.png' );
+}
+
+@media only screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
+        #plugin-information-title.with-banner {
+                background-image: url( 'https://ps.w.org/buddypress/assets/banner-1544x500.png' );
+        }
+}
+
+/*
+ * 4.3 - Content content
  */
 .bp-hello-content {
         background-color: white;
@@ -259 +230 @@
         width: 100%;
 }
 
+.bp-hello-alignleft img,
+.bp-hello-alignright img {
+        max-width: 200px;
+}
+
 /*------------------------------------------------------------------------------
  * 6.0 - Media Queries
  *----------------------------------------------------------------------------*/
@@ -266 +242 @@
  * 6.1 - Desktop Medium
  */
 @media only screen and (min-width: 1024px) {
-        #bp-hello-backdrop {
-                display: block;
-        }
-        #bp-hello-container {
-                position: fixed;
-                top: 60px;
-                left: var(--bp-hello-container-size);
-                right: var(--bp-hello-container-size);
-                bottom: 30px;
-                z-index: 9999;
-                border-radius: 3px;
-        }
-        #bp-hello-container .bp-hello-header h1 {
-                line-height: inherit;
-        }
-        .bp-hello-header {
-                height: auto;
-                max-height: inherit;
-                padding: 6px 30px;
-        }
-        .bp-hello-close {
-                right: 30px;
-        }
-        .bp-hello-close .close-modal:before {
-                line-height: 0.7;
-        }
-        .bp-hello-footer {
-                position: fixed;
-                left: var(--bp-hello-container-size);
-                right: var(--bp-hello-container-size);
-                bottom: 30px;
-                z-index: 10000;
-                height: auto;
-                max-height: inherit;
-                padding: 6px 30px;
-        }
         .bp-hello-content {
-                height: calc(100% - 90px);
-                padding: 0 30px;
+                padding: 0 30px 20px;
         }
         .bp-hello-content p {
                 font-size: 14px;
         }
 }
-
-/**
- * 6.2 - Desktop Large
- */
-@media screen and (min-width: 1280px) {
-        #bp-hello-container,
-        .bp-hello-footer {
-                left: calc((100% - 896px) / 2);
-                right: calc((100% - 896px) / 2);
-        }
-}

src/bp-core/admin/js/hello.js

@@ -3 +3 @@
  *
  * @since 3.0.0
  */
-(function() {
-        /**
-         * Open the BuddyPress Hello modal.
-         */
-        var bp_hello_open_modal = function() {
-                var backdrop = document.getElementById( 'bp-hello-backdrop' ),
-                        modal = document.getElementById( 'bp-hello-container' );
-
-                document.body.classList.add( 'bp-disable-scroll' );
-
-                // Show modal and overlay.
-                backdrop.style.display = '';
-                modal.style.display    = '';
-
-                // Focus the "X" so bp_hello_handle_keyboard_events() works.
-                var focus_target = modal.querySelectorAll( 'a[href], button' );
-                focus_target     = Array.prototype.slice.call( focus_target );
-                focus_target[0].focus();
-
-                // Events.
-                modal.addEventListener( 'keydown', bp_hello_handle_keyboard_events );
-                backdrop.addEventListener( 'click', bp_hello_close_modal );
-        };
+(function( $, bp ) {
+        // Bail if not set
+        if ( typeof bpHelloStrings === 'undefined' ) {
+                return;
+        }
 
         /**
-         * Close modal if "X" or background is touched.
-         *
-         * @param {Event} event - A click event.
+         * Open the BuddyPress Hello modal.
          */
-        document.addEventListener( 'click', function( event ) {
-                var backdrop = document.getElementById( 'bp-hello-backdrop' );
-                if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
-                        return;
+        var bpHelloOpenModal = function() {
+                if ( 'function' !== typeof window.tb_show ) {
+                        return false;
                 }
 
-                var backdrop_click    = backdrop.contains( event.target ),
-                        modal_close_click = event.target.classList.contains( 'close-modal' );
-
-                if ( ! modal_close_click && ! backdrop_click ) {
-                        return;
-                }
+                window.tb_show( 'BuddyPress', '#TB_inline?inlineId=bp-hello-container' );
 
-                bp_hello_close_modal();
-        }, false );
+                $( '#TB_window' ).attr( {
+                                                        'role': 'dialog',
+                                                        'aria-label': plugininstallL10n.plugin_modal_label
+                                                } )
+                                                .addClass( 'plugin-details-modal' )
+                                                .removeClass( 'thickbox-loading' );
 
-        /**
-         * Close the Hello modal.
-         */
-        var bp_hello_close_modal = function() {
-                var backdrop = document.getElementById( 'bp-hello-backdrop' ),
-                        modal = document.getElementById( 'bp-hello-container' );
-
-                document.body.classList.remove( 'bp-disable-scroll' );
-
-                // Remove modal and overlay.
-                modal.parentNode.removeChild( modal );
-                backdrop.parentNode.removeChild( backdrop );
+                $( '#TB_ajaxContent' ).prop( 'style', 'height: 100%; width: auto; padding: 0; border: none;' );
         };
 
         /**
-         * Restrict keyboard focus to elements within the BuddyPress Hello modal.
+         * Prints an error message.
          *
-         * @param {Event} event - A keyboard focus event.
+         * @param {string} message The error message to display.
          */
-        var bp_hello_handle_keyboard_events = function( event ) {
-                var modal = document.getElementById( 'bp-hello-container' ),
-                        focus_targets = Array.prototype.slice.call(
-                                modal.querySelectorAll( 'a[href], button' )
-                        ),
-                        first_tab_stop = focus_targets[0],
-                        last_tab_stop  = focus_targets[ focus_targets.length - 1 ];
-
-                // Check for TAB key press.
-                if ( event.keyCode !== 9 ) {
-                        return;
+        var printErrorMessage = function( message ) {
+                if ( ! message ) {
+                        message = bpHelloStrings.pageNotFound;
                 }
 
-                // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
-                if ( event.shiftKey && document.activeElement === first_tab_stop ) {
-                        event.preventDefault();
-                        last_tab_stop.focus();
-
-                // When TAB reaches last tab stop, go to first tab stop in modal.
-                } else if ( document.activeElement === last_tab_stop ) {
-                        event.preventDefault();
-                        first_tab_stop.focus();
-                }
+                $( '#dynamic-content' ).html(
+                        $('<div></div>' ).prop( 'id', 'message' )
+                                        .addClass( 'notice notice-error error' )
+                                        .html(
+                                                $( '<p></p>' ).html( message )
+                                        )
+                );
         };
 
-        /**
-         * Close modal if escape key is presssed.
-         *
-         * @param {Event} event - A keyboard focus event.
-         */
-        document.addEventListener( 'keyup', function( event ) {
-                if ( event.keyCode === 27 ) {
-                        if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
-                                return;
-                        }
-
-                        bp_hello_close_modal();
+        // Listen to Tab Menu clicks to display the different screens.
+        $( '#plugin-information-tabs').on( 'click', 'a', function( event ) {
+                event.preventDefault();
+
+                var anchor = $( event.currentTarget ), target = $( '#dynamic-content' );
+
+                if ( anchor.hasClass( 'dynamic' ) ) {
+                        $( '#top-features' ).hide();
+                        target.html( '' );
+                        target.addClass( 'show' );
+
+                        $( '#TB_window' ).addClass( 'thickbox-loading' );
+
+                        bp.apiRequest( {
+                                url: anchor.data( 'endpoint' ),
+                                type: 'GET',
+                                beforeSend: function( xhr, settings ) {
+                                        settings.url = settings.url.replace( '&_wpnonce=none', '' );
+                                },
+                                data: {
+                                        context: 'view',
+                                        slug: anchor.data( 'slug' ),
+                                        _wpnonce: 'none',
+                                }
+                        } ).done( function( data ) {
+                                var page = _.first( data );
+
+                                if ( page && page.content ) {
+                                        target.html( page.content.rendered );
+                                } else {
+                                        printErrorMessage();
+                                }
+
+                        } ).fail( function( error ) {
+                                if ( ! error || ! error.message ) {
+                                        return false;
+                                }
+
+                                printErrorMessage( error.message );
+
+                        } ).always( function() {
+                                $( '#TB_window' ).removeClass( 'thickbox-loading' );
+                        } );
+
+                } else {
+                        $( '#top-features' ).show();
+                        target.html( '' );
+                        target.removeClass( 'show' );
                 }
-        }, false );
+        } );
 
         // Init modal after the screen's loaded.
-        if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
-                bp_hello_open_modal();
-        } else {
-                document.addEventListener( 'DOMContentLoaded', bp_hello_open_modal );
-        }
-}());
+        $( document ).ready( function() {
+                bpHelloOpenModal();
+        } );
+
+}( jQuery, window.bp || {} ) );

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

@@ -540 +540 @@
                 if ( 0 === strpos( get_current_screen()->id, 'dashboard' ) && ! empty( $_GET['hello'] ) && $_GET['hello'] === 'buddypress' ) {
                         wp_enqueue_style( 'bp-hello-css' );
                         wp_enqueue_script( 'bp-hello-js' );
+                        wp_localize_script( 'bp-hello-js', 'bpHelloStrings', array(
+                                'pageNotFound' => __( 'Sorry, the page you requested was not found', 'buddypress' ),
+                        ) );
                 }
         }
 
@@ -617 +620 @@
                 if ( 0 !== strpos( get_current_screen()->id, 'dashboard' ) || empty( $_GET['hello'] ) || $_GET['hello'] !== 'buddypress' ) {
                         return;
                 }
-        ?>
 
-                <div id="bp-hello-backdrop" style="display: none;">
-                </div>
+                // Get BuddyPress stable version.
+                $version      =  preg_replace( '/-.*/', '', bp_get_version() );
+                $version_slug = 'version-' . str_replace( '.', '-', $version );
+        ?>
 
-                <div id="bp-hello-container" role="dialog" aria-labelledby="bp-hello-title" style="display: none;">
-                        <div class="bp-hello-header" role="document">
-                                <div class="bp-hello-close">
-                                        <button type="button" class="close-modal button bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Close pop-up', 'buddypress' ); ?>">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span>
-                                        </button>
+                <div id="bp-hello-container">
+                        <div id="plugin-information-scrollable">
+                                <div id='plugin-information-title' class="with-banner">
+                                        <div class='vignette'></div>
+                                        <h2><?php printf( esc_html__( 'BuddyPress %s', 'buddypress' ), $version ); ?></h2>
                                 </div>
-
-                                <div class="bp-hello-title">
-                                        <h1 id="bp-hello-title" tabindex="-1"><?php echo esc_html( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
+                                <div id="plugin-information-tabs">
+                                        <a name="whats-new" href="#whats-new" class="current"><?php esc_html_e( 'What\'s new?', 'buddypress' ); ?></a>
+                                        <a name="changelog" href="#changelog" class="dynamic" data-slug="<?php echo esc_attr( $version_slug ); ?>" data-endpoint="https://codex.buddypress.org/wp-json/wp/v2/pages"><?php esc_html_e( 'Changelog', 'buddypress' ); ?></a>
+                                        <a name="get-involved" href="#get-involved" class="dynamic" data-slug="participate-and-contribute" data-endpoint="https://codex.buddypress.org/wp-json/wp/v2/pages"><?php esc_html_e( 'Get involved', 'buddypress' ); ?></a>
                                 </div>
-                        </div>
 
-                        <div class="bp-hello-content">
-                                <h2><?php esc_html_e( 'New tools for data control and privacy', 'buddypress' ); ?></h2>
-                                <p>
-                                        <?php esc_html_e( 'BuddyPress boasts a proud history of letting community members and managers control their data, independent of third-party, commercial entities. In this spirit, as well as the spirit of recent regulations like the EU\'s General Data Protection Regulation (GDPR), BuddyPress 4.0 introduces a suite of tools allowing users and site admins to manage member data and privacy.', 'buddypress' ); ?>
-                                </p>
-
-                                <figure class="bp-hello-alignright">
-                                        <img class="bp-hello-img-border" src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/data-export.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of Export Data settings panel', 'buddypress' ); ?>" />
-                                        <figcaption>
-                                                <?php esc_html_e( 'Improved user control over data exports', 'buddypress' ); ?>
-                                        </figcaption>
-                                </figure>
-
-                                <p><?php esc_html_e( 'The new "Export Data" Settings panel lets users request an export of all BuddyPress data they\'ve created. BuddyPress integrates seamlessly with the data export functionality introduced in WordPress 4.9.8, and BP data is included in exports that are initiated either from the Export Data panel or via WP\'s Tools > Export Personal Data interface.', 'buddypress' ); ?></p>
-
-                                <p><?php esc_html_e( 'BuddyPress 4.0 also integrates with WordPress 4.9.8\'s Privacy Policy tools. When you create or update your Privacy Policy, BP will suggest text that\'s specifically tailored to the kinds of social data generated on a BuddyPress site. And will prompt registering users to agree to the Privacy Policy, if your theme supports it.', 'buddypress' ); ?></p>
-
-                                <h2><?php esc_html_e( 'Nouveau template improvements', 'buddypress' ); ?></h2>
-                                <p><?php esc_html_e( 'BuddyPress 3.0 introduced a new set of default templates, which we call "Nouveau". In 4.0, we\'ve fixed bugs and smoothed the edges in these templates, including more accessible markup and improved appearance on mobile devices.', 'buddypress' ); ?></p>
-
-                                <h2><?php esc_html_e( "BuddyPress: leaner, faster, stronger", 'buddypress' ); ?></h2>
-                                <p><?php esc_html_e( 'With every BuddyPress version, we strive to make internal improvements to performance and code quality in addition to introducing new features and fixes. In BuddyPress 4.0, we\'ve improved PHP compatibility both in our codebase and in our automated testing tools; we\'ve reworked some automated tests for faster performance; we\'ve ensured compatibility with upcoming changes in WordPress; and we\'ve fixed a number of bugs in the formatting and sending of emails.', 'buddypress' ); ?></p>
-
-                                <p><em>
-                                        <?php
-                                        printf(
-                                                __( 'To read the full list of features, fixes, and changes in this version of BuddyPress, <a href="%s">visit Trac</a>.', 'buddypress' ),
-                                                esc_url( 'https://buddypress.trac.wordpress.org/query?group=status&milestone=4.0' )
-                                        );
-                                        ?>
-                                </em></p>
-
-                                <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
-                                <p>
-                                        <?php
-                                        printf(
-                                                __( ' How are you using BuddyPress? Receiving your feedback and suggestions for future versions of BuddyPress genuinely motivates and encourages our contributors. Please <a href="%s">share your feedback</a> about this version of BuddyPress on our website. ', 'buddypress' ),
-                                                esc_url( 'https://buddypress.org/support/' )
-                                        );
-                                        ?>
-                                </p>
-                                <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
-
-                                <br /><br />
-                        </div>
+                                <div class="bp-hello-content">
+                                        <div id="dynamic-content"></div>
+                                        <div id="top-features">
+                                                <h2><?php esc_html_e( 'Introducing the BP REST API', 'buddypress' ); ?></h2>
+                                                <figure class="bp-hello-alignleft">
+                                                        <div class="dashicons dashicons-rest-api big"></div>
+                                                </figure>
+                                                <p>
+                                                        <?php esc_html_e( 'BuddyPress 5.0.0 comes with REST API endpoints for members, groups, activities, users, private messages, screen notifications and extended profiles', 'buddypress' ); ?>
+                                                        <?php esc_html_e( '(The remaining endpoints are planned to ship in our next major release).', 'buddypress' ); ?>
+                                                </p>
+                                                <p>
+                                                        <?php esc_html_e( 'BuddyPress endpoints provide machine-readable external access to your WordPress site with a clear, standards-driven interface, paving the way for new and innovative methods of interacting with your community through plugins, themes, apps, and beyond.', 'buddypress' ); ?>
+                                                        <?php printf(
+                                                                esc_html__( 'Ready to get started with development? Check out the %s.', 'buddypress' ),
+                                                                sprintf(
+                                                                        '<a href="%1$s">%2$s</a>',
+                                                                        'https://imath-buddydocs.pf1.wpserveur.net/bp-rest-api/', // @todo replace with the URL to the definitive site.
+                                                                        esc_html__( 'BP REST API reference', 'buddypress' )
+                                                                )
+                                                        ); ?>
+                                                </p>
+
+                                                <hr class="bp-hello-divider"/>
+
+                                                <h2><?php esc_html_e( 'A new UI to manage Group members.', 'buddypress' ); ?></h2>
+                                                <p>
+                                                        <?php esc_html_e( 'The best way to show the great powers of the BP REST API is to start using it for one of our Core features.', 'buddypress' ); ?>
+                                                </p>
+                                                <figure class="bp-hello-aligncenter">
+                                                        <img src="https://cldup.com/5YjHovFxjy.png" alt="<?php esc_attr_e( 'Screenshot of the Group Members management interface in the administration and on the front-end of your site.', 'buddypress' ); ?>" />
+                                                </figure>
+                                                <p>
+                                                        <?php esc_html_e( 'Whether you need to manage group members from the group screen of your WordPress Administration or from the single group management area on front-end: it\'s now more dynamic & faster in both places.', 'buddypress' ); ?>
+                                                        <?php esc_html_e( 'Thanks to the BP REST API and JavaScript, the same UI is used in both contexts!', 'buddypress' ); ?>
+                                                </p>
+
+                                                <hr class="bp-hello-divider"/>
+
+                                                <h2><?php esc_html_e( 'Improved Group invites and membership requests.', 'buddypress' ); ?></h2>
+                                                <figure class="bp-hello-alignright">
+                                                        <div class="dashicons dashicons-buddicons-groups big"></div>
+                                                </figure>
+                                                <p>
+                                                        <?php esc_html_e( 'Thanks to the new BP Invitations API, Group invites and membership requests are now managed in a more consistent way.', 'buddypress' ); ?>
+                                                </p>
+                                                <p>
+                                                        <?php esc_html_e( 'The BP Invitations API abstracts how these two actions are handled and allow developers to use them for any object of your site (eg: Sites of a WordPress network).', 'buddypress' ); ?>
+                                                </p>
+
+                                                <hr class="bp-hello-divider"/>
+
+                                                <h2><?php esc_html_e( 'Help our support volunteers help you.', 'buddypress' ); ?></h2>
+                                                <p>
+                                                        <?php esc_html_e( 'Knowing your WordPress & BuddyPress configuration is very important when one of our beloved support volunteers tries to help you fix an issue. That\'s why we added a BuddyPress section to the Site Health Info Administration screen.', 'buddypress' ); ?>
+                                                </p>
+                                                <figure class="bp-hello-aligncenter">
+                                                        <img src="https://cldup.com/tSdzjxw2RK.png" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress section of the Site Health Info Administration screen.', 'buddypress' ); ?>" />
+                                                </figure>
+                                                <p>
+                                                        <?php esc_html_e( 'The panel is displayed at the bottom of the screen. It includes the BuddyPress version, active components, active template pack, and a list of other component-specific settings information.', 'buddypress' ); ?>
+                                                </p>
+
+                                                <hr class="bp-hello-divider"/>
+
+                                                <h2><?php esc_html_e( 'Improved Integrations with WordPress', 'buddypress' ); ?></h2>
+                                                <figure class="bp-hello-aligncenter">
+                                                        <img src="https://cldup.com/0ZByeFT35M.png" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress members directory & Password control in Twenty Ninteen.', 'buddypress' ); ?>" />
+                                                </figure>
+
+                                                <p>
+                                                        <?php esc_html_e( 'First, we\'ve polished The BP Nouveau template pack\'s integration with the Twenty Nineteen WordPress theme.', 'buddypress' ); ?>
+                                                        <?php esc_html_e( 'Second, this template pack is now using the same password control as the one used in WordPress Core.', 'buddypress' ); ?>
+                                                </p>
+
+                                                <p>
+                                                        <strong><?php esc_html_e( 'Third, we made available a new BuddyPress Blocks category in the Block Editor.', 'buddypress' ); ?></strong>
+                                                </p>
+                                                <figure class="bp-hello-aligncenter">
+                                                        <img src="https://cldup.com/gtIaHT6wnQ.png" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress block category.', 'buddypress' ); ?>" />
+                                                </figure>
+                                                <p>
+                                                        <?php esc_html_e( 'Keeping things organized inside the block inserter is important. Having a specific BuddyPress category will help our end-users find BuddyPress blocks faster.', 'buddypress' ); ?>
+                                                        <?php printf(
+                                                                esc_html__( 'If you\'re a Block developer, please use this category for your BuddyPress blocks. You can read more about it in this %s.', 'buddypress' ),
+                                                                sprintf(
+                                                                        '<a href="%1$s">%2$s</a>',
+                                                                        'https://bpdevel.wordpress.com/2019/07/31/a-category-to-store-your-buddypress-blocks/',
+                                                                        esc_html__( 'development note', 'buddypress' )
+                                                                )
+                                                        ); ?>
+                                                </p>
+
+                                                <hr class="bp-hello-divider"/>
+
+                                                <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
+                                                <p>
+                                                        <?php
+                                                        printf(
+                                                                __( ' How are you using BuddyPress? Receiving your feedback and suggestions for future versions of BuddyPress genuinely motivates and encourages our contributors. Please <a href="%s">share your feedback</a> about this version of BuddyPress on our website. ', 'buddypress' ),
+                                                                esc_url( 'https://buddypress.org/support/' )
+                                                        );
+                                                        ?>
+                                                </p>
+                                                <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
 
-                        <div class="bp-hello-footer">
+                                                <br /><br />
+                                        </div>
+                                </div>
+                        </div>
+                        <div id="plugin-information-footer">
                                 <div class="bp-hello-social-cta">
                                         <p>
                                                 <?php
                                                 printf(
-                                                        _n( 'Built by <a href="%s">%s volunteer</a>.', 'Built by <a href="%s">%s volunteers</a>.', 35, 'buddypress' ),
+                                                        _n( 'Built with %1$s by <a href="%2$s">%3$d volunteer</a>.', 'Built with %1$s by <a href="%2$s">%3$d volunteers</a>.', 35, 'buddypress' ),
+                                                        '<span class="dashicons dashicons-heart"></span>',
                                                         esc_url( bp_get_admin_url( 'admin.php?page=bp-credits' ) ),
                                                         number_format_i18n( 35 )
                                                 );
@@ -1097 +1165 @@
                         // 3.0
                         'bp-hello-css' => array(
                                 'file'         => "{$url}hello{$min}.css",
-                                'dependencies' => array( 'bp-admin-common-css' ),
+                                'dependencies' => array( 'bp-admin-common-css', 'thickbox' ),
                         ),
                 ) );
 
@@ -1140 +1208 @@
                         // 3.0
                         'bp-hello-js' => array(
                                 'file'         => "{$url}hello{$min}.js",
-                                'dependencies' => array(),
+                                'dependencies' => array( 'thickbox', 'bp-api-request' ),
                                 'footer'       => true,
                         ),
                 ) );