About Page for 6.4 Release

[rmartinezduque]

This ticket will serve as a hub for the discussion, planning, design, and other related work for creating the WordPress 6.4 release About page.

Anyone involved in the release is invited to follow this ticket as part of their release-related duties and offer their input.

[audrasjb]

Welcome to WordPress Core Trac and thanks for opening this ticket,

I added a few workflow/type/component/milestone informations in this ticket, and fixed a small mistake in the description :)

[rmartinezduque]

Replying to audrasjb:

Welcome to WordPress Core Trac and thanks for opening this ticket,

I added a few workflow/type/component/milestone informations in this ticket, and fixed a small mistake in the description :)

Thank you!

[rmartinezduque]

For future reference, 6.4 MarComms drafts/announcements will be stored in this folder: ​https://drive.google.com/drive/folders/1sXPZEv6zqAxU5OYrlUOLVqc0KhJhClZF.

Having read some comments on the About page Trac ticket of the latest release, I understand that it is recommended that the design and development of the page be completed a week before RC1 and that, ideally, the content should be ready around Beta 2 (October 3). Can you advise on this, @ryelle? Would this approach work?

My only concern is that if, after Beta 2, there are any changes regarding the features that go into the release, we may also need to make changes to the content. I am fairly new to the About page process and not 100% sure how this is usually approached, so any additional information that would be good to know is welcome. :)

[ryelle]

Ideally, a first pass of mostly-final content would be committed before beta 3 (Oct 10), so yes, content ready by beta 2 (Oct 3) to allow design a few days to work out the layout (as a reminder, ​the layout framework & accents are detailed here).

Aiming for beta 2 allows for a little flexibility, and getting the content into a beta allows for a bit more feedback, since some people don't check out the content until that first commit.

The hard deadline for final About page content is RC1 (Oct 17). After this point, there should be no content changes unless it's to fix factual errors. Changes like adding in images or polishing design are fine as long as they don't change the strings (content).

My only concern is that if, after Beta 2, there are any changes regarding the features that go into the release, we may also need to make changes to the content.

Between beta 2 and RC, it's totally fine to make changes, but it will create a little more work for design/dev. It's understandable if features change, though.

---

I also want to mention, since I usually build this page, that I won't be available after Oct 4th (I'll be on a 3-month sabbatical). I added my development process to ​the Preparing the About Page handbook after the last release, and I'm happy to help get things prepared/answer questions before I leave.

[meher]

@ryelle when you go on sabbatical, who do we connect with for the About page?

[SeReedMedia]

Replying to meher:

@ryelle when you go on sabbatical, who do we connect with for the About page?

just repinging this because it looks like that tag didn't go through.

[ryelle]

@SeReedMedia The highlights disappear if you start editing a ticket :)

In any case, I don't have a dev in mind, so I would just suggest actively posting updates to the ticket here when design & content writing starts, and asking in dev chats. I'm happy to offer any feedback until I leave.

[rmartinezduque]

Work on the About page content is happening in this doc: ​https://docs.google.com/document/d/1z38Kl19s4QIEZSWF0iYLTKKIle3G6Ae_imCnATEo72s/edit.
Please note that this is still a work in progress and not ready yet for wider feedback. I'm sharing it here in case it helps design folks to have a starting point. We'll share regular updates on its progress and aim to have it ready around Beta 2 next week.

[rmartinezduque]

Further edits have been made to the About page content, which now feels more complete. We would welcome feedback by October 4 (see the doc for details on the deadline) before handing the doc to design folks: ​https://docs.google.com/document/d/1z38Kl19s4QIEZSWF0iYLTKKIle3G6Ae_imCnATEo72s/edit. Please use the Google Docs setting “Suggesting” to suggest any edits so we can track them easily. Thanks

[estelaris]

About page 6.4 - first draft

[estelaris]

