Changeset 53384 for branches/6.0

Timestamp:

05/10/2022 04:56:53 PM (2 years ago)

Author:

ryelle

Message:

Help/About: Update the About section for 6.0.

Switch the images to use the s.w.org CDN. Update the font style and spacing on the About page. Update the header images for Credits, Freedoms, and Privacy.

Props fcoveram, peterwilsoncc, SergeyBiryukov.
Merges [53382] to the 6.0 branch.
Fixes #55434.

Location:

branches/6.0

Files:

• . (modified) (1 prop)
• src/wp-admin/about.php (modified) (13 diffs)
• src/wp-admin/css/about.css (modified) (7 diffs)
• src/wp-admin/images/about-header-credits.svg (modified) (1 diff)
• src/wp-admin/images/about-header-freedoms.svg (modified) (1 diff)
• src/wp-admin/images/about-header-privacy.svg (modified) (1 diff)

branches/6.0/src/wp-admin/about.php

@@ -38 +38 @@
         </div>
 
-        <hr />
-
         <div class="about__section">
             <div class="column">
@@ -57 +55 @@
         </div>
 
-        <hr />
-
         <div class="about__section has-2-columns">
-            <div class="column about__image is-vertically-aligned-center">
-                <img src="https://make.wordpress.org/core/files/2022/05/about-60-writing-improvements.png" alt="" />
+            <div class="column about__image is-vertically-aligned-top">
+                <img src="https://s.w.org/images/core/6.0/about-60-writing-improvements.png" alt="" />
             </div>
             <div class="column">
@@ -89 +85 @@
                 </p>
             </div>
-            <div class="column about__image is-vertically-aligned-center">
-                <img src="https://make.wordpress.org/core/files/2022/05/about-60-style-switcher.gif" alt="" />
+            <div class="column about__image is-vertically-aligned-top">
+                <img src="https://s.w.org/images/core/6.0/about-60-style-switching.gif" alt="" />
             </div>
         </div>
 
         <div class="about__section has-1-column">
-            <div class="column about__image is-vertically-aligned-center">
-                <img src="https://make.wordpress.org/core/files/2022/05/about-60-templates.png" alt="" />
-            </div>
-            <div class="column">
+            <div class="column about__image is-vertically-aligned-top">
+                <img src="https://s.w.org/images/core/6.0/about-60-templates.png" alt="" />
+            </div>
+            <div class="column" style="padding-bottom:0">
                 <h3>
                     <?php _e( 'More Template Choices' ); ?>
@@ -111 +107 @@
             <div class="column">
                 <div class="about__image">
-                    <img src="https://make.wordpress.org/core/files/2022/05/about-60-sub-feature-1.png" alt="" />
+                    <img src="https://s.w.org/images/core/6.0/about-60-sub-feature-1.png" alt="" />
                 </div>
                 <p><?php _e( 'Featured images can be used in the cover block.' ); ?></p>
@@ -118 +114 @@
             <div class="column">
                 <div class="about__image">
-                    <img src="https://make.wordpress.org/core/files/2022/05/about-60-sub-feature-2.png" alt="" />
+                    <img src="https://s.w.org/images/core/6.0/about-60-sub-feature-2.png" alt="" />
                 </div>
                 <p><?php _e( 'While editing a template, at the root, or between blocks, the quick inserter shows you patterns and template parts to help you work faster and discover new layout options.' ); ?></p>
@@ -124 +120 @@
             <div class="column">
                 <div class="about__image">
-                    <img src="https://make.wordpress.org/core/files/2022/05/about-60-sub-feature-3.png" alt="" />
+                    <img src="https://s.w.org/images/core/6.0/about-60-sub-feature-3.png" alt="" />
                 </div>
                 <p><?php _e( 'The query block supports filtering on multiple authors, support for custom taxonomies, and support for customizing what is shown when there are no results.' ); ?></p>
@@ -131 +127 @@
 
         <div class="about__section has-2-columns is-wider-left">
-            <div class="column about__image is-vertically-aligned-center">
-                <img src="https://make.wordpress.org/core/files/2022/05/about-60-integrated-patterns.png" alt="" />
+            <div class="column about__image is-vertically-aligned-top">
+                <img src="https://s.w.org/images/core/6.0/about-60-integrated-patterns.png" alt="" />
             </div>
             <div class="column">
@@ -159 +155 @@
                 </p>
             </div>
-            <div class="column about__image is-vertically-aligned-center">
-                <img src="https://make.wordpress.org/core/files/2022/05/about-60-list-view.png" alt="" />
+            <div class="column about__image is-vertically-aligned-top">
+                <img src="https://s.w.org/images/core/6.0/about-60-list-view.png" alt="" />
             </div>
         </div>
 
         <div class="about__section has-2-columns is-wider-left">
