Index: src/wp-admin/about.php =================================================================== --- src/wp-admin/about.php (revision 43896) +++ src/wp-admin/about.php (working copy) @@ -16,12 +16,15 @@ list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); +wp_enqueue_style( 'wp-block-library' ); + include( ABSPATH . 'wp-admin/admin-header.php' ); ?>

-

+

+

Learn how.' ), 'https://wordpress.org/plugins/classic-editor' ); ?>

@@ -31,346 +34,219 @@

-
-

-

- Version %1$s addressed %2$s bug.', - 'Version %1$s addressed %2$s bugs.', - 46 - ), - '4.9.8', - number_format_i18n( 46 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.8' ); - ?> -

-

- Version %1$s addressed some security issues and fixed %2$s bug.', - 'Version %1$s addressed some security issues and fixed %2$s bugs.', - 17 - ), - '4.9.7', - number_format_i18n( 17 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.7' ); - ?> -

-

- Version %1$s addressed %2$s bug.', - 'Version %1$s addressed %2$s bugs.', - 18 - ), - '4.9.6', - number_format_i18n( 18 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.6' ); - ?> -

-

- Version %1$s addressed some security issues and fixed %2$s bug.', - 'Version %1$s addressed some security issues and fixed %2$s bugs.', - 28 - ), - '4.9.5', - number_format_i18n( 28 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.5' ); - ?> -

-

- Version %1$s addressed %2$s bug.', - 'Version %1$s addressed %2$s bugs.', - 1 - ), - '4.9.4', - number_format_i18n( 1 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.4' ); - ?> -

-

- Version %1$s addressed %2$s bug.', - 'Version %1$s addressed %2$s bugs.', - 34 - ), - '4.9.3', - number_format_i18n( 34 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.3' ); - ?> -

-

- Version %1$s addressed some security issues and fixed %2$s bug.', - 'Version %1$s addressed some security issues and fixed %2$s bugs.', - 22 - ), - '4.9.2', - number_format_i18n( 22 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.2' ); - ?> -

-

- Version %1$s addressed some security issues and fixed %2$s bug.', - 'Version %1$s addressed some security issues and fixed %2$s bugs.', - 11 - ), - '4.9.1', - number_format_i18n( 11 ) - ); - ?> - the release notes.' ), 'https://codex.wordpress.org/Version_4.9.1' ); - ?> -

-
-
-

- -

-

+

-
- - - - +
+
-
-
-

+
+
+

+
-
-
-
- -
-

-

-
-
-
- -
-

-

-
-
-
- -
-

-

-
-
-
- -
-

-

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

+
+
+

+

+ +

+
-
-
-
- -
-

-

-
-
-
- -
-

-

-
-
-
- -
-

-

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

+
+
+

+

+
+
+ +
-
-
-
- -
-

-

-
-
-
- -
-

-

-
+
+
+

-
-
-

-
+
+ +
-
-
-
- -
-

-

-
-
-
- -
-

-

-
+
+
+

-
- - - - +
+
+ +

Designed for the block editor

+

+
+
+ +

Simple, type-driven layout

+

+
+
+ +

Versatile design for all sites

+

+
-
-

- -

-

early tester or getting involved with the Gutenberg project? Contribute on GitHub.' ), - __( 'https://wordpress.org/plugins/gutenberg/' ), - 'https://github.com/WordPress/gutenberg' ); ?>

-
-
-

+

-
+
-

-

Check out the full list.' ), - 'https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/' - ); - ?>

+

+

-

-

+

+

-

-

+

+

-
-

-

