5.6 About Page

[webcommsat]

This is where discussion and work will take place during 5.6 for the About page slated for December 2020.

[webcommsat]

Creative brief for the about Page WordPress 5.6 Release

Status: draft
Deadline for feedback on this document: Tuesday 6 October 2020 18:30 UTC

Link: ​https://docs.google.com/document/d/1HNDe76ARrG-XTK3LrJehsVhggH4kTOraAeVt7RSxNPY/edit?usp=sharing

This draft is open for feedback and comments directly in the Google Document - please use in suggestion mode. A form will be on the ticket on 30 September 2020 to help those less familiar with using Trac.

Thanks
WordPress 5.6 MarComms Team

[marybaum]

Adding a few names to our watchers list:
@karmatosed
@francina
@elmastudio

[elmastudio]

Hi everyone :)
regarding the About Page design, I believe it will make sense to coordinate the design with the new default theme's design. What do you think?

[melchoyce]

Replying to elmastudio:

regarding the About Page design, I believe it will make sense to coordinate the design with the new default theme's design. What do you think?

We're here for you! Let me know how I can help.

I'll also be drafting up some copy to announce Twenty Twenty-One. Do you think it'll be the highlight feature for this release, or do we expect a Gutenberg feature to take the lead on the About page?

[yvettesonneveld]

I think that is a great idea, @elmastudio.

[garrett-eclipse]

Could we look to have the images used for the 5.6 about page be locally hosted. The privacy team has always sought to achieve this, and now with #45395 and #46363 ready to do this for privacy.php and freedoms.php about pages it would be great if the about.php page itself followed suit.
Thank you

[elmastudio]

Hi everyone,

I'm so sorry for being a bit quiet until now. I posted the current state of the About page design above. It has only blind copy, hope this is ok. And screenshots for the TT1 theme are being worked on.

The general idea was to create a more open, clear design that compliments the new theme design without taking away from it. So we implemented the theme colour patterns, but also added new elements like circles and the vertical divider lines to give the About page its own style.

We hope you will like it. It would be amazing if you can provide us with feedback. Thanks so much!

[audrasjb]

I really love that design!
Clean, modern, simple 🌟

I have a request, though. Would it be possible to add a variation of the design for further point releases?

We always "hack" the about page design to add the changelog items. I think it would be nice to plan the way changelogs items are displayed earlier during the design phase :)

Below is an example of changelog items in 5.5.3 About page

[audrasjb]

5.5.3 About page changelog items

[poena]

The page looks great.

I only wanted to give a heads up that one of the theme patterns in the theme presentation no longer match the theme.
In "mixed content", the bottom pattern with the dividers and the images, is not up to date.

It would be great if the images could be updated to use the art by Berthe Morisot that is in the theme.
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/images?rev=49478

[yvettesonneveld]

I love the design. The fresh spring-like colors. I think many of us can't wait for the spring of 2021.... And the round background shapes. All happy.

Also, I think @audrasjb's idea about designing for future point releases is a wonderful idea.

Work in progress; waiting on copy. This implements some of the mockup design.

Trac ticket: https://core.trac.wordpress.org/ticket/51415

[joedolson]

Minor accessibility things to point out:

• Let's try to avoid centered blocks of multi-line text. For people using high screen magnification, this makes it very difficult to track the line beginnings, and can have other consequences for some people with dyslexia. The occasional short heading is fine; blocks of text, not so great.

• There will need to be some careful thought put into the text alternatives for the various TT1 screenshots. While it is the standard practice that images with text should use the shown text as an alternative, there's a sound argument that these images are not *actually* portraying the text; they're portraying the way the text is laid out & how it's designed, and the text itself is not important.

• Might be difficult to distinguish the active tab, since they're all gray and there's no distinguishing characteristic other than color. In other recent releases, the bottom border width has varied for the active tab, which can make that more clear.

[elmastudio]

@joedolson Thank you so much for your review and the valuable notes regarding accessibility optimisations.

That is super helpful and I will improve the design to include your ideas :)

[ryelle]

I've updated ​the branch with the latest content. There are updated screenshots of each page in the description. This should match the design (except the spacing in the "Improvements for everyone" section, still working on that). I did tweak the color of the nav items to increase the contrast, and the active item uses the same style as previous About pages so the border is taller.

We still need two images for the theme screenshots. In the past we've used no alt text, since they're functionally "decorative", but if there is something more helpful we could write here, great.

