WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 2 months ago

#52347 closed task (blessed) (fixed)

WordPress 5.7 about page

Reported by: audrasjb Owned by: francina
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: i18n-change
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 (11)

5x7-mockup-1.png (551.1 KB) - added by melchoyce 3 months ago.
Screen Shot 2021-02-16 at 6.00.11 PM.png (455.8 KB) - added by ryelle 3 months ago.
The fallback image comparison idea of an image + button
5x7-mockup-2.png (488.7 KB) - added by melchoyce 3 months ago.
Updated mockup featuring the latest copy draft.
5x7-mockup-2-blue.png (957.6 KB) - added by melchoyce 3 months ago.
Tried a version where the header is blue instead of cream.
5x7-mockup-3.png (1.9 MB) - added by melchoyce 3 months ago.
52347.diff (2.0 KB) - added by SergeyBiryukov 2 months ago.
52347.2.diff (927 bytes) - added by audrasjb 2 months ago.
Fix issue in the lazy load section
52347.3.diff (951 bytes) - added by audrasjb 2 months ago.
By default, WordPress will add a <code>loading="lazy"</code> attribute to iframe tags when both width and height are specified
52347.4.diff (619 bytes) - added by audrasjb 2 months ago.
Button block string change, according to @jdy68’s comment
Capture d’écran 2021-02-24 à 19.18.25.png (199.7 KB) - added by audrasjb 2 months ago.
About the last patch: this is not an alignement, but a layout variation
52347.5.diff (1.5 KB) - added by ryelle 2 months ago.

Change History (116)

#1 @audrasjb
4 months ago

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

#2 @metalandcoffee
3 months ago

Adding @hedgefield.

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

#3 @ryelle
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months ago

That's enough to get us started. Thanks!

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


3 months ago

#10 @francina
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months 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
3 months ago

  • Owner changed from metalandcoffee to francina

#21 @ryelle
3 months 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
3 months ago

The fallback image comparison idea of an image + button

@melchoyce
3 months ago

Updated mockup featuring the latest copy draft.

@melchoyce
3 months ago

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

#22 follow-up: @francina
3 months 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
3 months 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 @melchoyce
3 months 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
3 months ago

  • Focuses accessibility added

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


3 months 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
3 months 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.


2 months ago

#29 @melchoyce
2 months 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
2 months 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
2 months 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
2 months 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
2 months 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.


2 months ago

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


2 months ago

#37 follow-up: @desrosj
2 months 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
2 months 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 ; follow-up: @melchoyce
2 months 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 follow-up: @SergeyBiryukov
2 months 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.


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

  • Keywords needs-screenshots commit removed

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


2 months ago

#44 @prbot
2 months ago

tikifez commented on PR #1048:

On one hand, the swiping is cool and demonstrates the color shift in a clearer fashion than two separate images would be. Particularly if you're looking at the change on a specific component like the shift in gray on the sidebar which might be lost in a side-by-side view.

On the other, the handle isn't selectable with the keyboard (and the target size is less than WCAG 2.1's success criterion 2.5.5, but that's another discussion). There should probably be alt text for the images as well.

I almost wish there was an alternate method for transitioning between the two, but I'm unaware of an existing one that would fit better.

I really want this approach to work because of how efficient the slider is -- if you can see the images clearly and manipulate the handle -- but maybe the suggestion made in slack to wrap the two images in a figure with a simple alt text would be better. Probably a good idea to add alt text to the images either way.

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


2 months ago

#46 @prbot
2 months ago

Clorith commented on PR #1048:

Degrades to only a single static image of WP 5.7 when using IE 11 as described.

I did discover some issues in Microsoft Edge though (version 88.0.705.81), with lazy-loading and non-cached assets (these are not present in for example Chrome on Windows)

When loading the page with a non-cached set of images, the lazy load prevents the two images from loading at first, when you scroll, there's a quick layout shift as the image loads in and pushes the remaining content down, but the comparator control has already been initialized on the non-sized image, so there's nothing to compare except a nearly invisible thumbnail in the top corner.

The layout shift can be avoided by defining the width and height of the images, but that did not appear to have an impact on the strange controller behavior.

See behavior in example as well, if I refresh after the entire page has loaded the comparator works as expected though (this is with me having defined width and height, hence there not being a layout shift)

https://i0.wp.com/user-images.githubusercontent.com/468735/109530005-8a6d7d80-7ab6-11eb-886d-cd75d6cf87e4.gif

#47 @prbot
2 months ago

ryelle commented on PR #1048:

