From 994950ea8cd89a698fcb72c9102b4985d949a3bf Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Thu, 2 May 2019 15:43:10 +0000 Subject: [PATCH] Help/About: Polish the About page for 5.2. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The About page now uses a CSS grid to layout its design, making the page’s structure more obvious and hopefully easier for contributors in the future. - Removes some code that is no longer used (such as videos, mejs elements, etc.). - Update images. - Unnecessary HTML is removed from a string on the page. This was a regression. - Only users with the correct capability should be instructed to check their site status. - Fixes the placement of commas. Reviewed by melchoyce, afercia, jeremyfelt, and desrosj. Props ryelle, melchoyce, cathibosco1, man4toman, SergeyBiryukov, afercia, ramiy, kjellr, tellyworth, earnjam, andreamiddleton, marybaum. See #46901. git-svn-id: https://develop.svn.wordpress.org/trunk@45278 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 80 ++++--- src/wp-admin/css/about.css | 472 ++++++++++++++++--------------------- src/wp-admin/freedoms.php | 40 ++-- 3 files changed, 265 insertions(+), 327 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index e1865e0794..e11424ca67 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -40,46 +40,54 @@ include( ABSPATH . 'wp-admin/admin-header.php' ); -

- -
-
-

-
- -
+
+

+

+
+
-
-
+
+

-
- -

the Site Health features introduced in 5.1, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers. Check your site status, and learn how to debug issues.' ), - __( 'https://wordpress.org/news/2019/02/betty/' ), - admin_url( 'site-health.php' ), - admin_url( 'site-health.php?tab=debug' ) + /* translators: 1: link to the WordPress 5.1 release post */ + __( 'Building on the Site Health features introduced in 5.1, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers.' ), + __( 'https://wordpress.org/news/2019/02/betty/' ) ); + + if ( current_user_can( 'install_plugins' ) ) { + printf( + /* translators: 1: link to /wp-admin/site-health.php 2: link to /wp-admin/site-health.php?tab=debug */ + __( ' Check your site status, and learn how to debug issues.' ), + admin_url( 'site-health.php' ), + admin_url( 'site-health.php?tab=debug' ) + ); + } ?>

+
+
+ +
+
-
-
-
- +
+
+
+
+
+

@@ -87,14 +95,14 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-

+

-
-
+
+

-
+

@@ -102,33 +110,33 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-

+

-
-
+
+

-
+

-
-
+
+

*/ - __( '5.2 introduces a %1$s hook, which lets themes support injecting code right at the beginning of the %2$s element.' ), - 'wp_body_open', - '<body>' + __( '5.2 introduces a %1$s hook, which lets themes support injecting code right at the beginning of the %2$s element.' ), + 'wp_body_open', + '<body>' ); ?>

-
+

diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index fff8f62769..7b963c2025 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -8,7 +8,6 @@ 2.0 About Page 2.1 Typography 2.2 Structure - 2.3 Floating Header Layout 3.0 Credits & Freedoms Pages ------------------------------------------------------------------------------*/ @@ -51,29 +50,14 @@ vertical-align: middle; } -.about-wrap figure { - position: relative; - margin: 0; -} - -.about-wrap .feature-section figure img { - margin-bottom: 0; -} - -.about-wrap figcaption { - position: absolute; - bottom: 0; +.about-wrap .inline-svg img { + max-width: 100%; width: 100%; - padding: 40px 10px 15px; - overflow: auto; - box-sizing: border-box; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 60%, transparent); - font-weight: 600; - text-shadow: 0 0 5px rgba(0, 0, 0, 0.75); + height: auto; } -.about-wrap .jetpack-video-wrapper { - margin-bottom: 0; +.about-wrap video { + margin: 1.5em auto; } /* WordPress Version Badge */ @@ -116,17 +100,6 @@ /* 1.1 - Typography */ -.about-wrap p { - line-height: 1.5; - font-size: 14px; -} - -.about-wrap .feature-section p { - max-width: 55em; - margin-left: auto; - margin-right: auto; -} - .about-wrap h1 { margin: 0.2em 200px 0 0; padding: 0; @@ -150,13 +123,14 @@ line-height: 1.5; } -.about-wrap .under-the-hood-header { - margin: 40px 0 0; - text-align: center; +.about-wrap h4 { + font-size: 16px; + color: #23282d; } -.about-wrap h4 { - color: #23282d; +.about-wrap p { + line-height: 1.5; + font-size: 16px; } .about-wrap code, @@ -187,98 +161,135 @@ /* 1.2 - Structure */ -.about-wrap [class$="-col"] { - display: flex; - justify-content: space-between; - flex-wrap: wrap; +.about-wrap .has-1-columns, +.about-wrap .has-2-columns, +.about-wrap .has-3-columns, +.about-wrap .has-4-columns { + display: -ms-grid; + display: grid; + max-width: 800px; + margin-top: 40px; + margin-left: auto; + margin-right: auto; } -.about-wrap .one-col { - margin: 0 auto; - max-width: 680px; -} - -.about-wrap .one-col.is-wide { - max-width: 760px; -} - -.about-wrap .under-the-hood { - margin: auto; - max-width: 1020px; -} - -.about-wrap .inline-svg img { - max-width: 100%; - width: 100%; - height: auto; -} - -.about-wrap .inline-svg.full-width { - margin-bottom: 120px; -} - -.about-wrap .under-the-hood .inline-svg { - margin-left: 100px; -} - -.about-wrap [class$="-col"] .col { - flex: 1; - align-self: flex-start; -} - -.about-wrap [class$="-col"] .col + .col { +.about-wrap .column { + margin-right: 20px; margin-left: 20px; } -.about-wrap [class$="-col"] .is-span-two { - flex: 2; +.about-wrap .is-wide { + max-width: 760px; } -.about-wrap .one-col img { - margin: 1em 0 2em; +.about-wrap .is-fullwidth { + max-width: 100%; } -.about-wrap .one-col .alignright img, -.about-wrap .one-col .alignleft img { +.about-wrap .has-1-columns { + display: block; + max-width: 680px; + margin: 0 auto 40px; +} + +.about-wrap .has-2-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about-wrap .has-2-columns.is-wider-right { + -ms-grid-columns: 1fr 2fr; + grid-template-columns: 1fr 2fr; +} + +.about-wrap .has-2-columns.is-wider-left { + -ms-grid-columns: 2fr 1fr; + grid-template-columns: 2fr 1fr; +} + +.about-wrap .has-3-columns { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+2) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about-wrap .has-4-columns { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 4; + grid-column-start: 4; +} + +.about-wrap .column :first-child { margin-top: 0; } -.about-wrap .two-col img { - margin-bottom: 1.5em; -} - -.about-wrap .feature-video .mejs-controls { - display: none !important; -} - -.about-wrap .feature-video .mejs-overlay-loading span { - background: transparent; /* Hide loading.gif */ -} - -.about-wrap video { - margin: 1.5em auto; -} - -.about-wrap .inline-svg.alignright { - margin-left: 80px; -} - -.about-wrap .inline-svg.alignleft { - margin-right: 80px; -} - -.about-wrap .cta { +.about-wrap .aligncenter { text-align: center; } -.about-wrap .cta .button { - margin: 0 auto 5px; - font-weight: 600; +.about-wrap .alignleft { + float: left; + margin-right: 40px; } -.about-wrap .feature-section .button { - margin-top: 1.5em; - font-weight: 600; +.about-wrap .alignright { + float: right; + margin-left: 40px; +} + +.about-wrap .is-vertically-aligned-top { + align-self: start; +} + +.about-wrap .is-vertically-aligned-center { + align-self: center; +} + +.about-wrap .is-vertically-aligned-bottom { + align-self: end; } /* 1.3 - Point Releases */ @@ -288,6 +299,10 @@ border-bottom: 1px solid #ddd; } +.about-wrap .changelog { + margin-bottom: 40px; +} + .about-wrap .changelog.point-releases h3 { padding-top: 35px; } @@ -296,96 +311,38 @@ padding-top: 7px; } +.about-wrap .changelog.feature-section .col { + margin-top: 40px; +} + /*------------------------------------------------------------------------------ 2.0 - About Page ------------------------------------------------------------------------------*/ /* 2.1 - Typography */ -.about-wrap .feature-section-header { - margin: 50px 0 0; -} - -.about-wrap .feature-section.two-col h3 { - margin-top: 0; -} - -.about-wrap .feature-section h4 { - margin: 1.4em 0 0.6em 0; - font-size: 1em; +.about-wrap .lead-description { + font-size: 1.5em; + text-align: center; } .about-wrap .feature-section p { margin-top: 0.6em; } -.about-wrap .lead-description { - font-size: 1.5em; - text-align: center; -} - -.about-wrap .two-col-text { - column-count: 2; - column-gap: 40px; -} - -.about-wrap .two-col-text p:first-of-type { - margin-top: 0; -} - -.about-wrap .streamlined-updates p, -.about-wrap .native-fonts p { - margin-bottom: 3em; -} - -.about-wrap .under-the-hood img + h3 { - margin-top: 1.25em; -} - /* 2.2 - Structure */ .about-wrap .headline-feature { - margin-bottom: 40px; + margin: 0 auto 40px; + max-width: 680px; } -.about-wrap .featured-image { - text-align: center; +.about-wrap .headline-feature h2 { + margin: 50px 0 0; } -.about-wrap .feature-section { - overflow: hidden; -} - -.about-wrap .feature-section.no-heading { - padding-top: 35px; -} - -.about-wrap .feature-section .media-container { - overflow: hidden; -} - -.about-wrap .embed-container { - text-align: center; -} - -.about-wrap .embed-container iframe { - max-width: 100%; -} - -.about-wrap .wp-embedded-content { - max-width: 100%; -} - -.about-wrap .feature-section .col { - margin-top: 40px; -} - -.about-wrap .changelog { - margin-bottom: 40px; -} - -.about-wrap .changelog.feature-section .col { - margin-top: 40px; +.about-wrap .headline-feature img { + max-width: 600px; } /* Return to Dashboard Home link */ @@ -490,18 +447,25 @@ margin: 0.6em 0; } -.freedoms-php .about-wrap .col .freedoms-image { +.freedoms-php .has-4-columns { + margin-bottom: 40px; +} + +.freedoms-php .column .freedoms-image { background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png'); background-size: 100%; padding-top: 100%; } -.freedoms-php .about-wrap .col:nth-of-type(2) .freedoms-image { + +.freedoms-php .column:nth-of-type(2) .freedoms-image { background-position: 0 34%; } -.freedoms-php .about-wrap .col:nth-of-type(3) .freedoms-image { + +.freedoms-php .column:nth-of-type(3) .freedoms-image { background-position: 0 66%; } -.freedoms-php .about-wrap .col:nth-of-type(4) .freedoms-image { + +.freedoms-php .column:nth-of-type(4) .freedoms-image { background-position: 0 100%; } @@ -510,51 +474,60 @@ ------------------------------------------------------------------------------*/ @media screen and (max-width: 782px) { - .about-wrap .two-col-text { - column-count: 1; + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } - .about-wrap .one-col .alignright { - margin-left: 20px; - max-width: 150px; + .about-wrap .has-3-columns .column:nth-of-type(3n+1), + .about-wrap .has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-row: 1; + grid-row-start: 1; } - .about-wrap .one-col .alignleft { - margin-right: 20px; - max-width: 150px; + .about-wrap .has-3-columns .column:nth-of-type(3n+2), + .about-wrap .has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-row: 1; + grid-row-start: 1; } - .about-wrap .two-col .col, - .about-wrap .three-col .col, - .about-wrap .four-col .col { - min-width: 48% !important; - max-width: 48% !important; - margin-left: 0 !important; + .about-wrap .has-3-columns .column:nth-of-type(3n), + .about-wrap .has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-row: 2; + grid-row-start: 2; } - .about-wrap .eight-col .col { - min-width: 24% !important; + .about-wrap .has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-row: 2; + grid-row-start: 2; } +} - .about-wrap .three-col img, - .about-wrap .four-col img, - .about-wrap .eight-col img { +@media screen and (max-width: 600px) { + .about-wrap .has-2-columns, + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { display: block; - margin: 0 auto; } - .about-wrap figcaption { - position: relative; - margin-top: 10px; - margin-bottom: 15px; - padding: 0; - background: none; - color: #40464D; - text-shadow: none; + .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { + margin-right: 0; + margin-left: 0; } - .about-wrap .under-the-hood .inline-svg { - margin-left: 40px; + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: -ms-grid; + display: grid; } } @@ -578,60 +551,21 @@ margin-bottom: 1.5em; width: 100%; } - - .about-wrap .one-col .alignright, - .about-wrap .one-col .alignleft { - max-width: 120px; - } - - .about-wrap .feature-section .col { - margin-top: 1em; - } - - .about-wrap .two-col .col, - .about-wrap .three-col .col, - .about-wrap .three-col .col { - min-width: 100% !important; - } - - .about-wrap .eight-col .col { - min-width: 48% !important; - } - - .about-wrap .under-the-hood.four-col .col, - .about-wrap .under-the-hood.three-col .col, - .about-wrap .under-the-hood.two-col .col, - .about-wrap .under-the-hood.one-col .col { - margin-bottom: 2em; - padding-bottom: 0; - } - - .about-wrap .under-the-hood:nth-of-type(2n), - .about-wrap .under-the-hood:nth-of-type(3n) { - margin-top: 0; - } - - .about-wrap .under-the-hood img + h3 { - margin-top: 1.25em; - } - - .about-wrap .under-the-hood .inline-svg { - display: none; - } - - .about-wrap .inline-svg.full-width { - margin-bottom: 60px; - } } -@media only screen and (max-width: 320px) { - .about-wrap .one-col .alignright, - .about-wrap .one-col .alignleft { - float: none; - margin: 0 auto; +@media only screen and (max-width: 480px) { + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: block; } - .about-wrap .one-col .alignright img, - .about-wrap .one-col .alignleft img { - margin: 0 0 1em; + + .about-wrap .column { + margin-right: 0; + margin-left: 0; + } + + .about-wrap .has-2-columns.is-wider-right img, + .about-wrap .has-2-columns.is-wider-left img { + max-width: 160px; } } diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php index dc81a5baf2..fb99a8732a 100644 --- a/src/wp-admin/freedoms.php +++ b/src/wp-admin/freedoms.php @@ -53,51 +53,47 @@ if ( $is_privacy_notice ) {
-
-
-

-

license, the GPL.' ), 'https://wordpress.org/about/license/' ); ?>

-
+
+

+

license, the GPL.' ), 'https://wordpress.org/about/license/' ); ?>

-
-
+
+

-
+

-
+

-
+

-
-
-

check out our trademark guidelines first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?>

+
+

check out our trademark guidelines first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?>

-

- + plugins and themes there. If you get a plugin or theme from another source, make sure to ask them if it’s GPL first. If they don’t respect the WordPress license, we don’t recommend them.' ), $plugins_url, $themes_url, 'https://wordpress.org/about/license/' ); - ?> -

+ printf( __( 'Every plugin and theme in WordPress.org’s directory is 100%% GPL or a similarly free and compatible license, so you can feel safe finding plugins and themes there. If you get a plugin or theme from another source, make sure to ask them if it’s GPL first. If they don’t respect the WordPress license, we don’t recommend them.' ), $plugins_url, $themes_url, 'https://wordpress.org/about/license/' ); + ?> +

-

Free Software Foundation.' ); ?>

-
+

Free Software Foundation.' ); ?>