[ryelle]

The PR & screenshots have been updated now that the rest of the design has been implemented. Still waiting on some theme screenshots, those should happen in the next 12 hours. In the meantime, this could use design & accessibility feedback, browser testing, etc.

[elmastudio]

Cool, it looks great, thanks so much for your work @ryelle :)
The only thing I see right now is that the line-height of the headlines could be a bit reduced in my opinion. But that is just super minor.

[elmastudio]

I created two screenshots for the theme images: ​https://cloudup.com/cQ7cXWmwwpw
If someone comes up with a better idea, that would be great as well. I would be happy to get some feedback.

[ryelle]

In 49640:

Help/About: WordPress 5.6 About Page.

This change introduces the new About page for WordPress 5.6.

Props elmastudio, ryelle, melchoyce, karmatosed, webcommsat, marybaum, meher, OGlekler, lmurillom, vimes1984, sabrinazeidan, nalininonstopnewsuk, afshanadiya, michelleames, bmcdede, yvettesonneveld, sarahricker, isabel_brison, helen, hellofromtonya, poena, chanthaboune, cbringmann, joedolson, sabernhardt, garrett-eclipse, audrasjb, marks99.
See #51415.

This was merged in r49640 — closing the PR.

[audrasjb]

Fix a text string issue in about.php

[audrasjb]

about-page-text-string-fix.diff fixes the link to the accessibility statement template Feature Plugin, which is currently incorrect:

