About Page for 5.8 Release

[chaion07]

This ticket includes the discussion, planning, work and other records leading to the development of WordPress 5.8 release

[sarmstead]

Thanks, @chaion07! I'd be happy to design graphics, to write copy, or copy edit for this page.

[chaion07]

Replying to sarmstead:

Thanks, @chaion07! I'd be happy to design graphics, to write copy, or copy edit for this page.

That's great @sarmstead We need all the help we can get. Do you have any design ideas in mind? Let me also tag a few other people who can help us with the design of the page. @karmatosed, @estelaris, @hedgefield, @kellychoffman, @ibdz, @jameskoster
Additionally, I suggest we have a Google Doc so that others can contribute with the write-up for the page. I'll soon get one with the overview points. Cheers!

[chaion07]

Reference: You can see the work and links shared in WordPress 5.7 about page ticket: #52347

[sarmstead]

Replying to chaion07:

Replying to sarmstead:

Thanks, @chaion07! I'd be happy to design graphics, to write copy, or copy edit for this page.

That's great @sarmstead We need all the help we can get. Do you have any design ideas in mind? Let me also tag a few other people who can help us with the design of the page. @karmatosed, @estelaris, @hedgefield, @kellychoffman, @ibdz, @jameskoster
Additionally, I suggest we have a Google Doc so that others can contribute with the write-up for the page. I'll soon get one with the overview points. Cheers!

Thank you for the link to the previous artwork, @chaion07! Right now I'd like to try designing around the jazz musician we choose for 5.8 (​https://codex.wordpress.org/WordPress_Versions). I'd say we match colors, create vector portraits, and even incorporate some fun SVG icons for a little flare. Just a start of course!

Also, some relevant docs:

• Important note from #51809 (The about pages have less visibility now)
• Let's follow the design system / plugin for the about pages from @ryelle: ​https://github.com/ryelle/about-patterns
• Per #52743, let's make sure that we correctly code our <img> src's (see [50523])

[marybaum]

Welcome @sarmstead! And @chaion07!

Component maintainer @marybaum here. I've taken this page on formally after being its informal lead for the last year and a half, since 5.4, going through 5.7.

The Core team has been discussing ways the page might evolve along with the block editor, and how it might reach even more people — and how we the community can get really clear on who it's for and what people should get out of it.

My co-maintainer, Abha Thakor (I will nominate her Wednesday at devchat), and I are thinking about how we might surface the content ahead of the time to do the creative.

There is also some discussion, on Slack and on Make in several posts, about evolving the About page itself, so any discussion here is premature at best. I suggest we hold off AT LEAST until Wednesday devchat, and then we'll know where we stand.

Perhaps.

Meantime, gentlemen, welcome aboard!

[marybaum]

Replying to sarmstead:

Great thought, Sam, except for one thing: We never know the name of the muscician until the day of the actual release, and we are bound to commit the code for the About page at the deadline of the first release candidate, which is at least two weeks ahead of that date. (That's so that Polyglots can translate the copy, which after all are strings, by the release date for all of the language we publish WordPress in. There are a lot of them.)

Further, we work on the copy starting as soon as we know what the main features are going to be — easier this time, since we know we'll have a focus on FSE as a focus for theme and plugin authors, with a standard set of block-editor improvements for users.

Bottom line is we get serious about design and copy at or before Beta 1, and when we can, we strive to get drafts of both into the ticket here by the time we release Beta 1.

Also, we'll want to check with the security-minded folx on the Core team to see how and when any SVG artwork can go in. You may have noticed as a user that we don't permit SVG in the Media Library for exactly that reason — security — but I have personally used SVG as background images in CSS for nearly ten years without a problem.)

Again — welcome aboard!

Thrilled to see what you come up with!

Replying to chaion07:

Replying to sarmstead:

Thanks, @chaion07! I'd be happy to design graphics, to write copy, or copy edit for this page.

That's great @sarmstead We need all the help we can get. Do you have any design ideas in mind? Let me also tag a few other people who can help us with the design of the page. @karmatosed, @estelaris, @hedgefield, @kellychoffman, @ibdz, @jameskoster
Additionally, I suggest we have a Google Doc so that others can contribute with the write-up for the page. I'll soon get one with the overview points. Cheers!

Thank you for the link to the previous artwork, @chaion07! Right now I'd like to try designing around the jazz musician we choose for 5.8 (​https://codex.wordpress.org/WordPress_Versions). I'd say we match colors, create vector portraits, and even incorporate some fun SVG icons for a little flare. Just a start of course!

Also, some relevant docs:

• Important note from #51809 (The about pages have less visibility now)
• Let's follow the design system / plugin for the about pages from @ryelle: ​https://github.com/ryelle/about-patterns
• Per #52743, let's make sure that we correctly code our <img> src's (see [50523])

[chaion07]

Replying to marybaum:

Welcome @sarmstead! And @chaion07!

Component maintainer @marybaum here. I've taken this page on formally after being its informal lead for the last year and a half, since 5.4, going through 5.7.

The Core team has been discussing ways the page might evolve along with the block editor, and how it might reach even more people — and how we the community can get really clear on who it's for and what people should get out of it.

My co-maintainer, Abha Thakor (I will nominate her Wednesday at devchat), and I are thinking about how we might surface the content ahead of the time to do the creative.

There is also some discussion, on Slack and on Make in several posts, about evolving the About page itself, so any discussion here is premature at best. I suggest we hold off AT LEAST until Wednesday devchat, and then we'll know where we stand.

Perhaps.

