Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 13 months ago

#55532 closed task (blessed) (fixed)

Update the Dashboard welcome banner for 6.0

Reported by: critterverse's profile critterverse Owned by: ryelle's profile ryelle
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch commit dev-reviewed
Focuses: accessibility, administration Cc:

Description

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.

Attachments (3)

60-dashboard.png (54.2 KB) - added by ryelle 2 years ago.
First pass of about page styles on dashboard widget
Dashboard banners 6.0 release i1.zip (781.6 KB) - added by fcoveram 2 years ago.
Dashboard banners for 6.0 release - i1
Dashboard banners 6.0.png (633.2 KB) - added by fcoveram 2 years ago.
Dashboard banners board for 6.0 release - i1

Download all attachments as: .zip

Change History (27)

#1 @ryelle
2 years ago

  • Milestone changed from Awaiting Review to 6.0

#2 @costdev
2 years ago

  • Type changed from enhancement to task (blessed)

@ryelle
2 years ago

First pass of about page styles on dashboard widget

#3 @ryelle
2 years ago

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

#4 @critterverse
2 years ago

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.

#5 @ryelle
2 years ago

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.

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


2 years ago

#7 @chaion07
2 years ago

  • Keywords needs-design added

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!

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


2 years ago

@fcoveram
2 years ago

Dashboard banners for 6.0 release - i1

@fcoveram
2 years ago

Dashboard banners board for 6.0 release - i1

#9 @fcoveram
2 years ago

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.

Dashboard banners board for 6.0 release - i1

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 (Dashboard banners for 6.0 release - i1) 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 ticket was mentioned in PR #2683 on WordPress/wordpress-develop by ryelle.


2 years ago
#10

  • Keywords has-patch added

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

#11 @ryelle
2 years ago

  • Focuses accessibility added
  • Keywords needs-design removed

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.

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


2 years ago

#13 @joedolson
2 years ago

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.

#14 @fcoveram
2 years ago

It looks great @ryelle. Thank you

#15 @ryelle
2 years ago

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

#16 @ryelle
2 years ago

  • Keywords commit dev-feedback added

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


2 years ago

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


2 years ago

#19 @SergeyBiryukov
2 years ago

  • Keywords dev-reviewed added; dev-feedback removed

PR 2683 looks good to commit and backport.

#20 @ryelle
2 years ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

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.

#21 @ryelle
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport

ryelle commented on PR #2683:


2 years ago
#22

Committed in r53383.

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


2 years ago

#24 @ryelle
2 years ago

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

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.

Note: See TracTickets for help on using tickets.