<?php _e( 'Even if you're not an expert, you can start letting folks know about your site's commitment to accessibility at the click of a button! The new <a href="%s">feature plugin</a> includes template copy for you to update and publish, and it's written to support different contexts and jurisdictions.', '#' ); ?>

For now, ‘#’ is passed as a text domain.

The field guide placeholder (below) is ok, but the feature plugin (above) one is wrong.

<?php
printf(
	/* translators: %s: WordPress 5.6 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.6 Field Guide.</a>' ),
	'#'
);
?>

[SergeyBiryukov]

In 49651:

Help/About: Correct placeholder for the accessibility statement feature plugin link.

Add missing translator comment.

Props audrasjb.
See #51415.

[SergeyBiryukov]

Marking [49651] for backporting to the 5.6 branch after a second committer's review.

[joedolson]

Updating accessibility-related text for accuracy. Two sets of changes:

1) Clarifying caption handling to specify that captions are uploaded in the block editor, and not created in the editor.

2) Clarifying the description of the accessibility status of the default theme to avoid making an invalid claim of WCAG 2.1 conformance or trivialize the efforts still required to build an accessible and compliant site.

See: ​https://wordpress.slack.com/archives/C6PK2QCTY/p1605897067232300

[joedolson]

Accessibility changes to about page text

[ryelle]

In 49674:

Help/About: Clarify accessibility features.

• Captions are uploaded in the block editor, and not created in the editor.
• Avoid making an invalid claim of WCAG 2.1 conformance or trivialize the efforts still required to build an accessible and compliant site.

Follow-up to [49640].
Props joedolson.
See #51415.

[ryelle]

[49651] looks good to me for backport ✅

But now [49674] also needs backporting, so I'm leaving the keywords as-is.

[SergeyBiryukov]

Thanks! [49674] looks good to backport too :)

[mukesh27]

Add WordPress 5.6 Field Guide URL

[ryelle]

51415-update-links.diff​ uses the field guide link from add-56-field-guide-url.patch​, and…

• Adds the Accessibility Statement github link
• Updates the "More PHP 8 support" section to also link to the field guide post
• Switch plugin links in "jQuery" section from external wp.org to local-site links for easier installation

Some questions before committing anything

• Is this github link the correct place for the a11y statement plugin, or is it available on WordPress.org?
• Should the PHP 8 link be the general field guide post, or ​the PHP 8 post? (I saw this published after making the patch)

[audrasjb]

@ryelle concerning the accessibility statement plugin, we can link either to the GitHub repository or the Trac ticket (#50673), but I'd recommend to rather link to GitHub :)

The other changes look fine to me as well!

[ocean90]

Switch plugin links in "jQuery" section from external wp.org to local-site links for easier installation

This would need some capability checks since not everyone who can read the about page can also install plugins.

[ryelle]

This would need some capability checks since not everyone who can read the about page can also install plugins.

Ah true, I assumed they'd still be able to see the search results, but hadn't tested it. The updated patch adds a current_user_can( 'install_plugins' ).

I also swapped the PHP 8 dev note URL into the PHP 8 section.

[SergeyBiryukov]

In 49686:

Help/About: Correct placeholder for the accessibility statement feature plugin link.

Add missing translator comment.

Props audrasjb.
Reviewed by ryelle, SergeyBiryukov.
Merges [49651] to the 5.6 branch.
See #51415.

[SergeyBiryukov]

In 49687:

Help/About: Clarify accessibility features.

• Captions are uploaded in the block editor, and not created in the editor.
• Avoid making an invalid claim of WCAG 2.1 conformance or trivialize the efforts still required to build an accessible and compliant site.

Follow-up to [49640].

Props joedolson.
Reviewed by ryelle, SergeyBiryukov.
Merges [49674] to the 5.6 branch.
See #51415.

[SergeyBiryukov]

51415-update-links.3.diff​ is a refresh of 51415-update-links.2.diff​ after [49685] / #51813.

It also makes plugin links translatable, to allow for linking to a localized plugin page.

Let's commit this sooner rather than later to give more time to translators.

[cneumann]

Fix typo in about.php

[cneumann]

Seems like a typo? attachment:51415-fix-typo.diff​

[ryelle]

In 49702:

Help/About: Update URLs in About page

Replace the placeholder links now that the posts have been published. This also updates the jQuery plugin links to to local-site links, if the user can install plugins.

Follow-up to [49640].
Props mukesh27, ocean90.
See #51415.

[ryelle]

[49702] will need backporting to 5.6.

Seems like a typo? attachment:51415-fix-typo.diff​​

No, that should be correct- "In select themes" refers to themes that have block patterns.

[SergeyBiryukov]

[49702] looks good to backport.

[SergeyBiryukov]

In 49715:

Help/About: Update URLs in About page.

Replace the placeholder links now that the posts have been published. This also updates the jQuery plugin links to to local-site links, if the user can install plugins.

Follow-up to [49640].

Props mukesh27, ocean90.
Reviewed by ryelle, SergeyBiryukov.
Merges [49702] to the 5.6 branch.
See #51415.

[hellofromTonya]

Capturing an important note from today's scrub for tomorrow's 5.6 RC2. Per @desrosj

The static image assets will need to be updated to use ones on the CDN on release day. I'd just leave that ticket open to remind us of that!

[garrett-eclipse]

Replying to garrett-eclipse:

Could we look to have the images used for the 5.6 about page be locally hosted. The privacy team has always sought to achieve this, and now with #45395 and #46363 ready to do this for privacy.php and freedoms.php about pages it would be great if the about.php page itself followed suit.

@desrosj what's the weight of the images? Am wondering if they could live locally?

[oglekler]

Both images on About page are attached from Make and the second one is png with transparent bg and makes it bigger which has no point because the first one is jpg and background of the page is white without any options to change it.

[desrosj]

@garrett-eclipse There have been instances in the past where the image needed to be replaced shortly after release for a correction. Using the CDN allows that to happen. If the images were in the distributed source code, the change would need to wait until the next minor.

[garrett-eclipse]

Replying to desrosj:

@garrett-eclipse There have been instances in the past where the image needed to be replaced shortly after release for a correction. Using the CDN allows that to happen. If the images were in the distributed source code, the change would need to wait until the next minor.

Thanks @desrosj I guess we can't changes the svgs until next minor, but no worries I see your point there is that benefit of avoiding a code push release.

[ryelle]

In 49770:

Help/About: Use CDN URLs for About page images.

See #51415.

[ryelle]

[49770] will need backporting before the release.

[SergeyBiryukov]

[49770] looks good to backport.

[ryelle]

In 49771:

Help/About: Use CDN URLs for About page images.

Reviewed by ryelle, SergeyBiryukov.
Merges [49770] to the 5.6 branch.
Fixes #51415.

[oglekler]

Why alt text for images is empty? I assume it needs to describe the content of an image for accessibility needs…

[ryelle]

The images are considered decorative - they're just accents for the content around them. That's how we've done it historically, and the accessibility team reviews the About page each release. On the other hand, this could be considered contextual info that sighted users get, so maybe we should describe it.

It's tricky because I don't think "Screenshot of Twenty Twenty-One" is good alt text, but how much of the layout do you describe? If there's some concise descriptive text that would work here, you could open a new ticket.