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!

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

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.

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)

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)

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

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.

[ryelle]

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

[marybaum]

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.

[audrasjb]

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?

[audrasjb]

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

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

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

[SergeyBiryukov]

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

[SergeyBiryukov]

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

[francina]

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

[francina]

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.

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

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.

[francina]

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.

[marybaum]

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?

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

[marybaum]

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

[hellofromTonya]

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?

[hellofromTonya]

Marking for

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

[ryelle]

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.

Committed in r50478.

[SergeyBiryukov]

[50478] looks good to backport.

[ryelle]

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.

[davidbaumwald]

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.

[audrasjb]

Fix issue in the lazy load section

[davidbaumwald]

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.

[audrasjb]

Agreed, even better

[audrasjb]

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

[SergeyBiryukov]

In 50483:

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

Props davidbaumwald, audrasjb, hellofromTonya.
See #52347.

[SergeyBiryukov]

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

[audrasjb]

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

[audrasjb]

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

[jdy68]

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

[audrasjb]

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]

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

[audrasjb]

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

[audrasjb]

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.

[desrosj]

In 50492:

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

Props davidbaumwald, audrasjb, hellofromTonya.
See #52347.

[ryelle]

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

[audrasjb]

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

[marybaum]

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.

[davidbaumwald]

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.

[audrasjb]

+1 for this change @davidbaumwald

[audrasjb]

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.

[ryelle]

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?

[audrasjb]

Perfect 👌

[ryelle]

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.

[SergeyBiryukov]

[50495] looks good to backport.

[SergeyBiryukov]

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.

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

[melchoyce]

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.

[SergeyBiryukov]

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!