WordPress.org
Get WordPress

Make WordPress Core

Changeset 51264


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

Help/About: WordPress 5.8 About Page.

This is the start of the WordPress 5.8 about page, introducing new content and a first pass of the new style.

Props chanthaboune, cbringmann, webcommsat, marybaum, melchoyce, shaunandrews, desrosj, ryelle, oglekler, yvettesonneveld, nalininonstopnewsuk, meher, femkreations, alanjacobmathew, courane01, annezazu, matveb, milana_cap, javiarce, ryokuhi, audrasjb.
See #52775.

Location:
trunk/src/wp-admin
Files:
4 added
4 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r51177 r51264  
    2323
    2424        <div class="about__header">
    25             <div class="about__header-image">
    26                 <img alt="<?php _e( 'Code is Poetry' ); ?>" src="<?php echo esc_url( admin_url( 'images/about-badge.svg' ) ); ?>" />
    27             </div>
    28 
    2925            <div class="about__header-title">
    30                 <p>
     26                <h1>
    3127                    <?php _e( 'WordPress' ); ?>
    3228                    <?php echo $display_version; ?>
    33                 </p>
     29                </h1>
    3430            </div>
    3531
    3632            <div class="about__header-text">
    37                 <?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
     33                <?php _e( 'The next stop on the road to full site editing' ); ?>
    3834            </div>
    3935
    … …  
    4642        </div>
    4743
    48         <div class="about__section is-feature has-subtle-background-color">
    49             <div class="column">
    50                 <h1 class="is-smaller-heading">
    51                     <?php
    52                     printf(
    53                         /* translators: %s: The current WordPress version number. */
    54                         __( 'Step into WordPress %s.' ),
    55                         $display_version
    56                     );
    57                     ?>
    58                 </h1>
    59                 <p>
    60                     <?php
    61                     _e( 'With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing font sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.' );
     44        <hr />
     45
     46        <div class="about__section">
     47            <h2 class="aligncenter has-accent-color">
     48                <?php _e( 'Three Essential Powerhouses' ); ?>
     49            </h2>
     50        </div>
     51
     52        <div class="about__section has-2-columns is-wider-left">
     53            <div class="column about__image has-subtle-background-color"></div>
     54            <div class="column">
     55                <h3>
     56                    <?php _e( 'Manage Widgets with Blocks' ); ?>
     57                </h3>
     58                <p>
     59                    <?php
     60                    printf(
     61                        /* translators: %s: Widgets dev note link. */
     62                        __( 'After months of hard work, the power of blocks has come to both the Block Widgets Editor and the Customizer. Now you can add blocks both in widget areas across your site and with live preview through the Customizer. This opens up new possibilities to create content: from no-code mini layouts to the vast library of core and third-party blocks. For our developers, you can find more details in the <a href="%s">Widgets dev note</a>.' ),
     63                        '#'
     64                    );
     65                    ?>
     66                </p>
     67            </div>
     68        </div>
     69
     70        <hr />
     71
     72        <div class="about__section has-2-columns is-wider-right">
     73            <div class="column">
     74                <h3>
     75                    <?php _e( 'Display Posts with New Blocks and Patterns' ); ?>
     76                </h3>
     77                <p>
     78                    <?php
     79                    printf(
     80                        /* translators: %s: Query Loop dev note link. */
     81                        __( 'The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like create a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want. For our theme authors, learn more about experimenting with this awesome tool in the <a href="%s">Query Loop Block dev note</a>.' ),
     82                        '#'
     83                    );
     84                    ?>
     85                </p>
     86            </div>
     87            <div class="column about__image has-subtle-background-color"></div>
     88        </div>
     89
     90        <hr />
     91
     92        <div class="about__section has-2-columns is-wider-left">
     93            <div class="column about__image has-subtle-background-color"></div>
     94            <div class="column">
     95                <h3>
     96                    <?php _e( 'Edit the Templates Around Posts' ); ?>
     97                </h3>
     98                <p>
     99                    <?php
     100                    _e( 'You can use the familiar block editor to edit templates that hold your content—simply activate a block theme or a theme that has opted in for this feature. Switch from editing your posts to editing your pages and back again, all while using a familiar block editor. There are more than 20 new blocks available within compatible themes. Read more about this feature and how to experiment with it in the release notes.' );
    62101                    ?>
    63102                </p>
    … …  
    67106        <hr class="is-large" />
    68107
    69         <div class="about__section has-2-columns">
    70             <h2 class="is-section-header is-smaller-heading">
    71                 <?php _e( 'Now the editor is easier to use' ); ?>
     108        <div class="about__section">
     109            <h2 class="aligncenter has-accent-color">
     110                <?php _e( 'Three Workflow Helpers' ); ?>
    72111            </h2>
    73             <div class="column">
    74                 <p>
    75                     <?php
    76                     _e( '<strong>Font-size adjustment in more places:</strong> now, font-size controls are right where you need them in the List and Code blocks. No more trekking to another screen to make that single change!' );
    77                     ?>
    78                 </p>
    79                 <p>
    80                     <?php
    81                     _e( '<strong>Reusable blocks:</strong> several enhancements make reusable blocks more stable and easier to use. And now they save automatically with the post when you click the Update button.' );
    82                     ?>
    83                 </p>
    84                 <p>
    85                     <?php
    86                     _e( '<strong>Inserter drag-and-drop:</strong> drag blocks and block patterns from the inserter right into your post.' );
    87                     ?>
    88                 </p>
    89             </div>
    90             <div class="column about__image">
    91                 <video controls>
    92                     <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
    93                     <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.webm" type="video/webm" />
    94                 </video>
    95             </div>
    96         </div>
    97 
    98         <div class="about__section has-2-columns">
    99             <h2 class="is-section-header is-smaller-heading">
    100                 <?php _e( 'You can do more without writing custom code' ); ?>
     112        </div>
     113
     114        <div class="about__section has-2-columns is-wider-left">
     115            <div class="column about__image has-subtle-background-color"></div>
     116            <div class="column">
     117                <h3>
     118                    <?php _e( 'Overview of the Page Structure' ); ?>
     119                </h3>
     120                <p>
     121                    <?php
     122                    _e( 'Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.' );
     123                    ?>
     124                </p>
     125            </div>
     126        </div>
     127
     128        <hr />
     129
     130        <div class="about__section has-2-columns is-wider-right">
     131            <div class="column">
     132                <h3>
     133                    <?php _e( 'Suggested Patterns for Blocks' ); ?>
     134                </h3>
     135                <p>
     136                    <?php
     137                    _e( 'Starting in this release the Pattern Transformations tool will suggest block patterns based on the block you are using. Right now, you can give it a try in the Query Block and Social Icon Block. As more patterns are added, you will be able to get inspiration for how to style your site without ever leaving the editor!' );
     138                    ?>
     139                </p>
     140            </div>
     141            <div class="column about__image has-subtle-background-color"></div>
     142        </div>
     143
     144        <hr />
     145
     146        <div class="about__section has-2-columns is-wider-left">
     147            <div class="column about__image has-subtle-background-color"></div>
     148            <div class="column">
     149                <h3>
     150                    <?php _e( 'Style and Colorize Images' ); ?>
     151                </h3>
     152                <p>
     153                    <?php
     154                    _e( 'Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.' );
     155                    ?>
     156                </p>
     157            </div>
     158        </div>
     159
     160        <hr class="is-large" />
     161
     162        <div class="about__section">
     163            <h2 class="aligncenter has-accent-color">
     164                <?php _e( 'For Developers to Explore' ); ?>
    101165            </h2>
    102             <div class="column">
    103                 <p>
    104                     <?php
    105                     _e( '<strong>Full-height alignment:</strong> have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.' );
    106                     ?>
    107                 </p>
    108                 <p>
    109                     <?php
    110                     _e( '<strong>Buttons block:</strong> now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.' );
    111                     ?>
    112                 </p>
    113                 <p>
    114                     <?php
    115                     _e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
    116                     ?>
    117                 </p>
    118             </div>
    119             <div class="column about__image">
    120                 <img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
    121             </div>
    122         </div>
    123 
    124         <hr />
    125 
    126         <div class="about__section has-subtle-background-color">
    127             <div class="column">
    128                 <h2 class="is-smaller-heading"><?php _e( 'A Simpler Default Color Palette' ); ?></h2>
    129             </div>
    130         </div>
    131 
    132         <div class="about__section has-subtle-background-color">
    133             <figure class="column about__image" id="about-image-comparison">
    134                 <div class="about__image-comparison no-js">
    135                     <img src="https://s.w.org/images/core/5.7/about-57-color-old.png" alt="<?php esc_attr_e( 'Dashboard with old color scheme.' ); ?>" />
    136                     <div class="about__image-comparison-resize">
    137                         <img src="https://s.w.org/images/core/5.7/about-57-color-new.png" alt="<?php esc_attr_e( 'Dashboard with new color scheme.' ); ?>" />
    138                     </div>
    139                 </div>
    140                 <figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
    141             </figure>
    142         </div>
    143 
    144         <div class="about__section has-2-columns has-subtle-background-color">
    145             <div class="column">
    146                 <p>
    147                     <?php
    148                     printf(
    149                         /* translators: %s: WCAG information link. */
    150                         __( 'This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the <a href="%s">WCAG 2.0 AA recommended contrast ratio</a> against white or black.' ),
    151                         'https://www.w3.org/WAI/WCAG2AAA-Conformance'
    152                     );
    153                     ?>
    154                 </p>
    155                 <p>
    156                     <?php
    157                     _e( 'The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step.' );
    158                     ?>
    159                 </p>
    160             </div>
    161             <div class="column">
    162                 <p>
    163                     <?php
    164                     _e( 'Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.' );
    165                     ?>
    166                 </p>
    167                 <p>
    168                     <?php
    169                     printf(
    170                         /* translators: %s: Color palette dev note link. */
    171                         __( 'Find the new palette in the default WordPress Dashboard color scheme, and use it when you’re building themes, plugins, or any other components. For all the details, <a href="%s">check out the Color Palette dev note</a>.' ),
    172                         'https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7'
    173                     );
    174                     ?>
    175                 </p>
    176             </div>
    177         </div>
    178 
    179         <div class="about__section has-subtle-background-color">
    180             <div class="column about__image">
    181                 <picture>
    182                     <source media="(max-width: 600px)" srcset="<?php echo esc_url( admin_url( 'images/about-color-palette-vert.svg' ) ); ?>" />
    183                     <img alt="" src="<?php echo esc_url( admin_url( 'images/about-color-palette.svg' ) ); ?>" />
    184                 </picture>
    185             </div>
    186         </div>
    187 
    188         <hr />
    189 
    190         <div class="about__section has-2-columns">
    191             <div class="column">
    192                 <h3><?php _e( 'From HTTP to HTTPS in a single click' ); ?></h3>
    193                 <p><?php _e( 'Starting now, switching a site from HTTP to HTTPS is a one-click move. WordPress will automatically update database URLs when you make the switch. No more hunting and guessing!' ); ?></p>
    194                 <h3><?php _e( 'New Robots API' ); ?></h3>
    195                 <p>
    196                     <?php
    197                     _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked <em>not-public</em>).' );
    198                     ?>
    199                 </p>
    200             </div>
    201             <div class="column">
    202                 <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
    203                 <p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
    204                 <p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
    205                 <h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
    206                 <p><?php _e( 'Now it’s simple to let iframes lazy-load. By default, WordPress will add a <code>loading="lazy"</code> attribute to iframe tags when both width and height are specified.' ); ?></p>
     166            <div class="column about__image has-subtle-background-color" style="margin:32px 0;height:360px;"></div>
     167        </div>
     168
     169        <div class="about__section has-1-column">
     170            <div class="column">
     171                <h3>
     172                    <?php _e( 'Theme.json' ); ?>
     173                </h3>
     174                <p>
     175                    <?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.' );
     177                    ?>
     178                </p>
     179            </div>
     180        </div>
     181
     182        <hr />
     183
     184        <div class="about__section has-3-columns">
     185            <div class="column">
     186                <h3>
     187                    <?php _e( 'Dropping support for Internet Explorer 11' ); ?>
     188                </h3>
     189                <p>
     190                    <?php
     191                    printf(
     192                        /* translators: %s: Link to Browse Happy. */
     193                        __( 'Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you <a href="%s">switch to a more modern browser</a>.' ),
     194                        'https://browsehappy.com/'
     195                    );
     196                    ?>
     197                </p>
     198            </div>
     199            <div class="column">
     200                <h3>
     201                    <?php _e( 'Adding support for WebP' ); ?>
     202                </h3>
     203                <p>
     204                    <?php
     205                    _e( 'WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.' );
     206                    ?>
     207                </p>
     208            </div>
     209            <div class="column">
     210                <h3>
     211                    <?php _e( 'Adding Additional Block Supports' ); ?>
     212                </h3>
     213                <p>
     214                    <?php
     215                    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>.' ),
     218                        'https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/',
     219                        'https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/',
     220                        'https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/'
     221                    );
     222                    ?>
     223                </p>
    207224            </div>
    208225        </div>
    … …  
    216233                    <?php
    217234                    printf(
    218                         /* translators: %s: WordPress 5.7 Field Guide link. */
    219                         __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.7 Field Guide.</a>' ),
    220                         'https://make.wordpress.org/core/2021/02/23/wordpress-5-7-field-guide'
     235                        /* translators: %s: WordPress 5.8 Field Guide link. */
     236                        __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.8 Field Guide.</a>' ),
     237                        '#'
    221238                    );
    222239                    ?>
    … …  
    239256<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>
    240257
    241 <script>
    242     window.addEventListener( 'load', function() {
    243         var createElement = wp.element.createElement;
    244         var Fragment = wp.element.Fragment;
    245         var render = wp.element.render;
    246         var useState = wp.element.useState;
    247         var ResizableBox = wp.components.ResizableBox;
    248 
    249         var container = document.getElementById( 'about-image-comparison' );
    250         var images = container ? container.querySelectorAll( 'img' ) : [];
    251         if ( ! images.length ) {
    252             // Something's wrong, return early.
    253             return;
    254         }
    255 
    256         var beforeImage = images.item( 0 );
    257         var afterImage = images.item( 1 );
    258         var caption = container.querySelector( 'figcaption' ).innerText;
    259 
    260         function ImageComparison( props ) {
    261             var stateHelper = useState( props.width );
    262             var width = stateHelper[0];
    263             var setWidth = stateHelper[1];
    264 
    265             return createElement(
    266                 'div',
    267                 {
    268                     className: 'about__image-comparison'
    269                 },
    270                 createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
    271                 createElement(
    272                     ResizableBox,
    273                     {
    274                         size: {
    275                             width: width,
    276                             height: props.height
    277                         },
    278                         onResizeStop: function( event, direction, elt, delta ) {
    279                             setWidth( parseInt( width + delta.width, 10 ) );
    280                         },
    281                         showHandle: true,
    282                         enable: {
    283                             top: false,
    284                             right: ! wp.i18n.isRTL(),
    285                             bottom: false,
    286                             left: wp.i18n.isRTL(),
    287                         },
    288                         className: 'about__image-comparison-resize'
    289                     },
    290                     createElement(
    291                         'div',
    292                         {
    293                             style: { width: '100%', height: '100%', overflow: 'hidden' }
    294                         },
    295                         createElement('img', { src: afterImage.src, alt: afterImage.alt } )
    296                     )
    297                 )
    298             );
    299         }
    300 
    301         render(
    302             createElement(
    303                 Fragment,
    304                 {},
    305                 createElement(
    306                     ImageComparison,
    307                     {
    308                         width: beforeImage.clientWidth / 2,
    309                         height: beforeImage.clientHeight
    310                     }
    311                 ),
    312                 createElement( 'figcaption', {}, caption )
    313             ),
    314             container
    315         );
    316     } );
    317 </script>
    318258<?php
    319259

  • trunk/src/wp-admin/credits.php

    r51177 r51264  
    2222
    2323    <div class="about__header">
    24         <div class="about__header-image">
    25             <img alt="<?php _e( 'Code is Poetry' ); ?>" src="<?php echo esc_url( admin_url( 'images/about-badge.svg' ) ); ?>" />
     24        <div class="about__header-title">
     25            <h1>
     26                <?php _e( 'Contributors' ); ?>
     27            </h1>
    2628        </div>
    2729
    28         <div class="about__header-container">
    29             <div class="about__header-title">
    30                 <p>
    31                     <?php _e( 'WordPress' ); ?>
    32                     <?php echo $display_version; ?>
    33                 </p>
    34             </div>
    35 
    36             <div class="about__header-text">
    37                 <?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
    38             </div>
     30        <div class="about__header-text">
     31            <?php _e( 'WordPress 5.8 was created by a worldwide team of passionate individuals' ); ?>
    3932        </div>
    4033
    … …  
    4841
    4942    <div class="about__section is-feature">
    50         <div class="column">
    51             <h1><?php _e( 'Credits' ); ?></h1>
    52 
     43        <div class="column aligncenter">
    5344            <?php if ( ! $credits ) : ?>
    5445
    … …  
    9485
    9586    <div class="about__section">
    96         <div class="column has-subtle-background-color">
     87        <div class="column is-edge-to-edge">
    9788            <?php wp_credits_section_title( $credits['groups']['core-developers'] ); ?>
    9889            <?php wp_credits_section_list( $credits, 'core-developers' ); ?>

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

    r50784 r51264  
    2121.about__container {
    2222    /* Section backgrounds */
    23     --background: #fff;
    24     --subtle-background: #fde4bf;
     23    --background: transparent;
     24    --subtle-background: #def;
    2525
    2626    /* Main text color */
    27     --text: #00131c;
     27    --text: #000;
    2828    --text-light: #fff;
    2929
    3030    /* Accent colors: used in header, on special classes. */
    31     --accent-1: #0a5b89; /* Accent background */
    32     --accent-2: #fde4bf; /* Heading subtitle */
     31    --accent-1: #3858e9; /* Accent background, link color */
     32    --accent-2: #2d46ba; /* Header background */
    3333
    3434    /* Navigation colors. */
    35     --nav-background: var(--background);
    36     --nav-border: #fcc36f;
     35    --nav-background: #fff;
     36    --nav-border: transparent;
    3737    --nav-color: var(--text);
    38     --nav-current: #0a5b88;
     38    --nav-current: var(--accent-1);
     39
     40    --gap: 2rem;
    3941}
    4042
    … …  
    4749.freedoms-php,
    4850.privacy-php {
    49     background: #fff;
     51    background: #f0f7ff;
    5052}
    5153
    … …  
    5456.freedoms-php #wpcontent,
    5557.privacy-php #wpcontent {
    56     background: white;
     58    background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%);
    5759    padding: 0 24px;
    5860}
    … …  
    98100
    99101.about__section {
    100     background: #fff;
    101102    background: var(--background);
    102103    clear: both;
    … …  
    104105
    105106.about__container .has-accent-background-color {
    106     background-color: #0a5b89;
    107107    background-color: var(--accent-1);
    108     color: #fff;
    109108    color: var(--text-light);
    110109}
    111110
    112111.about__container .has-accent-background-color a {
    113     color: #fff;
    114112    color: var(--text-light);
    115113}
    … …  
    120118
    121119.about__container .has-accent-color {
    122     color: #00131c;
    123     color: var(--text);
    124     font-weight: bold;
     120    color: var(--accent-1);
    125121}
    126122
    … …  
    130126
    131127.about__container .has-subtle-background-color {
    132     background-color: #fde4bf;
    133128    background-color: var(--subtle-background);
    134129}
    … …  
    143138
    144139.about__section {
    145     margin: 0;
     140    margin: 0 0 var(--gap);
    146141}
    147142
    148143.about__section .column {
    149     padding: 32px;
     144    padding: var(--gap);
    150145}
    151146
    … …  
    155150
    156151.about__section + .about__section .is-section-header {
    157     padding-bottom: 32px;
     152    padding-bottom: var(--gap);
    158153}
    159154
    160155.about__section .column[class*="background-color"],
    161156.about__section .column.has-border {
    162     padding-top: 32px;
     157    padding-top: var(--gap);
    163158}
    164159
    … …  
    177172.about__section .has-text-columns {
    178173    columns: 2;
    179     column-gap: 64px;
     174    column-gap: calc(var(--gap) * 2);
    180175}
    181176
    182177.about__section .is-section-header {
    183178    margin-bottom: 0;
    184     padding: 32px 32px 0;
     179    padding: var(--gap) var(--gap) 0;
    185180}
    186181
    … …  
    195190
    196191.about__section.is-feature {
    197     padding: 32px;
     192    padding: var(--gap);
    198193}
    199194
    … …  
    203198
    204199.about__section.is-feature p + p {
    205     margin-top: 1rem;
     200    margin-top: calc(var(--gap) / 2);
    206201}
    207202
    … …  
    220215
    221216.about__section.has-gutters {
    222     gap: 16px;
     217    gap: calc(var(--gap) / 2);
    223218}
    224219
    … …  
    334329    .about__section.has-3-columns {
    335330        display: block;
    336         padding-bottom: 16px;
     331        padding-bottom: calc(var(--gap) / 2);
    337332    }
    338333
    … …  
    340335    .about__section.has-2-columns.has-gutters .column,
    341336    .about__section.has-3-columns.has-gutters .column {
    342         margin-bottom: 16px;
     337        margin-bottom: calc(var(--gap) / 2);
    343338    }
    344339
    … …  
    350345
    351346    .about__section.has-3-columns .column:nth-of-type(n) {
    352         padding-top: 16px;
    353         padding-bottom: 16px;
     347        padding-top: calc(var(--gap) / 2);
     348        padding-bottom: calc(var(--gap) / 2);
    354349    }
    355350
    … …  
    399394    .about__section.has-2-columns {
    400395        display: block;
    401         padding-bottom: 16px;
     396        padding-bottom: calc(var(--gap) / 2);
    402397    }
    403398
    404399    .about__section.has-2-columns.has-gutters .column {
    405         margin-bottom: 16px;
     400        margin-bottom: calc(var(--gap) / 2);
    406401    }
    407402
    … …  
    411406
    412407    .about__section.has-2-columns .column:nth-of-type(n) {
    413         padding-top: 16px;
    414         padding-bottom: 16px;
     408        padding-top: calc(var(--gap) / 2);
     409        padding-bottom: calc(var(--gap) / 2);
    415410    }
    416411}
    … …  
    423418    .about__section.has-4-columns {
    424419        display: block;
    425         padding-bottom: 16px;
     420        padding-bottom: calc(var(--gap) / 2);
    426421    }
    427422
    428423    .about__section.has-4-columns.has-gutters .column {
    429         margin-bottom: 16px;
     424        margin-bottom: calc(var(--gap) / 2);
    430425    }
    431426
    … …  
    435430
    436431    .about__section.has-4-columns .column:nth-of-type(n) {
    437         padding-top: 16px;
    438         padding-bottom: 16px;
     432        padding-top: calc(var(--gap) / 2);
     433        padding-bottom: calc(var(--gap) / 2);
    439434    }
    440435}
    … …  
    444439.about__container {
    445440    line-height: 1.4;
    446     color: #00131c;
    447441    color: var(--text);
    448442}
    449443
    450444.about__container h1 {
    451     margin: 0 0 1em;
    452445    padding: 0;
    453     font-weight: 600;
    454446    color: inherit;
    455447}
    … …  
    460452    margin-top: 0;
    461453    margin-bottom: 0.5em;
    462     font-size: 2.9em;
     454    font-size: 2em;
    463455    line-height: 1.2;
    464     font-weight: 400;
     456    font-weight: 700;
    465457}
    466458
    … …  
    469461.about__container h2.is-smaller-heading {
    470462    margin-top: 0;
    471     font-size: 1.5em;
    472     font-weight: 700;
     463    font-size: 1.6em;
     464    line-height: 1.3;
     465    font-weight: 400;
    473466}
    474467
    … …  
    479472
    480473.about__section a {
    481     color: #0a5b89;
    482474    color: var(--accent-1);
    483475    text-decoration: underline;
    … …  
    487479.about__section a:active,
    488480.about__section a:focus {
    489     color: #0a5b89;
    490481    color: var(--accent-1);
    491482    text-decoration: none;
    … …  
    504495.about__container ul {
    505496    list-style: disc;
    506     margin-left: 16px;
     497    margin-left: calc(var(--gap) / 2);
    507498}
    508499
    … …  
    562553.about__container .about__image-comparison.no-js .about__image-comparison-resize {
    563554    overflow: hidden;
    564     border-right: 2px solid #007cba;
    565555    border-right: 2px solid var(--wp-admin-theme-color);
    566556}
    … …  
    580570.about__container hr {
    581571    margin: 0;
    582     height: 32px;
     572    height: var(--gap);
    583573    border: none;
    584574}
    585575
    586576.about__container hr.is-small {
    587     height: 8px;
     577    height: calc(var(--gap) / 4);
    588578}
    589579
    590580.about__container hr.is-large {
    591     height: 64px;
    592     margin: 16px auto;
     581    height: calc(var(--gap) * 2);
     582    margin: calc(var(--gap) / 2) auto;
    593583}
    594584
    … …  
    622612
    623613.about__header {
    624     margin-bottom: 32px;
    625     padding-top: 3em;
    626     background-position: bottom center;
     614    margin-bottom: var(--gap);
     615    padding-top: 0;
     616    background-position: center;
    627617    background-repeat: no-repeat;
    628618    background-size: cover;
    629     background-image: url('../images/about-header-brushes.svg');
    630     background-color: #0a5b89;
    631     background-color: var(--accent-1);
    632     color: #fff;
     619    background-image: url('../images/about-header-about.svg');
     620    background-color: var(--accent-2);
    633621    color: var(--text-light);
    634622}
    635623
     624.credits-php .about__header {
     625    background-image: url('../images/about-header-credits.svg');
     626}
     627
     628.freedoms-php .about__header {
     629    background-image: url('../images/about-header-freedoms.svg');
     630}
     631
     632.privacy-php .about__header {
     633    background-image: url('../images/about-header-privacy.svg');
     634}
     635
    636636.about__header-image {
    637     margin: 0 32px 3em;
     637    margin: 0 var(--gap) 3em;
    638638}
    639639
    640640.about__header-title {
    641     padding: 1em 0;
    642     margin: 0 32px;
    643     text-align: center;
    644 }
    645 
    646 .about__header-title p {
    647     margin: 0;
     641    padding: 2rem 0 0;
     642    margin: 0 2rem;
     643}
     644
     645.about__header-title h1 {
     646    margin: 0 0 0.5rem;
    648647    padding: 0;
    649     font-size: 6em;
     648    font-size: 4.5rem;
    650649    line-height: 1;
    651     font-weight: 900;
    652     text-transform: uppercase;
     650    font-weight: 400;
    653651}
    654652
    655653.about__header-text {
    656     max-width: 25em;
    657     margin: 0 auto 8em;
    658     padding: 0 16px;
    659     font-size: 1.5em;
    660     line-height: 1.4;
    661     color: #fde4bf;
    662     color: var(--accent-2);
    663     text-align: center;
     654    max-width: 42rem;
     655    margin: 0 0 5em;
     656    padding: 0 2rem;
     657    font-size: 2rem;
     658    line-height: 1.15;
    664659}
    665660
    666661.about__header-navigation {
    667     clear: both;
     662    display: flex;
     663    justify-content: center;
    668664    padding-top: 0;
    669     background: #fff;
    670665    background: var(--nav-background);
    671     color: #00131c;
    672666    color: var(--nav-color);
    673     border-bottom: 3px solid #fcc36f;
    674667    border-bottom: 3px solid var(--nav-border);
    675668}
    … …  
    677670.about__header-navigation .nav-tab {
    678671    margin-left: 0;
    679     padding: 24px 32px;
     672    padding: calc(var(--gap) * 0.75) var(--gap);
     673    float: none;
    680674    font-size: 1.4em;
    681675    line-height: 1;
    … …  
    689683.about__header-navigation .nav-tab:hover,
    690684.about__header-navigation .nav-tab:active {
    691     background-color: #0a5b88;
    692685    background-color: var(--nav-current);
    693     color: #fff;
    694686    color: var(--text-light);
    695687}
    … …  
    697689.about__header-navigation .nav-tab-active {
    698690    margin-bottom: -3px;
    699     color: #0a5b88;
    700691    color: var(--nav-current);
    701692    border-width: 0 0 6px;
    702     border-color: #0a5b88;
    703693    border-color: var(--nav-current);
    704694}
    … …  
    706696.about__header-navigation .nav-tab-active:hover,
    707697.about__header-navigation .nav-tab-active:active {
    708     background-color: #0a5b88;
    709698    background-color: var(--nav-current);
    710     color: #fff;
    711699    color: var(--text-light);
    712     border-color: #0a5b88;
    713700    border-color: var(--nav-current);
    714701}
    715702
    716703@media screen and (max-width: 960px){
    717     .about__header-title p {
     704    .about__header-title h1 {
    718705        font-size: 4.8em;
    719706    }
    … …  
    731718    .about__header-title,
    732719    .about__header-image {
    733         margin-left: 16px;
    734         margin-right: 16px;
    735     }
    736 
     720        margin-left: calc(var(--gap) / 2);
     721        margin-right: calc(var(--gap) / 2);
     722    }
     723
     724    .about__header-text,
    737725    .about__header-navigation .nav-tab {
    738726        margin-top: 0;
    739727        margin-right: 0;
    740         padding: 24px 16px;
     728        padding-left: calc(var(--gap) / 2);
     729        padding-right: calc(var(--gap) / 2);
    741730    }
    742731}
    743732
    744733@media screen and (max-width: 480px) {
    745     .about__header {
    746         background-image: none;
    747     }
    748 
    749734    .about__header-title p {
    750735        font-size: 2.4em;
    … …  
    755740    }
    756741
     742    .about__header-navigation {
     743        display: block;
     744    }
     745
    757746    .about__header-navigation .nav-tab {
    758         float: none;
    759747        display: block;
    760748        margin-bottom: 0;
    761         padding: 16px 16px;
     749        padding: calc(var(--gap) / 2);
    762750        border-left-width: 6px;
    763751        border-bottom: none;
    … …  
    775763------------------------------------------------------------------------------*/
    776764
     765.about__section .wp-people-group-title {
     766    margin-bottom: calc(var(--gap) * 2);
     767    text-align: center;
     768
     769}
     770
    777771.about__section .wp-people-group {
    778772    margin: 0;
     773    display: flex;
     774    flex-wrap: wrap;
    779775}
    780776
    … …  
    783779    vertical-align: top;
    784780    box-sizing: border-box;
    785     padding: 0 1em 1em 0;
    786     height: 6em;
    787     width: calc( 33% - 4px );
    788     min-width: 280px;
     781    margin-bottom: var(--gap);
     782    width: 25%;
     783    text-align: center;
    789784}
    790785
    791786.about__section .compact .wp-person {
    792787    height: auto;
    793     width: calc( 25% - 4px );
    794     min-width: 220px;
    795     padding-bottom: 0.5em;
     788    width: 20%;
     789}
     790
     791.about__section .wp-person-avatar {
     792    display: block;
     793    margin: 0 auto calc(var(--gap) / 2);
     794    width: 160px;
     795    height: 160px;
     796    border-radius: 100%;
     797    overflow: hidden;
     798    background: var(--accent-1);
    796799}
    797800
    798801.about__section .wp-person .gravatar {
    799     float: left;
    800     margin: -4px 0.85em 0.85em 0;
    801     padding: 1px;
     802    width: 160px;
     803    height: 160px;
     804    filter: grayscale(100%);
     805    mix-blend-mode: screen;
     806}
     807
     808.about__section .compact .wp-person-avatar,
     809.about__section .compact .wp-person .gravatar {
    802810    width: 80px;
    803811    height: 80px;
    804     border-radius: 100%;
    805 }
    806 
    807 .about__section .compact .wp-person .gravatar {
    808     width: 40px;
    809     height: 40px;
    810812}
    811813
    … …  
    814816    font-weight: 600;
    815817    text-decoration: none;
    816     color: #00131c;
    817     color: var(--text);
    818818}
    819819
    … …  
    831831}
    832832
     833@media screen and (max-width: 782px) {
     834    .about__section .wp-person {
     835        width: 33%;
     836    }
     837
     838    .about__section .compact .wp-person {
     839        width: 25%;
     840    }
     841
     842    .about__section .wp-person-avatar,
     843    .about__section .wp-person .gravatar {
     844        width: 120px;
     845        height: 120px;
     846    }
     847}
     848
     849@media screen and (max-width: 600px) {
     850    .about__section .wp-person {
     851        width: 50%;
     852    }
     853
     854    .about__section .compact .wp-person {
     855        width: 33%;
     856    }
     857
     858    .about__section .wp-person .web {
     859        font-size: 1.2em;
     860    }
     861}
     862
    833863@media screen and (max-width: 480px) {
    834864    .about__section .wp-person {
    835865        min-width: 100%;
    836     }
    837 
    838     .about__section .wp-person .gravatar {
    839         width: 60px;
    840         height: 60px;
    841866    }
    842867

  • trunk/src/wp-admin/freedoms.php

    r51177 r51264  
    2525
    2626    <div class="about__header">
    27         <div class="about__header-image">
    28             <img alt="<?php _e( 'Code is Poetry' ); ?>" src="<?php echo esc_url( admin_url( 'images/about-badge.svg' ) ); ?>" />
     27        <div class="about__header-title">
     28            <h1>
     29                <?php _e( 'The Four Freedoms' ); ?>
     30            </h1>
    2931        </div>
    3032
    31         <div class="about__header-container">
    32             <div class="about__header-title">
    33                 <p>
    34                     <?php _e( 'WordPress' ); ?>
    35                     <?php echo $display_version; ?>
    36                 </p>
    37             </div>
    38 
    39             <div class="about__header-text">
    40                 <?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
    41             </div>
     33        <div class="about__header-text">
     34            <?php _e( 'WordPress is free and open source software, built by a distributed community of mostly volunteer developers from around the world' ); ?>
    4235        </div>
    4336
    … …  
    5144
    5245    <div class="about__section has-subtle-background-color is-feature">
    53         <h1><?php _e( 'Freedoms' ); ?></h1>
    54 
    5546        <p class="about-description">
    5647        <?php

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

    r50665 r51264  
    150150                echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
    151151                echo '<a href="' . esc_url( sprintf( $credits_data['profiles'], $person_data[2] ) ) . '" class="web">';
    152                 $size   = $compact ? 40 : 80;
     152                $size   = $compact ? 80 : 160;
    153153                $data   = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    154154                $data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size * 2 ) );
    155                 echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
     155                echo '<span class="wp-person-avatar"><img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" /></span>' . "\n";
    156156                echo esc_html( $person_data[0] ) . "</a>\n\t";
    157157                if ( ! $compact ) {

  • trunk/src/wp-admin/privacy.php

    r51177 r51264  
    1919
    2020    <div class="about__header">
    21         <div class="about__header-image">
    22             <img alt="<?php _e( 'Code is Poetry' ); ?>" src="<?php echo esc_url( admin_url( 'images/about-badge.svg' ) ); ?>" />
     21        <div class="about__header-title">
     22            <h1>
     23                <?php _e( 'Privacy' ); ?>
     24            </h1>
    2325        </div>
    2426
    25         <div class="about__header-container">
    26             <div class="about__header-title">
    27                 <p>
    28                     <?php _e( 'WordPress' ); ?>
    29                     <?php echo $display_version; ?>
    30                 </p>
    31             </div>
    32 
    33             <div class="about__header-text">
    34                 <?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
    35             </div>
     27        <div class="about__header-text">
     28            <?php _e( 'We take privacy and transparency very seriously' ); ?>
    3629        </div>
    3730
    … …  
    4639    <div class="about__section">
    4740        <div class="column">
    48             <h1><?php _e( 'Privacy' ); ?></h1>
    49 
    5041            <p><img class="privacy-image" src="<?php echo esc_url( admin_url( 'images/privacy.png' ) ); ?>" alt="" /></p>
    5142
Note: See TracChangeset for help on using the changeset viewer.