WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 40 hours ago

#52347 assigned task (blessed)

WordPress 5.7 about page

Reported by: audrasjb Owned by: francina
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-patch
Focuses: accessibility Cc:

Description

This is where discussion and work will take place during 5.7 cycle for the About page slated for March 2021.

Attachments (5)

5x7-mockup-1.png (551.1 KB) - added by melchoyce 2 weeks ago.
Screen Shot 2021-02-16 at 6.00.11 PM.png (455.8 KB) - added by ryelle 11 days ago.
The fallback image comparison idea of an image + button
5x7-mockup-2.png (488.7 KB) - added by melchoyce 10 days ago.
Updated mockup featuring the latest copy draft.
5x7-mockup-2-blue.png (957.6 KB) - added by melchoyce 10 days ago.
Tried a version where the header is blue instead of cream.
5x7-mockup-3.png (1.9 MB) - added by melchoyce 9 days ago.

Change History (48)

#1 @audrasjb
5 weeks ago

For reference, see the work and link shared in WordPress 5.6 about page ticket: #51415

#2 @metalandcoffee
5 weeks ago

Adding @hedgefield.

Due to the time constraint, it'd be best to use the same design from the previous About Page.

#3 @ryelle
4 weeks ago

Usually there's a new design for each release, is there a reason to skip that with this release? The design system of the About page is intended to be quick to change, the only newly designed things should be the stylized header + accent colors, and any illustrations, screenshots, or videos.

#4 @metalandcoffee
4 weeks ago

Hi @ryelle. I believe we have less than a month to get the About Page committed for RC1 which is why we wanted to re-use the previous design. But I am new to the release coordinator role and didn't know of your About Patterns plugin. Sorry about that.

Please feel free to take ownership of this ticket and get the new design process going. Let me know if I can help in any way since I am the one who will working on the Beta post to be published next week :)

#5 @metalandcoffee
4 weeks ago

Also we might want to keep this ticket in mind #51809. There will be less visibility of the About Page as more people move to major auto-updates so there is some discussion about that there.

I'm not sure if we would have time to implement a "Go check out the About page" notification for users who've had their major version auto-updated but just throwing it on the radar.

#6 @melchoyce
4 weeks ago

I'm happy to design the About Page this release, or mentor someone new. With @ryelle's dev skills we can bust out something pretty quickly.

Has a copy doc been started yet? Would be good for both @ryelle and I (and anyone else who wants to help) to get access to that early.

#7 @metalandcoffee
4 weeks ago

