WordPress 5.7 about page

[audrasjb]

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

[audrasjb]

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

[metalandcoffee]

Adding @hedgefield.

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

[ryelle]

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.

[metalandcoffee]

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

[metalandcoffee]

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.

[melchoyce]

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.

[metalandcoffee]

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?

[melchoyce]

That's enough to get us started. Thanks!

[francina]

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.

[francina]

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

[melchoyce]

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.

[francina]

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?

[melchoyce]

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.

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

[melchoyce]

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.

[hedgefield]

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.

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

[webcommsat]

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!

[ryelle]

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]

The fallback image comparison idea of an image + button

[melchoyce]

Updated mockup featuring the latest copy draft.

[melchoyce]

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

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

[melchoyce]

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]

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

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

[ryelle]

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.

[melchoyce]

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?

[marybaum]

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$

[ryelle]

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.

[ryelle]

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.

[sarahricker]

Tested and good to commit!

[prbot]

​hellofromtonya commented on ​PR #1025:

Merged with changeset https://core.trac.wordpress.org/changeset/50418

[desrosj]

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.

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

[melchoyce]

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?

[SergeyBiryukov]

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