The update I just pushed adds a caption & alt text to the images:

  • [alt] Dashboard using old color scheme.
  • [alt] Dashboard using new color scheme.
  • [caption] Comparison of the Dashboard before and after the color update.

<img width="1019" alt="Screen Shot 2021-03-01 at 11 44 02 AM" src="https://user-images.githubusercontent.com/541093/109529151-6cd2f080-7a83-11eb-9e72-83355ed735df.png">

I really want this approach to work because of how efficient the slider is -- if you can see the images clearly and manipulate the handle -- but maybe the suggestion made in slack to wrap the two images in a figure with a simple alt text would be better.

Do you think this works now that it has the caption & alt text? So it has both the comparison handle, and caption/alt text? It won't really help a sighted user who uses a keyboard, but they can get the gist of it with the divider at least? (I'm not super thrilled about that, but I'm also trying to do this with the least amount of custom code, and it's just a quick demo)

#48 @prbot
2 months ago

Clorith commented on PR #1048:

Ahh perfect, the figure wrap seems to have negated the strange controller-issue on Microsoft Edge as well

#49 @prbot
2 months ago

ryelle commented on PR #1048:

Degrades to only a single static image of WP 5.7 when using IE 11 as described.

This actually _should_ work on IE11, but apparently something's broken in IE11 for all Gutenberg things https://github.com/WordPress/gutenberg/issues/28249. In any case, the fallback was missing the dividing border fallback, so I've added that and it should be more obvious that it's a static "comparison" of the two images now.

#50 follow-up: @ryelle
2 months ago

@marybaum (or anyone else copy-minded 🙂) The copy that needs a gut-check is this:

For the two images, I've added alt text. This should briefly describe the image for screen reader users. What I've got:

  • Dashboard using old color scheme.
  • Dashboard using new color scheme.

Below the interactive comparison, there's a caption explaining it. This is for anyone, it's visible to all users. What I've got so far:

  • Comparison of the Dashboard before and after the color update.

You can see that part in this screenshot.

#51 in reply to: ↑ 50 @marybaum
2 months ago

Replying to ryelle:

How about:

  • Dashboard with old color scheme.
  • Dashboard with new color scheme.

For the caption:

Above, the Dashboard before and after the color update in 5.7.

@marybaum (or anyone else copy-minded 🙂) The copy that needs a gut-check is this:

For the two images, I've added alt text. This should briefly describe the image for screen reader users. What I've got:

  • Dashboard using old color scheme.
  • Dashboard using new color scheme.

Below the interactive comparison, there's a caption explaining it. This is for anyone, it's visible to all users. What I've got so far:

  • Comparison of the Dashboard before and after the color update.

You can see that part in this screenshot.

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


2 months ago

#53 follow-up: @audrasjb
2 months ago

Should we avoid the "Social Icons block" repetition?

<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.

Maybe it would be better to replace it with:

<strong>Social Icons block:</strong> you can now change the size of the icons.

any thought?

#54 follow-up: @audrasjb
2 months ago

Also, in the following sentence:

The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.

Maybe replace "blog" with "site"?

#55 follow-up: @francina
2 months ago

I suggest we don’t make any change unless it’s vital. String was RC1, the text was reviewed by multiple people. I think unless the information provided is wrong, let’s leave it as it is 😊 thanks!

#56 follow-up: @ryelle
2 months ago

Do we all agree that these images are final? I can push them up to the CDN before RC2, if so.

I'll need some help to convert the video into a webm (from mp4), and check that it's optimized for viewing at around 480px wide (960 on retina screens).

#57 in reply to: ↑ 39 @SergeyBiryukov
2 months ago

Replying to 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?

This was also brought up in #52693. Seems like anything we can do to make it more obvious might be a good idea :)

Last edited 2 months ago by SergeyBiryukov (previous) (diff)

#58 in reply to: ↑ 55 ; follow-up: @SergeyBiryukov
2 months ago

Replying to francina:

I suggest we don’t make any change unless it’s vital. String was RC1, the text was reviewed by multiple people. I think unless the information provided is wrong, let’s leave it as it is 😊 thanks!

What about comment:40 then? :) I have no problem going with the current string if that's preferable even if not quite correct, just wanted to make sure it's an intentional decision and not because we missed it :)

#59 in reply to: ↑ 58 @francina
2 months ago

Replying to SergeyBiryukov:

What about comment:40 then? :) I have no problem going with the current string if that's preferable even if not quite correct, just wanted to make sure it's an intentional decision and not because we missed it :)

