Skip to:
Content

BuddyPress.org

Ticket #8132: 8132.2.patch

File 8132.2.patch, 45.2 KB (added by imath, 6 years ago)

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

    diff --git src/bp-core/admin/css/hello-rtl.css src/bp-core/admin/css/hello-rtl.css
index 48d7e6a21..8afabb2d7 100644
    TABLE OF CONTENTS: 
    991.0 - Typography and colour
    10102.0 - Dashicons
    11113.0 - Elements
    12         3.1 - Backdrop and container
    13         3.2 - Modal footer
    14         3.3 - Modal header
    15         3.4 - Modal content
     12        3.1 - Modal footer
     13        3.2 - Modal content
    16144.0 - Content styles
    17         4.1 - Backdrop and container
    18         4.2 - Footer content
    19         4.3 - Header content
    20         4.4 - Content content
     15        4.1 - Footer content
     16        4.2 - Header content
     17        4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    2320        6.1 - Desktop Medium
    … … TABLE OF CONTENTS: 
    3229        --bp-hello-container-size: 15%;
    3330}
    3431
    35 #bp-hello-container a {
    36         color: var(--bp-hello-color-primary);
     32.bp-hello-content p {
     33        font-size: 16px;
    3734}
    3835
    39 #bp-hello-container a:hover {
    40         transition: all 0.1s ease-in-out;
    41         color: black;
     36.bp-hello-content ul,
     37.bp-hello-content ol {
     38        list-style: inherit;
    4239}
    4340
    44 #bp-hello-container .bp-hello-header h1 {
    45         line-height: 1.7;
    46         font-size: 21px;
    47         font-weight: 400;
    48 }
    49 
    50 .bp-hello-content p {
    51         font-size: 16px;
     41.bp-hello-content h3 {
     42        font-size: 1.1em;
     43        font-weight: 500;
    5244}
    5345
    5446/*------------------------------------------------------------------------------
    5547 * 2.0 - Dashicons
    5648 *----------------------------------------------------------------------------*/
    57 .bp-hello-close .button {
    58         padding: 5px !important;
    59 }
    60 
    61 .bp-hello-close .close-modal:before {
    62         content: "\f158";
    63         color: #23282d;
    64         /* wp toolbar */
    65         font: 400 1.5em/1 dashicons;
    66         speak: none;
    67         -webkit-font-smoothing: antialiased;
    68         -moz-osx-font-smoothing: grayscale;
    69         background-image: none !important;
    70 }
    71 
    72 .bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
    73         transition: all 0.1s ease-in-out;
    74         color: var(--bp-hello-color-primary);
    75 }
    76 
    7749.bp-hello-social li a:before {
    7850        color: #23282d;
    7951        /* wp toolbar */
    … … TABLE OF CONTENTS: 
    9769        content: "\f301";
    9870}
    9971
    100 /*------------------------------------------------------------------------------
    101  * 3.0 - Elements
    102  *----------------------------------------------------------------------------*/
    103 /*
    104  * 3.1 - Backdrop and container
    105  */
    106 #bp-hello-backdrop {
    107         position: fixed;
    108         top: 0;
    109         right: 0;
    110         left: 0;
    111         bottom: 0;
    112         z-index: 9998;
    113         display: none;
     72div.dashicons {
     73        width: -webkit-fit-content;
     74        width: fit-content;
    11475}
    11576
    116 #bp-hello-container {
    117         position: fixed;
    118         top: 0;
    119         bottom: 80px;
    120         z-index: 99999;
    121 }
    122 
    123 .bp-disable-scroll {
    124         overflow: hidden;
     77div.dashicons.big {
     78        font-size: 128px;
     79        display: block;
     80        color: var(--bp-hello-color-primary);
     81        height: 128px;
     82        width: 128px;
    12583}
    12684
     85/*------------------------------------------------------------------------------
     86 * 3.0 - Elements
     87 *----------------------------------------------------------------------------*/
    12788/*
    128  * 3.2 - Modal footer
     89 * 3.1 - Modal footer
    12990 */
    130 .bp-hello-footer {
     91#plugin-information-footer {
    13192        display: flex;
    13293        flex-wrap: wrap;
    133         height: 58px;
    134         max-height: 58px;
     94        padding: 0 16px;
     95        height: auto;
     96}
     97
     98#plugin-information-footer .dashicons-heart {
     99        color: #be3631;
    135100}
    136101
    137102.bp-hello-social-cta,
    … … TABLE OF CONTENTS: 
    156121}
    157122
    158123/*
    159  * 3.3 - Modal header
     124 * 3.2 - Modal content
    160125 */
    161 .bp-hello-header {
    162         height: 58px;
    163         max-height: 58px;
     126#bp-hello-container {
     127        display: none;
    164128}
    165129
    166 /*
    167  * 3.4 - Modal content
    168  */
    169130.bp-hello-content {
    170131        padding: 0 25px;
    171         height: calc(100% - 58px);
    172         overflow-y: auto;
    173         -webkit-overflow-scrolling: touch;
     132        padding-bottom: 20px;
    174133}
    175134
    176 /*------------------------------------------------------------------------------
    177  * 4.0 - Content styles
    178  *----------------------------------------------------------------------------*/
    179 /*
    180  * 4.1 - Backdrop and container
    181  */
    182 #bp-hello-backdrop {
    183         background-color: rgba(0, 0, 0, 0.8);
    184         transition: opacity 0.15s ease-out;
     135#dynamic-content {
     136        padding-bottom: 40px;
     137        display: none;
    185138}
    186139
    187 #bp-hello-container {
    188         background-color: white;
     140#dynamic-content.show {
     141        display: block;
    189142}
    190143
    191 /*
    192  * 4.2 - Footer content
    193  */
    194 .bp-hello-footer {
    195         border-radius: 0 0 3px 3px;
    196         background-color: white;
    197         border-top: 1px solid var(--bp-hello-color-secondary);
    198         padding: 6px 25px;
     144.plugin-details-modal #TB_title {
     145        /* stylelint-disable-line */
     146        height: 0;
     147        background: none;
     148        border: none;
    199149}
    200150
    201 .bp-hello-footer p {
    202         font-size: 15px;
     151#TB_window.plugin-details-modal.thickbox-loading:before {
     152        /* stylelint-disable-line */
     153        z-index: 10;
     154        margin-top: 40px;
     155        background-color: none;
    203156}
    204157
    205 .bp-hello-social-cta {
    206         text-align: right;
     158.bp-hello-aligncenter * {
     159        margin: 10px auto;
    207160}
    208161
    209 .bp-hello-social-links {
    210         text-align: left;
     162.bp-hello-alignleft {
     163        float: right;
    211164}
    212165
    213 .bp-hello-social li a {
    214         text-decoration: none;
     166.bp-hello-alignleft:after {
     167        content: "";
     168        clear: right;
    215169}
    216170
    217 /*
    218  * 4.3 - Header content
    219  */
    220 .bp-hello-header {
    221         padding: 6px 25px;
     171.bp-hello-alignright {
     172        float: left;
    222173}
    223174
    224 .bp-hello-header h1 {
    225         width: calc(100% - 51px);
     175.bp-hello-alignright:after {
     176        content: "";
     177        clear: left;
    226178}
    227179
    228 #bp-hello-container .bp-hello-header {
    229         border-bottom: 1px solid var(--bp-hello-color-secondary);
     180.bp-hello-divider {
     181        clear: both;
     182        border: none;
     183        margin-bottom: 20px;
    230184}
    231185
    232 .bp-hello-title {
     186/*------------------------------------------------------------------------------
     187 * 4.0 - Content styles
     188 *----------------------------------------------------------------------------*/
     189/*
     190 * 4.1 - Footer content
     191 */
     192.bp-hello-social-cta {
    233193        text-align: right;
    234194}
    235195
    236 .bp-hello-close {
    237         position: absolute;
    238         top: 20px;
    239         left: 25px;
     196.bp-hello-social-links {
    240197        text-align: left;
    241198}
    242199
     200.bp-hello-social li a {
     201        text-decoration: none;
     202}
     203
    243204/*
    244  * 4.4 - Content content
     205 * 4.2 - Header content
     206 */
     207#plugin-information-title.with-banner {
     208        background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     209}
     210
     211/*
     212 * 4.3 - Content content
    245213 */
    246214.bp-hello-content {
    247215        background-color: white;
    … … TABLE OF CONTENTS: 
    259227        width: 100%;
    260228}
    261229
     230.bp-hello-content .bp-hello-alignleft img,
     231.bp-hello-content .bp-hello-alignright img {
     232        max-width: 200px;
     233}
     234
    262235/*------------------------------------------------------------------------------
    263236 * 6.0 - Media Queries
    264237 *----------------------------------------------------------------------------*/
    … … TABLE OF CONTENTS: 
    266239 * 6.1 - Desktop Medium
    267240 */
    268241@media only screen and (min-width: 1024px) {
    269         #bp-hello-backdrop {
    270                 display: block;
    271         }
    272         #bp-hello-container {
    273                 position: fixed;
    274                 top: 60px;
    275                 right: var(--bp-hello-container-size);
    276                 left: var(--bp-hello-container-size);
    277                 bottom: 30px;
    278                 z-index: 9999;
    279                 border-radius: 3px;
    280         }
    281         #bp-hello-container .bp-hello-header h1 {
    282                 line-height: inherit;
    283         }
    284         .bp-hello-header {
    285                 height: auto;
    286                 max-height: inherit;
    287                 padding: 6px 30px;
    288         }
    289         .bp-hello-close {
    290                 left: 30px;
    291         }
    292         .bp-hello-close .close-modal:before {
    293                 line-height: 0.7;
    294         }
    295         .bp-hello-footer {
    296                 position: fixed;
    297                 right: var(--bp-hello-container-size);
    298                 left: var(--bp-hello-container-size);
    299                 bottom: 30px;
    300                 z-index: 10000;
    301                 height: auto;
    302                 max-height: inherit;
    303                 padding: 6px 30px;
    304         }
    305242        .bp-hello-content {
    306                 height: calc(100% - 90px);
    307                 padding: 0 30px;
     243                padding: 0 30px 20px;
    308244        }
    309245        .bp-hello-content p {
    310246                font-size: 14px;
    … … TABLE OF CONTENTS: 
    314250/**
    315251 * 6.2 - Desktop Large
    316252 */
    317 @media screen and (min-width: 1280px) {
    318         #bp-hello-container,
    319         .bp-hello-footer {
    320                 right: calc((100% - 896px) / 2);
    321                 left: calc((100% - 896px) / 2);
     253@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     254        #plugin-information-title.with-banner {
     255                background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
    322256        }
    323257}

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

    diff --git src/bp-core/admin/css/hello.css src/bp-core/admin/css/hello.css
index 63704edc7..cb6e52968 100644
    TABLE OF CONTENTS: 
    991.0 - Typography and colour
    10102.0 - Dashicons
    11113.0 - Elements
    12         3.1 - Backdrop and container
    13         3.2 - Modal footer
    14         3.3 - Modal header
    15         3.4 - Modal content
     12        3.1 - Modal footer
     13        3.2 - Modal content
    16144.0 - Content styles
    17         4.1 - Backdrop and container
    18         4.2 - Footer content
    19         4.3 - Header content
    20         4.4 - Content content
     15        4.1 - Footer content
     16        4.2 - Header content
     17        4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    2320        6.1 - Desktop Medium
    … … TABLE OF CONTENTS: 
    3229        --bp-hello-container-size: 15%;
    3330}
    3431
    35 #bp-hello-container a {
    36         color: var(--bp-hello-color-primary);
     32.bp-hello-content p {
     33        font-size: 16px;
    3734}
    3835
    39 #bp-hello-container a:hover {
    40         transition: all 0.1s ease-in-out;
    41         color: black;
     36.bp-hello-content ul,
     37.bp-hello-content ol {
     38        list-style: inherit;
    4239}
    4340
    44 #bp-hello-container .bp-hello-header h1 {
    45         line-height: 1.7;
    46         font-size: 21px;
    47         font-weight: 400;
    48 }
    49 
    50 .bp-hello-content p {
    51         font-size: 16px;
     41.bp-hello-content h3 {
     42        font-size: 1.1em;
     43        font-weight: 500;
    5244}
    5345
    5446/*------------------------------------------------------------------------------
    5547 * 2.0 - Dashicons
    5648 *----------------------------------------------------------------------------*/
    57 .bp-hello-close .button {
    58         padding: 5px !important;
    59 }
    60 
    61 .bp-hello-close .close-modal:before {
    62         content: "\f158";
    63         color: #23282d;
    64         /* wp toolbar */
    65         font: 400 1.5em/1 dashicons;
    66         speak: none;
    67         -webkit-font-smoothing: antialiased;
    68         -moz-osx-font-smoothing: grayscale;
    69         background-image: none !important;
    70 }
    71 
    72 .bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
    73         transition: all 0.1s ease-in-out;
    74         color: var(--bp-hello-color-primary);
    75 }
    76 
    7749.bp-hello-social li a:before {
    7850        color: #23282d;
    7951        /* wp toolbar */
    … … TABLE OF CONTENTS: 
    9769        content: "\f301";
    9870}
    9971
    100 /*------------------------------------------------------------------------------
    101  * 3.0 - Elements
    102  *----------------------------------------------------------------------------*/
    103 /*
    104  * 3.1 - Backdrop and container
    105  */
    106 #bp-hello-backdrop {
    107         position: fixed;
    108         top: 0;
    109         left: 0;
    110         right: 0;
    111         bottom: 0;
    112         z-index: 9998;
    113         display: none;
     72div.dashicons {
     73        width: -webkit-fit-content;
     74        width: fit-content;
    11475}
    11576
    116 #bp-hello-container {
    117         position: fixed;
    118         top: 0;
    119         bottom: 80px;
    120         z-index: 99999;
    121 }
    122 
    123 .bp-disable-scroll {
    124         overflow: hidden;
     77div.dashicons.big {
     78        font-size: 128px;
     79        display: block;
     80        color: var(--bp-hello-color-primary);
     81        height: 128px;
     82        width: 128px;
    12583}
    12684
     85/*------------------------------------------------------------------------------
     86 * 3.0 - Elements
     87 *----------------------------------------------------------------------------*/
    12788/*
    128  * 3.2 - Modal footer
     89 * 3.1 - Modal footer
    12990 */
    130 .bp-hello-footer {
     91#plugin-information-footer {
    13192        display: flex;
    13293        flex-wrap: wrap;
    133         height: 58px;
    134         max-height: 58px;
     94        padding: 0 16px;
     95        height: auto;
     96}
     97
     98#plugin-information-footer .dashicons-heart {
     99        color: #be3631;
    135100}
    136101
    137102.bp-hello-social-cta,
    … … TABLE OF CONTENTS: 
    156121}
    157122
    158123/*
    159  * 3.3 - Modal header
     124 * 3.2 - Modal content
    160125 */
    161 .bp-hello-header {
    162         height: 58px;
    163         max-height: 58px;
     126#bp-hello-container {
     127        display: none;
    164128}
    165129
    166 /*
    167  * 3.4 - Modal content
    168  */
    169130.bp-hello-content {
    170131        padding: 0 25px;
    171         height: calc(100% - 58px);
    172         overflow-y: auto;
    173         -webkit-overflow-scrolling: touch;
     132        padding-bottom: 20px;
    174133}
    175134
    176 /*------------------------------------------------------------------------------
    177  * 4.0 - Content styles
    178  *----------------------------------------------------------------------------*/
    179 /*
    180  * 4.1 - Backdrop and container
    181  */
    182 #bp-hello-backdrop {
    183         background-color: rgba(0, 0, 0, 0.8);
    184         transition: opacity 0.15s ease-out;
     135#dynamic-content {
     136        padding-bottom: 40px;
     137        display: none;
    185138}
    186139
    187 #bp-hello-container {
    188         background-color: white;
     140#dynamic-content.show {
     141        display: block;
    189142}
    190143
    191 /*
    192  * 4.2 - Footer content
    193  */
    194 .bp-hello-footer {
    195         border-radius: 0 0 3px 3px;
    196         background-color: white;
    197         border-top: 1px solid var(--bp-hello-color-secondary);
    198         padding: 6px 25px;
     144.plugin-details-modal #TB_title {
     145        /* stylelint-disable-line */
     146        height: 0;
     147        background: none;
     148        border: none;
    199149}
    200150
    201 .bp-hello-footer p {
    202         font-size: 15px;
     151#TB_window.plugin-details-modal.thickbox-loading:before {
     152        /* stylelint-disable-line */
     153        z-index: 10;
     154        margin-top: 40px;
     155        background-color: none;
    203156}
    204157
    205 .bp-hello-social-cta {
    206         text-align: left;
     158.bp-hello-aligncenter * {
     159        margin: 10px auto;
    207160}
    208161
    209 .bp-hello-social-links {
    210         text-align: right;
     162.bp-hello-alignleft {
     163        float: left;
    211164}
    212165
    213 .bp-hello-social li a {
    214         text-decoration: none;
     166.bp-hello-alignleft:after {
     167        content: "";
     168        clear: left;
    215169}
    216170
    217 /*
    218  * 4.3 - Header content
    219  */
    220 .bp-hello-header {
    221         padding: 6px 25px;
     171.bp-hello-alignright {
     172        float: right;
    222173}
    223174
    224 .bp-hello-header h1 {
    225         width: calc(100% - 51px);
     175.bp-hello-alignright:after {
     176        content: "";
     177        clear: right;
    226178}
    227179
    228 #bp-hello-container .bp-hello-header {
    229         border-bottom: 1px solid var(--bp-hello-color-secondary);
     180.bp-hello-divider {
     181        clear: both;
     182        border: none;
     183        margin-bottom: 20px;
    230184}
    231185
    232 .bp-hello-title {
     186/*------------------------------------------------------------------------------
     187 * 4.0 - Content styles
     188 *----------------------------------------------------------------------------*/
     189/*
     190 * 4.1 - Footer content
     191 */
     192.bp-hello-social-cta {
    233193        text-align: left;
    234194}
    235195
    236 .bp-hello-close {
    237         position: absolute;
    238         top: 20px;
    239         right: 25px;
     196.bp-hello-social-links {
    240197        text-align: right;
    241198}
    242199
     200.bp-hello-social li a {
     201        text-decoration: none;
     202}
     203
    243204/*
    244  * 4.4 - Content content
     205 * 4.2 - Header content
     206 */
     207#plugin-information-title.with-banner {
     208        background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     209}
     210
     211/*
     212 * 4.3 - Content content
    245213 */
    246214.bp-hello-content {
    247215        background-color: white;
    … … TABLE OF CONTENTS: 
    259227        width: 100%;
    260228}
    261229
     230.bp-hello-content .bp-hello-alignleft img,
     231.bp-hello-content .bp-hello-alignright img {
     232        max-width: 200px;
     233}
     234
    262235/*------------------------------------------------------------------------------
    263236 * 6.0 - Media Queries
    264237 *----------------------------------------------------------------------------*/
    … … TABLE OF CONTENTS: 
    266239 * 6.1 - Desktop Medium
    267240 */
    268241@media only screen and (min-width: 1024px) {
    269         #bp-hello-backdrop {
    270                 display: block;
    271         }
    272         #bp-hello-container {
    273                 position: fixed;
    274                 top: 60px;
    275                 left: var(--bp-hello-container-size);
    276                 right: var(--bp-hello-container-size);
    277                 bottom: 30px;
    278                 z-index: 9999;
    279                 border-radius: 3px;
    280         }
    281         #bp-hello-container .bp-hello-header h1 {
    282                 line-height: inherit;
    283         }
    284         .bp-hello-header {
    285                 height: auto;
    286                 max-height: inherit;
    287                 padding: 6px 30px;
    288         }
    289         .bp-hello-close {
    290                 right: 30px;
    291         }
    292         .bp-hello-close .close-modal:before {
    293                 line-height: 0.7;
    294         }
    295         .bp-hello-footer {
    296                 position: fixed;
    297                 left: var(--bp-hello-container-size);
    298                 right: var(--bp-hello-container-size);
    299                 bottom: 30px;
    300                 z-index: 10000;
    301                 height: auto;
    302                 max-height: inherit;
    303                 padding: 6px 30px;
    304         }
    305242        .bp-hello-content {
    306                 height: calc(100% - 90px);
    307                 padding: 0 30px;
     243                padding: 0 30px 20px;
    308244        }
    309245        .bp-hello-content p {
    310246                font-size: 14px;
    … … TABLE OF CONTENTS: 
    314250/**
    315251 * 6.2 - Desktop Large
    316252 */
    317 @media screen and (min-width: 1280px) {
    318         #bp-hello-container,
    319         .bp-hello-footer {
    320                 left: calc((100% - 896px) / 2);
    321                 right: calc((100% - 896px) / 2);
     253@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     254        #plugin-information-title.with-banner {
     255                background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
    322256        }
    323257}

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

    diff --git src/bp-core/admin/js/hello.js src/bp-core/admin/js/hello.js
index 5805472cd..f6d59aef1 100644
     
     1/* global bpHelloStrings */
    12/**
    23 * Loads for BuddyPress Hello in wp-admin for query string `hello=buddypress`.
    34 *
    45 * @since 3.0.0
    56 */
    6 (function() {
    7         /**
    8          * Open the BuddyPress Hello modal.
    9          */
    10         var bp_hello_open_modal = function() {
    11                 var backdrop = document.getElementById( 'bp-hello-backdrop' ),
    12                         modal = document.getElementById( 'bp-hello-container' );
    13 
    14                 document.body.classList.add( 'bp-disable-scroll' );
    15 
    16                 // Show modal and overlay.
    17                 backdrop.style.display = '';
    18                 modal.style.display    = '';
    19 
    20                 // Focus the "X" so bp_hello_handle_keyboard_events() works.
    21                 var focus_target = modal.querySelectorAll( 'a[href], button' );
    22                 focus_target     = Array.prototype.slice.call( focus_target );
    23                 focus_target[0].focus();
    24 
    25                 // Events.
    26                 modal.addEventListener( 'keydown', bp_hello_handle_keyboard_events );
    27                 backdrop.addEventListener( 'click', bp_hello_close_modal );
    28         };
     7(function( $, bp ) {
     8        // Bail if not set
     9        if ( typeof bpHelloStrings === 'undefined' ) {
     10                return;
     11        }
    2912
    3013        /**
    31          * Close modal if "X" or background is touched.
    32          *
    33          * @param {Event} event - A click event.
     14         * Open the BuddyPress Hello modal.
    3415         */
    35         document.addEventListener( 'click', function( event ) {
    36                 var backdrop = document.getElementById( 'bp-hello-backdrop' );
    37                 if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
    38                         return;
     16        var bpHelloOpenModal = function() {
     17                if ( 'function' !== typeof window.tb_show ) {
     18                        return false;
    3919                }
    4020
    41                 var backdrop_click    = backdrop.contains( event.target ),
    42                         modal_close_click = event.target.classList.contains( 'close-modal' );
    43 
    44                 if ( ! modal_close_click && ! backdrop_click ) {
    45                         return;
    46                 }
     21                window.tb_show( 'BuddyPress', '#TB_inline?inlineId=bp-hello-container' );
    4722
    48                 bp_hello_close_modal();
    49         }, false );
     23                $( '#TB_window' ).attr( {
     24                                                        'role': 'dialog',
     25                                                        'aria-label': bpHelloStrings.modalLabel
     26                                                } )
     27                                                .addClass( 'plugin-details-modal' )
     28                                                .removeClass( 'thickbox-loading' );
    5029
    51         /**
    52          * Close the Hello modal.
    53          */
    54         var bp_hello_close_modal = function() {
    55                 var backdrop = document.getElementById( 'bp-hello-backdrop' ),
    56                         modal = document.getElementById( 'bp-hello-container' );
    57 
    58                 document.body.classList.remove( 'bp-disable-scroll' );
    59 
    60                 // Remove modal and overlay.
    61                 modal.parentNode.removeChild( modal );
    62                 backdrop.parentNode.removeChild( backdrop );
     30                $( '#TB_ajaxContent' ).prop( 'style', 'height: 100%; width: auto; padding: 0; border: none;' );
    6331        };
    6432
    6533        /**
    66          * Restrict keyboard focus to elements within the BuddyPress Hello modal.
     34         * Prints an error message.
    6735         *
    68          * @param {Event} event - A keyboard focus event.
     36         * @param {string} message The error message to display.
    6937         */
    70         var bp_hello_handle_keyboard_events = function( event ) {
    71                 var modal = document.getElementById( 'bp-hello-container' ),
    72                         focus_targets = Array.prototype.slice.call(
    73                                 modal.querySelectorAll( 'a[href], button' )
    74                         ),
    75                         first_tab_stop = focus_targets[0],
    76                         last_tab_stop  = focus_targets[ focus_targets.length - 1 ];
    77 
    78                 // Check for TAB key press.
    79                 if ( event.keyCode !== 9 ) {
    80                         return;
     38        var printErrorMessage = function( message ) {
     39                if ( ! message ) {
     40                        message = bpHelloStrings.pageNotFound;
    8141                }
    8242
    83                 // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
    84                 if ( event.shiftKey && document.activeElement === first_tab_stop ) {
    85                         event.preventDefault();
    86                         last_tab_stop.focus();
    87 
    88                 // When TAB reaches last tab stop, go to first tab stop in modal.
    89                 } else if ( document.activeElement === last_tab_stop ) {
    90                         event.preventDefault();
    91                         first_tab_stop.focus();
    92                 }
     43                $( '#dynamic-content' ).html(
     44                        $('<div></div>' ).prop( 'id', 'message' )
     45                                        .addClass( 'notice notice-error error' )
     46                                        .html(
     47                                                $( '<p></p>' ).html( message )
     48                                        )
     49                );
    9350        };
    9451
    95         /**
    96          * Close modal if escape key is presssed.
    97          *
    98          * @param {Event} event - A keyboard focus event.
    99          */
    100         document.addEventListener( 'keyup', function( event ) {
    101                 if ( event.keyCode === 27 ) {
    102                         if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
    103                                 return;
    104                         }
    105 
    106                         bp_hello_close_modal();
     52        // Listen to Tab Menu clicks to display the different screens.
     53        $( '#plugin-information-tabs').on( 'click', 'a', function( event ) {
     54                event.preventDefault();
     55
     56                var anchor = $( event.currentTarget ), target = $( '#dynamic-content' );
     57
     58                if ( anchor.hasClass( 'dynamic' ) ) {
     59                        $( '#top-features' ).hide();
     60                        target.html( '' );
     61                        target.addClass( 'show' );
     62
     63                        $( '#TB_window' ).addClass( 'thickbox-loading' );
     64
     65                        bp.apiRequest( {
     66                                url: anchor.data( 'endpoint' ),
     67                                type: 'GET',
     68                                beforeSend: function( xhr, settings ) {
     69                                        settings.url = settings.url.replace( '&_wpnonce=none', '' );
     70                                },
     71                                data: {
     72                                        context: 'view',
     73                                        slug: anchor.data( 'slug' ),
     74                                        _wpnonce: 'none'
     75                                }
     76                        } ).done( function( data ) {
     77                                var page = _.first( data );
     78
     79                                if ( page && page.content ) {
     80                                        target.html( page.content.rendered );
     81                                } else {
     82                                        printErrorMessage();
     83                                }
     84
     85                        } ).fail( function( error ) {
     86                                if ( ! error || ! error.message ) {
     87                                        return false;
     88                                }
     89
     90                                printErrorMessage( error.message );
     91
     92                        } ).always( function() {
     93                                $( '#TB_window' ).removeClass( 'thickbox-loading' );
     94                        } );
     95
     96                } else {
     97                        $( '#top-features' ).show();
     98                        target.html( '' );
     99                        target.removeClass( 'show' );
    107100                }
    108         }, false );
     101        } );
    109102
    110103        // Init modal after the screen's loaded.
    111         if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
    112                 bp_hello_open_modal();
    113         } else {
    114                 document.addEventListener( 'DOMContentLoaded', bp_hello_open_modal );
    115         }
    116 }());
     104        $( document ).ready( function() {
     105                bpHelloOpenModal();
     106        } );
     107
     108}( jQuery, window.bp || {} ) );

  • src/bp-core/admin/sass/hello.scss 

    diff --git src/bp-core/admin/sass/hello.scss src/bp-core/admin/sass/hello.scss
index 96d6b0ec9..8a981870a 100644
    TABLE OF CONTENTS: 
    991.0 - Typography and colour
    10102.0 - Dashicons
    11113.0 - Elements
    12         3.1 - Backdrop and container
    13         3.2 - Modal footer
    14         3.3 - Modal header
    15         3.4 - Modal content
     12        3.1 - Modal footer
     13        3.2 - Modal content
    16144.0 - Content styles
    17         4.1 - Backdrop and container
    18         4.2 - Footer content
    19         4.3 - Header content
    20         4.4 - Content content
     15        4.1 - Footer content
     16        4.2 - Header content
     17        4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    2320        6.1 - Desktop Medium
    … … TABLE OF CONTENTS: 
    3330        --bp-hello-container-size: 15%;
    3431}
    3532
    36 #bp-hello-container {
    37 
    38         a {
    39                 color: var(--bp-hello-color-primary);
    40 
    41                 &:hover {
    42                         -webkit-transition: all 0.1s ease-in-out;
    43                         -o-transition: all 0.1s ease-in-out;
    44                         transition: all 0.1s ease-in-out;
    45                         color: rgb(0, 0, 0);
    46                 }
    47         }
    48 
    49         .bp-hello-header {
    50 
    51                 h1 {
    52                         line-height: 1.7;
    53                         font-size: 21px;
    54                         font-weight: 400;
    55                 }
    56         }
    57 }
    58 
    5933.bp-hello-content {
    6034
    6135        p {
    6236                font-size: 16px;
    6337        }
    64 }
    6538
    66 /*------------------------------------------------------------------------------
    67  * 2.0 - Dashicons
    68  *----------------------------------------------------------------------------*/
    69 .bp-hello-close {
    70 
    71         .button {
    72                 padding: 5px !important;
     39        ul,
     40        ol {
     41                list-style: inherit;
    7342        }
    7443
    75         .close-modal {
    76 
    77                 &:before {
    78                         content: "\f158";
    79                         color: #23282d; /* wp toolbar */
    80                         font: 400 1.5em/1 dashicons;
    81                         speak: none;
    82                         -webkit-font-smoothing: antialiased;
    83                         -moz-osx-font-smoothing: grayscale;
    84                         background-image: none !important;
    85                 }
    86 
    87                 &:focus:before,
    88                 &:hover:before {
    89                         -webkit-transition: all 0.1s ease-in-out;
    90                         -o-transition: all 0.1s ease-in-out;
    91                         transition: all 0.1s ease-in-out;
    92                         color: var(--bp-hello-color-primary);
    93                 }
     44        h3 {
     45                font-size: 1.1em;
     46                font-weight: 500;
    9447        }
    9548}
    9649
     50/*------------------------------------------------------------------------------
     51 * 2.0 - Dashicons
     52 *----------------------------------------------------------------------------*/
    9753.bp-hello-social {
    9854
    9955        li a {
    … … TABLE OF CONTENTS: 
    12480        }
    12581}
    12682
    127 /*------------------------------------------------------------------------------
    128  * 3.0 - Elements
    129  *----------------------------------------------------------------------------*/
    130 
    131 /*
    132  * 3.1 - Backdrop and container
    133  */
    134 #bp-hello-backdrop {
    135         position: fixed;
    136         top: 0;
    137         left: 0;
    138         right: 0;
    139         bottom: 0;
    140         z-index: 9998;
     83div.dashicons {
    14184
    142         display: none;
    143 }
     85        width: fit-content;
    14486
    145 #bp-hello-container {
    146         position: fixed;
    147         top: 0;
    148         bottom: 80px;
    149         z-index: 99999;
     87        &.big {
     88                font-size: 128px;
     89                display: block;
     90                color: var(--bp-hello-color-primary);
     91                height: 128px;
     92                width: 128px;
     93        }
    15094}
    15195
    152 .bp-disable-scroll {
    153         overflow: hidden;
    154 }
     96/*------------------------------------------------------------------------------
     97 * 3.0 - Elements
     98 *----------------------------------------------------------------------------*/
    15599
    156100/*
    157  * 3.2 - Modal footer
     101 * 3.1 - Modal footer
    158102 */
    159 .bp-hello-footer {
    160         display: -webkit-box;
    161         display: -ms-flexbox;
     103#plugin-information-footer {
     104
    162105        display: flex;
    163         -ms-flex-wrap: wrap;
    164106        flex-wrap: wrap;
     107        padding: 0 16px;
     108        height: auto;
    165109
    166         height: 58px;
    167         max-height: 58px;
     110        .dashicons-heart {
     111                color: #be3631;
     112        }
    168113}
    169114
    170115.bp-hello-social-cta,
    … … TABLE OF CONTENTS: 
    196141}
    197142
    198143/*
    199  * 3.3 - Modal header
     144 * 3.2 - Modal content
    200145 */
    201 .bp-hello-header {
    202         height: 58px;
    203         max-height: 58px;
     146
     147#bp-hello-container {
     148        display: none;
    204149}
    205150
    206 /*
    207  * 3.4 - Modal content
    208  */
    209151.bp-hello-content {
    210152        padding: 0 25px;
     153        padding-bottom: 20px;
     154}
     155
     156#dynamic-content {
     157        padding-bottom: 40px;
     158        display: none;
    211159
    212         // Force scrolling.
    213         height: calc(100% - 58px);
    214         overflow-y: auto;
    215         -webkit-overflow-scrolling: touch;
     160        &.show {
     161                display: block;
     162        }
    216163}
    217164
    218 /*------------------------------------------------------------------------------
    219  * 4.0 - Content styles
    220  *----------------------------------------------------------------------------*/
     165.plugin-details-modal #TB_title { /* stylelint-disable-line */
     166        height: 0;
     167        background: none;
     168        border: none;
     169}
    221170
    222 /*
    223  * 4.1 - Backdrop and container
    224  */
    225 #bp-hello-backdrop {
    226         background-color: rgba(0, 0, 0, 0.8);
    227         -webkit-transition: opacity 0.15s ease-out;
    228         -o-transition: opacity 0.15s ease-out;
    229         transition: opacity 0.15s ease-out;
     171#TB_window.plugin-details-modal.thickbox-loading:before { /* stylelint-disable-line */
     172        z-index: 10;
     173        margin-top: 40px;
     174        background-color: none;
    230175}
    231176
    232 #bp-hello-container {
    233         background-color: rgb(255, 255, 255);
     177.bp-hello-aligncenter * {
     178        margin: 10px auto;
    234179}
    235180
    236 /*
    237  * 4.2 - Footer content
    238  */
    239 .bp-hello-footer {
    240         border-radius: 0 0 3px 3px;
    241         background-color: rgb(255, 255, 255);
    242         border-top: 1px solid var(--bp-hello-color-secondary);
    243         padding: 6px 25px;
     181.bp-hello-alignleft {
     182        float: left;
    244183
    245         p {
    246                 font-size: 15px;
     184        &:after {
     185                content: "";
     186                clear: left;
     187        }
     188}
     189
     190.bp-hello-alignright {
     191        float: right;
     192
     193        &:after {
     194                content: "";
     195                clear: right;
    247196        }
    248197}
    249198
     199.bp-hello-divider {
     200        clear: both;
     201        border: none;
     202        margin-bottom: 20px;
     203}
     204
     205/*------------------------------------------------------------------------------
     206 * 4.0 - Content styles
     207 *----------------------------------------------------------------------------*/
     208
     209/*
     210 * 4.1 - Footer content
     211 */
    250212.bp-hello-social-cta {
    251213        text-align: left;
    252214}
    … … TABLE OF CONTENTS: 
    266228}
    267229
    268230/*
    269  * 4.3 - Header content
     231 * 4.2 - Header content
    270232 */
    271 .bp-hello-header {
    272         padding: 6px 25px;
    273 
    274         h1 {
    275                 width: calc(100% - 51px);  // Approx. width of "X" button block.
    276         }
    277 }
    278 
    279 #bp-hello-container {
    280 
    281         .bp-hello-header {
    282                 border-bottom: 1px solid var(--bp-hello-color-secondary);
    283         }
    284 }
    285 
    286 .bp-hello-title {
    287         text-align: left;
    288 }
    289 
    290 .bp-hello-close {
    291         position: absolute;
    292         top: 20px;
    293         right: 25px;
    294         text-align: right;
     233#plugin-information-title.with-banner {
     234        background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
    295235}
    296236
    297237/*
    298  * 4.4 - Content content
     238 * 4.3 - Content content
    299239 */
    300240.bp-hello-content {
    301241        background-color: rgb(255, 255, 255);
    … … TABLE OF CONTENTS: 
    314254        iframe {
    315255                width: 100%;
    316256        }
     257
     258        .bp-hello-alignleft img,
     259        .bp-hello-alignright img {
     260                max-width: 200px;
     261        }
    317262}
    318263
    319264/*------------------------------------------------------------------------------
    … … TABLE OF CONTENTS: 
    325270 */
    326271@media only screen and (min-width: 1024px) {
    327272
    328         #bp-hello-backdrop {
    329                 display: block;
    330         }
    331 
    332         #bp-hello-container {
    333                 position: fixed;
    334                 top: 60px;
    335                 left: var(--bp-hello-container-size);
    336                 right: var(--bp-hello-container-size);
    337                 bottom: 30px;
    338                 z-index: 9999;
    339 
    340                 border-radius: 3px;
    341 
    342                 .bp-hello-header {
    343 
    344                         h1 {
    345                                 line-height: inherit;
    346                         }
    347                 }
    348         }
    349 
    350         .bp-hello-header {
    351                 height: auto;
    352                 max-height: inherit;
    353                 padding: 6px 30px;
    354         }
    355 
    356         .bp-hello-close {
    357                 right: 30px;
    358 
    359                 .close-modal:before {
    360                         line-height: 0.7;
    361                 }
    362         }
    363 
    364         .bp-hello-footer {
    365                 position: fixed; // Fixed position above "content" div.
    366                 left: var(--bp-hello-container-size);
    367                 right: var(--bp-hello-container-size);
    368                 bottom: 30px;
    369                 z-index: 10000; // See #bp-hello-backdrop
    370 
    371                 height: auto;
    372                 max-height: inherit;
    373 
    374                 padding: 6px 30px;
    375         }
    376 
    377273        .bp-hello-content {
    378                 // Very very approx. height of header and footer.
    379                 height: calc(100% - 90px);
    380                 padding: 0 30px;
     274                padding: 0 30px 20px;
     275        }
    381276
    382                 p {
    383                         font-size: 14px;
    384                 }
     277        .bp-hello-content p {
     278                font-size: 14px;
    385279        }
    386280}
    387281
    388282/**
    389283 * 6.2 - Desktop Large
    390284 */
    391 @media screen and (min-width: 1280px) {
     285@media only screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
    392286
    393         #bp-hello-container,
    394         .bp-hello-footer {
    395                 // Approx. max-width of modal at Desktop Medium size.
    396                 left: calc((100% - 896px) / 2);
    397                 right: calc((100% - 896px) / 2);
     287        #plugin-information-title.with-banner {
     288                background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
    398289        }
    399290}

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

    diff --git src/bp-core/classes/class-bp-admin.php src/bp-core/classes/class-bp-admin.php