-
Index: src/wp-admin/css/about.css =================================================================== --- src/wp-admin/css/about.css (revision 43896) +++ src/wp-admin/css/about.css (working copy) @@ -40,7 +40,7 @@ .about-wrap hr { border: 0; height: 0; - margin: 0; + margin: 3em 0 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } @@ -51,6 +51,24 @@ 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; + width: 100%; + padding: 40px 10px 15px; + overflow: auto; + box-sizing: border-box; +} + .about-wrap .jetpack-video-wrapper { margin-bottom: 0; } @@ -132,12 +150,6 @@ color: #23282d; } -.about-wrap .changelog h2 { - font-size: 1.4em; - font-weight: 600; - text-align: left; -} - .about-wrap .changelog h3 { margin: 1.33em 0; font-size: 1em; @@ -151,6 +163,12 @@ font-weight: 400; } +.about-wrap figcaption { + font-size: 13px; + text-align: center; + color: white; +} + .about-wrap .about-description, .about-wrap .about-text { margin-top: 1.4em; @@ -161,7 +179,6 @@ .about-wrap .about-text { margin: 1em 200px 1em 0; - min-height: 60px; color: #555d66; } @@ -175,7 +192,7 @@ .about-wrap .feature-section.one-col { margin: 0 auto; - max-width: 700px; + max-width: 680px; } .about-wrap .inline-svg img { @@ -197,6 +214,12 @@ max-width: 47%; } +.about-wrap .three-col, +.about-wrap .four-col { + margin: auto; + max-width: 1020px; +} + .about-wrap .three-col .col { align-self: flex-start; min-width: 31%; @@ -203,6 +226,23 @@ max-width: 31%; } +.about-wrap .four-col .col { + align-self: flex-start; + min-width: 23%; + max-width: 23%; +} + +.about-wrap .feature-section.eight-col .col { + align-self: flex-start; + margin-top: 6px; + min-width: 12%; + max-width: 12%; +} + +.about-wrap .one-col img { + margin: 1em 0 2em; +} + .about-wrap .two-col img { margin-bottom: 1.5em; } @@ -294,7 +334,6 @@ .about-wrap .feature-section { overflow: hidden; - padding: 0 0 40px; } .about-wrap .feature-section.no-heading { @@ -305,10 +344,6 @@ overflow: hidden; } -.about-wrap .feature-section img { - margin-bottom: 1em; -} - .about-wrap .embed-container { text-align: center; } @@ -346,84 +381,6 @@ padding: 0 5px; } -/* 2.3 Floating Header Layout */ - -.about-wrap .floating-header-section { - display: -ms-grid; - display: grid; - grid-gap: 0 60px; - -ms-grid-columns: 5fr 11fr; - grid-template-columns: 5fr 11fr; - max-width: 1020px; - margin: 0 auto 120px; -} - -.about-wrap .floating-header-section .section-header { - -ms-grid-column: 1; - grid-column: 1; - position: relative; - min-width: 230px; - max-width: 300px; -} - -.about-wrap .floating-header-section h2 { - margin: 0; - text-align: left; - position: absolute; -} - -.about-wrap .floating-header-section .section-content { - -ms-grid-column: 2; - grid-column: 2; - display: flex; - justify-content: space-between; - align-items: flex-start; - flex-flow: row wrap; - flex-grow: 2; - flex-shrink: 0; -} - -.about-wrap .floating-header-section .section-item { - flex-grow: 1; - max-width: calc(50% - 30px); -} - -.about-wrap .floating-header-section .section-item:nth-child(1), -.about-wrap .floating-header-section .section-item:nth-child(2) { - margin-bottom: 60px; -} - -.about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2), -.about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) { - margin-bottom: 0; -} - -.about-wrap .floating-header-section.has-long-title { - display: block; -} - -.about-wrap .floating-header-section.has-long-title .section-header { - max-width: 100%; -} - -.about-wrap .floating-header-section.has-long-title h2 { - position: static; - margin-bottom: 60px; -} - -.about-wrap .floating-header-section.has-long-title .section-content { - justify-content: flex-start; -} - -.about-wrap .floating-header-section.has-long-title .section-item { - max-width: 300px; - margin-bottom: 0; -} - -.about-wrap .floating-header-section.has-long-title .section-item + .section-item { - margin-left: 60px; -} - /*------------------------------------------------------------------------------ 3.0 - Credits & Freedoms Pages ------------------------------------------------------------------------------*/ @@ -538,14 +495,28 @@ } .about-wrap .two-col .col, - .about-wrap .three-col .col { + .about-wrap .three-col .col, + .about-wrap .four-col .col { min-width: 48% !important; } + + .about-wrap .eight-col .col { + min-width: 24% !important; + } - .about-wrap .three-col img { + .about-wrap .three-col img, + .about-wrap .four-col img, + .about-wrap .eight-col img { display: block; margin: 0 auto; } + + .about-wrap figcaption { + position: relative; + margin-top: 10px; + padding-top: 0; + color: #40464D; + } .about-wrap .floating-header-section { display: block; @@ -584,10 +555,12 @@ } .about-wrap .two-col .col, + .about-wrap .three-col .col, .about-wrap .three-col .col { min-width: 100% !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 {