The first draft is ready for review. Comments here or in Figma ​https://www.figma.com/file/jTjcQf8NF551cxunoAIOeC/About-Page-6.4?type=design&node-id=8%3A3847&mode=design&t=SmjQdvgbU4DSY67O-1

[webcommsat]

Adding this ticket to the Dev Chat agenda on October 4, 2023 with a request for feedback on the first draft, either directly on the ticket or in Figma. Thank you @estelaris and everyone who has contributed to this version.

Replying to estelaris:

The first draft is ready for review. Comments here or in Figma ​https://www.figma.com/file/jTjcQf8NF551cxunoAIOeC/About-Page-6.4?type=design&node-id=8%3A3847&mode=design&t=SmjQdvgbU4DSY67O-1

[rmartinezduque]

I made more tweaks to the content to address feedback left in the doc. Also, to help make some sections more consistent in length so it's easier to adjust them to the layout. I have reordered some features with design in mind, moving those more technical to the end.

I'm a bit concerned that condensing some features/descriptions more will make readability worse and won't allow the inclusion of enough context around benefits. But let me know if you need more adjustments to the copy design-wise. Happy to help in any way I can. cc @estelaris

[estelaris]

The content and the About page is in its final round of feedback. For the content feedback, please refer to ​https://docs.google.com/document/d/1z38Kl19s4QIEZSWF0iYLTKKIle3G6Ae_imCnATEo72s/edit and leave a comment.

For the graphics, you can leave a comment into the Figma file ​https://www.figma.com/file/jTjcQf8NF551cxunoAIOeC/About-Page-6.4?type=design&node-id=641%3A3601&mode=design&t=NJpxPVhu94mTqTUd-1

[estelaris]

About page 6.4 - V2

[rmartinezduque]

The content and the About page is in its final round of feedback. For the content feedback, please refer to ​https://docs.google.com/document/d/1z38Kl19s4QIEZSWF0iYLTKKIle3G6Ae_imCnATEo72s/edit and leave a comment.

To streamline and facilitate the design work at this point, please note that the current desired feedback on the copy focuses primarily on grammar/spelling errors. Any additional pair of eyes to ensure there are no typos and everything is correct/accurate is appreciated. Thank you!

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

This PR will need a few iterations. It's updating the About page for 6.4.

[luminuu]

I've added a first pull request on Github which still needs to be iterated on. Feel free to provide any feedback.

[rmartinezduque]

A few updates regarding the About page copy, which needs to be updated in the layout:

• Made very minor edits as per a few suggestions left in the doc. These should not impact the layout.
• Image previews in List View and import and export pattern sections have also received edits to shorten for design purposes. Let me know if these work better with height consistency.
• Updated the Accessibility section to include block editor enhancements. These edits have been reviewed already and they are good to go.

cc @estelaris @luminuu

[luminuu]

WIP for About page

[luminuu]

I've added a screenshot of the current state of the PR for the about page. Who is going to upload the images for the features to s.w.org? In the code they're all directly linked from there like ​https://s.w.org/images/core/6.3/1-site-editor.webp

[jorbin]

@luminuu For now, you can either include the images in the PR, or just use blank SVGs like the before in https://core.trac.wordpress.org/changeset/56339/trunk/src/wp-admin/about.php

I'll coordinate with meta with getting the final images uploaded to s.w.org

[luminuu]

@jorbin Thanks for that tip! I updated the PR with the placeholders on the main about page.

[jorbin]

Code wise, this is in good shape. There are some minor PHPCS issues that I can clean up when I commit. Thank you @luminuu!

@rmartinezduque @estelaris - Are you happy with how this is looking from your perspective?

[luminuu]

@jorbin I think it makes sense to add some of the images that are not loaded from s.w.org, primarly on the subpages and the header images before merging this PR in. I can do that tomorrow. @richtabor also shared some feedback on Slack which will need some smaller changes, so if we can keep this open for another day, that would be perfect.

[rmartinezduque]

@rmartinezduque @estelaris - Are you happy with how this is looking from your perspective?