Meantime, gentlemen, welcome aboard!

Thank you Mary for the pointers.I'm simply grateful to be able to learn from this experience overall. Eagerly waiting for the due diligence to happen accordingly. Much obliged with the advice and knowledge that you've shared.

[sarmstead]

Thanks, @marybaum! Sounds like you and your co-maintainer have got the process from here. Once you get a clear idea of next steps, I'll be happy to jump in where it's needed most.

Replying to marybaum:

Replying to sarmstead:

Great thought, Sam, except for one thing: We never know the name of the muscician until the day of the actual release, and we are bound to commit the code for the About page at the deadline of the first release candidate, which is at least two weeks ahead of that date. (That's so that Polyglots can translate the copy, which after all are strings, by the release date for all of the language we publish WordPress in. There are a lot of them.)

Further, we work on the copy starting as soon as we know what the main features are going to be — easier this time, since we know we'll have a focus on FSE as a focus for theme and plugin authors, with a standard set of block-editor improvements for users.

Bottom line is we get serious about design and copy at or before Beta 1, and when we can, we strive to get drafts of both into the ticket here by the time we release Beta 1.

Also, we'll want to check with the security-minded folx on the Core team to see how and when any SVG artwork can go in. You may have noticed as a user that we don't permit SVG in the Media Library for exactly that reason — security — but I have personally used SVG as background images in CSS for nearly ten years without a problem.)

Again — welcome aboard!

Thrilled to see what you come up with!

Replying to chaion07:

Replying to sarmstead:

Thanks, @chaion07! I'd be happy to design graphics, to write copy, or copy edit for this page.

That's great @sarmstead We need all the help we can get. Do you have any design ideas in mind? Let me also tag a few other people who can help us with the design of the page. @karmatosed, @estelaris, @hedgefield, @kellychoffman, @ibdz, @jameskoster
Additionally, I suggest we have a Google Doc so that others can contribute with the write-up for the page. I'll soon get one with the overview points. Cheers!

Thank you for the link to the previous artwork, @chaion07! Right now I'd like to try designing around the jazz musician we choose for 5.8 (​https://codex.wordpress.org/WordPress_Versions). I'd say we match colors, create vector portraits, and even incorporate some fun SVG icons for a little flare. Just a start of course!

Also, some relevant docs:

• Important note from #51809 (The about pages have less visibility now)
• Let's follow the design system / plugin for the about pages from @ryelle: ​https://github.com/ryelle/about-patterns
• Per #52743, let's make sure that we correctly code our <img> src's (see [50523])

[chanthaboune]

WordPress 5.8 reached the beta 1 milestone today, so it's time to start actively working on the About page. There are a few tasks we will want to split up:

1. Write a draft of the copy.
   1. Here's a Google Doc for easy collaboration/feedback gathering ​https://docs.google.com/document/d/1zgIr6IxmtfVvUiNN-UFNKMOFF0RtIkmrk-nGpzQAYRY/edit
   2. Here is the list of known headline items (TERMS NOT FINAL)
      • Template Editing Mode
      • Query Block
      • 20+ Theme blocks
      • Persistent List View
      • Block based Widgets Editor
      • Block themes based on Theme.json
      • Loading Patterns from the Pattern directory
      • Block Pattern suggestion in Placeholders
      • Duotone filter block supports
      • Pattern transformations
   3. I think we still need some suggestions for what to include in the developer happiness section and any suggestions for delightful user-facing items.
2. Start the design, and identify any additional images needed.
   1. I could use a designer or two who want to collaborate on this!

Next Steps?
I think the next steps are for me to drop over to Marketing and Design with a note that this collaborative opportunity is available.

[marybaum]

Replying to chanthaboune:

After tonight we'll know what exactly got in and what we punted to 5.9. It might be helpful to put together a brief outline called variously a message strategy or creative brief — I've been using variations on the same one for a very long time.