-            <div class="column about__image is-vertically-aligned-center">
-                <img src="https://make.wordpress.org/core/files/2022/05/about-60-block-locking-controls.png" alt="" />
+            <div class="column about__image is-vertically-aligned-top">
+                <img src="https://s.w.org/images/core/6.0/about-60-block-locking-controls.png" alt="" />
             </div>
             <div class="column">
@@ -177 +173 @@
             </div>
         </div>
+
+        <hr class="is-large" />
 
         <div class="about__section" style="margin-bottom:0;">
@@ -257 +255 @@
 
         <div class="about__section has-2-columns is-wider-right">
-            <div class="column about__image is-vertically-aligned-center">
+            <div class="column about__image is-vertically-aligned-top">
                 <a href="#">
-                    <img src="https://make.wordpress.org/core/files/2022/05/about-60-video.png" alt="<?php echo esc_attr( __( 'Exploring WordPress 6.0 video' ) ); ?>" />
+                    <img src="https://s.w.org/images/core/6.0/about-60-video.png" alt="<?php echo esc_attr( __( 'Exploring WordPress 6.0 video' ) ); ?>" />
                 </a>
             </div>
@@ -285 +283 @@
 
         <div class="about__section has-3-columns">
-            <div class="column">
+            <div class="column" style="padding-top:0">
                 <p>
                     <?php
@@ -297 +295 @@
                 </p>
             </div>
-            <div class="column">
+            <div class="column" style="padding-top:0">
                 <p>
                     <?php
@@ -308 +306 @@
                 </p>
             </div>
-            <div class="column">
+            <div class="column" style="padding-top:0">
                 <p>
                     <?php

branches/6.0/src/wp-admin/css/about.css

@@ -462 +462 @@
     margin-top: 0;
     margin-bottom: 0.5em;
-    font-size: 2em;
-    line-height: 1.2;
+    font-size: 2rem;
     font-weight: 700;
+    line-height: 1.16;
 }
 
@@ -471 +471 @@
 .about__container h2.is-smaller-heading {
     margin-top: 0;
-    font-size: 1.6em;
-    line-height: 1.3;
-    font-weight: 400;
+    font-size: 1.625rem;
+    font-weight: 700;
+    line-height: 1.4;
 }
 
@@ -483 +483 @@
 .about__container p.is-subheading {
     margin-top: 0;
-    font-size: 1.5em;
+    font-size: 1.5rem;
+    font-weight: 300;
+    line-height: 160%;
 }
 
@@ -513 +515 @@
 }
 
