Update the Dashboard welcome banner for 6.0

[critterverse]

Hey, all! This is a ticket focused on updating the Dashboard welcome banner for the 6.0 release. I didn't see a ticket open for this task already but please let me know if this is a duplicate :)

For more context, please see updates that were made to the banner for 5.9: https://core.trac.wordpress.org/ticket/54489

Ideally, we could reuse built elements as much as possible for this release but replace the balloon artwork with new graphics. I imagine there could be similar color mapping across admin styles, etc!

The new visuals for 6.0 should align with assets that are created for the About page, which are being worked on in https://core.trac.wordpress.org/ticket/55434.

[ryelle]

First pass of about page styles on dashboard widget

[ryelle]

@critterverse Are there any content changes being proposed here? I took a swing at replacing the style with the About page style, you can see it in 60-dashboard.png​ — does that line up with what you were thinking?

[critterverse]

Awesome, thanks for kicking this off @ryelle!

This is definitely close to what we have in mind for the design but @fcoveram is planning to take a look at how the admin scheme color-coding can work with the new artwork. We're hoping to share an update on the ​About page design/images this week and can should be able to share an update here soon after.

I don't think any content changes will be needed.

[ryelle]

Sounds great. It would be nice to get a first iteration committed by RC1 (next week), so we can get the most feedback possible, but since there won't be content changes we don't need to be tied to that deadline.

[chaion07]

Thanks @critterverse for reporting this. We reviewed this ticket during a recent bug-scrub session and based on the feedback we're adding the keyword needs-design.

Props to @costdev

Cheers!

[fcoveram]

Dashboard banners for 6.0 release - i1

[fcoveram]

Dashboard banners board for 6.0 release - i1

[fcoveram]

Hi all. I have been adapting the main artwork of the About 6.0 page proposal, and here is a board with all banners for all color schemes in the admin.

Since some people might have customized colors for the admin, I think the best way to go is using the Default version (top left one in the image attached). The colors in SVG image are from the color folder (​https://github.com/WordPress/wordpress-develop/tree/trunk/src/wp-admin/css/colors) and their uses vary depending on the admin color scheme.

Here is a zip file () with each version separately and the link to see the Figma file (​https://www.figma.com/file/97nS9v1DCp5XQfEOhtOTjP/Welcome-banner-6.0?node-id=136%3A2311).

I would love to hear your thoughts on the color mixes.

This inlines the 6.0 SVG onto the dashboard, so that we can style it using CSS. It also introduces 3 new color variables to control the dashboard colors, which removes the light scheme workaround in _admin.scss.

| default | coffee | ectoplasm |

|

| ​[Image(https://i0.wp.com/user-images.githubusercontent.com/541093/167027905-2f0cd2a3-cd48-44cc-bc29-4431811b3d03.png)] | ![] |

| blue | light | midnight |

|

| ​[Image(https://i0.wp.com/user-images.githubusercontent.com/541093/167027911-d38f52da-5d6d-437c-8e55-9c9b345152c5.png)] | ![] |

| modern | ocean | sunrise |

|

| ​[Image(https://i0.wp.com/user-images.githubusercontent.com/541093/167027917-b9a49d5d-793e-4bb6-b903-975ec2541561.png)] | ![] |

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

[ryelle]

I've pushed up ​this PR, there are screenshots for each scheme in the description (they don't sync over well).

I'm tagging this for accessibility review because I'm loading the SVG into the page, and I want to make sure it's correctly hidden — it's functionally a background image, so it doesn't need alt text.

[joedolson]

The SVG doesn't need to have a role attribute if it's hidden - the role attribute is only important if we're conveying semantics about the SVG, and since it's hidden, we're not doing that.

It would be nice to also include the attribute focusable="false", which ensures that IE won't pass focus on tabbing to the SVG element. But since we don't officially support IE, that's not a blocker. It's just that it's a pretty easy level of support to offer.

[fcoveram]

It looks great @ryelle. Thank you

[ryelle]

I've removed the role and added focusable="false" in ​the PR.

[SergeyBiryukov]

​PR 2683 looks good to commit and backport.

[ryelle]

In 53383:

Administration: Update design of the Dashboard welcome panel.

This updates the panel to match the 6.0 About page styles, with the 6.0 graphic changing color based on the selected admin color scheme.

Props fcoveram, critterverse, joedolson, SergeyBiryukov.
Fixes #55532.

[ryelle]

Reopening for backport

Committed in r53383.

[ryelle]

In 53385:

Administration: Update design of the Dashboard welcome panel.

This updates the panel to match the 6.0 About page styles, with the 6.0 graphic changing color based on the selected admin color scheme.

Props fcoveram, critterverse, joedolson, SergeyBiryukov.
Merges [53383] to the 6.0 branch.
Fixes #55532.