(36 years, but who's counting?)

Here's a writeup that appeared a few years ago on the subject: ​https://www.clickz.com/the-creative-brief-mystery-solved/69225/

Another great resource is the dev-notes spreadsheet from the Docs team. I"m under the impression that @milana_cap has one going already! In general, if a feature has a dev note, it's got potential as an item to feature for devs (and possibly also users!)

And now, back to the release!

WordPress 5.8 reached the beta 1 milestone today, so it's time to start actively working on the About page. There are a few tasks we will want to split up:

1. Write a draft of the copy.
   1. Here's a Google Doc for easy collaboration/feedback gathering ​https://docs.google.com/document/d/1zgIr6IxmtfVvUiNN-UFNKMOFF0RtIkmrk-nGpzQAYRY/edit
   2. Here is the list of known headline items (TERMS NOT FINAL)
      • Template Editing Mode
      • Query Block
      • 20+ Theme blocks
      • Persistent List View
      • Block based Widgets Editor
      • Block themes based on Theme.json
      • Loading Patterns from the Pattern directory
      • Block Pattern suggestion in Placeholders
      • Duotone filter block supports
      • Pattern transformations
   3. I think we still need some suggestions for what to include in the developer happiness section and any suggestions for delightful user-facing items.
2. Start the design, and identify any additional images needed.
   1. I could use a designer or two who want to collaborate on this!

Next Steps?
I think the next steps are for me to drop over to Marketing and Design with a note that this collaborative opportunity is available.

[milana_cap]

Replying to marybaum:

Replying to chanthaboune:

Another great resource is the dev-notes spreadsheet from the Docs team. I"m under the impression that @milana_cap has one going already! In general, if a feature has a dev note, it's got potential as an item to feature for devs (and possibly also users!)

Yes, we have a spreadsheet for managing all docs needed for release.

​https://docs.google.com/spreadsheets/d/1RS0BEwy8pNNHR7P_nZ3yKcgWKVABbEn9RMjja-wkJwY/edit?usp=sharing

In first sheet you'll find all Trac tickets marked for any sort of documentation (block editor being excluded). Those are split into 3 sheets: Dev notes (tickets marked needs-dev-note), DevHub changes (tickets marked needs-docs) and HelpHub changes (tickets marked needs-codex). Block editor dev docs is in its own sheet and includes GitHub issues marked for dev notes but also issues for updating Block editor dev handbook. And the last sheet is for block editor end user changes. We have a specific workflow for that so you'll find link to a different Drive folder where all end user facing changes are listed.

I hope this helps a bit in making About page. If you have any questions do ping me.

[melchoyce]

Happy to spearhead design. @sarmstead, still interested in working on the page? Would love to collaborate.

[sarmstead]

Replying to melchoyce:

@melchoyce, yes let's collaborate! Since you have experience with this already, and if the team is happy with it, I'd be happy for you to be the design lead and I can help in any way you see fit. I have lots of experience designing with the user and dev team in mind, so I am happy to collaborate in any way I can.

Your thoughts?

Happy to spearhead design. @sarmstead, still interested in working on the page? Would love to collaborate.

[melchoyce]

Sounds great! I'll ping you in the #design channel in Slack in the next couple of days to start brainstorming.

[chaion07]

Replying to melchoyce:

Sounds great! I'll ping you in the #design channel in Slack in the next couple of days to start brainstorming.

Glad to see things falling in places finally. Eager to learn from this process. Thank you!

[adamsilverstein]

I think we still need some suggestions for what to include in the developer happiness section and any suggestions for delightful user-facing items.

WebP support might be good to include :)

[sarmstead]

Replying to melchoyce:

Thanks, @melchoyce!

Sounds great! I'll ping you in the #design channel in Slack in the next couple of days to start brainstorming.

[shaunandrews]

Draft Design for 5.8 About Page

[shaunandrews]

I took a try at a more approachable, one-column design for the 5.8 About page. I read through this ticket, the Google Doc, and some of the chatter on Slack and wrote some (hopefully) easy to read copy.

The first few highlights each get a graphic; I imagine some of them would/could be a video or GIF.

After the highlights are some additional features, but without any accompanying media.

I then included both the Freedoms and Privacy sections directly in the page, rather than as separate tabs, with the link to view contributors at the top — after all, nothing else on the page would exist without them.

Here's the Figma I've been working in: ​https://www.figma.com/file/o70tEVLXAg5sgKXx7ATBE5/About-5.8?node-id=16%3A0

I'm happy to continue iterating, or to have someone else pick it up and run with it. I think the overall styling and typography could use some more time and care. It could be nice to incorporate some more "jazz" into the top bar and elsewhere.

[webcommsat]

The design looks awesome @shaunandrews and design team. @marybaum and others in the marketing team have been reading through the documentation spreadsheet and links (thanks @milana_cap). We have the outline from @chanthaboune above and when access to the document comes through, we can collaboratively expand on this.

Word count within design
Is there a word count available for each section of the design? This really helps everyone focus on the key messages and the space we actually have, especially given the time we have to commit this page.

This is a draft schedule for the About page which Mary and I have put together for your thoughts Josepha
16 June 2021: Collaboration on the About page to coincide with the Marketing Team meeting starting at 14:00 UTC

