About Page - 7.0

[desrosj]

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

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

[parinpanjari]

Hi everyone

I’d be happy to contribute to the design work for the 7.0 About page. I was involved in the 6.9 About page discussions, where I supported visual refinements and icon improvements, and I’d love to continue contributing this cycle as well.

Could you please let me know if there’s an existing Figma file or design direction already started for 7.0? If so, I’d be glad to review and propose section-level improvements (layout structure, feature blocks, visual hierarchy, icon consistency, responsive behavior, etc.).

If nothing has been started yet, I’m also happy to help initiate a modular section design approach aligned with the current WordPress admin design language and accessibility standards.

Looking forward to collaborating.

Thank you!

[fcoveram]

Sharing a first draft of the About page and the content that can potentially display. As in previous versions, the texts are exact the same as in the Microsite ( ​Github ticket).

All the text is available in this ​Google Doc file and open to feedback.

[fcoveram]

About page 7.0 - i.0

[peterwilsoncc]

@fcoveram Are you able to open the google doc to suggestions from anyone with the link so feedback can be provided?

[fcoveram]

Oh, yes! Apologies. Now the document is open to anyone to comment.

[parinpanjari]

@fcoveram

Just to align, I had suggested an update to one of the content lines, and it has now been approved. Accordingly, that line will need to be adjusted in the design to match the revised copy.

As I do not have edit access to the Figma file, could you please update it from your end?

Please refer to the screenshot for context:
​https://drive.google.com/file/d/1gjRWvrPrXZ7HpB7Se74c4kxubjsfPxDO/view?usp=sharing

Thanks

[JeffPaul]

@fcoveram is there any progress on the header design there as it could be nice to infer from that in the Try AI callout design on the Connectors page happening in #64711.

[fcoveram]

I haven't applied the latest updates in the about page, but I will @parinpanjari as soon as we have something more solid for the release brand. In that vein, the page header will also inherit the brand direction once we have it @JeffPaul. I will share updates soon.

[JeffPaul]

@fcoveram ideally the design is available very early next week so folks can review and get a commit in well before RC1 and so we can update accordingly on the Connectors page and in the AI Experiments plugin.

[fcoveram]

Thanks for the reminder @JeffPaul. Yes, I am working with contributors mostly in defining the release brand for the highlight grid. Regarding About page content, I'm applying small tweaks now and asking for double check again today.

Once we have the brand and the visuals for the highlight grid, replacing the images in both About page and Microsite is quite faster.

[fcoveram]

Here is a new version of the about page using the content from the ​Docs document; updated as of writing this comment

[JeffPaul]

The font size feels too small for some of those sections with lots of text, so presumably we need to trim that down so the font size can bump up and not overrun the vertical space for that section?

[Joen]

The font size feels too small for some of those sections with lots of text, so presumably we need to trim that down so the font size can bump up and not overrun the vertical space for that section?

This can be due to the image being scaled down. The font size should be identical to what it is already in 6.9, so the best way to get a feel for it is the WordPress logo > About.

[westonruter]

Draft for the Performance section: ​https://docs.google.com/document/d/1ES8GqiTk34hgO4qQfuSC9LoBU5uxO6oPI5Fue4dFPAY/edit?usp=sharing

[fcoveram]

Sharing a new version of the page that has applied changes coming from recent updates, as of writing this comment.

[markoserb]

I am sharing a new update. Swapping background cover colors so covers tie to other assets we are testing. Mainly gray background, and expressing other colors from 'brand direction' through objects on it. Same approach for other covers at about page. Consider it optional.

[parinpanjari]

A few suggestions to improve these sections: The font sizes are not matching consistent across the page. The first sections appear larger and more readable, while the other sections feel smaller and harder to read. Can we increase the font size of the remaining sections to maintain consistency and improve overall readability?

Screenshot : ​https://drive.google.com/file/d/1xRNmYzD7SQCYHIiUOxUTPG_7XI92rVCA/view?usp=sharing

[fcoveram]

We have been consistent with the structure of the page in the last releases. That big paragraph is an intro shared in the macro site as well. The font sizes don't intend to change, but only the content and images. I appreciate the feedback @parinpanjari

[fcoveram]

Sharing the latest version of the page updated with all the content from the main copy document.

[fcoveram]

The design can be found in the ​"Visual Updates" page inside the Figma file where the page and headers are placed.

[parinpanjari]

I’ve made a small visual background color adjustment to the “Learn more about WordPress 7.0” section to better align with the overall About page design.

Before (current):
​https://drive.google.com/file/d/1ezUzP1Qj6JBmaCHPjXfIJfBY2WesFVWS/view?usp=sharing

