About Page - 7.1

[wildworks]

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

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

[markoserb]

In the following message I am sharing the first draft for About page. It is not there yet considering design. First text placement is generated with the help of AI, pardon any mistakes. Feel free to comment on this ​Google Doc, and we can collaborate to get the text right. Since text overlaps on Microsite, it is also present in that same doc. Second tab.

[markoserb]

7.1 About page draft 1

[Benjamin_Zekavica]

@markoserb Thank you for the great design! Everything works really well together :)

I’m just not sure if the "Admin Bar" should be on the Highlights page. Maybe it would be better to highlight the “Custom Icons” instead. It’s more interesting and special for many users. See: https://core.trac.wordpress.org/changeset/62748

[markoserb]

I am attaching current design for About page and tab headers as well.

[markoserb]

7.1 About page draft 2

[markoserb]

7.1 About page headers

[markoserb]

7.1 Clean About page headers

[markoserb]

Adding correct file formats below. Above zip isn't good for use.

[markoserb]

7-1 About page images and headers

[mdridipu]

I noticed a small UI detail on mobile devices that might be worth considering.

Before WordPress 7 (e.g. 6.9.5), the About page header had square corners, so the navigation below appeared visually aligned. Since WordPress 7 introduced rounded corners for the header container, the "What's New" navigation now sits directly against the rounded bottom-left corner, which makes the layout feel a bit cramped on mobile.

It might look slightly cleaner if there were a small amount of vertical spacing between the header and the navigation on mobile screens. This is a minor visual refinement, but I think it would better complement the rounded header design.

I've attached a comparison screenshot showing the difference between 6.9.5 and 7.x.

[markoserb]

@mdridipu, yes there is a longer discussion about mobile UI fixes here: https://core.trac.wordpress.org/ticket/65346

Initial draft of the About Page for WordPress 7.1

This draft adds the feature images locally, as the CDN copies are not yet available.
The RTL images are currently missing for the header SVGs

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

## Use of AI Tools
None

[joedolson]

Noting that this version of the About page includes a small gap between the header and the navigation, to fix the spacing issue in #65346.

One more thing, on narrow screens the header gets shorter, so the background image crops in and "WordPress 7.1" ends up sitting on the green part of the artwork instead of the blue. White on that green is 2.4:1, and it needs at least 3:1 for text that size. Checked at a 430px width. Desktop is fine as the title stays on the blue there.

Since the color comes from the image, it needs a different crop or a mobile version rather than a CSS change. Probably a separate ticket though.

No, there's no need for a separate ticket; this ticket covers the entire scope of building out the About Page, because it's a one-off task for the release.

@marko-srb Can you take a look at the color contrast concerns on mobile? We could use something like a text shadow on mobile only that addressed this, e.g. text-shadow: 0 0 2px var(--background);, which would change the boundary with fairly minimal impact on the design.

👋 Your suggestion works well. Let's go with minimal shadows. Not a good practice in general, but great fix suggestion for now. We will fix the images themselves so no contrast issues are present, prior 7.1 release. And swap them.

Do we still need svg images for RTL? I thought we are going with webp? If we need them, I can deliver them in 1hr

About page, text update is ok to happen, even if not applicable by someone on Google file. It's easy for us to change there, as long as it is good on the actual page. Though I'd leave this to Anne. But if this needs to ship, I can review, or provide text in an hr.

Thank you!

[markoserb]

In the next message I am attaching the latest About page mockup, which has improved tiny details as well as the logo/release badge.

This is updated to address feedback and add the URLs for images from the SVN, but I'm noting the the feature images aren't currently in the SVN, so I'm changing those back for tetsing.

[markoserb]

Several updates to the copy of the about page can be found at the existing Google Doc file here ​https://docs.google.com/document/d/1fCVgBGtqeDAUgn9k-ZAWpcINaXhhU8s0UvmWnIaiRgI/edit?usp=sharing. And I am attaching the latest mockup, and design file assets below.

[joedolson]

Marking for commit and dev-feedback.

[mdridipu]

Tested: WordPress 7.1-RC1 on Local with PR ​https://github.com/WordPress/wordpress-develop/pull/12845
The About page content has been updated as expected, the What’s New section and the new images.

Additionally, the header section and navigation section now have a visible gap on both desktop and mobile. This also resolves the issue reported in #65346.

This PR changes many images to be loaded from a CDN instead of locally. As a result, many images that are not referenced at all remain. Should these be deleted? The following images are not referenced at all.

Fixed in 469d04d02648c2d6be2b422fe3f162388777cb8e. In other words, I have removed the WEBP images loaded from the CDN, as they are not needed in the core. The only local change required should be to src/wp-admin/images/about-release-badge.svg.

​https://s.w.org/images/core/7.1/about-release-badge.svg?ver=7.1

In other words, I don't think this image needed to be published externally.

[joedolson]

In 63182:

Help/About: Update the About page for 7.1

Introducing the new content for the 7.1 About page.

Props joedolson, mdridipu, benjamin_zekavica, wildworks, rcorrales, annezazu, webverts, alanjacobmathew, markoserb, sfougnier, mukesh27, umesh.nevase, ekamran, jorbin, masteradhoc, obenland, krupajnanda, adamsilverstein.
Fixes #65698, #65346.

svn rm src/wp-admin/images/

[joedolson]

Reopening for 2nd committer sign off and backport to 7.1.

[joedolson]

In 63184:

Help/About: Remove an extra space in a string.

Removes an extra space in one of the About page translatable strings. Follow up to [63182].

Props joedolson, alanjacobmathew.
See #65698.

[joedolson]

In 63185:

Help/About: Correct the version description.

The version description included a reference to a change that did not ship in version 7.1.

Props joedolson, annezazu.
See #65698.

[jorbin]

[63182], [63184], [63185] look good for a combined backport to the 7.1 branch.

[joedolson]

In 63186:

Help/About: Update the About page for 7.1.

Introducing the new content for the 7.1 About page.

Reviewed by jorbin.
Merges [63182], [63184], [63185] to the 7.1 branch.

Props joedolson, mdridipu, benjamin_zekavica, wildworks, rcorrales, annezazu, webverts, alanjacobmathew, markoserb, sfougnier, mukesh27, umesh.nevase, ekamran, jorbin, masteradhoc, obenland, krupajnanda, adamsilverstein.
Fixes #65698, #65346.