Changeset 55499

Timestamp:

03/09/2023 04:28:25 PM ( 19 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 .

Location:

trunk/src/wp-admin

Files:

• about.php (modified) ( 9 diffs )
• credits.php (modified) ( 1 diff )
• css/about.css (modified) ( 16 diffs )
• freedoms.php (modified) ( 1 diff )
• images/about-header-freedoms.svg (modified) ( 1 diff )
• privacy.php (modified) ( 1 diff )

trunk/src/wp-admin/about.php

@@ -thirty-four +thirty-four @@
 
              <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( 'Freedom s' ); ?></a>
-                 <a href="privacy.php" class="nav-tab"><? php _e( 'Privacy ' ); ?></ a>
-             < /nav >
-         </ di v>
+         </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( 'Credit s' ); ?></a>
+             <a href="freedoms.php" class="nav-tab"><? php _e( 'Freedoms ' ); ?></ a>
+             < a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></ a >
+         </ na v>
 
          <div class="about__section">
@@ -one hundred and fifty-four +one hundred and fifty-four @@
                      <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>
@@ -one hundred and sixty-one +one hundred and sixty-one @@
                      <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>
@@ -one hundred and sixty-eight +one hundred and sixty-eight @@
                      <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>
@@ -one hundred and eighty-one +one hundred and eighty-one @@
                      </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">
@@ -one hundred and ninety-one +one hundred and ninety-one @@
                      </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>
@@ -two hundred and one +two hundred and one @@
                      </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>
@@ -two hundred and eight +two hundred and eight @@
          <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 ">
@@ -two hundred and fourteen +two hundred and fourteen @@
                  </a>
              </div>
-             <div class="column is-vertically-aligned-center" >
+             <div class="column is-vertically-aligned-center"  style="grid-column-end:span 2" >
                  <h3>
                      <? php

trunk/src/wp-admin/credits.php

@@ -thirty-eight +thirty-eight @@
              ?>
          </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"><? php _e( 'What&#8217; s New' ); ?></a>
-             <a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><? 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>
+     <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"><? php _e( 'What&#8217; s New' ); ?></a>
+         <a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><? 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 has-1-column has-gutters">

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

@@ -two hundred and twenty-one +two hundred and twenty-one @@
  }
 
- .about__section .has-2-columns .is-section-header {
+ .about__section .is-section-header {
      grid-column-start: 1;
-     -ms-grid-column-span: 2;
-     grid-column-end: span 2;
- }
-
- .about__section.has-2-columns .column:nth-of-type(2n+1) {
-     grid-column-start: 1;
- }
-
- .about__section.has-2-columns .column:nth-of-type(2n) {
-     grid-column-start: 2;
+     grid-column-end: -1;
  }
 
@@ -two hundred and thirty-nine +two hundred and thirty @@
  }
 
- .about__section.has-3-columns .is-section-header {
-     grid-column-start: 1;
-     -ms-grid-column-span: 3;
-     grid-column-end: span 3;
- }
-
- .about__section.has-3-columns .column:nth-of-type(3n+1) {
-     grid-column-start: 1;
- }
-
- .about__section.has-3-columns .column:nth-of-type(3n+2) {
-     grid-column-start: 2;
- }
-
- .about__section.has-3-columns .column:nth-of-type(3n) {
-     grid-column-start: 3;
- }
-
  .about__section.has-4-columns {
      grid-template-columns: repeat(4, 1fr);
  }
 
- .about__section.has-4-columns .is-section-header {
-     grid-column-start: 1;
-     -ms-grid-column-span: 4;
-     grid-column-end: span 4;
- }
-
- .about__section.has-4-columns .column:nth-of-type(4n+1) {
-     grid-column-start: 1;
- }
-
- .about__section.has-4-columns .column:nth-of-type(4n+2) {
-     grid-column-start: 2;
- }
-
- .about__section.has-4-columns .column:nth-of-type(4n+3) {
-     grid-column-start: 3;
- }
-
- .about__section.has-4-columns .column:nth-of-type(4n) {
-     grid-column-start: 4;
- }
-
- /* Any columns following a section header need to be expicitly put into the second row, for IE support. */
- .about__section.has-2-columns .is-section-header ~ .column,
- .about__section.has-3-columns .is-section-header ~ .column,
- .about__section.has-4-columns .is-section-header ~ .column,
- .about__section.has-overlap-style .is-section-header ~ .column {
-     grid-row-start: 2;
- }
-
  .about__section.has-overlap-style {
      grid-template-columns: repeat(7, 1fr);
@@ -three hundred and one +two hundred and forty-four @@
  .about__section.has-overlap-style .column:nth-of-type(2n+1) {
      grid-column-start: 2;
-     -ms-grid-column-span: 3;
      grid-column-end: span 3;
  }
@@ -three hundred and seven +two hundred and forty-nine @@
  .about__section.has-overlap-style .column:nth-of-type(2n) {
      grid-column-start: 4;
-     -ms-grid-column-span: 3;
      grid-column-end: span 3;
  }
@@ -three hundred and fifty-five +two hundred and ninety-six @@
      }
 
