Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Help/About: WordPress 5.9 About Page. 

Introducing the new About page for 5.9.

Props dansoschin, critterverse, webcommsat, marybaum, nalininonstopnewsuk, sabernhardt, costdev, chanthaboune, cbringmann, mkaz, davidbaumwald, ryelle, melchoyce, annezazu, paaljoachim, audrasjb, hellofromtonya, walbo, tobifjellner, mitogh


Built from https://develop.svn.wordpress.org/trunk@52438


git-svn-id: http://core.svn.wordpress.org/trunk@52030 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2022-01-04 18:35:03 +00:00
parent 90100ff883
commit ee6093c4eb
12 changed files with 453 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
wp-admin/about.php
View File

@ -23,12 +23,12 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header-title">
<h1>
<?php _e( 'WordPress' ); ?>
<?php echo $display_version; ?>
<span class="screen-reader-text"><?php echo $display_version; ?></span>
</h1>
</div>
<div class="about__header-text">
<?php _e( 'The next stop on the road to full site editing' ); ?>
<?php _e( 'Build the site you&#8217;ve always wanted &#8212; with blocks' ); ?>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
@ -39,60 +39,77 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</nav>
</div>
<hr />
<hr class="is-large" />
<div class="about__section">
<h2 class="aligncenter">
<?php _e( 'Three Essential Powerhouses' ); ?>
<?php _e( 'Full Site Editing is here' ); ?>
</h2>
<p class="aligncenter is-subheading">
<?php _e( 'It puts you in control of your whole site, right in the WordPress Admin.' ); ?>
</p>
</div>
<hr />
<div class="about__section has-2-columns is-wider-left">
<div class="column about__image is-vertically-aligned-center">
<img src="https://s.w.org/images/core/5.8/about-widgets-blocks.png" alt="" />
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/twenty-twenty-two.png" alt="" />
</div>
<div class="column">
<h3>
<?php _e( 'Manage Widgets with Blocks' ); ?>
<?php _e( 'Say hello to Twenty Twenty&#8209;Two' ); ?>
</h3>
<p>
<?php _e( 'And say hello to the first default block theme in the history of WordPress. This is more than just a new default theme. It&#8217;s a brand-new way to work with WordPress themes.' ); ?>
</p>
<p>
<?php _e( 'Block themes put a wide array of visual choices in your hands, from color schemes and typeface combinations to page templates and image filters &#8212; all together, in the site editing interface. By making changes in one place, you can give Twenty Twenty&#8209;Two the same look and feel as your brand or other websites &#8212; or take your site&#8217;s look in another direction.' ); ?>
</p>
<?php if ( current_user_can( 'switch_themes' ) ) : ?>
<p>
<?php
printf(
/* translators: %s: Widgets dev note link. */
__( 'After months of hard work, the power of blocks has come to both the Block Widgets Editor and the Customizer. Now you can add blocks both in widget areas across your site and with live preview through the Customizer. This opens up new possibilities to create content: from no-code mini layouts to the vast library of core and third-party blocks. For our developers, you can find more details in the <a href="%s">Widgets dev note</a>.' ),
'https://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/'
/* translators: %s: Link to Themes screen. */
__( 'The Twenty Twenty&#8209;Two theme is already available to you. It came installed with WordPress 5.9, and you will find it with <a href="%s">your other installed themes</a>.' ),
admin_url( 'themes.php' )
);
?>
</p>
<?php endif; ?>
</div>
</div>
<div class="about__section has-2-columns is-wider-right">
<div class="column">
<h3>
<?php _e( 'Display Posts with New Blocks and Patterns' ); ?>
<?php _e( 'Your personal paintbox awaits' ); ?>
</h3>
<p>
<?php _e( 'The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like create a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want.' ); ?>
<?php _e( 'More block themes built for full site editing features are in the Theme Directory alongside the Twenty Twenty&#8209;Two theme, just waiting to be explored. Expect more to come!' ); ?>
</p>
<p>
<?php _e( 'When you use any of those new themes, you no longer need the Customizer. Instead, you have all the power of the Styles interface inside the Site Editor. Just as in Twenty Twenty&#8209;Two, you build your site&#8217;s look and feel there, with the tools you need for the job in a fluid interface that practically comes alive in your hands.' ); ?>
</p>
</div>
<div class="column about__image is-vertically-aligned-center">
<img src="https://s.w.org/images/core/5.8/about-query-loop.png" alt="" />
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/global-styles.png" alt="" />
</div>
</div>
<div class="about__section has-2-columns is-wider-left">
<div class="column about__image is-vertically-aligned-center">
<img src="https://s.w.org/images/core/5.8/about-template.png" alt="" />
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/navigation-block.png" alt="" />
</div>
<div class="column">
<h3>
<?php _e( 'Edit the Templates Around Posts' ); ?>
<?php _e( 'The Navigation block' ); ?>
</h3>
<p>
<?php
_e( 'You can use the familiar block editor to edit templates that hold your content—simply activate a block theme or a theme that has opted in for this feature. Switch from editing your posts to editing your pages and back again, all while using a familiar block editor. There are more than 20 new blocks available within compatible themes. Read more about this feature and how to experiment with it in the release notes.' );
?>
<?php _e( 'Blocks come to site navigation, the heart of user experience.' ); ?>
</p>
<p>
<?php _e( 'The new Navigation block gives you the power to choose: an always-on responsive menu or one that adapts to your user&#8217;s screen size. Whatever you create, know it&#8217;s there to reuse wherever you like, whether in a brand new template or after switching themes.' ); ?>
</p>
</div>
</div>
@ -101,22 +118,25 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__section">
<h2 class="aligncenter">
<?php _e( 'Three Workflow Helpers' ); ?>
<?php _e( 'More improvements and updates' ); ?>
</h2>
<p class="aligncenter is-subheading">
<?php _e( 'Do you love to blog or produce content? New tweaks to the publishing flow help you say more, faster.' ); ?>
</p>
</div>
<hr />
<div class="about__section has-2-columns is-wider-left">
<div class="column about__image is-vertically-aligned-center">
<img src="https://s.w.org/images/core/5.8/about-list-view.png" alt="" />
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/block-controls.png" alt="" />
</div>
<div class="column">
<h3>
<?php _e( 'Overview of the Page Structure' ); ?>
<?php _e( 'Better block controls' ); ?>
</h3>
<p>
<?php
_e( 'Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.' );
?>
<?php _e( 'WordPress 5.9 features new typography tools, flexible layout controls, and finer control over details like spacing, borders, and more &#8212; to help you get not just the look, but the polish that says you care about details.' ); ?>
</p>
</div>
</div>
@ -124,110 +144,141 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__section has-2-columns is-wider-right">
<div class="column">
<h3>
<?php _e( 'Suggested Patterns for Blocks' ); ?>
<?php _e( 'The power of patterns' ); ?>
</h3>
<p>
<?php
_e( 'Starting in this release the Pattern Transformations tool will suggest block patterns based on the block you are using. Right now, you can give it a try in the Query Block and Social Icon Block. As more patterns are added, you will be able to get inspiration for how to style your site without ever leaving the editor!' );
?>
<?php _e( 'The WordPress Pattern Directory is the home of a wide range of block patterns built to save you time and add core site functionality. And you can edit them as you see fit. Need something different in the header or footer for your theme? Swap it out with a new one in a few clicks.' ); ?>
</p>
<p>
<?php _e( 'With a near full-screen view that draws you in to see fine details, the Pattern Explorer makes it easy to compare patterns and choose the one your users will expect.' ); ?>
</p>
</div>
<div class="column about__image is-vertically-aligned-center">
<img src="https://s.w.org/images/core/5.8/about-pattern-suggestions.png" alt="" />
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/pattern-explorer.png" alt="" />
</div>
</div>
<div class="about__section has-2-columns is-wider-left">
<div class="column about__image is-vertically-aligned-center">
<img src="https://s.w.org/images/core/5.8/about-duotone.png" alt="" />
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/list-view.png" alt="" />
</div>
<div class="column">
<h3>
<?php _e( 'Style and Colorize Images' ); ?>
<?php _e( 'A revamped List View' ); ?>
</h3>
<p>
<?php
_e( 'Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.' );
?>
<?php _e( 'In 5.9, the List View lets you drag and drop your content exactly where you want it. Managing complex documents is easier, too: simple controls let you expand and collapse sections as you build your site &#8212; and add HTML anchors to your blocks to help users get around the page.' ); ?>
</p>
</div>
</div>
<div class="about__section has-2-columns is-wider-right">
<div class="column">
<h3>
<?php _e( 'A better Gallery block' ); ?>
</h3>
<p>
<?php _e( 'Treat every image in a Gallery block the same way you would treat it in the Image block.' ); ?>
</p>
<p>
<?php _e( 'Style every image in your gallery differently from the next (with different crops, or duotones, for instance) or make them all the same. And change the layout with drag-and-drop.' ); ?>
</p>
</div>
<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
<img src="https://s.w.org/images/core/5.9/gallery-block.png" alt="" />
</div>
</div>
<hr class="is-large" />
<div class="about__section">
<h2 class="aligncenter" style="margin-bottom:0;">
<?php _e( 'For Developers to Explore' ); ?>
<?php
printf(
/* translators: %s: Version number. */
__( 'WordPress %s for developers' ),
$display_version
);
?>
</h2>
</div>
<div class="about__section has-2-columns">
<div class="column">
<h3>
<?php _e( 'Introducing block themes' ); ?>
</h3>
<p>
<?php
printf(
/* translators: %s: Block-based themes dev note link. */
__( 'A new way to build themes: Block themes use blocks to define the templates that structure your entire site. The new templates and template parts are defined in HTML and use the custom styling offered in theme.json. More information is available in the <a href="%s">block themes dev note</a>.' ),
'https://make.wordpress.org/core/2022/01/04/block-themes-a-new-way-to-build-themes-in-wordpress-5-9/'
);
?>
</p>
</div>
<div class="column">
<h3>
<?php _e( 'Multiple stylesheets for a block' ); ?>
</h3>
<p>
<?php
printf(
/* translators: %s: Multiple stylesheets dev note link. */
__( 'Now you can register more than one stylesheet per block. You can use this to share styles across blocks you write, or to load styles for individual blocks, so your styles are only loaded when the block is used. Find out more about <a href="%s">using multiple stylesheets in a block</a>.' ),
'https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/'
);
?>
</p>
</div>
</div>
<div class="about__section has-2-columns">
<div class="column">
<h3>
<?php _e( 'Block&#8209;level locking' ); ?>
</h3>
<p>
<?php _e( 'Now you can lock any block (or a few of them) in a pattern, just by adding a lock attribute to its settings in block.json &#8212; leaving the rest of the pattern free for site editors to adapt to their content.' ); ?>
</p>
</div>
<div class="column">
<h3>
<?php _e( 'A refactored Gallery block' ); ?>
</h3>
<p>
<?php
printf(
/* translators: %s: Gallery Refactor dev note link. */
__( 'The changes to the Gallery block listed above are the result of a near-complete refactor. Have you built a plugin or theme on the Gallery block functionality? Be sure to read the <a href="%s">Gallery block compatibility dev note</a>.' ),
'https://make.wordpress.org/core/2021/08/20/gallery-block-refactor-dev-note/'
);
?>
</p>
</div>
</div>
<hr class="is-large" />
<div class="about__section has-subtle-background-color has-2-columns is-wider-right">
<div class="column about__image is-vertically-aligned-center">
<picture>
<source srcset="https://s.w.org/images/core/5.8/about-theme-json.png, https://s.w.org/images/core/5.8/about-theme-json-2x.png 2x" />
<img src="https://s.w.org/images/core/5.8/about-theme-json.png" alt="" />
</picture>
<img src="https://s.w.org/images/core/5.9/learn-video.png" alt="" />
</div>
</div>
<div class="about__section has-1-column">
<div class="column">
<h3>
<?php _e( 'Theme.json' ); ?>
</h3>
<h3><?php _e( 'Learn more about the new features in 5.9' ); ?></h3>
<p>
<?php
printf(
/* translators: %s: Theme.json dev note link. */
__( 'Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature. For more about what is currently available and how it works, <a href="%s">check out this dev note</a>.' ),
'https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/'
/* translators: %s: Learn WordPress link. */
__( 'Want to dive into 5.9 but don&#8217;t know where to start? Visit <a href="%s">learn.wordpress.org/workshops</a> for short how-to video tutorials and expanding resources on new features in WordPress 5.9.' ),
'https://learn.wordpress.org/workshops/'
);
?>
</p>
</div>
</div>
<div class="about__section has-3-columns">
<div class="column">
<h3>
<?php _e( 'Dropping support for Internet Explorer 11' ); ?>
</h3>
<p>
<?php
printf(
/* translators: %s: Link to Browse Happy. */
__( 'Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you <a href="%s">switch to a more modern browser</a>.' ),
'https://browsehappy.com/'
);
?>
</p>
</div>
<div class="column">
<h3>
<?php _e( 'Adding support for WebP' ); ?>
</h3>
<p>
<?php
_e( 'WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.' );
?>
</p>
</div>
<div class="column">
<h3>
<?php _e( 'Adding Additional Block Supports' ); ?>
</h3>
<p>
<?php
printf(
/* translators: %1$s: Link to 5.6's block dev notes. %2$s: Link to 5.7's block dev notes. %3$s: Link to 5.8's block dev notes. */
__( 'Expanding on previously implemented block supports in WordPress <a href="%1$s">5.6</a> and <a href="%2$s">5.7</a>, WordPress 5.8 introduces several new block support flags and new options to customize your registered blocks. More information is available in the <a href="%3$s">block supports dev note</a>.' ),
'https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/',
'https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/',
'https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/'
);
?>
</p>
</div>
</div>
<hr class="is-small" />
<hr class="is-large" />
<div class="about__section">
<div class="column">
@ -235,9 +286,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<p>
<?php
printf(
/* translators: %s: WordPress 5.8 Field Guide link. */
__( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.8 Field Guide.</a>' ),
'https://make.wordpress.org/core/2021/07/03/wordpress-5-8-field-guide/'
/* translators: %s: WordPress 5.9 Field Guide link. */
__( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.9 Field Guide.</a>' ),
'https://make.wordpress.org/core/2022/01/04/wordpress-5-9-field-guide/'
);
?>
</p>

8
wp-admin/credits.php
View File

@ -29,7 +29,13 @@ $credits = wp_credits();
</div>
<div class="about__header-text">
<?php _e( 'WordPress 5.8 was created by a worldwide team of passionate individuals' ); ?>
<?php
printf(
/* translators: %s: Version number. */
__( 'WordPress %s was created by a worldwide team of passionate individuals' ),
$display_version
);
?>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">

184
wp-admin/css/about-rtl.css
View File

@ -30,7 +30,7 @@
/* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Accent background, link color */
--accent-2: #2d46ba; /* Header background */
--accent-2: #3858e9; /* Header background */
/* Navigation colors. */
--nav-background: #fff;
@ -141,12 +141,9 @@
margin: 0 0 var(--gap);
}
.about__section .column {
padding: var(--gap);
}
.about__section + .about__section .column {
padding-top: 0;
.about__section .column:not(.is-edge-to-edge) {
padding-right: var(--gap);
padding-left: var(--gap);
}
.about__section + .about__section .is-section-header {
@ -154,12 +151,10 @@
}
.about__section .column[class*="background-color"],
.about__section:where([class*="background-color"]) .column,
.about__section .column.has-border {
padding-top: var(--gap);
}
.about__section .column.is-edge-to-edge {
padding: 0;
padding-bottom: var(--gap);
}
.about__section .column p:first-of-type {
@ -223,11 +218,11 @@
}
.about__section.has-2-columns.is-wider-right {
grid-template-columns: 1fr 2fr;
grid-template-columns: 2fr 3fr;
}
.about__section.has-2-columns.is-wider-left {
grid-template-columns: 2fr 1fr;
grid-template-columns: 3fr 2fr;
}
.about__section.has-2-columns .is-section-header {
@ -329,7 +324,16 @@
.about__section.has-2-columns.is-wider-left,
.about__section.has-3-columns {
display: block;
padding-bottom: calc(var(--gap) / 2);
margin-bottom: calc(var(--gap) / 2);
}
.about__section .column:not(.is-edge-to-edge) {
padding-top: var(--gap);
padding-bottom: var(--gap);
}
.about__section .column:not(.is-edge-to-edge) + .column {
padding-top: 0;
}
.about__section.has-2-columns.has-gutters .column,
@ -471,6 +475,11 @@
line-height: inherit;
}
.about__container p.is-subheading {
margin-top: 0;
font-size: 1.8em;
}
.about__section a {
color: var(--accent-1);
text-decoration: underline;
@ -524,46 +533,6 @@
margin-left: auto;
}
.about__container .about__image-comparison {
position: relative;
display: inline-block;
max-width: 100%;
}
.about__container .about__image-comparison img {
-webkit-user-select: none;
user-select: none;
width: auto;
max-width: none;
max-height: 100%;
}
.about__container .about__image-comparison > img {
max-width: 100%;
}
.about__container .about__image-comparison-resize {
position: absolute !important; /* Needed to override inline style on ResizableBox */
top: 0;
bottom: 0;
right: 0;
width: 50%;
max-width: 100%;
}
.about__container .about__image-comparison.no-js .about__image-comparison-resize {
overflow: hidden;
border-left: 2px solid var(--wp-admin-theme-color);
}
.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
width: 4px;
left: calc(50% - 2px);
transition: none;
animation: none;
opacity: 1;
}
.about__container .about__image + h3 {
margin-top: 1.5em;
}
@ -612,25 +581,47 @@
/* 1.3 - Header */
.about__header {
position: relative;
margin-bottom: var(--gap);
padding-top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('../images/about-header-about.svg');
background-image: url('../images/about-texture.png');
background-color: var(--accent-2);
background-size: 500px 500px;
background-blend-mode: overlay;
color: var(--text-light);
}
.credits-php .about__header {
.about__header::before {
content: "";
position: absolute;
top: 0;
left: 64px;
z-index: 0;
width: 300px;
height: 382px;
background: url(../images/about-header-about.svg) no-repeat center;
background-size: contain;
}
.credits-php .about__header::before {
top: auto;
bottom: 70px;
height: 310px;
background-image: url('../images/about-header-credits.svg');
}
.freedoms-php .about__header {
.freedoms-php .about__header::before {
top: 32px;
left: 0;
width: 375px;
height: 300px;
background-image: url('../images/about-header-freedoms.svg');
}
.privacy-php .about__header {
.privacy-php .about__header::before {
top: auto;
bottom: 70px;
height: 245px;
background-image: url('../images/about-header-privacy.svg');
}
@ -639,7 +630,9 @@
}
.about__header-title {
padding: 2rem 0 0;
box-sizing: border-box;
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
padding: 6rem 0 0 380px;
margin: 0 2rem;
}
@ -652,14 +645,24 @@
}
.about__header-text {
max-width: 42rem;
margin: 0 0 5em;
padding: 0 2rem;
font-size: 2rem;
box-sizing: border-box;
margin: 0 0 7rem;
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
padding: 0 2rem 0 380px;
font-size: 1.6rem;
line-height: 1.15;
}
.freedoms-php .about__header-title,
.freedoms-php .about__header-text {
/* 391px = 375px (balloon width) + 16px (spacing). */
padding-left: 391px;
margin-left: 0;
}
.about__header-navigation {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
padding-top: 0;
@ -708,6 +711,25 @@
}
@media screen and (max-width: 782px) {
.about__header::before {
width: 240px;
height: 305px;
left: 32px;
}
.credits-php .about__header::before {
height: 248px;
}
.freedoms-php .about__header::before {
height: 192px;
width: 240px;
}
.privacy-php .about__header::before {
height: 196px;
}
.about__container .about__header-text {
font-size: 1.4em;
}
@ -716,13 +738,24 @@
display: block;
}
.about__header-title,
.about__header-text {
/* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
padding-left: 288px !important;
}
.about__header-title,
.about__header-image {
margin-right: calc(var(--gap) / 2);
margin-left: calc(var(--gap) / 2);
}
.about__header-text,
.about__header-text {
margin-top: 0;
margin-left: 0;
padding-right: calc(var(--gap) / 2);
}
.about__header-navigation .nav-tab {
margin-top: 0;
margin-left: 0;
@ -731,13 +764,28 @@
}
}
@media screen and (max-width: 600px) {
.about__header::before {
display: none;
}
.about__header-title,
.about__header-text {
padding-left: calc(var(--gap) / 2) !important;
}
}
@media screen and (max-width: 480px) {
.about__header-title p {
font-size: 2.4em;
}
.about__header-title {
padding-top: 2rem;
}
.about__header-text {
margin-bottom: 1em;
margin-bottom: 2rem;
}
.about__header-navigation {

2
wp-admin/css/about-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

184
wp-admin/css/about.css
View File

@ -29,7 +29,7 @@
/* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Accent background, link color */
--accent-2: #2d46ba; /* Header background */
--accent-2: #3858e9; /* Header background */
/* Navigation colors. */
--nav-background: #fff;
@ -140,12 +140,9 @@
margin: 0 0 var(--gap);
}
.about__section .column {
padding: var(--gap);
}
.about__section + .about__section .column {
padding-top: 0;
.about__section .column:not(.is-edge-to-edge) {
padding-left: var(--gap);
padding-right: var(--gap);
}
.about__section + .about__section .is-section-header {
@ -153,12 +150,10 @@
}
.about__section .column[class*="background-color"],
.about__section:where([class*="background-color"]) .column,
.about__section .column.has-border {
padding-top: var(--gap);
}
.about__section .column.is-edge-to-edge {
padding: 0;
padding-bottom: var(--gap);
}
.about__section .column p:first-of-type {
@ -222,11 +217,11 @@
}
.about__section.has-2-columns.is-wider-right {
grid-template-columns: 1fr 2fr;
grid-template-columns: 2fr 3fr;
}
.about__section.has-2-columns.is-wider-left {
grid-template-columns: 2fr 1fr;
grid-template-columns: 3fr 2fr;
}
.about__section.has-2-columns .is-section-header {
@ -328,7 +323,16 @@
.about__section.has-2-columns.is-wider-left,
.about__section.has-3-columns {
display: block;
padding-bottom: calc(var(--gap) / 2);
margin-bottom: calc(var(--gap) / 2);
}
.about__section .column:not(.is-edge-to-edge) {
padding-top: var(--gap);
padding-bottom: var(--gap);
}
.about__section .column:not(.is-edge-to-edge) + .column {
padding-top: 0;
}
.about__section.has-2-columns.has-gutters .column,
@ -470,6 +474,11 @@
line-height: inherit;
}
.about__container p.is-subheading {
margin-top: 0;
font-size: 1.8em;
}
.about__section a {
color: var(--accent-1);
text-decoration: underline;
@ -523,46 +532,6 @@
margin-right: auto;
}
.about__container .about__image-comparison {
position: relative;
display: inline-block;
max-width: 100%;
}
.about__container .about__image-comparison img {
-webkit-user-select: none;
user-select: none;
width: auto;
max-width: none;
max-height: 100%;
}
.about__container .about__image-comparison > img {
max-width: 100%;
}
.about__container .about__image-comparison-resize {
position: absolute !important; /* Needed to override inline style on ResizableBox */
top: 0;
bottom: 0;
left: 0;
width: 50%;
max-width: 100%;
}
.about__container .about__image-comparison.no-js .about__image-comparison-resize {
overflow: hidden;
border-right: 2px solid var(--wp-admin-theme-color);
}
.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
width: 4px;
right: calc(50% - 2px);
transition: none;
animation: none;
opacity: 1;
}
.about__container .about__image + h3 {
margin-top: 1.5em;
}
@ -611,25 +580,47 @@
/* 1.3 - Header */
.about__header {
position: relative;
margin-bottom: var(--gap);
padding-top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('../images/about-header-about.svg');
background-image: url('../images/about-texture.png');
background-color: var(--accent-2);
background-size: 500px 500px;
background-blend-mode: overlay;
color: var(--text-light);
}
.credits-php .about__header {
.about__header::before {
content: "";
position: absolute;
top: 0;
right: 64px;
z-index: 0;
width: 300px;
height: 382px;
background: url(../images/about-header-about.svg) no-repeat center;
background-size: contain;
}
.credits-php .about__header::before {
top: auto;
bottom: 70px;
height: 310px;
background-image: url('../images/about-header-credits.svg');
}
.freedoms-php .about__header {
.freedoms-php .about__header::before {
top: 32px;
right: 0;
width: 375px;
height: 300px;
background-image: url('../images/about-header-freedoms.svg');
}
.privacy-php .about__header {
.privacy-php .about__header::before {
top: auto;
bottom: 70px;
height: 245px;
background-image: url('../images/about-header-privacy.svg');
}
@ -638,7 +629,9 @@
}
.about__header-title {
padding: 2rem 0 0;
box-sizing: border-box;
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
padding: 6rem 380px 0 0;
margin: 0 2rem;
}
@ -651,14 +644,24 @@
}
.about__header-text {
max-width: 42rem;
margin: 0 0 5em;
padding: 0 2rem;
font-size: 2rem;
box-sizing: border-box;
margin: 0 0 7rem;
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
padding: 0 380px 0 2rem;
font-size: 1.6rem;
line-height: 1.15;
}
.freedoms-php .about__header-title,
.freedoms-php .about__header-text {
/* 391px = 375px (balloon width) + 16px (spacing). */
padding-right: 391px;
margin-right: 0;
}
.about__header-navigation {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
padding-top: 0;
@ -707,6 +710,25 @@
}
@media screen and (max-width: 782px) {
.about__header::before {
width: 240px;
height: 305px;
right: 32px;
}
.credits-php .about__header::before {
height: 248px;
}
.freedoms-php .about__header::before {
height: 192px;
width: 240px;
}
.privacy-php .about__header::before {
height: 196px;
}
.about__container .about__header-text {
font-size: 1.4em;
}
@ -715,13 +737,24 @@
display: block;
}
.about__header-title,
.about__header-text {
/* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
padding-right: 288px !important;
}
.about__header-title,
.about__header-image {
margin-left: calc(var(--gap) / 2);
margin-right: calc(var(--gap) / 2);
}
.about__header-text,
.about__header-text {
margin-top: 0;
margin-right: 0;
padding-left: calc(var(--gap) / 2);
}
.about__header-navigation .nav-tab {
margin-top: 0;
margin-right: 0;
@ -730,13 +763,28 @@
}
}
@media screen and (max-width: 600px) {
.about__header::before {
display: none;
}
.about__header-title,
.about__header-text {
padding-right: calc(var(--gap) / 2) !important;
}
}
@media screen and (max-width: 480px) {
.about__header-title p {
font-size: 2.4em;
}
.about__header-title {
padding-top: 2rem;
}
.about__header-text {
margin-bottom: 1em;
margin-bottom: 2rem;
}
.about__header-navigation {

2
wp-admin/css/about.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/freedoms.php
View File

@ -32,7 +32,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</div>
<div class="about__header-text">
<?php _e( 'WordPress is free and open source software, built by a distributed community of mostly volunteer developers from around the world' ); ?>
<?php _e( 'WordPress is free and open source software' ); ?>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">

14
wp-admin/images/about-header-about.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

16
wp-admin/images/about-header-credits.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

22
wp-admin/images/about-header-freedoms.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

25
wp-admin/images/about-header-privacy.svg
View File

@ -1,16 +1,19 @@
<svg width="1280" height="568" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<g clip-path="url(#clip1)" fill="#3858E9">
<path d="M1198.19 326.128c4.48 34.433-6.49 68.552-10.69 103.364a66.133 66.133 0 01-11.19 27.433 51.192 51.192 0 00-9.46 24.438c0 2.113-.55 4.189-1.6 6.022-20.49 25.889-33.01 59.345-62.36 76.53-15.25 8.924-24.68 25.226-44.13 29.798-8.95 2.145-20.43 10.438-29.47 17.343a104.507 104.507 0 01-30.329 15.767c-14.185 4.887-28.906 7.725-42.02 16.46-13.114 8.734-27.994 9.46-43.944 7.631-19.198-2.208-38.806-1.356-58.224-1.23-38.742.315-73.071-14.253-105.257-33.299-23.327-13.779-44.353-31.532-66.514-47.299a57.609 57.609 0 01-21.846-29.892c-2.396-7.474-6.872-8.167-12.609-8.798-6.904-.725-8.922 3.153-12.295 8.861-15.762 26.929-29.127 57.168-55.166 75.268a183.653 183.653 0 01-78.272 31.848c-32.879 4.761-65.127 13.559-98.479 15.262-15.226.788-30.484 2.428-45.395-1.798a52.236 52.236 0 00-20.206-1.545c-27.488 3.154-52.329-5.612-74.395-20.37-30.862-20.622-62.669-40.519-89.149-66.565-23.264-22.924-38.364-51.966-50.437-82.489C91.338 405.464 89.32 316.731 80.62 229.26c-2.932-29.326 4.287-58.21 15.762-85.895 11.474-27.686 22.066-56.38 31.523-85.138 11.727-35.222 34.96-61.552 62.574-84.508a225.646 225.646 0 01112.76-51.587c36.315-5.234 71.873-15.766 108.724-16.618a177.46 177.46 0 0172.283 12.613c14.911 6.086 31.524 8.073 47.034 12.613 28.371 8.199 56.962 18.132 76.601 40.677 14.312 16.429 31.524 30.02 44.669 47.3 5.832 7.599 13.24 8.576 20.711 3.153 45.456-33.204 98.605-48.687 150.587-67.543 42.179-15.294 84.231-20.654 128.207-14.158 23.989 3.563 47.694 9.05 68.405 21.82 54.35 33.52 100.59 74.543 122.19 137.514 10.9 31.753 27.51 61.457 35.84 94.125 10.87 42.979 24.55 85.768 19.7 132.5zm-958.314-71.39c1.135 10.942 1.608 22.073 3.5 32.825 8.164 46.479 13.555 93.526 26.732 138.965 5.327 18.415 11.348 37.46 24.871 51.965 17.307 18.542 40.666 29.01 61.251 43.263a18.91 18.91 0 0013.208 4.131c37.513-4.099 75.467-5.581 111.751-17.248 9.74-3.154 20.679-5.203 27.331-14.505 19.135-26.614 41.673-51.272 48.356-85.139 4.445-22.514 17.937-42.505 17.528-66.502-.789-44.398-7.282-88.985 5.737-132.941 5.391-18.195-4.602-35.096-9.457-51.871-8.795-30.492-27.772-54.394-53.59-73.345-19.828-14.631-43.786-17.88-66.199-23.02a125.241 125.241 0 00-68.091 4.7c-22.728 7.567-42.998 24.248-68.941 21.694a4.452 4.452 0 00-3.5 2.396c-2.932 9.46-12.199 11.068-18.914 15.766-20.459 14.411-25.219 37.114-30.2 58.903-3.341 14.726-2.427 30.303-16.518 40.488-2.963 2.145-6.462 6.055-4.792 9.271 7.125 13.559-2.9 26.897-.031 40.204h-.032zm485.461 43.925c-1.733 52.407 8.04 99.517 35.276 145.05 23.39 39.163 53.59 67.259 94.57 81.386 52.518 18.005 99.614-1.482 143.589-30.272 22.068-14.379 27.738-39.195 36.848-60.826 6.31-14.663 13.31-29.326 17.91-44.934 15.76-53.353-2.46-104.846-7.6-157.064a13.664 13.664 0 00-2.39-5.771c-19.45-29.262-27.68-64.168-47.921-93.241-24.02-34.686-58.601-52.376-96.556-44.367-31.523 6.685-62.164 17.816-93.12 27.118a8.197 8.197 0 00-4.918 3.406c-4.445 9.46-13.996 12.613-22.066 16.87-19.261 10.153-31.523 25.983-42.273 44.461-11.191 18.919-12.767 40.551-13.334 59.912a547.521 547.521 0 002.017 58.272h-.032z"/>
<path d="M405.281 413.631c-5.769.441-11.539 1.198-17.276 1.292-19.734.316-35.022-6.306-50.122-20.906-48.672-46.731-52.802-146.973-23.075-191.119a54.45 54.45 0 0138.553-24.532c36.662-4.573 73.009-2.838 105.478 16.365 27.331 16.145 48.482 36.294 54.503 71.989 5.328 31.533 4.13 59.912-7.597 88.922a79.11 79.11 0 01-11.254 20.433c-22.98 28.726-52.013 42.79-89.21 37.556zm-20.018-114.779c-2.743 13.622 6.904 24.879 11.065 37.618 3.783 11.699 14.91 13.275 20.679 2.302a234.248 234.248 0 0019.891-55.213c.73-3.604.816-7.309.252-10.942-2.427-18.541-18.315-25.447-33.225-14.253a44.876 44.876 0 00-18.725 40.488h.063zM785.547 306.104c-.378-21.82.568-43.168 10.593-64.169 13.208-27.685 37.828-40.298 63.677-45.407 32.185-6.306 64.308-1.86 90.788 23.335 30.924 29.42 43.281 64.421 38.962 106.17a205.454 205.454 0 00-2.206 26.645c1.008 37.839-15.604 65.178-47.286 85.611-31.681 20.433-61.534 12.865-91.765-1.072-9.457-4.352-17.432-11.604-26.7-16.366-18.094-9.459-26.133-25.73-29.916-44.145a265.17 265.17 0 01-6.147-70.602zm71.874 24.848c-2.364 14.537 3.404 26.74 10.623 38.533 5.548 9.113 12.389 18.762 23.391 18.541 12.799-.252 10.749-13.811 13.208-22.073 9.962-33.235 9.079-65.903-8.038-97.089-3.657-6.685-8.701-10.437-16.487-9.144-7.786 1.293-13.587 5.266-14.753 13.874l-7.944 57.358z"/>
</g>
<svg width="488" height="400" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M173.886 255.422c-.131-7.011-16.159-17.747-16.017-15.944.142 1.804.084 123.458 17.927 177.596 0 0 3.442 6.907-1.572 15.86" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m157.615 229.483-2.246 4.468 2.651 1.333 2.44-1.689-2.845-4.112Zm0 0c2.845 4.112 2.846 4.111 2.848 4.11l.004-.003.013-.009.044-.03.156-.11a150.404 150.404 0 0 0 2.73-1.985 221.922 221.922 0 0 0 7.552-5.894c6.212-5.06 14.481-12.304 22.668-21.026 8.171-8.705 16.373-18.999 22.346-30.17 5.965-11.157 9.861-23.48 8.978-36.11-2.721-38.908-37.994-67.44-78.238-64.626-40.243 2.814-71.203 35.978-68.482 74.886.883 12.629 6.456 24.29 13.916 34.509 7.47 10.231 17.025 19.283 26.328 26.766 9.321 7.498 18.517 13.521 25.373 17.666a221.46 221.46 0 0 0 8.299 4.787c1.005.549 1.798.97 2.346 1.257l.633.328.171.087.047.024.014.007.005.002c.002.001.003.002 2.249-4.466Z" fill="#fff" stroke="#fff" stroke-width="10"/>
<path d="m156.896 238.884-7.61 18.766s4.903 3.214 13.019 1.694l-3.551-20.245-1.858-.215Z" fill="#fff"/>
<rect x="155.111" y="239" width="6.5" height="2" rx="1" transform="rotate(3.18 155.111 239)" fill="#1E1E1E"/>
<path d="M370.474 314.076c-.847.263-19.158 12.849-20.847 3.841 0 0-.557-2.369.56-6.132 0 0 2.129-9.353-6.654-8.051 0 0-7.785 1.702-10.819.021l-29.619 153.729 20.188 16.22s18.766 15.554 36.374 17.191" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m333.646 295.052-3.153 3.88 2.341 1.903 2.774-1.184-1.962-4.599Zm0 0c1.962 4.599 1.964 4.598 1.965 4.598l.005-.002.015-.007.049-.021.176-.076c.152-.067.372-.163.656-.29a146.22 146.22 0 0 0 2.431-1.113 221.36 221.36 0 0 0 8.625-4.283c7.139-3.733 16.748-9.209 26.586-16.169 19.333-13.677 40.984-34.082 44.526-59.281 5.5-39.136-22.916-74.916-62.943-80.541-40.027-5.626-77.204 20.935-82.704 60.072-3.542 25.199 11.647 50.781 26.461 69.257 7.539 9.403 15.266 17.315 21.099 22.871a221.01 221.01 0 0 0 7.111 6.494 141.778 141.778 0 0 0 2.58 2.2 21 21 0 0 1 .149.122l.041.034.012.01.004.003c.002.001.003.002 3.156-3.878Z" fill="#fff" stroke="#fff" stroke-width="10"/>
<path d="m333.526 305.878.742 20.237s-5.705 1.346-12.814-2.855l10.252-17.814 1.82.432Z" fill="#fff"/>
<rect x="329.397" y="305.112" width="5.997" height="2" rx="1" transform="rotate(7.245 329.397 305.112)" fill="#1E1E1E"/>
<path d="M391.411 200.957a2.058 2.058 0 0 0-1.031-.853c-.37-.141-7.335-2.746-21.144-5.181-10.426-1.838-16.715-1.58-21.755-1.372-.669.027-1.317.053-1.953.073-1.686.055-3.467.195-5.192.327-3.712.292-7.573.588-10.649.075-3.07-.57-6.585-2.168-9.985-3.714-1.574-.713-3.203-1.454-4.768-2.083-.591-.236-1.195-.485-1.819-.741-4.668-1.92-10.482-4.309-20.901-6.146-14.014-2.471-21.347-2.366-21.652-2.36a2.063 2.063 0 0 0-1.396.577 2.032 2.032 0 0 0-.618 1.37l-.266 6.139a2.053 2.053 0 0 0 1.197 1.945c1.895.874 1.925 1.149 2.157 3.291.02.208.045.425.072.656.145 1.241.395 3.217.657 5.302.322 2.622.707 5.599.943 7.643.336 2.94 1.24 10.758 15.054 14.97 10.902 3.325 18.757 3.46 24.016.415 5.125-2.971 10.636-13.081 12.065-16.426a6.683 6.683 0 0 1 .873-1.583l5.324.939a6.93 6.93 0 0 1 .279 1.786c.198 3.635 1.921 15.02 5.716 19.561 2.872 3.432 7.658 5.725 14.531 6.937 2.707.463 5.438.761 8.18.893 6.03.321 10.844-.71 14.328-3.058 3.024-2.044 4.315-4.62 4.941-5.871a683.689 683.689 0 0 1 3.381-6.634c1.011-1.969 1.967-3.828 2.549-4.996l.293-.592c.95-1.933 1.072-2.181 3.152-2.354a2.044 2.044 0 0 0 1.788-1.42l1.85-5.856a2.03 2.03 0 0 0-.217-1.659Z" fill="#1E1E1E"/>
<rect x="388.21" y="200.63" width="39.784" height="7.784" rx="2" transform="rotate(12 388.21 200.63)" fill="#1E1E1E"/>
</g>
<defs>
<clipPath id="clip0">
<path fill="#fff" d="M0 0h1280v568H0z"/>
</clipPath>
<clipPath id="clip1">
<path fill="#fff" transform="translate(79.738 -94.55)" d="M0 0h1119.52v757.098H0z"/>
<clipPath id="a">
<path fill="#fff" d="M0 0h488v400H0z"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.9-beta4-52437';
$wp_version = '5.9-beta4-52438';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.