Hi @melchoyce - I would love for you to design the About page. I am not sure who is in charge of the copy doc (I'll try to figure that out) but I am working on the Beta 1 post for tomorrow. Would that suffice as a backup since it will contain details on all the feature highlights for this release?

#8 @melchoyce
4 weeks ago

That's enough to get us started. Thanks!

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


2 weeks ago

#10 @francina
2 weeks ago

The About page look&feel can stay the same until the next great default theme comes along.

As for copy, I will coordinate with Mary Baum, Nalini NonStopNewsUK, and Luke Carbis (the showed interest on working on the page during February 10th Dev Chat) to deliver it in time for review and confirmation.

#11 @francina
2 weeks ago

@melchoyce is there any particular reason why we are using 5.6 design as a base and fit it around new content? (I am looking into the content part in the meantime)

#12 @melchoyce
2 weeks ago

is there any particular reason why we are using 5.6 design as a base and fit it around new content?

We're not using 5.6 as a base — we make a new, art-directed design for each release.

#13 @francina
2 weeks ago

Doh! I meant the exact opposite...

is there any particular reason why we are not using 5.6 design as a base and fit it around new content?

#14 @melchoyce
2 weeks ago

Ah — each release has an art directed design that is unique to that release. 5.6's design referenced the aesthetics of Twenty Twenty One, but that doesn't make sense for 5.7, which has a different focus. The content of the page would be at odds with the reference to TT1.

#15 follow-up: @francina
2 weeks ago

Google Doc for the About page: https://docs.google.com/document/d/1nexvqomK405cMnKrwcq1m9EENMljJULJNzGbjnRWsGw/edit?usp=sharing

This is verbatim from the Beta 1 post, so it needs work and Marketing is organizing around it. I will ask for feedback from all the focus leads in the current release.

Deadline for copy: Wednesday, February 17th, end of working day in the US, Pacific Time.
This deadline will allow for feedback, review and merge in time for Release Candidate 1.

Instructions: please add text with the suggestion functionality of Google Docs if you want to change or add anything. Use comments to ask for clarifications.

Thanks everyone!

#16 @melchoyce
2 weeks ago

Here's a draft mockup to start guiding the conversation. You can see it closer in Figma: https://www.figma.com/file/kFo6UEEsaQbqgvCitIzWNy/About-Page-5.7?node-id=220%3A997

All the the copy in the mockup is either drawn from the Beta 1 post, or totally made up. None of this will be final; I just needed something to help structure the page. Anyone working on copy is free to completely depart from this, and I'll adjust the design as needed.

The editor updates section will have some videos highlighting whichever features we want to showcase.

For the admin colors, I'd love to do some sort of before/after comparison like @ryelle has on her doc here: https://ryelle.codes/core/colors/index.html. We'd need to figure out a lightweight and accessible approach. If there isn't one, worse comes to worse, I can make a before/after video.

The overall design approach is inspired by some jazz albums from Prestige Records.

#17 @hedgefield
13 days ago

That looks great Mel! I love the paint smears. And indeed a comparison would be a pretty cool way to show off the color differences. Did the editor system fonts make it in? That would also make a fun comparison. Overall it's looking good to me.

#18 in reply to: ↑ 15 ; follow-up: @webcommsat
13 days ago

Thanks @lukecarbis and @francina for the messages. @marybaum and I have started working on this. A couple of queries highlighted on accessibility and colors, thanks for the replies in so far and the added section suggestions from Mel Choyce. Sarah Ricker is to suggest some alternatives on accessibility for one section to help make it easier to follow while keeping its meaning.

Note to remind us later: links to the field guide, when available, to be added at the end of the About page.

Replying to francina:

Google Doc for the About page: https://docs.google.com/document/d/1nexvqomK405cMnKrwcq1m9EENMljJULJNzGbjnRWsGw/edit?usp=sharing

This is verbatim from the Beta 1 post, so it needs work and Marketing is organizing around it. I will ask for feedback from all the focus leads in the current release.

Deadline for copy: Wednesday, February 17th, end of working day in the US, Pacific Time.
This deadline will allow for feedback, review and merge in time for Release Candidate 1.

Instructions: please add text with the suggestion functionality of Google Docs if you want to change or add anything. Use comments to ask for clarifications.

Thanks everyone!

#19 in reply to: ↑ 18 @webcommsat
13 days ago

Release squad leads - Are there any other main features that need to be in the 'Intro text with an overview of the main features'? Thanks.

Replying to webcommsat:

Thanks @lukecarbis and @francina for the messages. @marybaum and I have started working on this. A couple of queries highlighted on accessibility and colors, thanks for the replies in so far and the added section suggestions from Mel Choyce. Sarah Ricker is to suggest some alternatives on accessibility for one section to help make it easier to follow while keeping its meaning.

Note to remind us later: links to the field guide, when available, to be added at the end of the About page.

Replying to francina:

Google Doc for the About page: https://docs.google.com/document/d/1nexvqomK405cMnKrwcq1m9EENMljJULJNzGbjnRWsGw/edit?usp=sharing

This is verbatim from the Beta 1 post, so it needs work and Marketing is organizing around it. I will ask for feedback from all the focus leads in the current release.

Deadline for copy: Wednesday, February 17th, end of working day in the US, Pacific Time.
This deadline will allow for feedback, review and merge in time for Release Candidate 1.

Instructions: please add text with the suggestion functionality of Google Docs if you want to change or add anything. Use comments to ask for clarifications.

Thanks everyone!

#20 @francina
12 days ago

  • Owner changed from metalandcoffee to francina

#21 @ryelle
11 days ago

For the admin colors, I'd love to do some sort of before/after comparison like @ryelle has on her doc. We'd need to figure out a lightweight and accessible approach. If there isn't one, worse comes to worse, I can make a before/after video.

This uses a library called Juxtapose, and it's accessible according to my limited testing (I think I only tested keyboard use, not sure how a screen reader would handle it). So I think our options are:

  • Use Juxtapose via an iframe embed, they generate a URL iframe using images we upload. But that's a 3rd-party embed, and might be unreliable/untrusted.
  • Use Juxtapose via a CDN, which is what I'm doing in the demo linked above. Again, possibly unreliable/untrusted code loading in wp-admin.
  • Use a CSS-only solution like this, but this requires a mouse to drag the resize bar. This is fairly "decorative" and the point would be clear from the default state, so perhaps this is OK?
  • No comparison slider, but use a button to toggle between two images. Much less interesting, and doesn't show the difference by default.

If anyone has any other suggestions for something that can easily do this kind of comparison, please share - we don't want to introduce any new libraries into core just for the about page, but we can write some JS to the about page itself for the demo.

@ryelle
11 days ago

The fallback image comparison idea of an image + button

@melchoyce
10 days ago

Updated mockup featuring the latest copy draft.

@melchoyce
10 days ago

Tried a version where the header is blue instead of cream.

#22 follow-up: @francina
10 days ago

I know the feedback you are looking for is not "I like it", because that is an opinion... but I really do :)
I think it's very WordPress and very different as well :) .2$