-     .about__section.has-4-columns .column:nth-of-type(2n+1) {
-         grid-column-start: 1;
-     }
-
-     .about__section.has-4-columns .column:nth-of-type(2n) {
-         grid-column-start: 2;
-     }
-
-     .about__section.has-4-columns .column:nth-of-type(4n+3),
-     .about__section.has-4-columns .column:nth-of-type(4n) {
-         grid-row-start: 2;
-     }
-
-     .about__section.has-4-columns .is-section-header {
-         -ms-grid-column-span: 2;
-         grid-column-end: span 2;
-     }
-
-     .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3),
-     .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) {
-         grid-row-start: 3;
-     }
-
      .about__section.has-overlap-style {
          grid-template-columns: 1fr;
@@ -three hundred and eighty-five +three hundred and three @@
      .about__section.has-overlap-style .column.column {
          grid-column-start: 1;
-         -ms-grid-column-span: 1;
          grid-column-end: 2;
          grid-row-start: 1;
-         -ms-grid-row-span: 1;
          grid-row-end: 2;
      }
@@ -four hundred and seventy-six +three hundred and ninety-two @@
      margin-top: 0;
      font-size: 1.125rem;
-     font-weight: seven 00;
+     font-weight: six 00;
      line-height: 1.6;
  }
@@ -five hundred and forty-nine +four hundred and sixty-five @@
  }
 
+ .about__container .about__image svg {
+     vertical-align: middle;
+ }
+
  .about__container .about__image + h3 {
      margin-top: 1.5em;
@@ -five hundred and fifty-eight +four hundred and seventy-eight @@
 
  .about__container hr {
-     margin: 0 ;
+     margin: 0  var(--gap) ;
      height: var(--gap);
      border: none;
@@ -five hundred and eighty-eight +five hundred and eight @@
  }
 
+ .about__section.has-3-columns,
+ .about__section.has-4-columns {
+     font-size: 1rem;
+ }
+
  @media screen and (max-width: 480px) {
      .about__section.is-feature {
@@ -six hundred and four +five hundred and twenty-nine @@
  .about__header {
      position: relative;
-     margin-bottom: var(--gap);
-     padding-top: 0;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     justify-content: center;
+     box-sizing: border-box;
+     padding: calc(var(--gap) * 2) 0;
+     min-height: 420px;
      color: var(--text-light);
      background: var(--background) url('../images/about-header-about.svg? ver=6.2') no-repeat;
      background-size: cover;
-     background-position: center  calc(50% - 36px) ;
+     background-position: center ;
  }
 
@@ -six hundred and thirty-one +five hundred and sixty-one @@
      box-sizing: border-box;
      margin: 0 var(--gap);
-     padding: 9rem 0 0;
+     padding: 0;
      text-align: center;
  }
@@ -six hundred and fifty-eight +five hundred and eighty-eight @@
      box-sizing: border-box;
      max-width: 22em;
-     margin: 0 auto  10rem ;
+     margin: 0 auto ;
      padding: 0;
      font-size: 1.6rem;
      line-height: 1.15;
      text-align: center;
- }
-
- .credits-php .about__header-text {
-     margin-bottom: 9rem;
  }
 
@@ -six hundred and seventy-five +six hundred and one @@
      justify-content: center;
      padding-top: 0;
+     margin-bottom: var(--gap);
      background: var(--nav-background);
      color: var(--nav-color);
@@ -seven hundred and fifty-four +six hundred and eighty-one @@
  }
 
+ @media screen and (max-width: 600px) {
+     .about__header {
+         min-height: auto;
+     }
+ }
+
  @media screen and (max-width: 480px) {
      .about__header,
@@ -seven hundred and sixty-six +six hundred and ninety-nine @@
      }
 
-     .about__header-title {
-         padding-top: 2rem;
-     }
-
-     .about__header-text,
-     .credits-php .about__header-text {
+     .about__header-text {
          margin-left: calc(var(--gap) / 2);
          margin-right: calc(var(--gap) / 2);
-         margin-bottom: 2rem;
      }
 

trunk/src/wp-admin/freedoms.php

@@ -thirty-five +thirty-five @@
              <? php _e( 'WordPress is free and open source software' ); ?>
          </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"><? 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 nav-tab-active" aria-current="page"><? php _e( 'Freedoms' ); ?></ a>
-             <a href="privacy.php" class="nav-tab"><? php _e( 'Privacy' ); ?></ a>
-         </nav>
-     </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"><? 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 nav-tab-active" aria-current="page"><? php _e( 'Freedoms' ); ?></ a>
+         <a href="privacy.php" class="nav-tab"><? php _e( 'Privacy' ); ?></ a>
+     </nav>
 
      <div class="about__section is-feature">

trunk/src/wp-admin/images/about-header-freedoms.svg

@@ -five +five @@
    <path d="M231-26c0 110.46 89.54 200 200 200h1000" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
    <path d="M336-26c0 55.23 44.567 100 99.545 100H1431" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
-   <path d="M132 27c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM474 104c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM9 49 204c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM77 5 404c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
+   <path d="M132 27c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM474 104c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM9 36 204c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM75 5 404c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
  </svg>

trunk/src/wp-admin/privacy.php

@@ -twenty-nine +twenty-nine @@
              <? php _e( 'We take privacy and transparency very seriously' ); ?>
          </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"><? 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 nav-tab-active" aria-current="page"><? php _e( 'Privacy' ); ?></ a>
-         </nav>
-     </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"><? 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 nav-tab-active" aria-current="page"><? php _e( 'Privacy' ); ?></ a>
+     </nav>
 
      <div class="about__section has-2-columns is-wider-right">