• 14:00 UTC - 15:00 UTC: Marketing Team slack: collaboration on the About page
• 15:00 UTC - 15:30 UTC: A shortened normal Marketing Team meeting will take place
• 15:30 UTC - 16:30 UTC: Collaboration including drop-in for release leads (release leads please feel free to work on this asynchronously and continue straight from the earlier session)
• 19:00 UTC - 20:00 UTC: Additional collaboration including drop-in for release leads (hoped to be in the core channel if doesn't clash with new contributors session)

18 June 2021: Can release leads please share what is the most important features and any key descriptors (these may need to be edited for the audience and can be rechecked at the final stages). We will share this in the slack too.

21 - 23 June 2021: Consolidating the messages - collaboration invited via the marketing channel. Times and slots to be shared.

23 June 2021: Collaboration stage 2 on the About page to coincide with the Marketing Team meeting starting at 14:00 UTC. This will focus on the final editing and any release leads final comments before going back to Josepha.

• 14:00 UTC - 15:00 UTC: Core Team slack: collaboration on the About page (if core free, alternatively in Marketing)
• 15:00 UTC - 15:30 UTC: A shortened normal Marketing Team meeting will take place
• 19:00 UTC - 20:00 UTC: Additional collaboration including drop-in for release leads (hoped to be in the core channel, alternatively, in the marketing channel and cross-referenced)

23/24 June 2021: copy with Josepha and any items for re-checking to be done with release leads

25 June 2021: final copy reminder to be shared ahead of devchat and in release leads slack

ADD (design deadline) - @shaunandrews @melchoyce @ryelle and #design team: when does design need to have the final text with no further changes bar for spacing in the design?

ADD date for commits by pull request on GitHub version: Kelly has previously done this

29 June 2021: RC1: page needs to be committed by this date. Strings committed (so no more changes to the copy as affects translation)

30 June 2021: start Release Post (started in draft once About page fact-checking done)

6 July 2021: RC2 - update the About Page images

13 July 2021: RC3 - finalize Release post

20 July 2021: launch

[chanthaboune]

I would prefer a shorter timeframe for this if possible. Since we already have the feature list, can we still accomplish this writing if we did:

• 16 June: big collab
• 17-18 June: fact checking
• 21 June: review
• 22 June: add to beta 3

[sarmstead]

Replying to shaunandrews:

Nice work @shaunandrews! @melchoyce, please let me know how you'd like to proceed from here (if you still need assistance, etc.).

I took a try at a more approachable, one-column design for the 5.8 About page. I read through this ticket, the Google Doc, and some of the chatter on Slack and wrote some (hopefully) easy to read copy.

The first few highlights each get a graphic; I imagine some of them would/could be a video or GIF.

After the highlights are some additional features, but without any accompanying media.

I then included both the Freedoms and Privacy sections directly in the page, rather than as separate tabs, with the link to view contributors at the top — after all, nothing else on the page would exist without them.

Here's the Figma I've been working in: ​https://www.figma.com/file/o70tEVLXAg5sgKXx7ATBE5/About-5.8?node-id=16%3A0

I'm happy to continue iterating, or to have someone else pick it up and run with it. I think the overall styling and typography could use some more time and care. It could be nice to incorporate some more "jazz" into the top bar and elsewhere.

[webcommsat]

We will be collaborating on the About Page copy in the Marketing channel on the Make WordPress Slack from 15:00 UTC today (16 June 2021). We have a tight turnaround time. More information at ​https://make.wordpress.org/marketing/2021/06/15/agenda-global-marketing-meeting-16-june-2021/

[SergeyBiryukov]

#53423 was marked as a duplicate.

[ryokuhi]

We had a look at the visual design today during the weekly Accessibiltiy Team's bug-scrub and we didn't find any major issues in the mockup.
The only (minor) issue that I might have spotted is that almost all images show parts of the block editor, but it's not very clear that these are part of the Gutenberg interface and not of the About Page.
@sabernhardt and I suggest that adding a border might make it easier to understand that they are images, but feel free to find other options if they are more in line with the rest of the design.

[ryelle]

I then included both the Freedoms and Privacy sections directly in the page, rather than as separate tabs, with the link to view contributors at the top — after all, nothing else on the page would exist without them.

Great idea to highlight the contributors like this 💯

I'm not sure about removing the Freedoms and Privacy tabs. I think doing that would need a bit more of a discussion since it would be a permanent change to remove those files (making sure there are no backwards compatibility issues, and that we wouldn't ever want those separate pages back, etc).

[javiarce]

Design iteration for the 5.8 About Page

[javiarce]

Design iteration for the 5.8 Credits Page

[javiarce]

I've been working on an iteration of the initial design by Shaun that you can see ​in this Figma file.

My idea is to use those big circles on the About page above to contain a nice screenshot of each feature. I also wanted to use as much space as possible and to have cleaner headers, but still having a big motive in the background: blocks for the main page, circles (that represent people) for the Contributors page.

And since we are starting to use that cool blue more and more across the new designs, I thought we could use it to give cohesion to these pages, including the portraits of the noteworthy contributors.

[javiarce]

If we need to keep those pages, I'll update my design and add some links to access that content.

Replying to ryelle:

I then included both the Freedoms and Privacy sections directly in the page, rather than as separate tabs, with the link to view contributors at the top — after all, nothing else on the page would exist without them.

Great idea to highlight the contributors like this 💯

I'm not sure about removing the Freedoms and Privacy tabs. I think doing that would need a bit more of a discussion since it would be a permanent change to remove those files (making sure there are no backwards compatibility issues, and that we wouldn't ever want those separate pages back, etc).

[ryelle]

Yeah, if you could bring those pages back as separate items, that would be great.

Maybe removing/combining them could be part of the "What do we do about the About Page" discussion in #51809?

[javiarce]

Done, I've left the design for the new pages in the Figma file.

Yeah, if you could bring those pages back as separate items, that would be great.

+1

Maybe removing/combining them could be part of the "What do we do about the About Page" discussion in #51809?

[javiarce]

Four Freedoms page

[javiarce]

Privacy page

[javiarce]

@melchoyce suggested me incorporating a more jazz-related style into the designs (like we are already doing with the upcoming News page, for instance). It makes a lot of sense to me, so I'm going to work in a different direction.

[ryelle]

@javiarce I don't know if you've seen the layout framework we have for this page - since we have a tight timeline around getting this built, it would be best to stick with this existing framework if possible. This page goes over ​the design requirements, and I have ​this demo plugin that can be used to see different layout options (there are also screenshots). I'm happy to answer any questions about this here (or on slack) 🙂

[javiarce]

Thanks for the help, @ryelle! I've started working on a new layout that is more similar to the current one (and also started adding the content from the Google Doc). If I deviate from that I'll make it super easy to implement.

[webcommsat]

Update on About Page text: latest version being finalized ready for RC1 is in the Google doc.

Once final with all the features it will include, we will be working on a social media pack. More details from this week’s Marketing Meeting ​https://wordpress.slack.com/archives/C0GKJ7TFA/p1624457983172200
If you have time to help work on this during the next two weeks, let us know on the ticket or in the Marketing channel. Deadline: to be ready for the release on 20 July 2021. Thanks

[JeffPaul]

Updating owner from @marybaum to @ryelle to note for who's picking up the incoming design update and turning into code in time for commit by RC1.

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

[ryelle]

Screenshot of PR 1443