#23 @melchoyce
9 days ago

FYI, it sounds like this text:

Block variations: view a block variation’s icon and description right in the block inspector. And a new dropdown in that same inspector lets you switch between block variations in one operation.

Is actually an improvement developers making block variations, not an actual interface feature. I think we should remove it.

@melchoyce
9 days ago

#24 @melchoyce
9 days ago

Here are options for a longer or shorter video on dragging-and-dropping blocks into the editor, and a screenshot for the cover block UI: https://cloudup.com/cNIN3K2-DX5

#25 @sabernhardt
9 days ago

  • Focuses accessibility added

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


8 days ago

  • Keywords has-patch added; needs-patch removed

Desktop size:

https://i0.wp.com/user-images.githubusercontent.com/541093/108557576-cb9bab80-72c6-11eb-8034-7656c87cce69.png

Tablet size:

https://i0.wp.com/user-images.githubusercontent.com/541093/108557575-cb9bab80-72c6-11eb-876b-0db9611e3f21.png

Small phone size:

https://i0.wp.com/user-images.githubusercontent.com/541093/108557574-cb031500-72c6-11eb-8240-43cea2dca9d2.png


For reference, some screenshots of the other About section pages

Credits page:

https://i0.wp.com/user-images.githubusercontent.com/541093/108557578-cc344200-72c6-11eb-91c8-0b3b6d6d33f5.png

Freedoms page:

https://i0.wp.com/user-images.githubusercontent.com/541093/108557581-ccccd880-72c6-11eb-97ad-3a441a9b06e4.png

Privacy page:

https://i0.wp.com/user-images.githubusercontent.com/541093/108557582-ccccd880-72c6-11eb-906d-7ff717569a1c.png

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

#27 @ryelle
8 days ago

I've attached a PR with a first pass of the mockup & copy.

I opted to add the few SVGs as new image files, since the local-images idea has come up in the past and these are too large to easily inline. The screenshots & video will still be hosted on the CDN though, to avoid inflating the update package.

I'll use Mel's image & video from here, but I'll need new screenshots for the image comparison section– mine are too small & the "new" one is outdated.

Speaking of, the image comparison could use accessibility feedback. I mentioned some of the ways we could show this feature in comment:21, and decided to try out the CSS-only version.

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


5 days ago

#29 @melchoyce
5 days ago

In the image comparison, is there any way to move the drag handle into the vertical center of the images, and make it bigger so it's more noticeable?

#30 in reply to: ↑ 22 @marybaum
5 days ago

LOVE LOVE LOVE

Replying to francina:

