Changeset 56340

Timestamp:

08/01/2023 03:09:29 PM (15 months ago)

Author:

ryelle

Message:

Help/About: Add images to About page, match header style to images.

Props richtabor, markoserb, audrasjb, peterwilsoncc, mukesh27.
Reviewed by davidbaumwald.
Merges [56339] to the 6.3 branch.
See #58067.

Location:

branches/6.3

Files:

• . (modified) (1 prop)
• src/wp-admin/about.php (modified) (7 diffs)
• src/wp-admin/css/about.css (modified) (1 diff)

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

@@ -62 +62 @@
 
         <div class="about__section has-2-columns">
-            <div class="column">
-                <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
+            <div class="column is-vertically-aligned-center">
+                <div class="about__image">
+                    <img src="https://s.w.org/images/core/6.3/1-site-editor.webp" alt="" height="436" width="436" />
                 </div>
             </div>
@@ -78 +78 @@
                 <p><?php _e( 'Arrange blocks in unlimited ways and save them as Patterns for use throughout your site. You can even specify whether to sync your patterns (previously referred to as “reusable blocks”) so that one change applies to all parts of your site. Or, utilize patterns as a starting point with the ability to customize each instance.' ); ?></p>
             </div>
-            <div class="column">
-                <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
-                </div>
-            </div>
-        </div>
-
-        <div class="about__section has-2-columns">
-            <div class="column">
-                <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
+            <div class="column is-vertically-aligned-center">
+                <div class="about__image">
+                    <img src="https://s.w.org/images/core/6.3/2-create-patterns.webp" alt="" height="436" width="436" />
+                </div>
+            </div>
+        </div>
+
+        <div class="about__section has-2-columns">
+            <div class="column is-vertically-aligned-center">
+                <div class="about__image">
+                    <img src="https://s.w.org/images/core/6.3/3-command-palette.webp" alt="" height="436" width="436" />
                 </div>
             </div>
@@ -102 +102 @@
                 <p><?php _e( 'New design controls bring more versatility for fine-tuning designs, starting with the ability to customize your caption&#8217;s styles from the Styles Interface without coding. You can manage your duotone filters in Styles for supported blocks and pick from the options provided by your theme or disable them entirely. The Cover block gets added settings for text color, layout controls, and border options, making this powerful block even more handy.' ); ?></p>
             </div>
-            <div class="column">
-                <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
+            <div class="column is-vertically-aligned-center">
+                <div class="about__image">
+                    <img src="https://s.w.org/images/core/6.3/4-design-tools.webp" alt="" height="436" width="436" />
                 </div>
             </div>
@@ -112 +112 @@
             <div class="column">
                 <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='100' height='100' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
+                    <img src="https://s.w.org/images/core/6.3/5-style-revisions.webp" alt="" height="270" width="270" />
                 </div>
                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Track design changes with Style Revisions' ); ?></h3>
@@ -119 +119 @@
             <div class="column">
                 <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='100' height='100' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
+                    <img src="https://s.w.org/images/core/6.3/6-footnotes-block.webp" alt="" height="270" width="270" />
                 </div>
                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Annotate with the Footnotes block' ); ?></h3>
@@ -126 +126 @@
             <div class="column">
                 <div class="about__image">
-                    <img src="data:image/svg+xml,%3Csvg width='100' height='100' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23dcdcde' /%3E%3C/svg%3E" alt="" />
+                    <img src="https://s.w.org/images/core/6.3/7-details-block.webp" alt="" height="270" width="270" />
                 </div>
                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Show or hide content with the Details block' ); ?></h3>
@@ -234 +234 @@
         <div class="about__section has-3-columns">
             <div class="column about__image is-vertically-aligned-top">
-                <img src="<?php echo esc_url( admin_url( 'images/about-release-badge.svg?ver=6.3' ) ); ?>" alt="" />
+                <img src="<?php echo esc_url( admin_url( 'images/about-release-badge.svg?ver=6.3' ) ); ?>" alt="" height="270" width="270" />
             </div>
             <div class="column is-vertically-aligned-center" style="grid-column-end:span 2">

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

@@ -540 +540 @@
     background-size: cover;
     background-position: center;
+    border-radius: 5px;
 }