[ryelle]

In ​PR 1443, I've updated all the strings to the new copy, using the basic layout from the figma file. I started some of the styling, removing old SVGs and added some new ones, but mostly the priority was to get the strings in. I would appreciate someone else reading it over to make sure I copy-pasted correctly :)

@javiarce Is the design in Figma final? Who will be getting the images for the placeholders? Any alt text we need to add for images will be additional strings for translation.

I don't think we'll be able to do the alphabetized contributors - it's a neat idea, but I'm not sure how we would present it in non-English sites.

[javiarce]

@ryelle: ok, let's use a regular list for the contributors :) I've updated the Figma file.

Regarding the design state, I asked for feedback, and I've just finished applying the suggestions, so I'd say that it's in a good place right now (obviously, I'm happy to get more feedback and suggestions).

I'd like to ask for help to get the images to replace the placeholders (but if no one volunteers I can do it.)

[prbot]

​ryelle commented on ​PR #1443:

About:

Credits:

[prbot]

​josephahaden commented on ​PR #1443:

I just added two clarifications from the Gutenberg devs:

In Display Posts with New Blocks and Patterns section, the first sentence should be replaced with:
“The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code.”

In Suggested Patterns for Blocks section, the second sentence should be replaced with:
“Right now, you can give it a try in the Query Block and Social Icon Block.”

[audrasjb]

Thanks for the PR @ryelle et al it looks really great to me!

I can't see any issue on the accessibility side of things.

One small thought, FWIW: the noteworthy gravatars look really big to me, given we usually have around 40 to 50 people in that list. However that can always be refined later, if needed :)

[ryelle]

In 51264:

Help/About: WordPress 5.8 About Page.

This is the start of the WordPress 5.8 about page, introducing new content and a first pass of the new style.

Props chanthaboune, cbringmann, webcommsat, marybaum, melchoyce, shaunandrews, desrosj, ryelle, oglekler, yvettesonneveld, nalininonstopnewsuk, meher, femkreations, alanjacobmathew, courane01, annezazu, matveb, milana_cap, javiarce, ryokuhi, audrasjb.
See #52775.

[prbot]

​ryelle commented on ​PR #1443:

Committed in r51264

[webcommsat]

In the contributor list, can we try and list as many people’s names as possible rather than the display text being their profile names, where known? I can arrange help on this. Thanks

[webcommsat]

Arrangements for collaborating on social media amplification pack
Once the About Page text is committed, we can start working on social media posts. This collaboration will start on 30 June 2021 and be based on the info in the About Page.
More info ​https://make.wordpress.org/marketing/2021/06/30/help-produce-social-media-materials-for-5-8-release/

If you are a technical writer or developer with experience in social media, involved in the release and have some thoughts on particular social media messaging, or involved in social media drafting in your work, do come and take part. If you have been involved in the social media collaborations I have run through last year or the training sessions but are not familiar with the release, please do come along too as this will be similar. There are also opportunities for those who would like to shadow.

[vladytimy]

There's a small translators note typo on line 216. Last one should say %3$s instead of %1$s
It looks great so far, by the way! :)

Later edit: Also, IMHO the <code>supports</code> should stay untranslated. If that is correct, then maybe a note to translators to NOT translate that part should be added, as there are already a few locales that have that translated that bit and it might be a bit confusing to a dev reading that.

[alanjacobmathew]

There is a link missing in the Theme.json section, last line. According to the content the developer note is supposed to be linked.

[javiarce]

About page with images

[javiarce]

Here's a first version of the design with images instead of placeholders. Please, let me know what you think.

[kellychoffman]

Looks great @javiarce!

One thing re: promoting Template Editor here. I think we should remove the from the featured section as it won't be available to the majority of users. It is only available to themes that have opted into this feature, which none of the default themes have. (Ref: #53564). It's going to be very confusing to users if they see this featured so prominently, but then are unable to use it.

[kjellr]

I think we should remove the from the featured section as it won't be available to the majority of users. It is only available to themes that have opted into this feature, which none of the default themes have. (Ref: https://core.trac.wordpress.org/ticket/53564). It's going to be very confusing to users if they see this featured so prominently, but then are unable to use it.

Yeah, this will definitely confuse folks. I agree with de-emphasizing it unless support happens to be added into Twenty Twenty-One last minute.

[Presskopp]

There's a false capitalization in wp-admin/freedoms.php:50

WordPress is Free and open source software,...

Also as it's a repetition of wp-admin/freedoms.php:34

the second part of the string could possibly be splitted (WordPress comes with some...)

[ryelle]

In the contributor list, can we try and list as many people’s names as possible rather than the display text being their profile names, where known?

@webcommsat They should already be using the display name from the profile, is there someone showing up incorrectly?

One thing re: promoting Template Editor here. I think we should remove the from the featured section as it won't be available to the majority of users.

Is that the section, "Edit the Templates Around Posts"? Should it be removed entirely?

I've got a branch in progress that finishes up the design and makes some of the other changes mentioned here (the translator note fix, adding the link, etc). Adding the new images. There are some minor string changes, so I'll try to get the PR published today so we can get that in ASAP.

[chanthaboune]

Replying to ryelle:

In the contributor list, can we try and list as many people’s names as possible rather than the display text being their profile names, where known?

@webcommsat They should already be using the display name from the profile, is there someone showing up incorrectly?

I chatted with Abha about this yesterday and confirmed that any changes need to be updated in each person's wordpress.org profile. No additional work on this one!

One thing re: promoting Template Editor here. I think we should remove the from the featured section as it won't be available to the majority of users.

