Opened 5 weeks ago
Last modified 40 hours ago
#52347 assigned task (blessed)
WordPress 5.7 about page
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (48)
#2
@
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
@
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
@
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
@
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
@
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
@
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?
This ticket was mentioned in Slack in #core by melchoyce. View the logs.
2 weeks ago
#10
@
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
@
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
@
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
@
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
@
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:
↓ 18
@
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
@
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
@
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:
↓ 19
@
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
@
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!
#21
@
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.
#22
follow-up:
↓ 30
@
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
@
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.
#24
@
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
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:
Tablet size:
Small phone size:
For reference, some screenshots of the other About section pages
Credits page:
Freedoms page:
Privacy page:
Trac ticket: https://core.trac.wordpress.org/ticket/52347
#27
@
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
@
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
@
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
@
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.
#33
@
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
#35
@
4 days ago
hellofromtonya commented on PR #1025:
Merged with changeset https://core.trac.wordpress.org/changeset/50418
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
4 days ago
#37
follow-up:
↓ 38
@
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:
↓ 39
@
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
@
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
@
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:
- I think the messages were only in browser's JavaScript console, and not exactly on the dashboard.
- 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:
This _should_ work back to IE11, but if something happens and the JS can't load, it has a basic (static) presentation:
It still needs work for RTL
Trac ticket: https://core.trac.wordpress.org/ticket/52347
For reference, see the work and link shared in WordPress 5.6 about page ticket: #51415