Make WordPress Core

Opened 10 months ago

Closed 9 months ago

Last modified 5 months ago

#59289 closed task (blessed) (fixed)

About Page for 6.4 Release

Reported by: rmartinezduque's profile rmartinezduque Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-patch dev-reviewed
Focuses: ui, accessibility, docs, ui-copy Cc:

Description (last modified by jorbin)

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.

Attachments (6)

What's New.jpg (2.1 MB) - added by estelaris 10 months ago.
About page 6.4 - first draft
What's New (1).jpg (1.5 MB) - added by estelaris 9 months ago.
About page 6.4 - V2
6.4 About page 2023-10-10.png (2.6 MB) - added by luminuu 9 months ago.
WIP for About page
Screenshot_20231018_202521_Chrome.jpg (232.9 KB) - added by oglekler 9 months ago.
Screenshot 2023-10-19 at 2.55.03 PM.png (51.2 KB) - added by jorbin 9 months ago.
about page color contrast.png (31.5 KB) - added by afercia 9 months ago.

Change History (74)

#1 @audrasjb
10 months ago

  • Component changed from General to Help/About
  • Description modified (diff)
  • Milestone changed from Awaiting Review to 6.4
  • Type changed from defect (bug) to task (blessed)

#2 follow-up: @audrasjb
10 months ago

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

#3 in reply to: ↑ 2 @rmartinezduque
10 months ago

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!

#4 @rmartinezduque
10 months ago

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

#5 @ryelle
10 months ago

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.

#6 follow-up: @meher
10 months ago

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

#7 in reply to: ↑ 6 @SeReedMedia
10 months ago

[removed because the tag is showing now]

Last edited 10 months ago by SeReedMedia (previous) (diff)

#8 @ryelle
10 months ago

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

#9 @rmartinezduque
10 months ago

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.

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


10 months ago

#11 @rmartinezduque
10 months ago

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

About page 6.4 - first draft

#13 in reply to: ↑ 12 @webcommsat
10 months ago

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

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


10 months ago

#15 @rmartinezduque
9 months ago

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

#16 @estelaris
9 months ago

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

About page 6.4 - V2

#17 @rmartinezduque
9 months ago

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!

This ticket was mentioned in PR #5424 on WordPress/wordpress-develop by @luminuu.


9 months ago
#18

  • Keywords has-patch added

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.

#19 @luminuu
9 months ago

  • Keywords has-patch removed

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

#20 @rmartinezduque
9 months ago

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

WIP for About page

#21 @luminuu
9 months ago

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

#22 @jorbin
9 months ago

@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

#23 @luminuu
9 months ago

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

#24 @jorbin
9 months ago

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?

#25 @luminuu
9 months ago

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

#26 @rmartinezduque
9 months ago

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

#27 follow-up: @luminuu
9 months ago

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

This ticket was mentioned in Slack in #meta by jorbin. View the logs.


9 months ago

#29 @adamwood
9 months ago

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

@jorbin commented on PR #5424:


9 months ago
#30

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

#32 @jorbin
9 months ago

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

#33 in reply to: ↑ 27 @jorbin
9 months ago

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.

#34 @luminuu
9 months ago

Thanks for the clarification!

#35 @oglekler
9 months ago

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

This ticket was mentioned in Slack in #meta by courtneyengle. View the logs.


9 months ago

#37 @rmartinezduque
9 months ago

Thank you for reporting this, @oglekler.

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

This ticket was mentioned in PR #5534 on WordPress/wordpress-develop by @jorbin.


9 months ago
#38

  • Keywords has-patch added

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.

#39 @jorbin
9 months ago

  • Description modified (diff)
  • Keywords needs-design-feedback added

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.

@sabernhardt commented on PR #5534:


9 months ago
#40

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:
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/17100257/696ff600-456c-4613-a43c-0f2522578eb2

text overlaps at 900px:
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/17100257/c8f8c2ec-5ca9-493d-8868-da37f07a628f

text would overlap at 414px if the background image is restored:
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/17100257/a09ea4a2-be17-4bf8-857a-4a9cb7bddfa5

RTL text overlaps at 1200px:
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/17100257/662b953a-5c6a-4434-896a-d687d193e1ab

#41 @nudge
9 months ago

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?

#42 @afercia
9 months ago

  • Keywords needs-patch added; has-patch removed

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

Last edited 9 months ago by afercia (previous) (diff)

#43 @nudge
9 months ago

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

#44 @jorbin
9 months ago

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

#45 @huzaifaalmesbah
9 months ago

@dhrumilk suggested something about credit page on #59726

This ticket was mentioned in PR #5572 on WordPress/wordpress-develop by nudgeD.


9 months ago
#46

  • Keywords has-patch added; needs-patch removed

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

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


9 months ago

#48 @jorbin
9 months ago

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)

nudgeD commented on PR #5572:


9 months ago
#49

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.

#50 @jorbin
9 months ago

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.

#51 @jorbin
9 months ago

  • Keywords dev-feedback added; needs-design-feedback removed

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

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


9 months ago

#54 @joedolson
9 months ago

  • Owner set to joedolson
  • Status changed from new to reviewing

#55 @joedolson
9 months ago

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

Looks good for backport to 6.4.

#56 @jorbin
9 months ago

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.

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


9 months ago

#58 @jorbin
9 months ago

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

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.

#59 @afercia
9 months ago

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

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

This ticket was mentioned in PR #5616 on WordPress/wordpress-develop by @mukesh27.


9 months ago
#60

  • Keywords has-patch added; needs-patch removed

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

Props to @afercia

#61 @jorbin
9 months ago

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

In 57054:

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

Follow up to [56950].

Props afercia.
Fixes #59289.

#62 @jorbin
9 months ago

  • Keywords dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#63 @davidbaumwald
9 months ago

  • Keywords dev-reviewed added; dev-feedback removed

Looks good to backport to the 6.4 branch.

#64 @joedolson
9 months ago

Looks good to me!

#65 @jorbin
9 months ago

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

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.

#66 @jorbin
9 months ago

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

@jorbin commented on PR #5534:


5 months ago
#69

Forgot to close this months ago, sorry

Note: See TracTickets for help on using tickets.