Is that the section, "Edit the Templates Around Posts"? Should it be removed entirely?

I've got a branch in progress that finishes up the design and makes some of the other changes mentioned here (the translator note fix, adding the link, etc). Adding the new images. There are some minor string changes, so I'll try to get the PR published today so we can get that in ASAP.

We don't want to remove it entirely. There seems to be some disconnect between dev and design preferences, which I'm trying to chase down right now. Putting it in the third position and potentially changing some wording may be where it lands. I'm trying to be as quick as possible with getting it all settled.

[kellychoffman]

We don't want to remove it entirely. There seems to be some disconnect between dev and design preferences, which I'm trying to chase down right now. Putting it in the third position and potentially changing some wording may be where it lands.

I think we should keep the wording (since it includes compatible themes reference) and move it to third position. As discussed in Slack: ​https://wordpress.slack.com/archives/C01VACX5E2W/p1625175592172600?thread_ts=1625084674.157700&cid=C01VACX5E2W

[ryelle]

Which content are we talking about here? The section "Edit the Templates Around Posts" is already third in its group. Do you want it in another group (like under "For Developers to Explore"), or is the problem section a different paragraph?

[kellychoffman]

The section "Edit the Templates Around Posts" is already third in its group.

Sorry, was seeing an old version. :facepalm: This is all good!

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

[ryelle]

​The latest PR finishes up the styling & adds the remaining images to the freedoms, privacy, and about page. There are a few copy tweaks - removing a duplicate sentence from Freedoms and another from Credits, adding the link wrapper to text that sounds like a link in "Theme.json", and removing the code tags from "supports" in "Adding Additional Block Supports".

It seems like the copy in the mockup is older (probably what you were looking at, @kellychoffman), so the images aren't exactly right. In most cases it worked out, but two:

1. There's no image for "Suggested Patterns for Blocks"
2. The image for "Edit the Templates Around Posts" is pretty generic, is there anything else we could show?

@javiarce, can you check this out? Here's ​a screenshot of the current page.

[ryokuhi]

We had a quick look to the Pull request today during the weekly Accessibiltiy Team's bug-scrub and we didn't find any major issue.
Let us know if any last minute accessibility concern pops up, we're ready to jump in.

[alanjacobmathew]

Hey @ryelle with respect to the screenshot you published above, there is a small typo. In the very beginning, it written WP 5.9 instead of 5.8

[javiarce]

About page with updated copy and new image for "Suggested Patterns for Blocks"

[javiarce]

I've updated the design of the About page with the current copy and added a new image for the "Suggested Patterns for Blocks" (see in the post above). Please, let me know if the image works for you.

I'll try to think of a new image for "Edit the Templates Around Posts", but let me know if you have a suggestion.

Replying to ryelle:

​The latest PR finishes up the styling & adds the remaining images to the freedoms, privacy, and about page. There are a few copy tweaks - removing a duplicate sentence from Freedoms and another from Credits, adding the link wrapper to text that sounds like a link in "Theme.json", and removing the code tags from "supports" in "Adding Additional Block Supports".

It seems like the copy in the mockup is older (probably what you were looking at, @kellychoffman), so the images aren't exactly right. In most cases it worked out, but two:

1. There's no image for "Suggested Patterns for Blocks"
2. The image for "Edit the Templates Around Posts" is pretty generic, is there anything else we could show?

@javiarce, can you check this out? Here's ​a screenshot of the current page.

[ryelle]

The new image looks great, I've updated the PR to add it.

In the very beginning, it written WP 5.9 instead of 5.8

@alanjacobmathew The version value is dynamic - the code here has already been updated to 5.9, so it shows "WordPress 5.9". When WordPress 5.8 is released, it will show the correct "WordPress 5.8" header.

[desrosj]

@ryelle the latest patch looks great to me! A few thoughts came to mind as I reviewed:

• "Adding Additional Block Supports" feels incorrect to me. Maybe "Additional Blocks Now Supported" or "Support Added for Additional Blocks"?
• I'm curious if we've adjusted contributor avatars in the past. I personally think they look sleek, but wondering if we should show them in their original, intended format. Or even maybe just on hover?

[ryelle]

"Adding Additional Block Supports" feels incorrect to me. Maybe "Additional Blocks Now Supported" or "Support Added for Additional Blocks"?

This is about ​the `supports` property when registering blocks, "block supports" is the term for this API. So I think this is okay for a developer section, but if not, it could be "Adding Additional Block Features"?

I'm curious if we've adjusted contributor avatars in the past.

Just making them circles. We've never colorized them that I can remember. Removing the blue overlay on hover/focus is possible. I don't feel strongly either way, but can make the change pretty quickly if needed.

[ryelle]

In 51356:

Help/About: Update the About section for 5.8.

Add the images for About, Freedoms, and Privacy. Update the styles on all About section pages to match the About page style. Fix string issues, missing link wrapper, duplicate copy.

Props chanthaboune, kellychoffman, javiarce, ryokuhi, alanjacobmathew, desrosj.
See #52775.

[SergeyBiryukov]

printf(
	/* translators: %s: Theme.json dev note link. */
	__( 'Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature. For more about what is currently available and how it works, <a href="%s">check out this dev note</a>.' ),
	'#'
);

I think the placeholder can now be replaced with the dev note URL:
​https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/

[audrasjb]

And the placeholder for the Widgets dev note can also be replaced with the corresponding note: ​https://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/

[audrasjb]

