WordPress.org

Make WordPress Core

Ticket #49295: 49295.5.diff

File 49295.5.diff, 24.2 KB (added by ryelle, 3 weeks ago)
  • src/wp-admin/about.php

    diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
    index 730ce6b28d..1feb113f15 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    2121                <div class="about__header">
    2222                        <div class="about__header-title">
    2323                                <h1>
    24                                         <span><?php echo $display_version; ?></span>
    2524                                        <?php _e( 'WordPress' ); ?>
     25                                        <span><?php echo $display_version; ?></span>
    2626                                </h1>
    2727                        </div>
    2828
    29                         <div class="about__header-badge"></div>
    30 
    3129                        <div class="about__header-text">
    3230                                <p>
    3331                                        <?php _e( 'Building more with blocks, faster and easier.' ); ?>
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    4240                        </nav>
    4341                </div>
    4442
    45                 <div class="about__section is-feature">
    46                         <?php _e( 'Say hello to more and better.' ); ?>
    47                         <br />
    48                         <?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever&mdash;and boosts in speed you can feel.' ); ?>
     43                <div class="about__section is-feature has-accent-background-color">
     44                        <p><?php _e( 'Say hello to more and better.' ); ?></p>
     45                        <p><?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever&mdash;and boosts in speed you can feel.' ); ?></p>
    4946                </div>
    5047
    51                 <div class="about__section is-feature">
    52                         <p>
     48                <hr />
     49
     50                <div class="about__section has-2-columns has-subtle-background-color">
     51                        <h2 class="is-section-header">
    5352                                <?php
    54                                 printf(
    55                                         /* translators: %s: The current WordPress version number. */
    56                                         __( 'Welcome to WordPress %s.' ),
    57                                         $display_version
    58                                 );
     53                                        printf(
     54                                                /* translators: %s: The current WordPress version number. */
     55                                                __( 'Welcome to WordPress %s.' ),
     56                                                $display_version
     57                                        );
    5958                                ?>
    60                         </p>
    61                         <p>
    62                                 <?php _e( 'Every major release adds more to the block editor.' ); ?>
    63                         </p>
    64                         <p>
    65                                 <?php _e( 'More ways to make posts and pages come alive with your best images.' ); ?>
    66                         </p>
    67                         <p>
    68                                 <?php _e( 'More ways to bring your visitors in, and keep them engaged, with the richness of embedded media from the web&#8217;s top services.' ); ?>
    69                         </p>
    70                         <p>
    71                                 <?php _e( 'More ways to make your vision real, and put blocks in the perfect place&mdash;even if a particular kind of block is new to you. More efficient processes.' ); ?>
    72                         </p>
    73                         <p>
    74                                 <?php _e( 'And more speed everywhere, so as you build sections or galleries, or just type in a line of prose, you can feel how much faster your work flows.' ); ?>
    75                         </p>
     59                        </h2>
     60                        <div class="column">
     61                                <p>
     62                                        <?php _e( 'Every major release adds more to the block editor.' ); ?>
     63                                </p>
     64                                <p>
     65                                        <?php _e( 'More ways to make posts and pages come alive with your best images.' ); ?>
     66                                        <?php _e( 'More ways to bring your visitors in, and keep them engaged, with the richness of embedded media from the web&#8217;s top services.' ); ?>
     67                                </p>
     68                        </div>
     69                        <div class="column">
     70                                <p>
     71                                        <?php _e( 'More ways to make your vision real, and put blocks in the perfect place&mdash;even if a particular kind of block is new to you. More efficient processes.' ); ?>
     72                                </p>
     73                                <p>
     74                                        <?php _e( 'And more speed everywhere, so as you build sections or galleries, or just type in a line of prose, you can feel how much faster your work flows.' ); ?>
     75                                </p>
     76                        </div>
    7677                </div>
    7778
    7879                <hr />
    7980
    8081                <div class="about__section has-2-columns">
    81                         <div class="column is-edge-to-edge has-accent-background-color">
     82                        <div class="column is-edge-to-edge">
    8283                                <div class="about__image aligncenter">
    83                                         <img src="data:image/svg+xml;charset=utf8,%3Csvg width='660' height='818' viewbox='0 0 660 818' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='99' y='178' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='231' y='310' width='99' height='99' fill='%2344141E'/%3E%3Crect x='330' y='409' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='462' y='541' width='99' height='99' fill='%2344141E'/%3E%3C/svg%3E" alt="" />
     84                                        <img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h500v500H0z'/%3E%3Cpath d='M346.7 37.645s100.5-2.8 102.6 0c2.1 2.8 0 124.999 0 124.999l-106.9 2.8 4.3-127.8z' fill='%232CA8EB'/%3E%3Cpath d='M343.5 185.844s100.5-1.9 102.6 0c2.1 1.9 1.1 125.9 4.3 127.8 3.2 1.9-100.5 1.9-104.8 2.8-4.3.9-2.1-130.6-2.1-130.6z' fill='%237CAED2'/%3E%3Cpath d='M195.6 186.744s102.7 2.8 106.9 2.8c4.2 0 7.4 120.4 4.2 122.2-3.2 1.9-106.9 2.8-106.9 2.8s2.1-126.9-4.2-127.8z' fill='%2381A4D4'/%3E%3Cpath d='M152.8 192.344s2.1 124.1 4.3 126.9c2.1 2.7-109.1 1.8-109.1 1.8v-128.7h104.8z' fill='%235DC3D8'/%3E%3Cpath d='M152 464.544H56v-119.8l101-1.7s-8.9 118-5 121.5z' fill='%230574E2'/%3E%3Cpath d='M195 35.844h101.6s-8.6 119.4 0 125c8.6 5.6-101.6 3.7-101.6 3.7v-128.7z' fill='%23216BCE'/%3E%3Cpath d='M302.3 463.844s-102.9 2.8-105.1 0c-2.2-2.8 0-125 0-125l109.5-2.8-4.4 127.8z' fill='%231C99D1'/%3E%3Cpath d='M346.2 464.544s-2.1-124.1-4.3-126.9c-2.1-2.8 109.1-1.9 109.1-1.9v128.7H346.2v.1z' fill='%231B44DD'/%3E%3Cpath d='M50.2 35.844s100.5-1.9 102.6 0c2.1 1.9 1.1 125.9 4.3 127.8 3.2 1.9-100.5 1.9-104.8 2.8-4.3.9-2.1-130.6-2.1-130.6z' fill='%231B36BC'/%3E%3C/svg%3E" alt="" />
    8485                                </div>
    8586                        </div>
    8687                        <div class="column is-vertically-aligned-center">
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    104105                                        <li><?php _e( 'Tips are gone. In their place, a Welcome Guide window you can bring up when you need it&mdash;and only when you need it&mdash;again and again.' ); ?></li>
    105106                                        <li><?php _e( 'Know at a glance whether you&#8217;re in a block&#8217;s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you&#8217;re in.' ); ?></li>
    106107                                </ul>
    107                                 <p><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></p>
     108                                <p><em><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></em></p>
    108109                        </div>
    109                         <div class="column is-edge-to-edge has-accent-background-color">
     110                        <div class="column is-edge-to-edge">
    110111                                <div class="about__image aligncenter">
    111                                         <img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='75' y='200' width='150' height='75' fill='%2344141E'/%3E%3Crect x='175' y='75' width='50' height='100' fill='%2385273B'/%3E%3Crect x='75' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='250' y='200' width='175' height='75' fill='%2344141E'/%3E%3Crect x='350' y='75' width='75' height='100' fill='%2385273B'/%3E%3Crect x='250' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='75' y='375' width='150' height='50' fill='%2344141E'/%3E%3Crect x='175' y='300' width='50' height='50' fill='%2385273B'/%3E%3Crect x='75' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3Crect x='250' y='372.5' width='175' height='52.5' fill='%2344141E'/%3E%3Crect x='350' y='300' width='75' height='50' fill='%2385273B'/%3E%3Crect x='250' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3C/svg%3E%0A" alt="">
     112                                        <img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h500v500H0z'/%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M169.6 171.55l-.3 72.3 330.7-1v-72.6l-330.4 1.3z' fill='%230740B3'/%3E%3Cpath d='M291.2 97.85l-1.3-14.8-63.4-.7v76c0 3.6 176.7 4.1 273.5 4.1v-64.5H291.2v-.1z' fill='%230285D7'/%3E%3Cpath d='M500 27.75l-215.5-5.9 5.4 61.2 210.1 2.5v-57.8z' fill='%231730E5'/%3E%3Cpath d='M500 97.85v-12.3l-210.1-2.5 1.3 14.8H500z' fill='%230285D7'/%3E%3Cpath d='M500 97.85v-12.3l-210.1-2.5 1.3 14.8H500z' fill='%231730E5' style='mix-blend-mode:multiply'/%3E%3Cpath d='M255.2 379.75l-1-49.2-229.2.3-2 69.7 477-1.3v-24.3l-244.8 4.8z' fill='%230285D7'/%3E%3Cpath d='M500 424.35v-15l-430.8 1.2-4 51.5 134.6-.5v-34.4c.1-2.8 214.4-2.9 300.2-2.8z' fill='%230878FF'/%3E%3Cpath d='M500 290.05l-246.4 4.3.6 36.2 245.8-.3v-40.2z' fill='%23072CF0'/%3E%3Cpath d='M500 374.95v-44.7l-245.8.3 1 49.2 244.8-4.8z' fill='%230285D7'/%3E%3Cpath d='M500 374.95v-44.7l-245.8.3 1 49.2 244.8-4.8z' fill='%23072CF0' style='mix-blend-mode:multiply'/%3E%3Cpath d='M199.9 461.55v17.6l300.1-2.4v-16.3l-300.1 1.1z' fill='%230285D7'/%3E%3Cpath d='M500 424.35c-85.8-.1-300.1 0-300.1 2.8v34.4l300.1-1.1v-36.1z' fill='%230878FF'/%3E%3Cpath d='M500 424.35c-85.8-.1-300.1 0-300.1 2.8v34.4l300.1-1.1v-36.1z' fill='%230285D7' style='mix-blend-mode:multiply'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath transform='rotate(-90 23 479.15)' fill='%23fff' d='M23 479.15h457.3v477H23z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" alt="">
    112113                                </div>
    113114                        </div>
    114115                </div>
    115116
    116117                <div class="about__section has-2-columns">
    117                         <div class="column is-edge-to-edge has-accent-background-color">
     118                        <div class="column is-edge-to-edge">
    118119                                <div class="about__image aligncenter">
    119                                         <img src="data:image/svg+xml;charset=utf8,%3Csvg width='660' height='818' viewbox='0 0 660 818' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='99' y='178' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='231' y='310' width='99' height='99' fill='%2344141E'/%3E%3Crect x='330' y='409' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='462' y='541' width='99' height='99' fill='%2344141E'/%3E%3C/svg%3E" alt="" />
     120                                        <img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h500v500H0z'/%3E%3Cpath d='M31.3 284.4c-2-.1 12.2-250.6 12.2-250.6s94.8 4.4 99.7 5.2c.3 21.8 4.1 250.1 4.1 250.1l-116-4.7z' fill='%231730E5'/%3E%3Cpath d='M346.8 467.4l-11.7-305.9 138.2 2.4-3 304.1-123.5-.6z' fill='%230840B3'/%3E%3Cpath d='M287.7 34.9c2.3 0 5.9 398.5 5.9 398.5s-109.6-2.2-115 .6c-5.4 2.8 10.6-400.5 10.6-400.5l98.5 1.4z' fill='%23018BDE'/%3E%3Cpath d='M372.3 138c32.585 0 59-26.415 59-59s-26.415-59-59-59-59 26.415-59 59 26.415 59 59 59z' fill='%23062EF7'/%3E%3Cpath d='M35.8 315c-12.8 0-24.9 2.9-35.8 8.1v148.7c10.8 5.2 22.9 8.1 35.8 8.1 45.6 0 82.5-36.9 82.5-82.5S81.3 315 35.8 315z' fill='%231C87C0'/%3E%3C/svg%3E" alt="" />
    120121                                </div>
    121122                        </div>
    122123                        <div class="column is-vertically-aligned-center">
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    133134
    134135                <hr />
    135136
    136                 <div class="about__section has-2-columns has-subtle-background-color">
    137                         <h2 class="is-section-header"><?php _e( 'Just for developers' ); ?></h2>
     137                <div class="about__section ">
     138                        <div class="column has-subtle-background-color">
     139                                <h2 class="is-section-header"><?php _e( 'Just for developers' ); ?></h2>
     140                        </div>
     141                </div>
     142
     143                <hr class="is-small" />
     144
     145                <div class="about__section">
     146                        <div class="about__image aligncenter">
     147                                <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='500' viewbox='0 0 1000 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M761 360.917H428v66.8h333v-66.8z' fill='%230574E2'/%3E%3Cpath d='M921 399.801H592.2v99.7H921v-99.7z' fill='%231C99D1'/%3E%3Cpath d='M288.1 378.963c46.392 0 84-37.496 84-83.749 0-46.253-37.608-83.748-84-83.748s-84 37.495-84 83.748c0 46.253 37.608 83.749 84 83.749z' fill='%230F7DEA'/%3E%3Cpath d='M553.3 191.426H272.5v85.742h280.8v-85.742z' fill='%231730E5'/%3E%3Cpath d='M785 151.545H499.4v77.169H785v-77.169z' fill='%231C99D1'/%3E%3Cpath d='M777.3 284.247c50.258 0 91-40.62 91-90.728 0-50.107-40.742-90.727-91-90.727s-91 40.62-91 90.727c0 50.108 40.742 90.728 91 90.728z' fill='%231826D3'/%3E%3Cpath d='M635 33.898H413v101.695h222V33.898zM1000 303.091H708v76.769h292v-76.769zM366 102.692H0v66.799h366v-66.799z' fill='%230574E2'/%3E%3Cpath d='M275 24.925H96v93.719h179V24.925z' fill='%231C99D1'/%3E%3Cpath d='M861 0H573v66.8h288V0z' fill='%231730E5'/%3E%3Cpath d='M436 440.678c35.346 0 64-28.568 64-63.809 0-35.24-28.654-63.808-64-63.808-35.346 0-64 28.568-64 63.808 0 35.241 28.654 63.809 64 63.809z' fill='%23236FE8'/%3E%3Cpath d='M428 449.651H171.4V500H428v-50.349z' fill='%231C99D1'/%3E%3Cpath d='M318 404.786H77v63.908h241v-63.908z' fill='%231826D3'/%3E%3Cpath d='M818 258.225H600v73.281h218v-73.281zM613 117.647H456v93.719h157v-93.719zM96.1 198.604c18.833 0 34.1-15.221 34.1-33.998 0-18.776-15.267-33.998-34.1-33.998-18.833 0-34.1 15.222-34.1 33.998 0 18.777 15.267 33.998 34.1 33.998z' fill='%231C99D1'/%3E%3C/svg%3E" alt="">
     148                        </div>
     149                </div>
     150
     151                <hr class="is-small" />
    138152
     153                <div class="about__section has-2-columns">
    139154                        <div class="column">
    140155                                <h3><?php _e( 'Add custom fields to menu items—natively' ); ?></h3>
    141156                                <p>
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    174189                        </div>
    175190                </div>
    176191
    177                 <div class="about__section is-feature">
    178                         <p>
    179                                 <?php
    180                                 printf(
    181                                         /* translators: %s: WordPress 5.4 Field Guide link. */
    182                                         __( 'There&#8217;s lots more for developers to love in WordPress 5.4. To discover more and learn how to make these changes shine on your on your sites, themes, plugins and more, check the <a href="%s">WordPress 5.4 Field Guide</a>.' ),
    183                                         'https://make.wordpress.org/core/?p=80034'
    184                                 );
    185                                 ?>
    186                         </p>
     192                <hr class="is-small" />
     193
     194                <div class="about__section">
     195                        <div class="column">
     196                                <p>
     197                                        <?php
     198                                        printf(
     199                                                /* translators: %s: WordPress 5.4 Field Guide link. */
     200                                                __( 'There&#8217;s lots more for developers to love in WordPress 5.4. To discover more and learn how to make these changes shine on your on your sites, themes, plugins and more, check the <a href="%s">WordPress 5.4 Field Guide</a>.' ),
     201                                                'https://make.wordpress.org/core/?p=80034'
     202                                        );
     203                                        ?>
     204                                </p>
     205                        </div>
    187206                </div>
    188207
    189208                <hr />
  • src/wp-admin/credits.php

    diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php
    index d7ecddb1fd..60b1ebb004 100644
    a b $credits = wp_credits(); 
    2323        <div class="about__header">
    2424                <div class="about__header-title">
    2525                        <h1>
    26                                 <span><?php echo $display_version; ?></span>
    2726                                <?php _e( 'WordPress' ); ?>
     27                                <span><?php echo $display_version; ?></span>
    2828                        </h1>
    2929                </div>
    3030
    31                 <div class="about__header-badge"></div>
    32 
    3331                <div class="about__header-text">
    3432                        <p>
    3533                                <?php _e( 'Building more with blocks, faster and easier.' ); ?>
    $credits = wp_credits(); 
    6967                </div>
    7068
    7169                <div class="about__image aligncenter">
    72                         <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1320' height='350' viewbox='0 0 1320 350' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 61 220)' fill='%23321017'/%3E%3Crect width='72' height='250' transform='matrix(1 0 0 -1 166 300)' fill='%23BD3854'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 272 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 378 220)' fill='%235F1B29'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 483 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 587 220)' fill='%235F1B29'/%3E%3Crect width='71.28' height='250' transform='matrix(1 0 0 -1 689 300)' fill='%23BD3854'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 884 220)' fill='%235F1B29'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 789 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 985 220)' fill='%23321017'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 1084 220)' fill='%235F1B29'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 1179 220)' fill='%233D0F19'/%3E%3C/svg%3E%0A" alt="" />
     70                        <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='300' viewbox='0 0 1000 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h1000v300H0z'/%3E%3Cpath style='mix-blend-mode:multiply' d='M39.6 140.22l931.1 3.36.8 76.5-929.5 6.6-2.4-86.46z' fill='%23216DD2'/%3E%3Cpath style='mix-blend-mode:multiply' d='M963.7 275.14s-.9-59.58-1-64.14c-.1-4.2-932.3 1.74-932.3 1.74L29 268.48v8.4' fill='%237FCDE6'/%3E%3Cpath style='mix-blend-mode:multiply' d='M958 73.32L47.8 70.26l1.2 78.66 907.3 4.26 1.7-79.86z' fill='%23072CF0'/%3E%3Cpath style='mix-blend-mode:multiply' d='M34 91.32l910.4-2.16L939.2 21 33.3 23.82l.7 67.5z' fill='%230188D9'/%3E%3C/svg%3E" alt="" />
    7371                </div>
    7472        </div>
    7573
  • src/wp-admin/css/about.css

    diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
    index c77f5e54b0..e0164a1d64 100644
    a b  
    2020
    2121.about__container {
    2222        /* Section backgrounds */
    23         --background: #f4efe1;
    24         --subtle-background: #d7d2c5;
     23        --background: #f3f4f5;
     24        --subtle-background: #bde7f0;
    2525        /* Main text color */
    26         --text: #413e38;
     26        --text: #32373c;
     27        --text-light: #f3f4f5;
    2728        /* Navigation colors. */
    28         --nav-background: #fefcf7;
    29         --nav-color: #716d64;
     29        --nav-background: #216bce;
     30        --nav-border: #1730e5;
     31        --nav-color: #f3f4f5;
    3032        /* Reds, used as accents & in header. */
    31         --accent-1: #bd3854;
    32         --accent-2: #5f1b29;
    33         --accent-3: #321017;
     33        --accent-1: #1730e5;
     34        --accent-2: #216bce;
     35        --accent-3: #bde7f0;
    3436}
    3537
    3638/*------------------------------------------------------------------------------
     
    9597}
    9698
    9799.about__section {
    98         background: #F4EFE1;
     100        background: #f3f4f5;
    99101        background: var(--background);
    100102}
    101103
    102104.about__container .has-accent-background-color {
    103         background-color: #BD3854;
     105        color: #f3f4f5;
     106        color: var(--text-light);
     107        background-color: #1730e5;
    104108        background-color: var(--accent-1);
    105109}
    106110
    107111.about__container .has-subtle-background-color {
    108         background-color: #D7D2C5;
     112        background-color: #bde7f0;
    109113        background-color: var(--subtle-background);
    110114}
    111115
     
    123127        padding: 0;
    124128}
    125129
     130.about__section .column p:first-of-type {
     131        margin-top: 0;
     132}
     133
    126134.about__section .column p:last-of-type {
    127135        margin-bottom: 0;
    128136}
     
    132140        padding: 32px 32px 0;
    133141}
    134142
     143/* Section header is alone in a container. */
     144.about__section .is-section-header:first-child:last-child {
     145        padding: 0;
     146}
     147
    135148.about__section.is-feature {
    136149        padding: 32px;
    137150}
     
    140153        margin: 0;
    141154}
    142155
     156.about__section.is-feature p + p {
     157        margin-top: 1rem;
     158}
     159
    143160.about__section.has-2-columns,
    144161.about__section.has-3-columns,
    145162.about__section.has-4-columns {
     
    306323}
    307324
    308325.about__section a {
    309         color: #5f1b29;
     326        color: #1730e5;
     327        color: var(--accent-1);
    310328        text-decoration: underline;
    311329}
    312330
     
    356374        border: none;
    357375}
    358376
     377.about__container hr.is-small {
     378        height: 8px;
     379}
     380
    359381.about__container div.updated,
    360382.about__container div.error,
    361383.about__container .notice {
     
    369391.about__section.is-feature {
    370392        font-size: 1.6em;
    371393        font-weight: 600;
     394        text-align: center;
    372395}
    373396
    374397@media screen and (max-width: 782px) {
     
    397420        grid-template-columns: 1fr 1fr;
    398421        -ms-grid-rows: 1fr 1fr;
    399422        grid-template-rows: 1fr 1fr;
    400         min-height: 28em;
    401         max-height: 36em;
     423        min-height: 30em;
     424        max-height: 42em;
    402425        height: 90vh;
    403426        margin-bottom: 32px;
     427        background-color: #f3f4f5;
     428        background-color: var(--background);
     429        background-repeat: no-repeat;
     430        background-position: top center;
     431        background-size: contain;
     432        background-image: url('http://trunk.wordpress.test/wp-content/uploads/2020/03/header.svg');
    404433}
    405434
    406435.about__header > div {
     
    418447        -ms-grid-row-span: 2;
    419448        grid-row: 1/span 2;
    420449        padding: 32px;
    421         background-color: #BD3854;
    422         background-color: var(--accent-1);
    423         color: white;
    424         padding: 32px;
     450        -webkit-writing-mode: vertical-rl;
     451        -ms-writing-mode: tb-rl;
     452        writing-mode: vertical-rl;
     453        transform: rotate(180deg);
     454}
     455
     456/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
     457.about__header .about__header-title {
     458        display: inline-block;
     459        vertical-align: top;
    425460}
    426461
    427462.about__header-title h1 {
    428463        padding: 0;
    429         color: inherit;
     464        color: #1730e5;
     465        color: var(--accent-1);
    430466}
    431467
    432468.about__header-title h1 span {
     
    434470        font-weight: 600;
    435471        font-size: 1.2em;
    436472        line-height: 1;
    437 }
    438 
    439 .about__header-badge {
    440         -ms-grid-column: 2;
    441         grid-column: 2;
    442         -ms-grid-row: 1;
    443         grid-row: 1;
    444         background-color: #5f1b29;
    445         background-color: var(--accent-2);
    446         margin: 0;
    447         padding: 32px;
    448         justify-content: flex-end;
    449 }
    450 
    451 .about__header-badge img {
    452         align-self: flex-start;
    453         max-width: 100%;
     473        color: #216bce;
     474        color: var(--accent-2);
    454475}
    455476
    456477.about__header-text {
     
    459480        -ms-grid-row: 2;
    460481        grid-row: 2;
    461482        padding: 32px;
    462         background-color: #321017;
    463         background-color: var(--accent-3);
    464         color: white;
    465483        font-size: 1.5em;
    466484        line-height: 1.4;
     485        text-align: right;
     486        justify-self: flex-end;
    467487}
    468488
    469489.about__header-text p {
     
    477497        -ms-grid-row: 3;
    478498        grid-row: 3;
    479499        padding-top: 0;
    480         background: #FEFCF7;
     500        background: #216bce;
    481501        background: var(--nav-background);
    482         color: #716d64;
     502        color: #f3f4f5;
    483503        color: var(--nav-color);
    484         border-bottom: 3px solid currentColor;
     504        border-bottom: 3px solid #1730e5;
     505        border-bottom: 3px solid var(--nav-border);
    485506}
    486507
    487508.about__header-navigation .nav-tab {
     
    498519
    499520.about__header-navigation .nav-tab:hover,
    500521.about__header-navigation .nav-tab:active {
    501         background-color: #F4EFE1;
    502         background-color: var(--background);
     522        background-color: #1730e5;
     523        background-color: var(--accent-1);
    503524}
    504525
    505526.about__header-navigation .nav-tab-active {
    506527        margin-bottom: -3px;
    507528        border-width: 0 0 6px;
    508         color: #BD3854;
    509         color: var(--accent-1);
    510         border-color: currentColor;
     529        border-color: #bde7f0;
     530        border-color: var(--accent-3);
    511531}
    512532
    513533.about__header-navigation .nav-tab-active:hover,
    514534.about__header-navigation .nav-tab-active:active {
    515         background-color: transparent;
    516         border-color: currentColor;
     535        background-color: #1730e5;
     536        background-color: var(--accent-1);
     537        border-color: #bde7f0;
     538        border-color: var(--accent-3);
    517539}
    518540
    519541@media screen and (max-width: 782px) {
     
    530552                height: auto;
    531553        }
    532554
    533         .about__header-badge {
    534                 justify-content: flex-start;
     555        .about__header-title {
     556                /*
     557                 * 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
     558                 * which scales to match the container width.
     559                 */
     560                padding-top: 80%;
     561                padding-bottom: 0;
     562                -webkit-writing-mode: initial;
     563                -ms-writing-mode: initial;
     564                writing-mode: initial;
     565                transform: none;
     566        }
     567
     568        .about__header-text {
     569                text-align: left;
    535570        }
    536571
    537572        .about__header-navigation .nav-tab {
     
    547582                display: block;
    548583                margin-bottom: 0;
    549584                padding: 16px 16px;
    550                 border-left-width: 3px;
     585                border-left-width: 6px;
    551586                border-bottom: none;
    552587        }
    553588
    554589        .about__header-navigation .nav-tab-active {
    555590                border-bottom: none;
    556                 border-left-width: 3px;
    557                 background: #F4EFE1;
    558                 background: var(--background);
     591                border-left-width: 6px;
    559592        }
    560593}
    561594
     
    603636        font-size: 1.4em;
    604637        font-weight: 600;
    605638        text-decoration: none;
    606         color: #413E38;
     639        color: #32373c;
    607640        color: var(--text);
    608641}
    609642
  • src/wp-admin/freedoms.php

    diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php
    index 21e9d3c54d..c9bc298866 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    2626        <div class="about__header">
    2727                <div class="about__header-title">
    2828                        <h1>
    29                                 <span><?php echo $display_version; ?></span>
    3029                                <?php _e( 'WordPress' ); ?>
     30                                <span><?php echo $display_version; ?></span>
    3131                        </h1>
    3232                </div>
    3333
    34                 <div class="about__header-badge"></div>
    35 
    3634                <div class="about__header-text">
    3735                        <p>
    3836                                <?php _e( 'Building more with blocks, faster and easier.' ); ?>
  • src/wp-admin/privacy.php

    diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php
    index f99bdbce1b..09248661bb 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    2020        <div class="about__header">
    2121                <div class="about__header-title">
    2222                        <h1>
    23                                 <span><?php echo $display_version; ?></span>
    2423                                <?php _e( 'WordPress' ); ?>
     24                                <span><?php echo $display_version; ?></span>
    2525                        </h1>
    2626                </div>
    2727
    28                 <div class="about__header-badge"></div>
    29 
    3028                <div class="about__header-text">
    3129                        <p>
    3230                                <?php _e( 'Building more with blocks, faster and easier.' ); ?>