Thanks for the ping, @jorbin! Where can I see the latest version of the About page to help review it?

[luminuu]

@jorbin Is there an actual reason why the images on the main page get loaded from s.w.org? I could finish this up entirely when I add all images to the images folder, as some of them are wider than usual and need some more adjustment to the markup and CSS.

[adamwood]

The images have all been uploaded to https://wordpress.org/images/core/6.4 as webp now, and should be accessible via s.w.org, eg. ​https://s.w.org/images/core/6.4/1-Twenty-Twenty-Four.webp

I'm really impressed with my ability to screw up the git history here. Going to do a new PR.

This was committed in https://core.trac.wordpress.org/changeset/56950

[jorbin]

Committed in [56950] but will leave this open until a release lead closes it.

[jorbin]

Replying to luminuu:

@jorbin Is there an actual reason why the images on the main page get loaded from s.w.org? I could finish this up entirely when I add all images to the images folder, as some of them are wider than usual and need some more adjustment to the markup and CSS.

Sorry, forgot to answer this. The reason we don't include the images in core is to keep the zip file smaller. Back when auto updates were first introduced, it was noticed that zip size was a contributing factor to failures so for something like images the decision was made to load them from the CDN.

[luminuu]

Thanks for the clarification!

[oglekler]

@sumitsingh in #59664 has reported the issue with color on mobile, and I can confirm it too, see the screenshot above.

[rmartinezduque]

Thank you for reporting this, @oglekler.

@jorbin, @adamwood, is this something you can help with? Thanks!

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

On mobile, the background image is currently removed which causes dark text on a dark background. This was added in the design for 6.3.

[jorbin]

This is something that needs a design decision on. Looking at the Figma doc, I don't see a mobile design as of now.

What I did in the PR was use the same background as is used on desktop. In previous versions, this was a solid color instead. If we want to do that instead, just let me know what color. I think this is the better bet so the text doesn't conflict with any of the colors of the header.

You can preview this by applying the patch from ​https://github.com/WordPress/wordpress-develop/pull/5534 to your local. I've also shared a screenshot above of the Get Involved page to demonstrate the conflicting that I think should be avoided.

I suggest replacing the current var(--background) with #EAE9E7, the light background color seen in the top right corner. That also could prevent problems if/when the image does not load.

The text overlap would be very common on screens below 600px, though it can overlap at others too. In right-to-left languages, the heading might _always_ appear in front of the numbers.

Additionally, the 6.4 part of the image gets cut off at certain screen sizes.

the edge of the 4 is cut off at 968px:

text overlaps at 900px:

text would overlap at 414px if the background image is restored:

RTL text overlaps at 1200px:

[nudge]

I suggest replacing the current var(--background) with #EAE9E7

I agree here. The graphic should not show on smaller screens, and updating the variable to that colour will fix this.

For the responsive graphics, here are two modifications I would make:

In .about__header change

min-height: 420px

to

height: clamp(12.5rem, -1.25rem + 36.67vw, 26.25rem)

In .about__header-title change

margin: 0 calc(var(--gap) + 3rem)

to

margin: 0 calc(var(--gap) + 2rem)

I'm wondering if the 6.4 is needed in the text. This would fix the rest of the overlapping text issue. Looking back at 6.0, it only had "WordPress" in the header along with the graphic "6.0".

As for the RTL issue, is it possible to insert the "6.4" graphic and asterisk in the background separately?

[afercia]

I just noticed that the white / orangish color pair for the current nav item and the nav item hover state has an insufficient contrast ratio of only 3.69:1. ​It must be at least 4.5:1.

--text-light: #fff;
--nav-current: var(--accent-1);
--accent-1: #D8613C;

See ​https://jdlsn.com/color/?type=hex&color=D8613C&color2=FFFFFF
See attached screenshot.