Same goes for the Field Guide link placeholder: ​https://make.wordpress.org/core/2021/07/03/wordpress-5-8-field-guide/

[audrasjb]

Patch for the three dev notes links mentioned above

[ryelle]

Thanks for grabbing those links & making a patch. It looks like the only link we're waiting on now is the "Query Loop Block dev note".

[webcommsat]

Replying to ryelle:

‘Adding Additional Block Features‘ works really well.

[ryelle]

In 51359:

Help/About: Update placeholder links on About page.

Props SergeyBiryukov, audrasjb.
See #52775.

[desrosj]

[51356] and [51359] look good to backport.

This is about the supports property when registering blocks, "block supports" is the term for this API. So I think this is okay for a developer section, but if not, it could be "Adding Additional Block Features"?

Ah, got it. That makes sense then. I don't feel strongly it should be changed, but I could see some folks tripping up on that heading if they don't know about that API name.

[desrosj]

In 51360:

Help/About: Update the About section for 5.8.

Add the images for About, Freedoms, and Privacy. Update the styles on all About section pages to match the About page style. Fix string issues, missing link wrapper, duplicate copy.

Also updates placeholder links on the page.

Props chanthaboune, kellychoffman, javiarce, ryokuhi, alanjacobmathew, desrosj, SergeyBiryukov, audrasjb.
Merges [51356] and [51359] to the 5.8 branch.
See #52775.

[ryelle]

@nao left a comment on the PR, on credits.php

I hate to point out a super small typo, but the period at the end of line 55 needs to be included in the translatable string.

This line:

<a href="https://make.wordpress.org/"><?php _e( 'Get involved in WordPress' ); ?></a>.

[audrasjb]

Credits: Move periods inside translatable strings

[audrasjb]

Yes, @nao is right, this is at the very least an issue for RTL languages

[karmatosed]

This might be a little late as a comment but are the headings in the latest screenshot that are blue, links? For example, 'Three Essential Powerhouses'. If not and that colour blue, it reads as a link. This might be updated, but as this came up in the design meeting, I am going by the screenshot on this ticket.

[desrosj]

I noticed today while testing that block patterns do not always respect the theme's color choices when being previewed or inserted. This is something present in Twenty Twenty-One and that I'm told the Editor team is aware of.

But, I did notice that the screenshot for the "Suggested Patterns for Blocks" section on the About page shows this bug.

Would it be possible to create a new screenshot for that section with the default background color in Twenty Twenty-One so that the block pattern preview matches the editor's background color?

[javiarce]

@karmatosed: you are totally right, let's use black for those headings. I've updated the Figma file.

This might be a little late as a comment but are the headings in the latest screenshot that are blue, links? For example, 'Three Essential Powerhouses'. If not and that colour blue, it reads as a link. This might be updated, but as this came up in the design meeting, I am going by the screenshot on this ticket.

---

@desrosj good catch, but if we change the background color to the Twenty Twenty-One shade of green, the thumbnails will look a little different from each other, and that won't be nice.

Instead, I propose using the same shade of blue (which is sort of the theme in this About page) in all the thumbnails that show a theme background.

I've updated the three thumbnails (Edit the Templates Around Posts, Overview of the Page Structure, and Suggested Patterns for Blocks) in the Figma file so their background colors match. But please let me know if that's not OK, and you all prefer to use the green color for that particular background.

[desrosj]

@javiarce I'm having a really hard time navigating in Figma. I think that I've found the correct place to look, and the updated screenshots look good to me.

The social icons suggested pattern interface now has a matching background color: ​https://cloudup.com/cOYEoJhu8Mh.

[javiarce]

Sorry about that. I've organized the file a little bit so it's clearer what the final designs are.

Replying to desrosj:

@javiarce I'm having a really hard time navigating in Figma. I think that I've found the correct place to look, and the updated screenshots look good to me.

[ryelle]

52775.3.diff​ includes the copy change from 52775.2.diff​, updates the header color, and replaces the two images. I don't see the change in the "Edit the Templates Around Posts", is the image currently there (​this one) correct?

An issue also came up about the Patterns image ("Display Posts with New Blocks and Patterns") - the navigation on WordPress.org won't change, so the screenshot isn't accurate. I think a screenshot using the ​Query Loop placeholder might be better, @javiarce would you be able to make a new image here?

[javiarce]

Image of the Query Loop placeholder (I)

[javiarce]

Image of the Query Loop placeholder (II)

[javiarce]

I'm not sure if I changed that image or just modified the rest to have the same background as that one. In any case, the one you linked in your message is correct.

52775.3.diff​ includes the copy change from 52775.2.diff​, updates the header color, and replaces the two images. I don't see the change in the "Edit the Templates Around Posts", is the image currently there (this one) correct?

---

I've updated the Figma file with a couple of proposals for that image. From a purely aesthetic point of view I prefer the last one, but the first one conveys the idea of the placeholder much better.

Replying to ryelle:

An issue also came up about the Patterns image ("Display Posts with New Blocks and Patterns") - the navigation on WordPress.org won't change, so the screenshot isn't accurate. I think a screenshot using the ​Query Loop placeholder might be better, @javiarce would you be able to make a new image here?

[ryelle]

Thanks @javiarce! I think the grid-view illustrates the text better, since it talks about multiple patterns you can choose from. I'll get these added to the CDN today.

@milana_cap Will there be a dev note for the Query Loop block? It's the only link we're missing, but I don't see anything posted on make/core. If it's not planned, we'll need to update that string.

[milana_cap]

Replying to ryelle:

