Get WordPress

Make WordPress Core

Changeset 52442

Timestamp:
01/04/2022 07:11:24 PM (3 years ago)
Author:
ryelle
Message:

Administration: Refresh the Dashboard Welcome panel.

With its last major update in 3.5, the welcome panel was feeling stale. This bright new design showcases links to recent features, including patterns, the site editor, and styles, depending on whether you have a block theme active.

Props jameskoster, desrosj, noisysocks, critterverse, karmatosed, hellofromtonya, smit08, melchoyce, poena, audrasjb, webcommsat, marybaum.
See #54489.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r52406 r52442  
    824824}
    825825
    826 .welcome-panel .welcome-panel-close:hover:before,
    827 .welcome-panel .welcome-panel-close:focus:before,
    828826.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
    829827.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,

  • trunk/src/wp-admin/css/dashboard.css

    r51971 r52442  
    116116    overflow: auto;
    117117    margin: 16px 0;
    118     padding: 23px 10px 0;
    119     border: 1px solid #c3c4c7;
    120     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    121     background: #fff;
    122     font-size: 13px;
    123     line-height: 1.7;
     118    background: #3858e9 url(../images/about-texture.png) center repeat;
     119    background-size: 500px 500px;
     120    background-blend-mode: overlay;
     121    color: #fff;
     122    font-size: 14px;
     123    line-height: 1.3;
     124}
     125
     126.welcome-panel::before {
     127    content: "";
     128    position: absolute;
     129    top: -16px;
     130    right: 96px;
     131    z-index: 0;
     132    width: 300px;
     133    height: 382px;
     134    background: url(../images/about-header-about.svg) no-repeat center;
     135    background-size: contain;
    124136}
    125137
    126138.welcome-panel h2 {
    127139    margin: 0;
    128     font-size: 21px;
     140    font-size: 48px;
     141    font-weight: 600;
     142    line-height: 1.25;
     143    color: #fff;
     144}
     145
     146.welcome-panel h3 {
     147    margin: 0;
     148    font-size: 20px;
    129149    font-weight: 400;
    130     line-height: 1.2;
    131 }
    132 
    133 .welcome-panel h3 {
    134     margin: 1.33em 0 0;
    135     font-size: 16px;
    136 }
    137 
    138 .welcome-panel li {
    139     font-size: 14px;
     150    line-height: 1.4;
     151    color: #fff;
     152}
     153
     154.welcome-panel a {
     155    color: #fff;
    140156}
    141157
    142158.welcome-panel p {
    143     color: #646970;
    144 }
    145 
    146 .welcome-panel li a {
    147     text-decoration: none;
    148 }
    149 
    150 .welcome-panel .about-description {
    151     font-size: 16px;
    152     margin: 0;
     159    font-size: inherit;
     160    line-height: inherit;
     161}
     162
     163.welcome-panel-header p {
     164    margin: 0.5em 0 0;
     165    font-size: 20px;
     166    line-height: 1.4;
    153167}
    154168
    … …  
    157171    top: 10px;
    158172    right: 10px;
    159     padding: 10px 15px 10px 21px;
     173    padding: 10px 15px 10px 2px;
    160174    font-size: 13px;
    161175    line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
    … …  
    168182    left: 0;
    169183    transition: all .1s ease-in-out;
    170 }
    171 
     184    content: '\f335';
     185    font-size: 24px;
     186    color: #fff;
     187}
     188
     189.welcome-panel .welcome-panel-close:hover,
     190.welcome-panel .welcome-panel-close:focus,
     191.welcome-panel .welcome-panel-close:hover::before,
     192.welcome-panel .welcome-panel-close:focus::before {
     193    color: #f5e6ab;
     194}
     195
     196/* @deprecated 5.9.0 -- Button removed from panel. */
    172197.wp-core-ui .welcome-panel .button.button-hero {
    173198    margin: 15px 13px 3px 0;
    … …  
    179204
    180205.welcome-panel-content {
    181     margin-left: 13px;
     206    min-height: 400px;
     207    display: flex;
     208    flex-direction: column;
     209    justify-content: space-between;
     210}
     211
     212.welcome-panel-header {
     213    box-sizing: border-box;
     214    margin-left: auto;
     215    margin-right: auto;
    182216    max-width: 1500px;
     217
     218
     219
    183220}
    184221
    185222.welcome-panel .welcome-panel-column-container {
     223
     224
    186225    clear: both;
    187     position: relative;
    188 }
    189 
    190 .welcome-panel .welcome-panel-column {
    191     width: 32%;
    192     min-width: 200px;
    193     float: left;
    194 }
    195 
    196 .welcome-panel .welcome-panel-column:first-child {
    197     width: 36%;
    198 }
    199 
    200 .welcome-panel-column p.hide-if-no-customize {
    201     margin-top: 10px;
    202 }
    203 
    204 .welcome-panel-column p {
    205     margin-top: 7px;
    206     color: #3c434a;
    207 }
    208 
     226    display: grid;
     227    z-index: 1;
     228    margin-top: 32px;
     229    padding: 48px;
     230    grid-template-columns: repeat(3, 1fr);
     231    gap: 32px;
     232    align-self: flex-end;
     233    background: #3858e9;
     234}
     235
     236[class*="welcome-panel-icon"] {
     237    height: 60px;
     238    width: 60px;
     239    background-color: #1d35b4;
     240    background-position: center;
     241    background-size: 24px 24px;
     242    background-repeat: no-repeat;
     243    border-radius: 100%;
     244}
     245
     246.welcome-panel-column {
     247    display: grid;
     248    grid-template-columns: min-content 1fr;
     249    gap: 24px;
     250}
     251
     252.welcome-panel-icon-pages {
     253    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E");
     254}
     255
     256.welcome-panel-icon-layout {
     257    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E");
     258}
     259
     260.welcome-panel-icon-styles {
     261    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E");
     262}
     263
     264/* @deprecated 5.9.0 -- Section removed from welcome panel. */
    209265.welcome-panel .welcome-widgets-menus {
    210266    line-height: 1.14285714;
    211267}
    212268
     269
    213270.welcome-panel .welcome-panel-column ul {
    214271    margin: 0.8em 1em 1em 0;
    215272}
    216273
     274
     275
     276
     277
     278
     279
     280
     281
     282
     283
     284
    217285.welcome-panel .welcome-panel-column li {
    218286    line-height: 1.14285714;
    … …  
    221289}
    222290
     291
    223292.welcome-panel .welcome-icon {
    224293    background: transparent !important;
    … …  
    227296/* Welcome Panel and Right Now common Icons style */
    228297
     298
    229299.welcome-panel .welcome-icon:before,
    230300#dashboard_right_now li a:before,
    … …  
    245315/* Welcome Panel specific Icons styles */
    246316
     317
    247318.welcome-panel .welcome-write-blog:before,
    248319.welcome-panel .welcome-edit-page:before {
    … …  
    251322}
    252323
     324
    253325.welcome-panel .welcome-add-page:before {
    254326    content: "\f132";
    … …  
    256328}
    257329
     330
    258331.welcome-panel .welcome-setup-home:before {
    259332    content: "\f102";
    … …  
    261334}
    262335
     336
    263337.welcome-panel .welcome-view-site:before {
    264338    content: "\f115";
    … …  
    266340}
    267341
     342
    268343.welcome-panel .welcome-widgets-menus:before {
    269344    content: "\f116";
    … …  
    271346}
    272347
     348
    273349.welcome-panel .welcome-widgets:before {
    274350    content: "\f538";
    … …  
    276352}
    277353
     354
    278355.welcome-panel .welcome-menus:before {
    279356    content: "\f163";
    … …  
    281358}
    282359
     360
    283361.welcome-panel .welcome-comments:before {
    284362    content: "\f117";
    … …  
    286364}
    287365
     366
    288367.welcome-panel .welcome-learn-more:before {
    289368    content: "\f118";
    … …  
    11031182-------------------------------------------------------------- */
    11041183
     1184
     1185
     1186
     1187
     1188
     1189
     1190
     1191
     1192
     1193
     1194
     1195
    11051196/* one column on the dash */
    11061197@media only screen and (max-width: 799px) {
    … …  
    12141305
    12151306@media screen and (max-width: 870px) {
    1216     .welcome-panel .welcome-panel-column,
    1217     .welcome-panel .welcome-panel-column:first-child {
    1218         display: block;
    1219         float: none;
    1220         width: 100%;
    1221     }
    1222 
     1307    /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
    12231308    .welcome-panel .welcome-panel-column li {
    12241309        display: inline-block;
    … …  
    12261311    }
    12271312
     1313
    12281314    .welcome-panel .welcome-panel-column ul {
    12291315        margin: 0.4em 0 0;
    … …  
    12321318}
    12331319
     1320
     1321
     1322
     1323
     1324
     1325
     1326
     1327
     1328
     1329
    12341330@media screen and (max-width: 782px) {
    1235     #dashboard-widgets h2 {
    1236         padding: 12px;
    1237     }
    1238 
    1239     #dashboard_recent_comments #the-comment-list .comment-item .avatar {
    1240         height: 30px;
    1241         width: 30px;
    1242         margin: 4px 10px 5px 0;
    1243     }
    1244 
    1245     .community-events-toggle-location {
    1246         height: 38px;
    1247         vertical-align: baseline;
    1248     }
    1249 
    1250     .community-events-form .regular-text {
    1251         height: 32px;
    1252     }
    1253 
    1254     #community-events-submit {
    1255         margin-bottom: 0;
    1256         /* Override .wp-core-ui .button */
    1257         vertical-align: top;
    1258     }
    1259 
    1260     .community-events-form label,
    1261     #dashboard-widgets .community-events-cancel.button-link {
    1262         /* Same properties as the submit button for cross-browsers alignment. */
    1263         font-size: 14px;
    1264         line-height: normal;
    1265         height: auto;
    1266         padding: 6px 0;
    1267         border: 1px solid transparent;
    1268     }
    1269 
    1270     .community-events .spinner {
    1271         margin-top: 7px;
    1272     }
    1273 }
    1274 
    1275 /* Smartphone */
    1276 @media screen and (max-width: 600px) {
     1331    .welcome-panel::before {
     1332        width: 240px;
     1333        height: 305px;
     1334        right: 32px;
     1335    }
     1336
     1337    .welcome-panel-header {
     1338        /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
     1339        padding: 32px 288px 32px 32px;
     1340    }
     1341
     1342    .welcome-panel .welcome-panel-column-container {
     1343        grid-template-columns: 1fr;
     1344        box-sizing: border-box;
     1345        padding: 32px;
     1346        width: 100%;
     1347    }
     1348
     1349    .welcome-panel .welcome-panel-column-content {
     1350        max-width: 520px;
     1351    }
     1352
    12771353    /* Keep the close icon from overlapping the Welcome text. */
    12781354    .welcome-panel .welcome-panel-close {
    … …  
    12871363    }
    12881364
    1289     /* Make the close icon larger for tappability. */
    1290     .welcome-panel .welcome-panel-close:before {
    1291         font-size: 20px;
     1365    .welcome-panel .welcome-panel-close::before {
    12921366        top: 5px;
    12931367        left: -35px;
     1368
     1369
     1370
     1371
     1372
     1373
     1374
     1375
     1376
     1377
     1378
     1379
     1380
     1381
     1382
     1383
     1384
     1385
     1386
     1387
     1388
     1389
     1390
     1391
     1392
     1393
     1394
     1395
     1396
     1397
     1398
     1399
     1400
     1401
     1402
     1403
     1404
     1405
     1406
     1407
     1408
     1409
     1410
     1411
     1412
     1413
     1414
     1415
     1416
     1417
     1418
     1419
     1420
     1421
     1422
     1423
     1424
     1425
     1426
     1427
     1428
     1429
     1430
     1431
     1432
     1433
    12941434    }
    12951435}

  • trunk/src/wp-admin/includes/dashboard.php

    r52330 r52442  
    19911991 */
    19921992function wp_welcome_panel() {
    1993     $customize_url          = null;
    1994     $can_edit_theme_options = current_user_can( 'edit_theme_options' );
    1995     $can_customize          = current_user_can( 'customize' );
    1996     $is_block_theme         = wp_is_block_theme();
    1997 
    1998     if ( $is_block_theme && $can_edit_theme_options ) {
    1999         $customize_url = esc_url( admin_url( 'site-editor.php' ) );
    2000     } elseif ( ! $is_block_theme && $can_customize ) {
    2001         $customize_url = wp_customize_url();
    2002     }
     1993    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
     1994    $can_customize           = current_user_can( 'customize' );
     1995    $is_block_theme          = wp_is_block_theme();
    20031996    ?>
    20041997    <div class="welcome-panel-content">
    2005     <h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
    2006     <p class="about-description"><?php _e( 'We&#8217;ve assembled some links to get you started:' ); ?></p>
     1998    <div class="welcome-panel-header">
     1999        <h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
     2000        <p>
     2001            <a href="<?php echo esc_url( admin_url( 'about.php' ) ); ?>">
     2002            <?php
     2003                /* translators: %s: Current WordPress version. */
     2004                printf( __( 'Learn more about the %s version.' ), $display_version );
     2005            ?>
     2006            </a>
     2007        </p>
     2008    </div>
    20072009    <div class="welcome-panel-column-container">
    2008     <div class="welcome-panel-column">
    2009         <?php if ( $customize_url ) : ?>
    2010             <h3><?php _e( 'Get Started' ); ?></h3>
    2011             <a class="button button-primary button-hero load-customize hide-if-no-customize" href="<?php echo $customize_url; ?>"><?php _e( 'Customize Your Site' ); ?></a>
    2012         <?php endif; ?>
    2013         <a class="button button-primary button-hero hide-if-customize" href="<?php echo esc_url( admin_url( 'themes.php' ) ); ?>"><?php _e( 'Customize Your Site' ); ?></a>
    2014         <?php if ( current_user_can( 'install_themes' ) || ( current_user_can( 'switch_themes' ) && count( wp_get_themes( array( 'allowed' => true ) ) ) > 1 ) ) : ?>
    2015             <?php $themes_link = $can_customize && ! $is_block_theme ? add_query_arg( 'autofocus[panel]', 'themes', admin_url( 'customize.php' ) ) : admin_url( 'themes.php' ); ?>
    2016             <p class="hide-if-no-customize">
    2017                 <?php
    2018                     /* translators: %s: URL to Themes panel in Customizer or Themes screen. */
    2019                     printf( __( 'or, <a href="%s">change your theme completely</a>' ), $themes_link );
    2020                 ?>
    2021             </p>
    2022         <?php endif; ?>
    2023     </div>
    2024     <div class="welcome-panel-column">
    2025         <h3><?php _e( 'Next Steps' ); ?></h3>
    2026         <ul>
    2027         <?php if ( 'page' === get_option( 'show_on_front' ) && ! get_option( 'page_for_posts' ) ) : ?>
    2028             <li><?php printf( '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Edit your front page' ) . '</a>', get_edit_post_link( get_option( 'page_on_front' ) ) ); ?></li>
    2029             <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add additional pages' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
    2030         <?php elseif ( 'page' === get_option( 'show_on_front' ) ) : ?>
    2031             <li><?php printf( '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Edit your front page' ) . '</a>', get_edit_post_link( get_option( 'page_on_front' ) ) ); ?></li>
    2032             <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add additional pages' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
    2033             <li><?php printf( '<a href="%s" class="welcome-icon welcome-write-blog">' . __( 'Add a blog post' ) . '</a>', admin_url( 'post-new.php' ) ); ?></li>
    2034         <?php else : ?>
    2035             <li><?php printf( '<a href="%s" class="welcome-icon welcome-write-blog">' . __( 'Write your first blog post' ) . '</a>', admin_url( 'post-new.php' ) ); ?></li>
    2036             <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add an About page' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
    2037             <li><?php printf( '<a href="%s" class="welcome-icon welcome-setup-home">' . __( 'Set up your homepage' ) . '</a>', current_user_can( 'customize' ) ? add_query_arg( 'autofocus[section]', 'static_front_page', admin_url( 'customize.php' ) ) : admin_url( 'options-reading.php' ) ); ?></li>
    2038         <?php endif; ?>
    2039             <li><?php printf( '<a href="%s" class="welcome-icon welcome-view-site">' . __( 'View your site' ) . '</a>', home_url( '/' ) ); ?></li>
    2040         </ul>
    2041     </div>
    2042     <div class="welcome-panel-column welcome-panel-last">
    2043         <h3><?php _e( 'More Actions' ); ?></h3>
    2044         <ul>
    2045         <?php if ( current_theme_supports( 'widgets' ) ) : ?>
    2046             <li><?php printf( '<a href="%s" class="welcome-icon welcome-widgets">' . __( 'Manage widgets' ) . '</a>', admin_url( 'widgets.php' ) ); ?></li>
    2047         <?php endif; ?>
    2048         <?php if ( current_theme_supports( 'menus' ) ) : ?>
    2049             <li><?php printf( '<a href="%s" class="welcome-icon welcome-menus">' . __( 'Manage menus' ) . '</a>', admin_url( 'nav-menus.php' ) ); ?></li>
    2050         <?php endif; ?>
    2051         <?php if ( current_user_can( 'manage_options' ) ) : ?>
    2052             <li><?php printf( '<a href="%s" class="welcome-icon welcome-comments">' . __( 'Turn comments on or off' ) . '</a>', admin_url( 'options-discussion.php' ) ); ?></li>
    2053         <?php endif; ?>
    2054             <li><?php printf( '<a href="%s" class="welcome-icon welcome-learn-more">' . __( 'Learn more about getting started' ) . '</a>', __( 'https://wordpress.org/support/article/first-steps-with-wordpress/' ) ); ?></li>
    2055         </ul>
    2056     </div>
     2010        <div class="welcome-panel-column">
     2011            <div class="welcome-panel-icon-pages"></div>
     2012            <div class="welcome-panel-column-content">
     2013                <h3><?php _e( 'Author rich content with blocks and patterns' ); ?></h3>
     2014                <p><?php _e( 'Block patterns are pre-configured block layouts. Use them to get inspired or create new pages in a flash.' ); ?></p>
     2015                <a href="<?php echo esc_url( admin_url( 'post-new.php?post_type=page' ) ); ?>"><?php _e( 'Add a new page' ); ?></a>
     2016            </div>
     2017        </div>
     2018        <div class="welcome-panel-column">
     2019            <div class="welcome-panel-icon-layout"></div>
     2020            <div class="welcome-panel-column-content">
     2021            <?php if ( $is_block_theme ) : ?>
     2022                <h3><?php _e( 'Customize your entire site with block themes' ); ?></h3>
     2023                <p><?php _e( 'Design everything on your site &#8212; from the header down to the footer, all using blocks and patterns.' ); ?></p>
     2024                <a href="<?php echo esc_url( admin_url( 'site-editor.php' ) ); ?>"><?php _e( 'Open site editor' ); ?></a>
     2025            <?php else : ?>
     2026                <h3><?php _e( 'Start Customizing' ); ?></h3>
     2027                <p><?php _e( 'Configure your site&#8217;s logo, header, menus, and more in the Customizer.' ); ?></p>
     2028                <?php if ( $can_customize ) : ?>
     2029                    <a class="load-customize hide-if-no-customize" href="<?php echo wp_customize_url(); ?>"><?php _e( 'Open the Customizer' ); ?></a>
     2030                <?php endif; ?>
     2031            <?php endif; ?>
     2032            </div>
     2033        </div>
     2034        <div class="welcome-panel-column">
     2035            <div class="welcome-panel-icon-styles"></div>
     2036            <div class="welcome-panel-column-content">
     2037            <?php if ( $is_block_theme ) : ?>
     2038                <h3><?php _e( 'Switch up your site&#8217;s look & feel with Styles' ); ?></h3>
     2039                <p><?php _e( 'Tweak your site, or give it a whole new look! Get creative &#8212; how about a new color palette or font?' ); ?></p>
     2040                <a href="<?php echo esc_url( admin_url( 'site-editor.php?styles=open' ) ); ?>"><?php _e( 'Edit styles' ); ?></a>
     2041            <?php else : ?>
     2042                <h3><?php _e( 'Discover a new way to build your site.' ); ?></h3>
     2043                <p><?php _e( 'There&#8217;s a new kind of WordPress theme, called a block theme, that lets you build the site you&#8217;ve always wanted &#8212; with blocks and styles.' ); ?></p>
     2044                <a href="<?php echo esc_url( __( 'https://wordpress.org/support/article/block-themes/' ) ); ?>"><?php _e( 'Learn about block themes' ); ?></a>
     2045            <?php endif; ?>
     2046            </div>
     2047        </div>
    20572048    </div>
    20582049    </div>
Note: See TracChangeset for help on using the changeset viewer.