After (proposed):
​https://drive.google.com/file/d/1_Mevbo_18xzCjemQU_2iOXDBvb-in_yB/view?usp=sharing

The update replaces the strong orange background with a more neutral background(e.g. #EBE8E5) that aligns with the hero/header background used across the page.

This helps:

• Maintain visual consistency with the header and other sections
• Reduce visual weight so the focus stays on the content
• Improve readability and overall balance

Thanks!

[audrasjb]

About RTC and AI sections: Could we add a link to the related settings screens?
For AI connectors: /wp-admin/options-connectors.php
For RTC: /wp-admin/options-writing.php#wp_collaboration_enabled

[fcoveram]

Thanks @parinpanjari updating the W7.0 to have a gray background looks better. Agree with the change.

[Benjamin_Zekavica]

@parinpanjari That looks amazing :) Good job! I think the orange background is a bit too intense here. Maybe a lighter shade would work better.

See: ​https://www.directupload.eu/file/d/9243/j24ow9kg_png.htm

[parinpanjari]

@fcoveram @desrosj

Just checking if the updated design with the neutral background has been applied.

Since I don’t have edit access for that change, please let me know if anything is needed from my side to help move this forward.

Happy to assist with finalizing if required.

Thanks!

[peterwilsoncc]

Moving the header to use rounded corners will need updated designs for the hover elements in the "About, Credits .... Get Involved" menu, could they be added to the Figma file?

In the WordPress 6.9 about page update, the rounded corners were reverted as it made the hover effects look odd at either end of the menu, see this ​comment on the 6.9 PR for a gif showing the issue.

My apologies if this is covered in the Figma file and my ignorance of the ways of Figma means I am missing something obvious.

[markoserb]

about_cover-rounded-edges

[markoserb]

It's either we update the buttons to have the same radius value (image above), or keep the sharp approach for covers. Ideally we do round these, as lower sections are also rounded. However, if timing is not good we can leave it for the next release and simply go sharp edges. @fcoveram what do you think?

[Benjamin_Zekavica]

I wouldn’t round the buttons and would keep them without border radius. For the header, keep the top corners rounded and the bottom corners square.

Example (Quick-CSS): ​https://cleanshot.com/share/ckl76CDh

I wouldn’t change much overall.

[fcoveram]

I like the idea of having rounded corners in all headers, but I will follow the radius value that comes from the admin style feature. That means applying a 8px border radius to the image directly via CSS.

If we agree with this idea. We could also level up the layout by adding a 8px gap between the header and the tab section, and reduce the border decorative element of the active tab to be 4px.

Here is a test of the above I made on my browser's inspector using playground with 7.0-RC2: ​https://cleanshot.com/share/lM1WYSj6

What do you think of this?

[Benjamin_Zekavica]

@fcoveram That looks much better. I'd take the last version: ​https://cleanshot.com/share/lM1WYSj6

[jorbin]

Given the short time remaining, I think we need to move to code and get this committed quickly.

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

Text copy - ​https://docs.google.com/document/d/1LLziX7fdw9iftLOtbpkZ2TN8FfOS3sDVX4nIuJCwBV4/edit?tab=t.ok56kf4oaexa#heading=h.66j85f6jwwxu

The Image assets is missing in this PR.

## Use of AI Tools

N/A

[fcoveram]