In that case, it seems like we are giving incorrect information, so by all means, let's change it.
@audrasjb, @ryelle and @marybaum: you also raised concerns about some sentences, please finalize them ASAP so they can be merged all together in RC2 and the Polyglots will receive them all in one go!

Thank you everyone

#60 in reply to: ↑ 56 ; follow-up: @francina
2 months ago

Replying to ryelle:

Do we all agree that these images are final? I can push them up to the CDN before RC2, if so.

I'll need some help to convert the video into a webm (from mp4), and check that it's optimized for viewing at around 480px wide (960 on retina screens).

Which images? Sorry, I see lots so I am not sure which ones you refer to :)
As per conversion, let me check if I can find a solution.

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


2 months ago

#62 in reply to: ↑ 60 ; follow-up: @ryelle
2 months ago

Replying to francina:

Which images? Sorry, I see lots so I am not sure which ones you refer to :)
As per conversion, let me check if I can find a solution.

The images in the about page - the comparison screenshots & the cover block screenshot. No one's said anything about them, so I'm assuming they're good to upload to the CDN (s.w.org).

Let me know if you can't do the video conversion, and I'll see what I can do.

Just to get on the same page re: new/changed strings - we have a few (new) coming in for alt text. The string that @SergeyBiryukov's pointed out (40) needs to be rewritten because it's not totally correct (maybe @marybaum can help there?). The strings @audrasjb pointed out (53, 54) are not incorrect, but could be reworked. I think those are the only remaining issues.

#63 in reply to: ↑ 62 @francina
2 months ago

As far as I am concerned, they are good to go!

Replying to ryelle:

Replying to francina:

Which images? Sorry, I see lots so I am not sure which ones you refer to :)
As per conversion, let me check if I can find a solution.

The images in the about page - the comparison screenshots & the cover block screenshot. No one's said anything about them, so I'm assuming they're good to upload to the CDN (s.w.org).

===

Sending them to you over Slack

Let me know if you can't do the video conversion, and I'll see what I can do.

===

Let's hear what Mary says :)

Just to get on the same page re: new/changed strings - we have a few (new) coming in for alt text. The string that @SergeyBiryukov's pointed out (40) needs to be rewritten because it's not totally correct (maybe @marybaum can help there?). The strings @audrasjb pointed out (53, 54) are not incorrect, but could be reworked. I think those are the only remaining issues.

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


2 months ago

#65 in reply to: ↑ 40 @marybaum
2 months ago

Replying to SergeyBiryukov:

How about we replace that whole lie (I was the one who lied here, not anyone else) with

In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.

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 Slack in #core by sergey. View the logs.


2 months ago

#67 in reply to: ↑ 53 ; follow-up: @marybaum
2 months ago

Replying to audrasjb:

I agree with losing the repetition. While we're at it, let's beef up the evergy:

<strong>Now you can change the size of the icons.</strong>

Should we avoid the "Social Icons block" repetition?

<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.

Maybe it would be better to replace it with:

<strong>Social Icons block:</strong> you can now change the size of the icons.

any thought?

#68 in reply to: ↑ 54 @marybaum
2 months ago

Replying to audrasjb:

I noticed that too! Abso-frickin-lutely!

How about:

The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic*.

*(unless the site is marked <em>not-public</em>)

Also, in the following sentence:

The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.

Maybe replace "blog" with "site"?

#69 in reply to: ↑ 67 @hellofromTonya
2 months ago

Noting from Slack discussion, preference for:

<strong>Social Icons block:</strong> now you can change the size of the icons.

Why?

Less confusing. The icon size change relates to this block, not all icons everywhere.

Replying to marybaum:

Replying to audrasjb:

I agree with losing the repetition. While we're at it, let's beef up the evergy:

<strong>Now you can change the size of the icons.</strong>

Should we avoid the "Social Icons block" repetition?

<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.

Maybe it would be better to replace it with:

<strong>Social Icons block:</strong> you can now change the size of the icons.

any thought?

Last edited 2 months ago by hellofromTonya (previous) (diff)

#70 @hellofromTonya
2 months ago

  • Keywords i18n-change dev-feedback added

Marking for

  • changes to strings.
  • 2nd dev review needed for 5.7 backporting.

#71 @ryelle
2 months ago

In 50478:

Help/About: Iterate on the 5.7 About Page.

Adds a more obviously interactive comparison for viewing the color scheme differences. Improvements on RTL and IE11. Update strings to be more clear and consistent. Switch to the CDN for loading images.