+.about__container li {
+    margin-bottom: 0.75rem;
+}
+
 .about__container img {
     margin: 0;
@@ -569 +575 @@
 
 .about__section {
-    font-size: 1.2em;
+    font-size: 1.125rem;
+    line-height: 1.55;
 }
 
@@ -606 +613 @@
 
 .credits-php .about__header {
-    --about-header-image-width: 390px;
-    --about-header-image-height: 325px;
-    --about-header-bg-offset-inline: var(--gap);
+    --about-header-image-width: 477px;
+    --about-header-image-height: 470px;
+    --about-header-bg-offset-inline: calc(var(--gap) * -4);
 
     background-image: url('../images/about-header-credits.svg');
@@ -615 +622 @@
 
 .freedoms-php .about__header {
-    --about-header-image-width: 380px;
-    --about-header-image-height: 278px;
+    --about-header-image-width: 411px;
+    --about-header-image-height: 498px;
     --about-header-bg-offset-inline: var(--gap);
 
     background-image: url('../images/about-header-freedoms.svg');
-    background-position: right var(--about-header-bg-offset-inline) bottom;
+    background-position: right var(--about-header-bg-offset-inline) top calc(var(--gap) * 4);
 }
 
 .privacy-php .about__header {
-    --about-header-image-width: 503px;
-    --about-header-image-height: 553px;
-    --about-header-bg-offset-inline: calc(var(--gap) * -2);
+    --about-header-image-width: 277px;
+    --about-header-image-height: 361px;
+    --about-header-bg-offset-inline: var(--gap);
 
     background-image: url('../images/about-header-privacy.svg');
+    background-position: right var(--about-header-bg-offset-inline) top var(--gap);
 }
 

branches/6.0/src/wp-admin/images/about-header-credits.svg

@@ -1 @@
-<svg width="390" height="325" viewBox="0 0 390 325" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M277 195.113c0-15.824 5.204-29.175 15.612-40.053 10.903-11.374 24.285-17.06 40.145-17.06 16.355 0 29.984 5.686 40.888 17.06C384.548 165.938 390 179.289 390 195.113c0 15.329-5.452 28.432-16.355 39.311C362.741 244.808 349.112 250 332.757 250c-15.86 0-29.242-5.192-40.145-15.576C282.204 223.545 277 210.442 277 195.113Z" fill="#2F2F2F" style="mix-blend-mode:multiply"/>
-    <path d="M0 85.159c0-23.594 7.737-43.501 23.21-59.722C39.422 8.479 59.317 0 82.896 0c24.316 0 44.579 8.479 60.789 25.437C159.895 41.657 168 61.565 168 85.159c0 22.856-8.105 42.395-24.316 58.616C127.474 159.258 107.211 167 82.894 167c-23.578 0-43.473-7.742-59.683-23.225C7.737 127.554 0 108.015 0 85.159Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
-    <path d="M57 196.113c0-37.157 12.204-68.508 36.612-94.054C119.182 75.353 150.564 62 187.757 62c38.355 0 70.318 13.353 95.888 40.059C309.215 127.605 322 158.956 322 196.113c0 35.995-12.785 66.766-38.355 92.311C258.075 312.808 226.112 325 187.757 325c-37.193 0-68.575-12.192-94.145-36.576C69.204 262.879 57 232.108 57 196.113Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
+<svg width="477" height="470" viewBox="0 0 477 470" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <path d="M323.709 61.043c8.293-9.882 18.511-15.518 30.656-16.906 12.71-1.44 23.973 1.96 33.791 10.198 10.125 8.495 15.582 19.127 16.371 31.893 1.049 12.459-2.573 23.629-10.866 33.512-8.033 9.574-18.276 14.926-30.727 16.057-12.191.822-23.35-3.015-33.474-11.51-9.818-8.239-15.381-18.432-16.688-30.582-.742-12.2 2.904-23.088 10.937-32.662Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
+    <path d="M414.825 156.402c12.705-2.241 24.155.011 34.351 6.753 10.662 7.067 17.105 16.912 19.331 29.533 2.295 13.016-.359 24.668-7.96 34.955-7.205 10.218-17.16 16.447-29.865 18.687-12.308 2.17-23.595-.313-33.859-7.45-9.868-7.208-15.949-17.319-18.245-30.335-2.225-12.622.066-24.006 6.874-34.153 7.274-9.824 17.065-15.82 29.373-17.99ZM423.332 288.021c11.173 6.45 18.497 15.535 21.973 27.254 3.625 12.267 2.233 23.95-4.175 35.049-6.609 11.446-16.131 18.666-28.567 21.66-12.086 3.196-23.716 1.569-34.889-4.882-10.823-6.249-17.873-15.406-21.149-27.471-2.926-11.864-1.085-23.519 5.523-34.965 6.408-11.099 15.481-18.348 27.219-21.745 11.886-2.849 23.241-1.149 34.065 5.1Z" fill="#2F2F2F" style="mix-blend-mode:multiply"/>
+    <path d="M345.247 394.313c4.412 12.123 4.183 23.79-.686 35.002-5.109 11.727-13.685 19.782-25.728 24.165-12.42 4.521-24.355 3.931-35.806-1.769-11.313-5.321-19.176-14.043-23.589-26.166-4.274-11.744-3.789-23.291 1.458-34.639 5.384-10.969 14.286-18.714 26.705-23.234 12.044-4.384 23.653-4.104 34.828.838 10.937 5.458 18.543 14.059 22.818 25.803Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
+    <path d="M217.103 425.546c-4.413 12.123-12.087 20.914-23.024 26.372-11.451 5.7-23.199 6.358-35.242 1.975-12.42-4.521-21.184-12.644-26.292-24.372-5.246-11.348-5.663-23.083-1.251-35.206 4.275-11.745 12.069-20.277 23.382-25.598 11.176-4.942 22.973-5.153 35.393-.633 12.043 4.383 20.757 12.06 26.141 23.029 4.87 11.211 5.167 22.689.893 34.433Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
+    <path d="M98.866 367.102c-11.172 6.451-22.702 8.251-34.588 5.402-12.436-2.994-21.858-10.041-28.267-21.14-6.608-11.446-8.1-23.302-4.475-35.569 3.276-12.066 10.5-21.324 21.673-27.774 10.823-6.249 22.278-7.776 34.365-4.58 11.738 3.397 20.911 10.819 27.519 22.265 6.408 11.099 8.149 22.581 5.223 34.445-3.476 11.718-10.626 20.702-21.45 26.951Z" fill="#2F2F2F" style="mix-blend-mode:multiply"/>
+    <path d="M45.857 246.331c-12.705-2.24-22.694-8.272-29.969-18.095-7.601-10.287-10.29-21.742-8.064-34.363 2.295-13.016 8.774-23.058 19.435-30.125 10.265-7.137 21.75-9.585 34.455-7.345 12.308 2.17 22.065 8.364 29.27 18.581 6.807 10.148 9.063 21.729 6.768 34.745-2.225 12.622-8.272 22.536-18.14 29.743-10.195 6.743-21.446 9.029-33.755 6.859Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
+    <path d="M82.88 119.74c-8.293-9.883-12.069-20.925-11.327-33.126.79-12.767 6.093-23.27 15.91-31.507 10.126-8.496 21.543-12.024 34.253-10.584 12.451 1.13 22.823 6.637 31.115 16.52 8.034 9.574 11.526 20.59 10.478 33.048-1.308 12.15-7.024 22.472-17.149 30.968-9.817 8.238-20.822 11.946-33.014 11.124-12.144-1.388-22.233-6.869-30.266-16.443ZM192.612 46.565c0-12.901 4.206-23.787 12.616-32.656C214.039 4.636 224.853 0 237.669 0c13.217 0 24.231 4.636 33.042 13.909 8.811 8.87 13.217 19.755 13.217 32.656 0 12.498-4.406 23.181-13.217 32.051-8.811 8.466-19.825 12.7-33.042 12.7-12.816 0-23.63-4.234-32.441-12.7-8.41-8.87-12.616-19.553-12.616-32.051Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
 </svg>

branches/6.0/src/wp-admin/images/about-header-freedoms.svg

@@ -1 @@
-<svg width="380" height="278" viewBox="0 0 380 278" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M317.283 636.325 297.983.802l65.268 4.802 16.19 627.838-62.158 2.883Z" fill="#2F2F2F"/>
-    <path d="M237.772 636.803 211.16 9.443l66.772-4.323 26.612 633.123-66.772-1.44Z" fill="#1B8362"/>
-    <path d="M122.645 631.162V3.998l59.68 3.836-4.59 627.164-55.09-3.836Z" fill="#2F2F2F"/>
-    <path d="M.703 637.383 27.111 5.7l64.254-3.084-28.05 633.538-62.612 1.229Z" fill="#3858E9"/>
+<svg width="411" height="498" viewBox="0 0 411 498" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <path d="M347.119 493.19L327.819 2.16856L393.087 5.87838L409.277 490.963L347.119 493.19Z" fill="#2F2F2F"/>
+    <path d="M247.608 493.559L220.996 8.84435L287.768 5.50391L314.38 494.672L247.608 493.559Z" fill="#1B8362"/>
+    <path d="M113.48 489.201L113.48 4.63739L173.161 7.60108L168.571 492.165L113.48 489.201Z" fill="#2F2F2F"/>
+    <path d="M0.539062 494.008L26.947 5.95283L91.2011 3.5701L63.1516 493.058L0.539062 494.008Z" fill="#3858E9"/>
 </svg>

branches/6.0/src/wp-admin/images/about-header-privacy.svg

@@ -1 @@
-<svg width="503" height="553" viewBox="0 0 503 553" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M411.561 552.354 107 92.978l51.604-30.168 300.735 461.913-47.778 27.631Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
-    <path d="M40.197 400.356 257.575 0l51.119 30.927L87.281 429.092l-47.084-28.736Z" fill="#2F2F2F" style="mix-blend-mode:multiply"/>
-    <path d="m5.588 287.13 496.646 21.253-5.589 59.496L.195 342.04l5.393-54.91Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
+<svg width="396" height="515" viewBox="0 0 396 515" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <path d="M105.927 265.31V117.777C105.927 70.144 146.465 33 198.02 33c51.555 0 92.094 37.144 92.094 84.777V265.31" stroke="#3858E9" stroke-width="64.323"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.904 193.434c-9.427 0-17.068 7.642-17.068 17.068v303.643h395V210.502c0-9.426-7.642-17.068-17.068-17.068H17.904Zm217.11 141.097c0 16.284-10.545 30.106-25.18 35.007l23.361 33.29c2.107 3.002-.041 7.132-3.708 7.132h-63.205c-3.667 0-5.814-4.13-3.708-7.132l23.446-33.41c-14.451-5.005-24.827-18.734-24.827-34.887 0-20.385 16.526-36.911 36.911-36.911s36.91 16.526 36.91 36.911Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
 </svg>