I updated a few words in the main document as these changes happened in the design file. The document is the same as the linked above by @mukesh27 (​https://docs.google.com/document/d/1LLziX7fdw9iftLOtbpkZ2TN8FfOS3sDVX4nIuJCwBV4/edit?tab=t.ok56kf4oaexa#heading=h.66j85f6jwwxu)

The design file has the assets for this page marked as "ready for dev". Here a link to the assets page: ​https://www.figma.com/design/aeMDWlqrwWarqDQaTwB0Nh/7.0-Highlight-Grid--Microsite--About-Page?node-id=6006-5640

[peterwilsoncc]

Per Matt, the Real Time Collaboration feature has been pulled from the release, see ​this Slack comment onwards.

The copy will either need to be dropped or replaced in the about page: both in the intro and the dedicated paragraphs.

cc @mukesh27 @fcoveram

[fcoveram]

Thanks for the heads up @peterwilsoncc. I will work on this now.

[mukesh27]

@fcoveram Let me know once the copy updated.

[amykamala]

Timing is pretty tight here. RC4 is slated for release this Thursday (the 14th) and then the final release is less than a week later with dry run starting on the 19th. Thank you for prioritizing this!

[fcoveram]

A new version of the content is in the Google Doc file (tab "version 3"): ​https://docs.google.com/document/d/1LLziX7fdw9iftLOtbpkZ2TN8FfOS3sDVX4nIuJCwBV4/edit?tab=t.o44yk44ibs12#heading=h.66j85f6jwwxu

Most pieces are untouched, but we moved the position of features and add a new one in replacement of real-time collaboration. Please also pay attention to "Performance" and "Accessibility" sections as I am unaware of possible changes in those two areas.

A design is coming soon to show how each feature looks. Regardless, the document is ready for its implementation.

[markoserb]

I am adding a few suggestions for the about page based on latest information as in next message.

[markoserb]

About page _ May 12

[fcoveram]

Very nice. Great work. I'm confident going with this version.

[Benjamin_Zekavica]

@markoserb Great job! I’m happy with this version too. Thanks for updating the design.

[parinpanjari]

@markoserb Yes, this updated version looks great. Thanks for the updated design.

[fcoveram]

The version shared above by @markoserb is in the ​main page in Figma with the rest of assets.

Please use that link as a source of truth.

[ryelle]

Hi folks, I've been quiet lately but saw the discussion in #core today - I'm happy to help out with commits (whether CDN or the About page PR). I saw the PR will be updated, I'll be around for another couple hours today, and can check in in the morning US-time before the RC (though, probably not that much earlier).

Screenshot:
</br>

[fcoveram]

From the screenshot attached above, the content looks good.

Just noting that header shows the 6.9 image and heading says WordPress 7.1. You likely know that, but sharing it anyways.

[audrasjb]

Replying to fcoveram:

Just noting that header shows the 6.9 image and heading says WordPress 7.1. You likely know that, but sharing it anyways.

Yes it's because the patch was done against trunk, which shows images from 6.9 and a dynamic WordPress Version number (so 7.1 as trunk is 7.1 alpha).

👋🏼 Thanks, everyone for working on this.
On a quick review, I noticed a couple of areas that may be worth revisiting. Please feel free to ignore these suggestions if they were already discussed or intentionally implemented.

---

### Point 1: Border radius on navigation tabs

This PR introduces border radius styling on the navigation tabs. However, in the active state — especially for the first and last tabs — the UI appears visually cleaner and more balanced with a rectangular shape instead of rounded corners.

From a visual consistency perspective, the non-rounded active tabs seem to integrate better with the overall layout.

#### WordPress 7.0:

#### For reference: WordPress 6.9

---

### Point 2: Heading contrast in mobile view

In the mobile view, the H1 heading text color (WordPress 7.1) currently appears as #1e1e1e. Due to the darker background, the heading does not have sufficient contrast and becomes difficult to read.

Changing the heading color to #FFFFFF (or another lighter accessible color) would improve visibility and readability significantly on mobile devices.

---

### Point 3: Page content alignment

In the mobile layout, some sections of the content appear center-aligned initially, but after images are displayed, the alignment becomes inconsistent, with some content shifting toward the left and some toward the right.

Please refer to the screencast below for a better visual reference of the alignment behavior:

​https://github.com/user-attachments/assets/3435772b-a2c0-4fbf-a530-16c94e940a5d

---

### Environment:

• Used Playground instance created from this PR
• Browser - Chrome Version 147.0.7727.138

@ankitguptaindia Some how the Playground didn;t fatch latest images from the PR so that you get wrong images for header.

Nice catch for mobile view. Will fix it soon

[ryelle]

I'll upload the images to the CDN now.

The header images can be optimized by switching to webp, and they could be renamed to "about-header-*" instead of "7-0-*".

I would also suggest using the has-subtle-background-color class and updating the --subtle-background variable for the "and more" section so that the change also applies to the same styled box on Get Involved.

Once I get the images added, is this ready for commit? I can make these changes and commit, if so - I know it's close to commit freeze.

[ryelle]

In 62362:

Help/About: Update the About page for 7.0.

Introducing the new content for the 7.0 About page.

Fixes #64536.
Props mukesh27, audrasjb, jorbin, ankit-k-gupta, parinpanjari, fcoveram, joen, markoserb, Benjamin_Zekavica, westonruter, peterwilsoncc, JeffPaul.

[ryelle]

Reopening to backport [62362]

[ellatrix]

In 62363:

Help/About: Update the About page for 7.0.

Introducing the new content for the 7.0 About page.

Reviewed by ellatrix.
Merges [62362] to the 7.0 branch.
Fixes #64536.
Props mukesh27, audrasjb, jorbin, ankit-k-gupta, parinpanjari, fcoveram, joen, markoserb, Benjamin_Zekavica, westonruter, peterwilsoncc, JeffPaul.