Props sarahricker, desrosj, melchoyce, SergeyBiryukov, tikifez, clorith, marybaum, audrasjb, francina, hellofromTonya.
Fixes #52693. See #52347.

#72 @prbot
2 months ago

ryelle commented on PR #1048:

Committed in r50478.

#73 @SergeyBiryukov
2 months ago

  • Keywords commit dev-reviewed added; dev-feedback removed

[50478] looks good to backport.

#74 @ryelle
2 months ago

In 50480:

Help/About: Iterate on the 5.7 About Page.

Adds a more obviously interactive comparison for viewing the color scheme differences. Improvements on RTL and IE11. Update strings to be more clear and consistent. Switch to the CDN for loading images.

Props sarahricker, desrosj, melchoyce, SergeyBiryukov, tikifez, clorith, marybaum, audrasjb, francina, hellofromTonya.
Reviewed by SergeyBiryukov.
Merges [50478] to the 5.7 branch.
Fixes #52693. See #52347.

#75 @hellofromTonya
2 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

#76 @davidbaumwald
2 months ago

  • Keywords needs-patch added; has-patch commit dev-reviewed removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Sorry for not catching this sooner, but the Lazy Load for iframes section is inaccurate. Current copy mentions:

Now it’s simple to let iframes lazy-load. Just add the loading="lazy" attribute to iframe tags on the front end.

However, there's nothing for the user to manage at all, unless they want to completely disable the function with a filter.

For reference the Dev Note is https://make.wordpress.org/core/2021/02/19/lazy-loading-iframes-in-5-7/

Since RC is already out, this should be updated quickly for translators to adapt their translations in time for final release.

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


2 months ago

@audrasjb
2 months ago

Fix issue in the lazy load section

#78 @davidbaumwald
2 months ago

Thanks for the patch @audrasjb. Should it be a bit more pointed to detail exactly when they are added...

By default, WordPress will add a loading="lazy" attribute to iframes when both width and height are specified.

#79 @audrasjb
2 months ago

Agreed, even better

@audrasjb
2 months ago

By default, WordPress will add a <code>loading="lazy"</code> attribute to iframe tags when both width and height are specified

#80 @SergeyBiryukov
2 months ago

In 50483:

Help/About: Clarify a string about lazy-loading iframes.

Props davidbaumwald, audrasjb, hellofromTonya.
See #52347.

#81 @SergeyBiryukov
2 months ago

  • Keywords commit dev-feedback added; needs-patch removed

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

#82 @audrasjb
2 months ago

  • Keywords needs-patch added; commit dev-feedback removed

(Speaking as French GTE)
I also had a hard time to figure out how to translate this "With this new version, the editor cleans up the colors…" because I'm not sure the editor cleaned up any color…

in the fr_FR version, I rephrased it into something much like “With this new version, WordPress brings you new colors and its editor will help you accomplish blablabla”.

Because I don't think there is any major color change in the editor (there is nothing about it in the editor section of the about page). But I know there is a lot of color changes in WP-Admin. See this dev note for reference: https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7/

#83 @audrasjb
2 months ago

  • Keywords commit dev-feedback added; needs-patch removed

Ah sorry, I didn't want to remove the commit/dev-feedback keywords ;)

#84 @jdy68
2 months ago

Hi,

I think there is a confusing term in this sentence: "Buttons block: now you can align the content in buttons vertically" because we are not talking about aligning the content (text) of the button but about a vertical or horizontal arrangement of the buttons.

So I propose the following sentence: "Buttons block: now you can choose between a vertical or a horizontal arrangement (or layout) of the buttons."

#85 @audrasjb
2 months ago

Thanks @jdy68,

Indeed, I tested the related change and it's not about aligning the content inside the buttons, but rather changing the layout of the Button(S) block (which contains one or more blocks).

The current wording is not 100% accurate.

See this small video for details about the actual behaviour of the editor: https://i.gyazo.com/fd1ce434342625d3a92288f9ce10da6b.mp4

@audrasjb
2 months ago

Button block string change, according to @jdy68’s comment

@audrasjb
2 months ago

About the last patch: this is not an alignement, but a layout variation

#86 @audrasjb
2 months ago

Indeed, the Button block sentence is misleading. This is not an alignment related change (and even less concerning the text content of the button) but a new layout variation.

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


2 months ago

@ryelle
2 months ago

#88 @desrosj
2 months ago

In 50492:

Help/About: Clarify a string about lazy-loading iframes.

Props davidbaumwald, audrasjb, hellofromTonya.
See #52347.

#89 follow-up: @ryelle
2 months ago