I know the feedback you are looking for is not "I like it", because that is an opinion... but I really do :)
I think it's very WordPress and very different as well :) .2$

#31 @ryelle
5 days ago

In the image comparison, is there any way to move the drag handle into the vertical center of the images, and make it bigger so it's more noticeable?

Unfortunately no, since it's an overlay onto the browser's resize handle, which stays at the bottom right (it's the same functionality that's on this textarea). I tried making it bigger, but the click area is a fixed size too, so making it larger actually made part of it non-clickable.

#32 @ryelle
5 days ago

In 50418:

Help/About: WordPress 5.7 About Page.

This is the start of the WordPress 5.7 about page.

Props audrasjb, metalandcoffee, melchoyce, hedgefield, francina, webcommsat, lukecarbis, meher, sarahricker, marybaum.
See #52347.

#33 @sarahricker
4 days ago

  • Keywords commit added; needs-design needs-copy-review removed

Tested and good to commit!

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


4 days ago

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


4 days ago

#37 follow-up: @desrosj
4 days ago

This looks great! I have some small feedback:

  • This could still be getting adjusted. It took me a bit to realize why there was a white line down the middle of the color palette image. The line is a bit hard to see (and I have relatively good vision), and the difference in the color schemes is pretty subtle. Can the dividing line be a bit more obvious?
  • The "Code is Poetry" at the very top was also a bit hard to read for me.

#38 in reply to: ↑ 37 ; follow-up: @desrosj
4 days ago

Replying to desrosj:

It took me a bit to realize why there was a white line down the middle of the color palette image.

Oh wow, I just just noticed that it was a slider and there was a control at the bottom. I think it would still be great to make it stand out a bit more if possible, though.

#39 in reply to: ↑ 38 @melchoyce
4 days ago

Replying to desrosj:

Replying to desrosj:

It took me a bit to realize why there was a white line down the middle of the color palette image.

Oh wow, I just just noticed that it was a slider and there was a control at the bottom. I think it would still be great to make it stand out a bit more if possible, though.

Sounds like no, based on this previous reply from @ryelle:

Unfortunately no, since it's an overlay onto the browser's resize handle, which stays at the bottom right (it's the same functionality that's on this textarea). I tried making it bigger, but the click area is a fixed size too, so making it larger actually made part of it non-clickable.

I don't think it's obvious enough as-is. Maybe I could put together a video instead that compares the two? Something that cross-fades back and forth between the before/after maybe?

#40 @SergeyBiryukov
4 days ago

FWIW, I'm not sure this sentence from the "Ongoing cleanup after update to jQuery 3.5.1" section is accurate:

One side effect: it generated a set of cryptic messages on the dashboard that informed only developers. In 5.7, you will get far fewer of those messages, and they will be in plain language.

This appears to be about the changes in #51812, specifically [50001], [50270], [50367], and [50420]. It's true that there should be far fewer of those deprecation messages, however:

  1. I think the messages were only in browser's JavaScript console, and not exactly on the dashboard.
  2. More importantly, I'm not sure about the "will be in plain language" part, as there were no changes to improve the language. I think that would only be the case when using the Enable jQuery Migrate Helper plugin.

At the moment, I don't have a better wording for this sentence, just wanted to bring it up for discussion :) Maybe just removing the "will be in plain language" part is worth considering?

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


3 days ago

This is another take on the image comparison UI in the About page. It uses the ResizeableBox from @wordpress/components for a draggable resize handle, which should be recognizable from the editor. It's much more obvious, and can be dragged from any point in the line:

https://i0.wp.com/user-images.githubusercontent.com/541093/109195322-5fa6c080-7768-11eb-90a6-5868b913f7a6.png

This _should_ work back to IE11, but if something happens and the JS can't load, it has a basic (static) presentation:

https://i0.wp.com/user-images.githubusercontent.com/541093/109195324-603f5700-7768-11eb-8a62-f79e4e62cef4.png

It still needs work for RTL

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

#42 @ryelle
2 days ago

  • Keywords needs-screenshots commit removed

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


40 hours ago

Note: See TracTickets for help on using tickets.