@milana_cap Will there be a dev note for the Query Loop block? It's the only link we're missing, but I don't see anything posted on make/core. If it's not planned, we'll need to update that string.

Block editor team made a list of all changes deserving dev note and they wrote them all. So if there's none published at this point then it wasn't planned and won't be published. Here is the list: ​https://github.com/WordPress/gutenberg/issues/32365

[ryelle]

The images have been uploaded to the CDN, so 52775.4.diff​ has the new image URLs, heading color changes, and two string fixes - I removed the entire sentence For our theme authors, learn more about experimenting with this awesome tool in the <a href="%s">Query Loop Block dev note</a>. since we don't have a dev note.

[ryelle]

In 51413:

Help/About: Update the About section for 5.8.

Update the image links to use the CDN. Use regular text color for headings. Fix two string issues. Remove unnecessary wp-components script & style.

Props nao, audrasjb, karmatosed, desrosj, javiarce, milana_cap.
See #52775.

[ryelle]

Committed 52775.4.diff​ to trunk, tagging for backport to 5.8 branch.

[javiarce]

Some suggested fixes for the About page

[javiarce]

@ryelle: I had a look at the About page and saw five things we could improve so that the page looks closer to the original design.

• Remove extra paddings: some elements like the descriptions of each feature have paddings around them. If we could remove the paddings closest to the section border, the page would look much better. I've indicated other paddings and margins we could remove in the image.

• Navigation hover state: I propose simplifying the hover state by removing the blue background and the border and setting a darker blue for the hovered item. I also think we should switch the colors of the links: black for the active element and blue for the rest.

• Blurred image: the image in the theme.json section looks blurred.

• Hole in the Credits section: I see this is because there are two lists: one with the Core Developers and another one with Contributing Developers. Since we are not labeling those groups, I think we should merge the lists, so it doesn't look like we missed someone.

• Spacing: if we could increase the space between the features and sections, the page would look much nicer.

Thanks!

The image with the fixes is also in the "Fixes page" in the ​/ Figma file.

[ryelle]

Hi @javiarce, thanks for the feedback. For future reference, we try to have the About page complete by RC3, which is later today. The design has been implemented since RC1/RC2, and with feedback like this, earlier is better.

As it is, I was able to update the spacing some, you can see the changes ​in this screenshot. Let me know if that's acceptable and I'll get that patch up.

Hole in the Credits section

These are two separate lists, I don’t think I can easily merge them without changing the PHP, which I don’t want to do this late in the cycle.

Spacing & Remove extra paddings

I tweaked the spacing a bit to align things better, but at this point I don’t want to change much more than this.

Navigation hover state

We can’t rely on color alone for the hover or active state, for accessibility.

Blurred image

I was unable to export this one at 2x size. The image has already been committed to the CDN, but if you can get me an image ASAP, I could update it.

[javiarce]

Retina image for the theme.json section

[javiarce]

Replying to ryelle:

Hi @javiarce, thanks for the feedback. For future reference, we try to have the About page complete by RC3, which is later today. The design has been implemented since RC1/RC2, and with feedback like this, earlier is better.

Oh, sorry, I didn't know that. I'll make sure next time I provide feedback faster.

As it is, I was able to update the spacing some, you can see the changes ​in this screenshot. Let me know if that's acceptable and I'll get that patch up.

That's much better, thanks!

Hole in the Credits section

These are two separate lists, I don’t think I can easily merge them without changing the PHP, which I don’t want to do this late in the cycle.

Ok.

Spacing & Remove extra paddings

I tweaked the spacing a bit to align things better, but at this point I don’t want to change much more than this.

Ok.

Navigation hover state

We can’t rely on color alone for the hover or active state, for accessibility.

Agree, but in this case the header also informs about the section. If there's still time, could we at least remove the background of the hover elements and use a bottom line like in the active sections?

Blurred image

I was unable to export this one at 2x size. The image has already been committed to the CDN, but if you can get me an image ASAP, I could update it.

Ok, I have added the image in this thread, since Figma doesn't support larger images.

Thanks for the changes, @ryelle!

[ryelle]

Added the new theme.json screenshot, and spacing updates in 52775.5.diff​.

Agree, but in this case the header also informs about the section. If there's still time, could we at least remove the background of the hover elements and use a bottom line like in the active sections?

Without the time to get proper feedback from the accessibility team, I'd rather stick with something we know works - this nav pattern has been iterated on based on feedback from the a11y team in the past. There have been a bunch of interesting concepts for the About section from the design team this cycle - if you were to start a ticket when 5.9 kicks off, I bet we could get some of these ideas implemented :)

[ryelle]

In 51418:

Help/About: Update the About page for 5.8.

Use a larger image for theme.json on retina screens, and update the spacing of sections on the page.

Props javiarce.
See #52775.

[ryelle]

Okay, now both [51413] and [51418] need to be backported, but that should be the About page done 🎉 (🤞🏻😁)

[desrosj]

[51413] and [51418] look good for backporting! Thanks everyone for the hard work this release!

[ryelle]

In 51420:

Help/About: Update the About section for 5.8.

Update the image links to use the CDN. Use regular text color for headings. Fix two string issues. Remove unnecessary wp-components script & style.
Use a larger image for theme.json on retina screens, and update the spacing of sections on the page.

Props nao, audrasjb, karmatosed, desrosj, javiarce, milana_cap.
Merges [51413] and [51418] to the 5.8 branch.
See #52775.

[ryelle]

The About page is now all wrapped up, thanks to everyone who worked on it!