index 4f0bd257a..926d576c2 100644
    class BP_Admin { 
    536536        public function enqueue_scripts() {
    537537                wp_enqueue_style( 'bp-admin-common-css' );
    538538
    539                 // BuddyPress Hello
     539                // BuddyPress Hello.
    540540                if ( 0 === strpos( get_current_screen()->id, 'dashboard' ) && ! empty( $_GET['hello'] ) && $_GET['hello'] === 'buddypress' ) {
    541541                        wp_enqueue_style( 'bp-hello-css' );
    542542                        wp_enqueue_script( 'bp-hello-js' );
     543                        wp_localize_script( 'bp-hello-js', 'bpHelloStrings', array(
     544                                'pageNotFound' => __( 'Sorry, the page you requested was not found.', 'buddypress' ),
     545                                'modalLabel'   => __( 'Hello BuddyPress', 'buddypress' ),
     546                        ) );
    543547                }
    544548        }
    545549
    546550        /**
    547551         * Registers BuddyPress's suggested privacy policy language.
    548552         *
    549          * @since 3.x.y
     553         * @since 4.0.0
    550554         */
    551555        public function add_privacy_policy_content() {
    552556                // Nothing to do if we're running < WP 4.9.6.
    … … class BP_Admin { 
    617621                if ( 0 !== strpos( get_current_screen()->id, 'dashboard' ) || empty( $_GET['hello'] ) || $_GET['hello'] !== 'buddypress' ) {
    618622                        return;
    619623                }
    620         ?>
    621624
    622                 <div id="bp-hello-backdrop" style="display: none;">
    623                 </div>
     625                // Get BuddyPress stable version.
     626                $version      =  preg_replace( '/-.*/', '', bp_get_version() );
     627                $version_slug = 'version-' . str_replace( '.', '-', $version );
     628        ?>
    624629
    625                 <div id="bp-hello-container" role="dialog" aria-labelledby="bp-hello-title" style="display: none;">
    626                         <div class="bp-hello-header" role="document">
    627                                 <div class="bp-hello-close">
    628                                         <button type="button" class="close-modal button bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Close pop-up', 'buddypress' ); ?>">
    629                                                 <span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span>
    630                                         </button>
     630                <div id="bp-hello-container">
     631                        <div id="plugin-information-scrollable">
     632                                <div id='plugin-information-title' class="with-banner">
     633                                        <div class='vignette'></div>
     634                                        <h2>
     635                                                <?php printf(
     636                                                        /* translators: %s is the placehoder for the BuddyPress version number. */
     637                                                        esc_html__( 'BuddyPress %s', 'buddypress' ),
     638                                                        $version
     639                                                ); ?>
     640                                        </h2>
    631641                                </div>
    632 
    633                                 <div class="bp-hello-title">
    634                                         <h1 id="bp-hello-title" tabindex="-1"><?php echo esc_html( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
     642                                <div id="plugin-information-tabs">
     643                                        <a name="whats-new" href="#whats-new" class="current"><?php esc_html_e( 'What\'s new?', 'buddypress' ); ?></a>
     644                                        <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>
     645                                        <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>
    635646                                </div>
    636                         </div>
    637647
    638                         <div class="bp-hello-content">
    639                                 <h2><?php esc_html_e( 'New tools for data control and privacy', 'buddypress' ); ?></h2>
    640                                 <p>
    641                                         <?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' ); ?>
    642                                 </p>
    643 
    644                                 <figure class="bp-hello-alignright">
    645                                         <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' ); ?>" />
    646                                         <figcaption>
    647                                                 <?php esc_html_e( 'Improved user control over data exports', 'buddypress' ); ?>
    648                                         </figcaption>
    649                                 </figure>
    650 
    651                                 <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>
    652 
    653                                 <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>
    654 
    655                                 <h2><?php esc_html_e( 'Nouveau template improvements', 'buddypress' ); ?></h2>
    656                                 <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>
    657 
    658                                 <h2><?php esc_html_e( "BuddyPress: leaner, faster, stronger", 'buddypress' ); ?></h2>
    659                                 <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>
    660 
    661                                 <p><em>
    662                                         <?php
    663                                         printf(
    664                                                 __( 'To read the full list of features, fixes, and changes in this version of BuddyPress, <a href="%s">visit Trac</a>.', 'buddypress' ),
    665                                                 esc_url( 'https://buddypress.trac.wordpress.org/query?group=status&milestone=4.0' )
    666                                         );
    667                                         ?>
    668                                 </em></p>
    669 
    670                                 <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
    671                                 <p>
    672                                         <?php
    673                                         printf(
    674                                                 __( ' 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' ),
    675                                                 esc_url( 'https://buddypress.org/support/' )
    676                                         );
    677                                         ?>
    678                                 </p>
    679                                 <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
    680 
    681                                 <br /><br />
    682                         </div>
     648                                <div class="bp-hello-content">
     649                                        <div id="dynamic-content"></div>
     650                                        <div id="top-features">
     651                                                <h2><?php esc_html_e( 'Introducing the BP REST API', 'buddypress' ); ?></h2>
     652                                                <figure class="bp-hello-alignleft">
     653                                                        <div class="dashicons dashicons-rest-api big"></div>
     654                                                </figure>
     655                                                <p>
     656                                                        <?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' ); ?>
     657                                                </p>
     658                                                <p>
     659                                                        <?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' ); ?>
     660                                                        <?php printf(
     661                                                                /* translators: %s is the placehoder for the link to the BP REST API documentation site. */
     662                                                                esc_html__( 'Ready to get started with development? Check out the %s.', 'buddypress' ),
     663                                                                sprintf(
     664                                                                        '<a href="%1$s">%2$s</a>',
     665                                                                        'https://developer.buddypress.org/bp-rest-api/',
     666                                                                        esc_html__( 'BP REST API reference', 'buddypress' )
     667                                                                )
     668                                                        ); ?>
     669                                                </p>
     670
     671                                                <hr class="bp-hello-divider"/>
     672
     673                                                <h2><?php esc_html_e( 'A new interface for managing group members.', 'buddypress' ); ?></h2>
     674                                                <p>
     675                                                        <?php esc_html_e( 'The best way to show the power of the BP REST API is to start using it for one of our Core features.', 'buddypress' ); ?>
     676                                                </p>
     677                                                <figure class="bp-hello-aligncenter">
     678                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/manage-members-interface.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' ); ?>" />
     679                                                </figure>
     680                                                <p>
     681                                                        <?php esc_html_e( 'Group administrators will love our new interface for managing group membership. Whether you\'re working as a group admin on the front-end Manage tab, or as the site admin on the Dashboard, the new REST API-based tools are faster, easier to use, and more consistent.', 'buddypress' ); ?>
     682                                                </p>
     683
     684                                                <hr class="bp-hello-divider"/>
     685
     686                                                <h2><?php esc_html_e( 'Improved Group invites and membership requests.', 'buddypress' ); ?></h2>
     687                                                <figure class="bp-hello-alignright">
     688                                                        <div class="dashicons dashicons-buddicons-groups big"></div>
     689                                                </figure>
     690                                                <p>
     691                                                        <?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' ); ?>
     692                                                </p>
     693                                                <p>
     694                                                        <?php esc_html_e( 'The BP Invitations API abstracts how these two actions are handled and allows developers to use them for any object on your site (e.g., Sites of a WordPress network).', 'buddypress' ); ?>
     695                                                        <?php printf(
     696                                                                /* translators: %s is the placehoder for the link to the BP Invitations API development note. */
     697                                                                esc_html__( 'Read more about the %s.', 'buddypress' ),
     698                                                                sprintf(
     699                                                                        '<a href="%1$s">%2$s</a>',
     700                                                                        'https://bpdevel.wordpress.com/2019/09/16/new-invitations-api-coming-in-buddypress-5-0/',
     701                                                                        esc_html__( 'BP Invitations API', 'buddypress' )
     702                                                                )
     703                                                        ); ?>
     704                                                </p>
     705
     706                                                <hr class="bp-hello-divider"/>
     707
     708                                                <h2><?php esc_html_e( 'Help our support volunteers help you.', 'buddypress' ); ?></h2>
     709                                                <p>
     710                                                        <?php esc_html_e( 'Knowing your WordPress and 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' ); ?>
     711                                                </p>
     712                                                <figure class="bp-hello-aligncenter">
     713                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/site-health-buddypress-section.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress section of the Site Health Info Administration screen.', 'buddypress' ); ?>" />
     714                                                </figure>
     715                                                <p>
     716                                                        <?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' ); ?>
     717                                                </p>
     718
     719                                                <hr class="bp-hello-divider"/>
     720
     721                                                <h2><?php esc_html_e( 'Improved integrations with WordPress', 'buddypress' ); ?></h2>
     722                                                <figure class="bp-hello-aligncenter">
     723                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/bp-nouveau-improvements.png' );?>" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress members directory & Password control in Twenty Ninteen.', 'buddypress' ); ?>" />
     724                                                </figure>
     725
     726                                                <p>
     727                                                        <?php esc_html_e( 'In BuddyPress 5.0.0, the BP Nouveau template pack looks better than ever with the Twenty Nineteen theme.', 'buddypress' ); ?>
     728                                                        <?php esc_html_e( 'Nouveau also now uses the same password control as the one used in WordPress Core, for better consistency between BuddyPress and WordPress spaces.', 'buddypress' ); ?>
     729                                                </p>
     730
     731                                                <p>
     732                                                        <strong><?php esc_html_e( 'BuddyPress Blocks now have their own category into the Block Editor.', 'buddypress' ); ?></strong>
     733                                                </p>
     734                                                <figure class="bp-hello-aligncenter">
     735                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/buddypress-blocks-category.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress block category.', 'buddypress' ); ?>" />
     736                                                </figure>
     737                                                <p>
     738                                                        <?php esc_html_e( 'Developers building tools for the Block Editor can now add their blocks to the BuddyPress category. This change provides a foundation for organizing custom BuddyPress blocks.', 'buddypress' ); ?>
     739                                                        <?php printf(
     740                                                                /* translators: %s is the placehoder for the link to the blocks category development note. */
     741                                                                esc_html__( 'Read more about this feature in the %s.', 'buddypress' ),
     742                                                                sprintf(
     743                                                                        '<a href="%1$s">%2$s</a>',
     744                                                                        esc_url( 'https://bpdevel.wordpress.com/2019/07/31/a-category-to-store-your-buddypress-blocks/' ),
     745                                                                        esc_html__( 'development note', 'buddypress' )
     746                                                                )
     747                                                        ); ?>
     748                                                </p>
     749
     750                                                <hr class="bp-hello-divider"/>
     751
     752                                                <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
     753                                                <p>
     754                                                        <?php
     755                                                        printf(
     756                                                                /* translators: %s is the placehoder for the link to BuddyPress support forums. */
     757                                                                esc_html__( ' How are you using BuddyPress? Receiving your feedback and suggestions for future versions of BuddyPress genuinely motivates and encourages our contributors. Please %s about this version of BuddyPress on our website. ', 'buddypress' ),
     758                                                                sprintf(
     759                                                                        '<a href="%1$s">%2$s</a>',
     760                                                                        esc_url( 'https://buddypress.org/support/' ),
     761                                                                        esc_html__( 'share your feedback', 'buddypress' )
     762                                                                )
     763                                                        );
     764                                                        ?>
     765                                                </p>
     766                                                <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
    683767
    684                         <div class="bp-hello-footer">
     768                                                <br /><br />
     769                                        </div>
     770                                </div>
     771                        </div>
     772                        <div id="plugin-information-footer">
    685773                                <div class="bp-hello-social-cta">
    686774                                        <p>
    687775                                                <?php
    688776                                                printf(
    689                                                         _n( 'Built by <a href="%s">%s volunteer</a>.', 'Built by <a href="%s">%s volunteers</a>.', 35, 'buddypress' ),
     777                                                        _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' ),
     778                                                        '<span class="dashicons dashicons-heart"></span>',
    690779                                                        esc_url( bp_get_admin_url( 'admin.php?page=bp-credits' ) ),
    691780                                                        number_format_i18n( 35 )
    692781                                                );
    … … class BP_Admin { 
    10971186                        // 3.0
    10981187                        'bp-hello-css' => array(
    10991188                                'file'         => "{$url}hello{$min}.css",
    1100                                 'dependencies' => array( 'bp-admin-common-css' ),
     1189                                'dependencies' => array( 'bp-admin-common-css', 'thickbox' ),
    11011190                        ),
    11021191                ) );
    11031192
    … … class BP_Admin { 
    11401229                        // 3.0
    11411230                        'bp-hello-js' => array(
    11421231                                'file'         => "{$url}hello{$min}.js",
    1143                                 'dependencies' => array(),
     1232                                'dependencies' => array( 'thickbox', 'bp-api-request' ),
    11441233                                'footer'       => true,
    11451234                        ),
    11461235                ) );