WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 8 months ago

Last modified 8 months ago

#51415 closed task (blessed) (fixed)

5.6 About Page

Reported by: webcommsat Owned by: ryelle
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-screenshots has-patch commit dev-reviewed
Focuses: ui, accessibility, css, administration, privacy, ui-copy Cc:

Description

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

Attachments (11)

5_6_AboutPage.png (2.8 MB) - added by elmastudio 9 months ago.
Capture d’écran 2020-11-03 à 12.23.36.png (196.3 KB) - added by audrasjb 9 months ago.
5.5.3 About page changelog items
about.png (596.3 KB) - added by ryelle 9 months ago.
about.2.png (602.8 KB) - added by ryelle 8 months ago.
about-page-text-string-fix.diff (1.4 KB) - added by audrasjb 8 months ago.
Fix a text string issue in about.php
51415-text-a11y-changes.diff (2.2 KB) - added by joedolson 8 months ago.
Accessibility changes to about page text
add-56-field-guide-url.patch (597 bytes) - added by mukesh27 8 months ago.
Add WordPress 5.6 Field Guide URL
51415-update-links.diff (3.0 KB) - added by ryelle 8 months ago.
51415-update-links.2.diff (3.3 KB) - added by ryelle 8 months ago.
51415-update-links.3.diff (3.3 KB) - added by SergeyBiryukov 8 months ago.
51415-fix-typo.diff (1008 bytes) - added by cneumann 8 months ago.
Fix typo in about.php

Change History (78)

#1 @webcommsat
10 months ago

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

#2 @SergeyBiryukov
10 months ago

  • Milestone changed from Awaiting Review to 5.6
  • Version changed from 5.5.1 to trunk

#3 @marybaum
10 months ago

  • Keywords needs-design added

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

#4 follow-up: @elmastudio
10 months ago

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?

This ticket was mentioned in Slack in #core by yvettesonneveld. View the logs.


10 months ago

#6 in reply to: ↑ 4 @melchoyce
10 months ago

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?

#7 @yvettesonneveld
10 months ago

I think that is a great idea, @elmastudio.

This ticket was mentioned in Slack in #core by yvettesonneveld. View the logs.


10 months ago

#9 @garrett-eclipse
10 months ago

  • Type changed from enhancement to task (blessed)
  • Version trunk deleted

#10 follow-up: @garrett-eclipse
10 months ago

  • Focuses ui css administration privacy ui-copy added
  • Keywords has-privacy-review added

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

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


9 months ago

#12 @sabernhardt
9 months ago

  • Focuses accessibility added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

#14 @elmastudio
9 months ago

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!

#15 @karmatosed
9 months ago

  • Keywords needs-design-feedback added; needs-design removed

#16 @audrasjb
9 months ago

  • Keywords has-screenshots added

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
9 months ago

5.5.3 About page changelog items

#17 @poena
9 months ago

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

#18 @yvettesonneveld
9 months ago

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.

This ticket was mentioned in PR #688 on WordPress/wordpress-develop by ryelle.


9 months ago

  • Keywords has-patch added

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

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

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


9 months ago

#21 @joedolson
9 months ago

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.

#22 @elmastudio
9 months ago

@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 :)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


9 months ago

#24 @ryelle
9 months ago

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
9 months ago

#25 @ryelle
8 months ago

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.

@ryelle
8 months ago

#26 @elmastudio
8 months ago

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.

#27 @elmastudio
8 months ago

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.

#28 @ryelle
8 months ago

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.

#29 @prbot
8 months ago

ryelle commented on PR #688:

This was merged in r49640 — closing the PR.

@audrasjb
8 months ago

Fix a text string issue in about.php

#30 @audrasjb
8 months ago

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>' ),
	'#'
);
?>

#31 @SergeyBiryukov
8 months ago

In 49651:

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

Add missing translator comment.

Props audrasjb.
See #51415.

#32 @SergeyBiryukov
8 months ago

  • Keywords commit dev-feedback added

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

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


8 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


8 months ago

#35 @joedolson
8 months ago

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

Last edited 8 months ago by joedolson (previous) (diff)

@joedolson
8 months ago

Accessibility changes to about page text

#36 @ryelle
8 months ago

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.

#37 @ryelle
8 months ago

[49651] looks good to me for backport ✅

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

#38 @SergeyBiryukov
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

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

@mukesh27
8 months ago

Add WordPress 5.6 Field Guide URL

#39 @ryelle
8 months ago

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)

#40 @audrasjb
8 months ago

  • Keywords needs-design-feedback removed

@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!

#41 @ocean90
8 months ago

  • Keywords has-privacy-review commit dev-reviewed removed

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.

#42 @ryelle
8 months ago

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.

#43 @SergeyBiryukov
8 months ago

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.

#44 @SergeyBiryukov
8 months ago

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.

#45 @SergeyBiryukov
8 months ago

  • Keywords commit added

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
8 months ago

Fix typo in about.php

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


8 months ago

#48 @ryelle
8 months ago

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.

#49 @ryelle
8 months ago

  • Keywords dev-feedback added

[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.

#50 @SergeyBiryukov
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[49702] looks good to backport.

#51 @SergeyBiryukov
8 months ago

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.

#52 @SergeyBiryukov
8 months ago

  • Keywords commit dev-reviewed removed

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


8 months ago

#54 @hellofromTonya
8 months ago

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!

#55 in reply to: ↑ 10 @garrett-eclipse
8 months ago

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?

#56 @oglekler
8 months ago

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.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


8 months ago

#58 follow-up: @desrosj
8 months ago

@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.

#59 in reply to: ↑ 58 @garrett-eclipse
8 months ago

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.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


8 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


8 months ago

#62 @ryelle
8 months ago

In 49770:

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

See #51415.

#63 @ryelle
8 months ago

  • Keywords commit dev-feedback added

[49770] will need backporting before the release.

#64 @SergeyBiryukov
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[49770] looks good to backport.

#65 @ryelle
8 months ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 49771:

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

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

#66 @oglekler
8 months ago

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

#67 @ryelle
8 months ago

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.

Note: See TracTickets for help on using tickets.