Changeset 55499 for trunk/src/wp-admin/about.php

Timestamp:

03/09/2023 04:28:25 PM (20 months ago)

Author:

ryelle

Message:

Help/About: Update copy & style for About page and subpages.

Minor copy updates. Update heading style, text size, spacing in smaller columns. Remove columns placement code to simplify CSS. This was necessary for IE11, but modern browsers can use auto-placement. Move navigation out of the banner to keep size & background placement consistent across About section.

Props marybaum, sereedmedia, annezazu, jpantani, laurlittle, richtabor, markoserb, fcoveram, joen, kebbet.
See #57477.

File:

• trunk/src/wp-admin/about.php (modified) (9 diffs)

trunk/src/wp-admin/about.php

@@ -34 +34 @@
 
             <div class="about__header-text"></div>
-
-            <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
-                <a href="about.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'What&#8217;s New' ); ?></a>
-                <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
-                <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
-                <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
-            </nav>
-        </div>
+        </div>
+
+        <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
+            <a href="about.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'What&#8217;s New' ); ?></a>
+            <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
+            <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
+            <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
+        </nav>
 
         <div class="about__section">
@@ -154 +154 @@
                     <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='%231d35b4' /%3E%3C/svg%3E" alt="" />
                 </div>
-                <h3 class="is-smaller-heading"><?php _e( 'Style Book' ); ?></h3>
+                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Style Book' ); ?></h3>
                 <p><?php _e( 'Use the new Style Book to get a complete overview of how every block in your site&#8217;s library looks. All in one place, all at a glance.' ); ?></p>
             </div>
@@ -161 +161 @@
                     <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='%231d35b4' /%3E%3C/svg%3E" alt="" />
                 </div>
-                <h3 class="is-smaller-heading"><?php _e( 'Copy and paste styles' ); ?></h3>
+                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Copy and paste styles' ); ?></h3>
                 <p><?php _e( 'Perfect the design on one type of block, then copy and paste those styles to other blocks to get just the look you want.' ); ?></p>
             </div>
@@ -168 +168 @@
                     <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='%231d35b4' /%3E%3C/svg%3E" alt="" />
                 </div>
-                <h3 class="is-smaller-heading"><?php _e( 'Custom CSS' ); ?></h3>
+                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Custom CSS' ); ?></h3>
                 <p><?php _e( 'Power up your site any way you wish. Add CSS to your site, or your blocks, for another level of control over your site&#8217;s look and feel.' ); ?></p>
             </div>
@@ -181 +181 @@
                     </svg>
                 </div>
-                <h3 class="is-smaller-heading"><?php _e( 'Sticky positioning' ); ?></h3>
-                <p><?php _e( 'Choose to keep certain blocks fixed to the top of a page as visitors scroll.' ); ?></p>
+                <h3 class="is-smaller-heading" style="margin-top:0;margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Sticky positioning' ); ?></h3>
+                <p><?php _e( 'Choose to keep top-level group blocks fixed to the top of a page as visitors scroll.' ); ?></p>
             </div>
             <div class="column">
@@ -191 +191 @@
                     </svg>
                 </div>
-                <h3 class="is-smaller-heading"><?php _e( 'Importing widgets' ); ?></h3>
+                <h3 class="is-smaller-heading" style="margin-top:0;margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Importing widgets' ); ?></h3>
                 <p><?php _e( 'Options to import your favorite widgets from Classic themes to Block themes.' ); ?></p>
             </div>
@@ -201 +201 @@
                     </svg>
                 </div>
-                <h3 class="is-smaller-heading"><?php _e( 'Local fonts in themes' ); ?></h3>
-                <p><?php _e( 'Default WordPress themes offer better privacy with Google Fonts included.' ); ?></p>
+                <h3 class="is-smaller-heading" style="margin-top:0;margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Local fonts in themes' ); ?></h3>
+                <p><?php _e( 'Default WordPress themes offer better privacy with Google Fonts now included.' ); ?></p>
             </div>
         </div>
@@ -208 +208 @@
         <hr />
 
-        <div class="about__section has-2-columns is-wider-right">
+        <div class="about__section has-3-columns">
             <div class="column about__image is-vertically-aligned-top">
                 <a href="https://youtu.be/1w9oywSa6Hw">
@@ -214 +214 @@
                 </a>
             </div>
-            <div class="column is-vertically-aligned-center">
+            <div class="column is-vertically-aligned-center" style="grid-column-end:span 2">
                 <h3>
                     <?php