Edit:
Hat tip to @aristath: One of closest orange-ish colors to pass the contrast ratio requirement is #BD593A. See ​https://jdlsn.com/color/?type=hex&color=BD593A&color2=FFFFFF

[nudge]

A new colour was introduced in the Figma design for accessibility reasons. accent-1 should be changed to #C94C26
​https://jdlsn.com/color/?type=hex&color=C94C26&color2=FFFFFF

[jorbin]

@nudge Can you create a patch or PR with the changes you are suggesting?

As for the RTL issue, is it possible to insert the "6.4" graphic and asterisk in the background separately?

It is possible to have multiple background images, but assuming you are thinking of flipping the asterisk, I'm not aware of a way to flip a background image, so that would need to be inlined.

[huzaifaalmesbah]

@dhrumilk suggested something about credit page on #59726

Updated colour variables. Updated header graphics for responsive styles for about, contribute, credits, freedom and privacy pages. Fixes issues mentioned in Trac #59289 and #59664

[jorbin]

Noting conversation is happening on ​https://github.com/WordPress/wordpress-develop/pull/5572 that didn't sync over. This conversation includes a discussion related to the RTL design (and the implementation of the other design fixes)

Thanks for this, @aaronjorbin

1. Noted! I'll be sure to use a branch for future contributions.
2. Thanks for fixing. It was working for me locally for some reason, so that totally slipped by me.
3. Ideally, it would be a flipped image, but I am fine with how it looks, so let's keep it like this.

[jorbin]

In 57018:

Help/About: Improve Accessibility, RTL, Internationalization, and Responsiveness of about pages.

Tweaks the 6.4 about pages in a couple of ways:

• Decouples the background from the 6.4 logo so the logo can move for RTL.
• Updates a color to improve color contrast.
• Help prevent overlap of long text strings with 6.4 logo.
• Ensure background isn't dark when no background is used on mobile.

Props nudge, jorbin, afercia, sumitsingh, sabernhardt.
See #59289, #59664.

[jorbin]

Requesting a second committer review so I may backport [57018] to the 6.4 branch

Committed in https://core.trac.wordpress.org/changeset/57018

[joedolson]

Looks good for backport to 6.4.

[jorbin]

In 57025:

Help/About: Improve Accessibility, RTL, Internationalization, and Responsiveness of about pages.

Merges [57018] to 6.4 branch.

Tweaks the 6.4 about pages in a couple of ways:

• Decouples the background from the 6.4 logo so the logo can move for RTL.
• Updates a color to improve color contrast.
• Help prevent overlap of long text strings with 6.4 logo.
• Ensure background isn't dark when no background is used on mobile.

Props nudge, jorbin, afercia, sumitsingh, sabernhardt.
See #59289, #59664.
Backport reviewed by hellofromTonya and joedolson.

[jorbin]

Thanks to everyone who has worked on this. I'm closing this ticket as resolved. If there are any further about page issues, let's open a new ticket for them.

[afercia]

I'm not sure whether it's a known issue or it's something that gets automatically updated during the release process (I doubt it) but the link to the Field Guide post points to the 6.3 field guide. I guess this should be fixed?

See
​https://github.com/WordPress/wordpress-develop/blob/75008892aa4f7073f7499215e126306d951cbd9e/src/wp-admin/about.php#L246

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

Props to @afercia

[jorbin]

In 57054:

Help/About: Update link to field guide for 6.4.

Follow up to [56950].

Props afercia.
Fixes #59289.

[davidbaumwald]

Looks good to backport to the 6.4 branch.

[joedolson]

Looks good to me!

[jorbin]

In 57055:

Help/About: Update link to field guide for 6.4.

Follow up to [56950].

Merges [57054] to 6.4 branch.
Reviewed by davidbaumwald, joedolson.

Props afercia.
Fixes #59289.

[jorbin]

Once again, If there are any further about page issues, let's open a new ticket for them.

Committed in https://core.trac.wordpress.org/changeset/57055

Forgot to close this months ago, sorry