@audrasjb You're right about the large intro text - the color change was not in the editor. I used your rephrasing to tweak that string a bit in 52347.5.diff, which includes the button text too.

The string changes are as follows - @marybaum what do you think?

Before

With this new version, the editor cleans up the colors and helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing type sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, get even simpler to make.

After

With this new version, WordPress brings you fresh colors and the editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing type sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.


Before

<strong>Buttons block:</strong> now you can align the content in buttons vertically. And you can set the width of a button to a preset percentage.

After

<strong>Buttons block:</strong> now you can choose between a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.

#90 @audrasjb
2 months ago

Thanks for clarifying @ryelle !
52347.5.diff looks great to me 👍

#91 in reply to: ↑ 89 @marybaum
2 months ago

Replying to ryelle:

Thanks for asking! Just a little tweaking.

intro text:

With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing type sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.

Buttons block:

<strong>Buttons block:</strong> now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.

@audrasjb You're right about the large intro text - the color change was not in the editor. I used your rephrasing to tweak that string a bit in 52347.5.diff, which includes the button text too.

The string changes are as follows - @marybaum what do you think?

Before

With this new version, the editor cleans up the colors and helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing type sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, get even simpler to make.

After

With this new version, WordPress brings you fresh colors and the editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing type sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.


Before

<strong>Buttons block:</strong> now you can align the content in buttons vertically. And you can set the width of a button to a preset percentage.

After

<strong>Buttons block:</strong> now you can choose between a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.

#92 @davidbaumwald
2 months ago

One other comment here.

The controls you use most, like changing type sizes, are in more places—right where you need them

Should "font" be used here instead of "type"? Not only is it more clear and familiar, my guess is that it's less ambiguous for translators as well.

#93 @audrasjb
2 months ago

+1 for this change @davidbaumwald

#94 @audrasjb
2 months ago

I quickly checked on translate.w.org using the suggested translation for another language tool, and I found at least three Locale with wrong translations (Catalan, Indonesian, and I can't recall to third one). They translated it to something like "The controls you use the most, such as resizing font types", which is not accurate.

#95 @ryelle
2 months ago

So that paragraph now reads:

With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing font sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.

Does this sound good?

#96 @audrasjb
2 months ago

Perfect 👌

#97 @ryelle
2 months ago

In 50495:

Help/About: Clarify two strings.

The intro text has been updated for accuracy and to make it easier for translation. The button text has been updated for accuracy.

Props jdy68, audrasjb, marybaum, davidbaumwald.
See #52347.

#98 @SergeyBiryukov
2 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50495] looks good to backport.

#99 @SergeyBiryukov
2 months ago

In 50498:

Help/About: Clarify two strings.

The intro text has been updated for accuracy and to make it easier for translation. The button text has been updated for accuracy.

Props jdy68, audrasjb, marybaum, davidbaumwald.
Reviewed by ryelle, SergeyBiryukov.
Merges [50495] to the 5.7 branch.
See #52347.

#100 follow-up: @SergeyBiryukov
2 months ago

  • Keywords commit dev-reviewed removed

Could someone clarify what this part refers to?

The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro.

To me, it seems like it refers to either block-based Widgets screen, which is not included in WordPress 5.7, or Full Site Editing, which is not a part of 5.7 either. So I'm a bit confused about the accuracy of this sentence. Or is it referring to something else instead?

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


2 months ago

#102 in reply to: ↑ 100 ; follow-up: @melchoyce
2 months ago

Replying to SergeyBiryukov:

Could someone clarify what this part refers to?

The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro.

To me, it seems like it refers to either block-based Widgets screen, which is not included in WordPress 5.7, or Full Site Editing, which is not a part of 5.7 either. So I'm a bit confused about the accuracy of this sentence. Or is it referring to something else instead?

It references the one of the editor sections further down the page:

You can do more without writing custom code

Full-height alignment: have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.

Buttons block: now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.

Social Icons block: now you can change the size of the icons.

So, you have more control over the layout and design of your site without needing to add any custom CSS.

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


2 months ago

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


2 months ago

#105 in reply to: ↑ 102 @SergeyBiryukov
2 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Replying to melchoyce:

It references the one of the editor sections further down the page:

You can do more without writing custom code
...

So, you have more control over the layout and design of your site without needing to add any custom CSS.

Ah, thanks, that answers my question and clears up the confusion :)

I believe no additional string changes are needed here, and the About page should be good to ship as it is now.

Thanks everyone!

Note: See TracTickets for help on using tickets.