Make WordPress Core

Changeset 51356


Ignore:
Timestamp:
07/06/2021 06:37:16 PM (3 years ago)
Author:
ryelle
Message:

Help/About: Update the About section for 5.8.

Add the images for About, Freedoms, and Privacy. Update the styles on all About section pages to match the About page style. Fix string issues, missing link wrapper, duplicate copy.

Props chanthaboune, kellychoffman, javiarce, ryokuhi, alanjacobmathew, desrosj.
See #52775.

Location:
trunk/src/wp-admin
Files:
5 added
2 deleted
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r51264 r51356  
    5151
    5252        <div class="about__section has-2-columns is-wider-left">
    53             <div class="column about__image has-subtle-background-color"></div>
     53            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     54                <img src="https://make.wordpress.org/core/files/2021/07/about-58-widgets-blocks.png" alt="" />
     55            </div>
    5456            <div class="column">
    5557                <h3>
     
    8587                </p>
    8688            </div>
    87             <div class="column about__image has-subtle-background-color"></div>
     89            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     90                <img src="https://make.wordpress.org/core/files/2021/07/about-58-patterns.png" alt="" />
     91            </div>
    8892        </div>
    8993
     
    9195
    9296        <div class="about__section has-2-columns is-wider-left">
    93             <div class="column about__image has-subtle-background-color"></div>
     97            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     98                <img src="https://make.wordpress.org/core/files/2021/07/about-58-template.png" alt="" />
     99            </div>
    94100            <div class="column">
    95101                <h3>
     
    113119
    114120        <div class="about__section has-2-columns is-wider-left">
    115             <div class="column about__image has-subtle-background-color"></div>
     121            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     122                <img src="https://make.wordpress.org/core/files/2021/07/about-58-list-view.png" alt="" />
     123            </div>
    116124            <div class="column">
    117125                <h3>
     
    139147                </p>
    140148            </div>
    141             <div class="column about__image has-subtle-background-color"></div>
     149            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     150                <img src="https://make.wordpress.org/core/files/2021/07/about-58-pattern-suggestions.png" alt="" />
     151            </div>
    142152        </div>
    143153
     
    145155
    146156        <div class="about__section has-2-columns is-wider-left">
    147             <div class="column about__image has-subtle-background-color"></div>
     157            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     158                <img src="https://make.wordpress.org/core/files/2021/07/about-58-duotone.png" alt="" />
     159            </div>
    148160            <div class="column">
    149161                <h3>
     
    164176                <?php _e( 'For Developers to Explore' ); ?>
    165177            </h2>
    166             <div class="column about__image has-subtle-background-color" style="margin:32px 0;height:360px;"></div>
     178            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     179                <img src="https://make.wordpress.org/core/files/2021/07/about-58-theme-json.png" alt="" />
     180            </div>
    167181        </div>
    168182
     
    174188                <p>
    175189                    <?php
    176                     _e( 'Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature. For more about what is currently available and how it works, check out this dev note.' );
     190                    printf(
     191                        /* translators: %s: Theme.json dev note link. */
     192                        __( 'Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature. For more about what is currently available and how it works, <a href="%s">check out this dev note</a>.' ),
     193                        '#'
     194                    );
    177195                    ?>
    178196                </p>
     
    214232                    <?php
    215233                    printf(
    216                         /* translators: %1$s: Link to 5.6's block dev notes. %2$s: Link to 5.7's block dev notes. %1$s: Link to 5.8's block dev notes. */
    217                         __( 'Expanding on previously implemented block supports in WordPress <a href="%1$s">5.6</a> and <a href="%2$s">5.7</a>, WordPress 5.8 introduces several new block <code>supports</code> flags and new options to customize your registered blocks. More information is available in the <a href="%3$s">block supports dev note</a>.' ),
     234                        /* translators: %1$s: Link to 5.6's block dev notes. %2$s: Link to 5.7's block dev notes. %3$s: Link to 5.8's block dev notes. */
     235                        __( 'Expanding on previously implemented block supports in WordPress <a href="%1$s">5.6</a> and <a href="%2$s">5.7</a>, WordPress 5.8 introduces several new block support flags and new options to customize your registered blocks. More information is available in the <a href="%3$s">block supports dev note</a>.' ),
    218236                        'https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/',
    219237                        'https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/',
  • trunk/src/wp-admin/credits.php

    r51264 r51356  
    4040    </div>
    4141
    42     <div class="about__section is-feature">
     42    <div class="about__section has-1-column">
    4343        <div class="column aligncenter">
    4444            <?php if ( ! $credits ) : ?>
     
    4747                <?php
    4848                printf(
    49                     /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
    50                     __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
    51                     __( 'https://wordpress.org/about/' ),
    52                     __( 'https://make.wordpress.org/' )
     49                    /* translators: 1: https://wordpress.org/about/ */
     50                    __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals.' ),
     51                    __( 'https://wordpress.org/about/' )
    5352                );
    5453                ?>
     54                <br />
     55                <a href="https://make.wordpress.org/"><?php _e( 'Get involved in WordPress' ); ?></a>.
    5556            </p>
    5657
     
    5859
    5960            <p>
    60                 <?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?>
    61             </p>
    62             <p>
    63                 <?php
    64                 printf(
    65                     /* translators: %s: https://make.wordpress.org/ */
    66                     __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
    67                     __( 'https://make.wordpress.org/' )
    68                 );
    69                 ?>
     61                <?php _e( 'Want to see your name in lights on this page?' ); ?>
     62                <br />
     63                <a href="https://make.wordpress.org/"><?php _e( 'Get involved in WordPress' ); ?></a>.
    7064            </p>
    7165
  • trunk/src/wp-admin/css/about.css

    r51264 r51356  
    792792    display: block;
    793793    margin: 0 auto calc(var(--gap) / 2);
    794     width: 160px;
    795     height: 160px;
     794    width: 140px;
     795    height: 140px;
    796796    border-radius: 100%;
    797797    overflow: hidden;
     
    800800
    801801.about__section .wp-person .gravatar {
    802     width: 160px;
    803     height: 160px;
     802    width: 140px;
     803    height: 140px;
    804804    filter: grayscale(100%);
    805805    mix-blend-mode: screen;
     
    880880------------------------------------------------------------------------------*/
    881881
    882 .about__section .column .freedoms-image {
    883     margin-bottom: 1em;
     882.about__section .column .freedom-image {
     883    margin-bottom: var(--gap);
     884    max-height: 140px;
    884885}
    885886
  • trunk/src/wp-admin/freedoms.php

    r51264 r51356  
    4343    </div>
    4444
    45     <div class="about__section has-subtle-background-color is-feature">
     45    <div class="about__section is-feature">
    4646        <p class="about-description">
    4747        <?php
    4848        printf(
    4949            /* translators: %s: https://wordpress.org/about/license/ */
    50             __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ),
     50            __( 'WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ),
    5151            __( 'https://wordpress.org/about/license/' )
    5252        );
     
    5555    </div>
    5656
    57     <hr />
    58 
    59     <div class="about__section has-4-columns">
    60         <div class="column">
    61             <div class="freedoms-image"></div>
     57    <div class="about__section has-2-columns">
     58        <div class="column aligncenter">
     59            <img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-1.svg' ) ); ?>" alt="" />
    6260            <h2 class="is-smaller-heading"><?php _e( 'The 1st Freedom' ); ?></h2>
    6361            <p><?php _e( 'To run the program for any purpose.' ); ?></p>
    6462        </div>
    65         <div class="column">
    66             <div class="freedoms-image"></div>
     63        <div class="column aligncenter">
     64            <img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-2.svg' ) ); ?>" alt="" />
    6765            <h2 class="is-smaller-heading"><?php _e( 'The 2nd Freedom' ); ?></h2>
    6866            <p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
    6967        </div>
    70         <div class="column">
    71             <div class="freedoms-image"></div>
     68        <div class="column aligncenter">
     69            <img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-3.svg' ) ); ?>" alt="" />
    7270            <h2 class="is-smaller-heading"><?php _e( 'The 3rd Freedom' ); ?></h2>
    7371            <p><?php _e( 'To redistribute.' ); ?></p>
    7472        </div>
    75         <div class="column">
    76             <div class="freedoms-image"></div>
     73        <div class="column aligncenter">
     74            <img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-4.svg' ) ); ?>" alt="" />
    7775            <h2 class="is-smaller-heading"><?php _e( 'The 4th Freedom' ); ?></h2>
    7876            <p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
  • trunk/src/wp-admin/privacy.php

    r51264 r51356  
    3737    </div>
    3838
    39     <div class="about__section">
    40         <div class="column">
    41             <p><img class="privacy-image" src="<?php echo esc_url( admin_url( 'images/privacy.png' ) ); ?>" alt="" /></p>
    42 
     39    <div class="about__section has-2-columns is-wider-right">
     40        <div class="column about__image">
     41            <img class="privacy-image" src="<?php echo esc_url( admin_url( 'images/privacy.svg' ) ); ?>" alt="" />
     42        </div>
     43        <div class="column is-vertically-aligned-center">
    4344            <p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
    4445
Note: See TracChangeset for help on using the changeset viewer.