WordPress.org

Make WordPress Core

Ticket #47708: 47708.10.diff

File 47708.10.diff, 17.6 KB (added by ryelle, 2 years ago)
  • src/wp-admin/about.php

    diff --git src/wp-admin/about.php src/wp-admin/about.php
    index 55a7902979..033825375f 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    1616
    1717include( ABSPATH . 'wp-admin/admin-header.php' );
    1818?>
    19         <div class="wrap about-wrap full-width-layout">
     19        <div class="wrap about__container">
    2020
    2121                <div class="about__header">
    2222                        <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    2626                                </h1>
    2727                        </div>
    2828
    29                         <div class="about__header-badge wp-badge">
    30                                 <?php
    31                                 printf(
    32                                         /* translators: %s: The current WordPress version number. */
    33                                         __( 'Version %s' ),
    34                                         $display_version
    35                                 );
    36                                 ?>
     29                        <div class="about__header-badge">
     30                                <img src="https://cldup.com/0zMjjS7ssa.svg" alt="" />
    3731                        </div>
    3832
    3933                        <div class="about__header-text">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    7165                                </div>
    7266                        </div>
    7367                        <div class="column is-vertically-aligned-center">
    74                                 <h3><?php _e( 'Block Editor Improvements' ); ?></h3>
     68                                <h2><?php _e( 'Block Editor Improvements' ); ?></h2>
    7569                                <p>
    7670                                        <?php _e( 'This enhancement-focused update introduces over 150 new features and usability improvements, including improved large image support for uploading non-optimized, high-resolution pictures taken from your smartphone or other high-quality cameras. Combined with larger default image sizes, pictures always look their best.' ); ?>
    7771                                </p>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    8478
    8579                <div class="about__section has-2-columns">
    8680                        <div class="column is-vertically-aligned-center">
    87                                 <h3><?php _e( 'Expanded Design Flexibility' ); ?></h3>
     81                                <h2><?php _e( 'Expanded Design Flexibility' ); ?></h2>
    8882                                <p>
    8983                                        <?php
    9084                                        printf(
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    111105
    112106                <div class="about__section has-2-columns has-subtle-background-color">
    113107                        <div class="column is-vertically-aligned-center">
    114                                 <h3><?php _e( 'Introducing Twenty Twenty' ); ?></h3>
     108                                <h2><?php _e( 'Introducing Twenty Twenty' ); ?></h2>
    115109                                <p><?php _e( 'As the block editor celebrates its first birthday, we are proud that Twenty Twenty is designed with flexibility at its core. Show off your services or products with a combination of columns, groups, and media blocks. Set your content to wide or full alignment for dynamic and engaging layouts. Or let your thoughts be the star with a centered content column!' ); ?></p>
    116110
    117111                                <p>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    142136                <hr />
    143137
    144138                <div class="about__section has-3-columns">
    145                         <h3 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
     139                        <h2 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h2>
    146140
    147141                        <div class="column">
    148                                 <h4><?php _e( 'Automatic Image Rotation' ); ?></h4>
     142                                <h3><?php _e( 'Automatic Image Rotation' ); ?></h3>
    149143                                <p><?php _e( 'Your images will be correctly rotated upon upload according to the embedded orientation data. This feature was first proposed nine years ago and made possible through the perserverance of many dedicated contributors.' ); ?></p>
    150144                        </div>
    151145                        <div class="column">
    152                                 <h4><?php _e( 'Site Health Checks' ); ?></h4>
     146                                <h3><?php _e( 'Site Health Checks' ); ?></h3>
    153147                                <p><?php _e( 'The improvements introduced in 5.3 make it even easier to identify issues. Expanded recommendations highlight areas that may need troubleshooting on your site from the Health Check screen.' ); ?></p>
    154148                        </div>
    155149                        <div class="column">
    156                                 <h4><?php _e( 'Admin Email Verification' ); ?></h4>
     150                                <h3><?php _e( 'Admin Email Verification' ); ?></h3>
    157151                                <p><?php _e( 'You’ll now be periodically asked to confirm that your admin email address is up to date when you log in as an administrator. This reduces the chance of getting locked out out of your site if you change your email address.' ); ?></p>
    158152                        </div>
    159153                </div>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    169163                <hr />
    170164
    171165                <div class="about__section has-2-columns has-subtle-background-color">
    172                         <h3 class="is-section-header"><?php _e( 'For Developers' ); ?></h3>
     166                        <h2 class="is-section-header"><?php _e( 'For Developers' ); ?></h2>
    173167
    174168                        <div class="column">
    175                                 <h4><?php _e( 'Date/Time Component Fixes' ); ?></h4>
     169                                <h3><?php _e( 'Date/Time Component Fixes' ); ?></h3>
    176170                                <p>
    177171                                        <?php
    178172                                        printf(
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    184178                                </p>
    185179                        </div>
    186180                        <div class="column">
    187                                 <h4><?php _e( 'PHP 7.4 Compatibility' ); ?></h4>
     181                                <h3><?php _e( 'PHP 7.4 Compatibility' ); ?></h3>
    188182                                <p>
    189183                                        <?php
    190184                                        printf(
  • src/wp-admin/credits.php

    diff --git src/wp-admin/credits.php src/wp-admin/credits.php
    index 1b5a5f4ca9..db25c5cdd6 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    1616
    1717include( ABSPATH . 'wp-admin/admin-header.php' );
    1818?>
    19 <div class="wrap about-wrap full-width-layout">
     19<div class="wrap about__container">
    2020
    2121        <div class="about__header">
    2222                <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    2626                        </h1>
    2727                </div>
    2828
    29                 <div class="about__header-badge wp-badge">
    30                         <?php
    31                         printf(
    32                                 /* translators: %s: The current WordPress version number. */
    33                                 __( 'Version %s' ),
    34                                 $display_version
    35                         );
    36                         ?>
     29                <div class="about__header-badge">
     30                        <img src="https://cldup.com/0zMjjS7ssa.svg" alt="" />
    3731                </div>
    3832
    3933                <div class="about__header-text">
  • src/wp-admin/css/about.css

    diff --git src/wp-admin/css/about.css src/wp-admin/css/about.css
    index c6e7c5e239..63f7f06988 100644
     
    11/*------------------------------------------------------------------------------
    22  22.0 - About Pages
    33
    4    1.0 Global: About, Credits, Freedoms
    5     1.1 Typography
    6     1.2 Structure
    7     1.3 Point Releases
    8    2.0 About Page
     4   1.0 Global: About, Credits, Freedoms, Privacy
     5    1.1 Layout
     6    1.2 Typography & Elements
     7    1.3 Header
     8   2.0 Legacy About Styles: Global
    99    2.1 Typography
    1010    2.2 Structure
    11    3.0 Credits & Freedoms Pages
     11    2.3 Point Releases
     12   3.0 Legacy About Styles: About Page
     13    3.1 Typography
     14    3.2 Structure
     15   4.0 Legacy About Styles: Credits & Freedoms Pages
     16   5.0 Legacy About Styles: Media Queries
    1217------------------------------------------------------------------------------*/
    1318
     19:root {
     20        /* Beiges, used as text backgrounds. */
     21        --base-1: #FEFCF7;
     22        --base-2: #F4EFE1;
     23        --base-3: #D7D2C5;
     24        --base-4: #7B776C;
     25        --text: #413E38;
     26        /* Reds, used as accents, backgrounds, etc */
     27        --accent-1: #BD3854;
     28        --accent-2: #5F1B29;
     29        --accent-3: #321017;
     30}
     31
     32/*------------------------------------------------------------------------------
     33  1.0 - Global: About, Credits, Freedoms, Privacy
     34------------------------------------------------------------------------------*/
     35
     36.about-php #wpcontent,
     37.credits-php #wpcontent,
     38.freedoms-php #wpcontent,
     39.privacy-php #wpcontent {
     40        background: white;
     41        padding: 0 24px;
     42}
     43
     44@media screen and (max-width: 782px) {
     45        .about-php.auto-fold #wpcontent,
     46        .credits-php.auto-fold #wpcontent,
     47        .freedoms-php.auto-fold #wpcontent,
     48        .privacy-php.auto-fold #wpcontent {
     49                padding-left: 24px;
     50        }
     51}
     52
     53.about__container {
     54        max-width: 1000px;
     55        margin: 24px auto;
     56}
     57
     58.about__container .alignleft {
     59        float: left;
     60}
     61
     62.about__container .alignright {
     63        float: right;
     64}
     65
     66.about__container .aligncenter {
     67        text-align: center;
     68}
     69
     70.about__container .is-vertically-aligned-top {
     71        align-self: start;
     72}
     73
     74.about__container .is-vertically-aligned-center {
     75        align-self: center;
     76}
     77
     78.about__container .is-vertically-aligned-bottom {
     79        align-self: end;
     80}
     81
     82.about__section {
     83        background: var(--base-2);
     84}
     85
     86.about__container .has-accent-background-color {
     87        background-color: var(--accent-1);
     88}
     89
     90.about__container .has-subtle-background-color {
     91        background-color: var(--base-3);
     92}
     93
     94/* 1.1 - Layout */
     95
     96.about__section {
     97        display: grid;
     98        margin: 0;
     99}
     100
     101.about__section .column {
     102        padding: 32px;
     103}
     104
     105.about__section .column.is-edge-to-edge {
     106        padding: 0;
     107}
     108
     109.about__section .column p:last-of-type {
     110        margin-bottom: 0;
     111}
     112
     113.about__section .is-section-header {
     114        margin-bottom: 0;
     115        padding: 32px 32px 0;
     116}
     117
     118.about__section.is-feature {
     119        padding: 32px;
     120}
     121
     122.about__section.is-feature p {
     123        margin: 0;
     124}
     125
     126.about__section.has-2-columns {
     127        grid-template-columns: 1fr 1fr;
     128}
     129
     130.about__section.has-2-columns.is-wider-right {
     131        grid-template-columns: 1fr 2fr;
     132}
     133
     134.about__section.has-2-columns.is-wider-left {
     135        grid-template-columns: 2fr 1fr;
     136}
     137
     138.about__section.has-2-columns .is-section-header {
     139        grid-column-start: 1;
     140        grid-column-end: span 2;
     141}
     142
     143.about__section.has-2-columns .column:nth-of-type(2n+1) {
     144        grid-column-start: 1;
     145}
     146
     147.about__section.has-2-columns .column:nth-of-type(2n) {
     148        grid-column-start: 2;
     149}
     150
     151.about__section.has-3-columns {
     152        grid-template-columns: repeat(3, 1fr);
     153}
     154
     155.about__section.has-3-columns .is-section-header {
     156        grid-column-start: 1;
     157        grid-column-end: span 3;
     158}
     159
     160.about__section.has-3-columns .column:nth-of-type(3n+1) {
     161        grid-column-start: 1;
     162}
     163
     164.about__section.has-3-columns .column:nth-of-type(3n+2) {
     165        grid-column-start: 2;
     166}
     167
     168.about__section.has-3-columns .column:nth-of-type(3n) {
     169        grid-column-start: 3;
     170}
     171
     172.about__section.has-4-columns {
     173        grid-template-columns: repeat(4, 1fr);
     174}
     175
     176.about__section.has-4-columns .is-section-header {
     177        grid-column-start: 1;
     178        grid-column-end: span 4;
     179}
     180
     181.about__section.has-4-columns .column:nth-of-type(4n+1) {
     182        grid-column-start: 1;
     183}
     184
     185.about__section.has-4-columns .column:nth-of-type(4n+2) {
     186        grid-column-start: 2;
     187}
     188
     189.about__section.has-4-columns .column:nth-of-type(4n+3) {
     190        grid-column-start: 3;
     191}
     192
     193.about__section.has-4-columns .column:nth-of-type(4n) {
     194        grid-column-start: 4;
     195}
     196
     197@media screen and (max-width: 782px) {
     198        .about__section.has-3-columns,
     199        .about__section.has-4-columns {
     200                display: block;
     201                padding-bottom: 16px;
     202        }
     203
     204        .about__section.has-3-columns .column:nth-of-type(n),
     205        .about__section.has-4-columns .column:nth-of-type(n) {
     206                padding-top: 16px;
     207                padding-bottom: 16px;
     208        }
     209}
     210
     211@media screen and (max-width: 600px) {
     212        .about__section.has-2-columns {
     213                display: flex; /* This is flex, not block, so we can use order below. */
     214                flex-wrap: wrap;
     215                align-content: stretch;
     216                padding-bottom: 16px;
     217        }
     218
     219        .about__section.has-2-columns .column:nth-of-type(n) {
     220                padding-top: 16px;
     221                padding-bottom: 16px;
     222                width: 100%;
     223        }
     224
     225        .about__section.has-2-columns .is-edge-to-edge {
     226                order: -1;
     227        }
     228}
     229
     230/* 1.2 - Typography & Elements */
     231
     232.about__container {
     233        line-height: 1.4;
     234}
     235
     236.about__container h1 {
     237        font-size: 5em;
     238        line-height: 1;
     239}
     240
     241.about__container h2 {
     242        margin-top: 0;
     243        font-size: 1.4em;
     244}
     245
     246.about__container h3 {
     247        margin-top: 0;
     248        font-size: 1em;
     249}
     250
     251.about__container p {
     252        font-size: inherit;
     253        line-height: inherit;
     254}
     255
     256.about__container ul {
     257        list-style: disc;
     258        margin-left: 16px;
     259}
     260
     261.about__container img {
     262        margin: 0;
     263        vertical-align: middle;
     264}
     265
     266.about__container .about__image {
     267        display: grid;
     268        align-items: center;
     269        justify-content: center;
     270        height: 100%;
     271}
     272
     273.about__container .about__image img {
     274        max-width: 100%;
     275        width: auto;
     276        height: auto;
     277}
     278
     279.about__container hr {
     280        margin: 0;
     281        height: 32px;
     282        border: none;
     283}
     284
     285.about__section {
     286        font-size: 1.2em;
     287}
     288
     289.about__section.is-feature {
     290        font-size: 1.6em;
     291        font-weight: bold;
     292}
     293
     294@media screen and (max-width: 782px) {
     295        .about__container h1 {
     296                font-size: 4em;
     297        }
     298}
     299
     300@media screen and (max-width: 480px) {
     301        .about__container h1 {
     302                font-size: 3.2em;
     303        }
     304
     305        .about__section.is-feature {
     306                font-size: 1.4em;
     307                font-weight: 500;
     308        }
     309}
     310
     311/* 1.3 - Header */
     312
     313.about__header {
     314        display: grid;
     315        grid-template-columns: 1fr 1fr;
     316        grid-template-rows: 1fr 1fr;
     317        min-height: 460px;
     318        max-height: 700px;
     319        height: 90vh;
     320        margin-bottom: 32px;
     321}
     322
     323.about__header > div {
     324        display: flex;
     325}
     326
     327.about__header > div > * {
     328        align-self: flex-end;
     329}
     330
     331.about__header-title {
     332        grid-column: 1;
     333        grid-row: 1/span 2;
     334        padding: 32px;
     335        background-color: var(--accent-1);
     336        color: white;
     337        padding: 32px;
     338}
     339
     340.about__header-title h1 {
     341        padding: 0;
     342        color: inherit;
     343}
     344
     345.about__header-title h1 span {
     346        display: block;
     347        font-weight: bold;
     348        font-size: 1.2em;
     349        line-height: 1;
     350}
     351
     352.about__header-badge {
     353        grid-column: 2;
     354        grid-row: 1;
     355        background-color: var(--accent-2);
     356        margin: 0;
     357        padding: 32px;
     358        justify-content: flex-end;
     359}
     360
     361.about__header-badge img {
     362        align-self: flex-start;
     363        max-width: 100%;
     364}
     365
     366.about__header-text {
     367        grid-column: 2;
     368        grid-row: 2;
     369        padding: 32px;
     370        background-color: var(--accent-3);
     371        color: white;
     372        font-size: 1.6em;
     373        line-height: 1.4;
     374}
     375
     376.about__header-text p {
     377        margin: 0;
     378}
     379
     380.about__header-navigation {
     381        grid-column: 1/span 2;
     382        grid-row: 3;
     383        padding-top: 0;
     384        background: var(--base-1);
     385        color: var(--base-4);
     386        border-bottom: 3px solid currentColor;
     387}
     388
     389.about__header-navigation .nav-tab {
     390        margin-left: 0;
     391        margin-bottom: -3px;
     392        padding: 24px 32px;
     393        font-size: 1.4em;
     394        line-height: 1;
     395        border-width: 0 0 3px;
     396        border-style: solid;
     397        border-color: transparent;
     398        background: unset;
     399        color: inherit;
     400}
     401
     402.about__header-navigation .nav-tab-active {
     403        color: var(--accent-1);
     404        border-color: currentColor;
     405}
     406
     407@media screen and (max-width: 782px) {
     408        .about__container .about__header-text {
     409                font-size: 1.4em;
     410        }
     411}
     412
     413@media screen and (max-width: 600px) {
     414        .about__header {
     415                display: block;
     416                min-height: unset;
     417                max-height: unset;
     418                height: auto;
     419        }
     420
     421        .about__header-badge {
     422                justify-content: flex-start;
     423        }
     424
     425        .about__header-navigation .nav-tab {
     426                margin-top: 0;
     427                margin-right: 0;
     428                padding: 24px 16px;
     429        }
     430}
     431
     432@media screen and (max-width: 480px) {
     433        .about__header-navigation .nav-tab {
     434                float: none;
     435                display: block;
     436                margin-bottom: 0;
     437                padding: 16px 16px;
     438                border-left-width: 3px;
     439                border-bottom: none;
     440        }
     441
     442        .about__header-navigation .nav-tab-active {
     443                border-bottom: none;
     444                border-left-width: 3px;
     445                background: var(--base-2);
     446        }
     447}
     448
     449
    14450/*------------------------------------------------------------------------------
    15   1.0 - Global: About, Credits, Freedoms
     451  2.0 - Legacy About Styles: Global
    16452------------------------------------------------------------------------------*/
    17453
    18454.about-wrap {
     
    98534        line-height: 1.33333333;
    99535}
    100536
    101 /* 1.1 - Typography */
     537/* 2.1 - Typography */
    102538
    103539.about-wrap h1 {
    104540        margin: 0.2em 200px 0 0;
     
    159595        color: #555d66;
    160596}
    161597
    162 /* 1.2 - Structure */
     598/* 2.2 - Structure */
    163599
    164600.about-wrap .has-1-columns,
    165601.about-wrap .has-2-columns,
     
    292728        align-self: end;
    293729}
    294730
    295 /* 1.3 - Point Releases */
     731/* 2.3 - Point Releases */
    296732
    297733.about-wrap .point-releases {
    298734        margin-top: 5px;
     
    316752}
    317753
    318754/*------------------------------------------------------------------------------
    319   2.0 - About Page
     755  3.0 - Legacy About Styles: About Page
    320756------------------------------------------------------------------------------*/
    321757
    322 /* 2.1 - Typography */
     758/* 3.1 - Typography */
    323759
    324760.about-wrap .lead-description {
    325761        font-size: 1.5em;
     
    330766        margin-top: 0.6em;
    331767}
    332768
    333 /* 2.2 - Structure */
     769/* 3.2 - Structure */
    334770
    335771.about-wrap .headline-feature {
    336772        margin: 0 auto 40px;
     
    360796}
    361797
    362798/*------------------------------------------------------------------------------
    363   3.0 - Credits & Freedoms Pages
     799  4.0 - Legacy About Styles: Credits & Freedoms Pages
    364800------------------------------------------------------------------------------*/
    365801
    366802/* Credits */
     
    471907}
    472908
    473909/*------------------------------------------------------------------------------
    474   4.0 - Media Queries
     910  5.0 - Legacy About Styles: Media Queries
    475911------------------------------------------------------------------------------*/
    476912
    477913@media screen and (max-width: 782px) {
  • src/wp-admin/freedoms.php

    diff --git src/wp-admin/freedoms.php src/wp-admin/freedoms.php
    index 4fe0cef9ba..a3ee02b3ab 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    2121
    2222include( ABSPATH . 'wp-admin/admin-header.php' );
    2323?>
    24 <div class="wrap about-wrap full-width-layout">
     24<div class="wrap about__container">
    2525
    2626        <div class="about__header">
    2727                <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    3131                        </h1>
    3232                </div>
    3333
    34                 <div class="about__header-badge wp-badge">
    35                         <?php
    36                         printf(
    37                                 /* translators: %s: The current WordPress version number. */
    38                                 __( 'Version %s' ),
    39                                 $display_version
    40                         );
    41                         ?>
     34                <div class="about__header-badge">
     35                        <img src="https://cldup.com/0zMjjS7ssa.svg" alt="" />
    4236                </div>
    4337
    4438                <div class="about__header-text">
  • src/wp-admin/privacy.php

    diff --git src/wp-admin/privacy.php src/wp-admin/privacy.php
    index d6f27e4d85..054233d3ff 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    1515
    1616include( ABSPATH . 'wp-admin/admin-header.php' );
    1717?>
    18 <div class="wrap about-wrap full-width-layout">
     18<div class="wrap about__container">
    1919
    2020        <div class="about__header">
    2121                <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    2525                        </h1>
    2626                </div>
    2727
    28                 <div class="about__header-badge wp-badge">
    29                         <?php
    30                         printf(
    31                                 /* translators: %s: The current WordPress version number. */
    32                                 __( 'Version %s' ),
    33                                 $display_version
    34                         );
    35                         ?>
     28                <div class="about__header-badge">
     29                        <img src="https://cldup.com/0zMjjS7ssa.svg" alt="" />
    3630                </div>
    3731
    3832                <div class="about__header-text">