Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 11 months ago

#57759 closed task (blessed) (fixed)

Update the Dashboard welcome banner for 6.2

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

Description (last modified by SergeyBiryukov)

The Dashboard's welcome panel currently shows the "6.1" background image. It will need to be updated for 6.2.

For the past few releases, this design has matched the About page design (the 6.2 About page is tracked at #57477).

See #56703 for the previous update.

Attachments (3)

6.2-dashboard-dismiss-default-scheme.png (26.9 KB) - added by sabernhardt 12 months ago.
"Dismiss" on top of the green dot at 1000px
6.2-dashboard-color-schemes.png (169.4 KB) - added by sabernhardt 12 months ago.
$menu-submenu-background for the banner background and $menu-background for the SVG
patch.diff (2.0 KB) - added by csesumonpro 11 months ago.
I have added coffee colors dashboard accent. Please check it If I am wrong anywhere please inform me I will try to resolve it.

Download all attachments as: .zip

Change History (39)

#1 @davidbaumwald
12 months ago

  • Milestone changed from Awaiting Review to 6.2
  • Type changed from enhancement to task (blessed)

#2 follow-up: @audrasjb
12 months ago

Maybe we can also just remove the welcome banner if there is no strong, visible change, and no new bundled theme in 6.2?

Just wanted to mention this possibility :)

#3 in reply to: ↑ 2 ; follow-up: @ryelle
12 months ago

Replying to audrasjb:

Maybe we can also just remove the welcome banner if there is no strong, visible change, and no new bundled theme in 6.2?

I don't see the Welcome panel as being related to the bundled theme. It's a landing point for new users to learn about block theme features.

We could tone down the header background & remove the version number to avoid needing to update the style with each release though.

#4 in reply to: ↑ 3 @laurlittle
12 months ago

Replying to ryelle:

I don't see the Welcome panel as being related to the bundled theme. It's a landing point for new users to learn about block theme features.

I agree about it being a nice starting point to bring more folks into block themes. For the moment, the content feels pretty evergreen so can probably stick around.

We could tone down the header background & remove the version number to avoid needing to update the style with each release though.

I'm curious what the thought was around not taking this approach from the beginning? Or at least after 5.9.

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


12 months ago

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


12 months ago
#6

  • Keywords has-patch added

Updates the background image for the Welcome Panel to use the 6.2 style. This introduces a new file separate from the about header since the design is slightly different. The header is also updated to match each color scheme.

| Default | Modern (same as default) | Ocean | Ectoplasm |

|

| https://i0.wp.com/user-images.githubusercontent.com/541093/221947243-c57324d1-74a5-46df-9782-cf8dc71d192b.png | https://i0.wp.com/user-images.githubusercontent.com/541093/221947247-99ac188e-c642-4100-b3ac-0f5ff8d2d2d0.png | https://i0.wp.com/user-images.githubusercontent.com/541093/221947250-68f1e1ac-cf42-4e00-b655-6d1fd1237b24.png | https://i0.wp.com/user-images.githubusercontent.com/541093/221947244-b39896c0-db83-4bcf-a19f-459a1a2a986c.png |

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

@ryelle commented on PR #4146:


12 months ago
#7

I've flipped the background on RTL sites so that the green dot doesn't overlap the content. I'm not sure if the shapes are meant to be something that mirroring breaks, though, so just let me know if this solution needs work, @richtabor.

| Before | After |

|

| https://i0.wp.com/user-images.githubusercontent.com/541093/222180373-aaaac7a8-1549-4958-8565-aaea7c30ffc8.png | https://i0.wp.com/user-images.githubusercontent.com/541093/222180151-6ab99533-f72c-420c-8d61-b0ed1da8c01c.png |

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


12 months ago

@richtabor commented on PR #4146:


12 months ago
#9

Works for me.

@richtabor commented on PR #4146:


12 months ago
#10

We may need to tweak the coloring in the alternate color schemes, but I’m good for getting this in.

#11 @ryelle
12 months ago

In 55451:

Administration: Update the Dashboard welcome banner for 6.2.

Props richtabor, markoserb, laurlittle.
See #57759.

#12 @ryelle
12 months ago

  • Keywords has-patch removed

I've left this ticket open for possible iteration on the color schemes.

@ryelle commented on PR #4146:


12 months ago
#13

Merged in r55451.

@sabernhardt
12 months ago

"Dismiss" on top of the green dot at 1000px

@sabernhardt
12 months ago

$menu-submenu-background for the banner background and $menu-background for the SVG

#14 @sabernhardt
12 months ago

At certain screen widths around 1,000 pixels wide, the Dismiss link can overlap the green dot. Without its own background, the white text has a very low contrast ratio of 1.51:1 in the Default and Modern schemes (and even lower with the yellow text on hover/focus). One option is to give the link the same background color as the panel, which probably should involve adding a border-radius and/or adjusting the padding. (Of course, using the same color for all parts of the SVG, in any color scheme, is another option.)

I think using $menu-submenu-background for the banner background and $menu-background for the SVG looks better in five of the alternative color schemes: Coffee, Ectoplasm, Midnight, Ocean and Sunrise. "Blue" already looks like that (or very close) with the RGBA color.

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


12 months ago

#16 follow-up: @ryokuhi
12 months ago

I know it would be nice to have the extra green dot in the welcome banner when using the Default and the Modern theme, but I don't think editing the dismiss button colors with Release Candidate approaching is the safest option.

In my opinion, the quickest solution for the problem highlighted by @sabernhardt is to remove the green dot from the banner background.

Of course, we can re-discuss the possibility of adding a background color to the dismiss button in another ticket, with more time to find a permanent solution.

#17 in reply to: ↑ 16 @ryelle
12 months ago

Replying to ryokuhi:

Of course, we can re-discuss the possibility of adding a background color to the dismiss button in another ticket, with more time to find a permanent solution.

This banner has been changing with each release, so it's possible we won't need the background color fix in 6.3+. That's probably another point to removing the green dot. Or maybe moving it down to the bottom right?

#18 @ryokuhi
12 months ago

@ryelle Moving the green dot to the bottom right should work: I had a quick look and I don't think there will be overlaps with any text.

If it works with a 601px viewport width, it should work at any viewport (but testing also with larger screens to be sure is probably better).

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


12 months ago

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


12 months ago

#21 @laurlittle
12 months ago

@ryelle This just came to my attention that there's been an issue with the 'Edit styles' link on the dashboard banner for the past couple releases.

It would be ideal to link it somewhere else, that both makes sense and works, but given timing, removing it entirely might be easiest. What do you think?

#22 @ryelle
12 months ago

@laurlittle Is there a working link we can use? It looks like this changed with 6.2, since the link is working in 6.1 (it was fixed in #55752).

#23 @richtabor
12 months ago

removing it entirely might be easiest. What do you think?

I don't think there's a better place to link it to — I say we remove the link, or make it also say "Open site editor", as styles are within the Site Editor.

#24 @ryelle
12 months ago

I've asked in #core-editor if there is a new/working link that will take the user to the Styles UI, since it might be confusing if both links drop you into the same editor (it took me a second to realize how to get there from the new landing screen).

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


12 months ago

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


12 months ago

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


12 months ago

#28 @SergeyBiryukov
12 months ago

  • Description modified (diff)

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


12 months ago

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


11 months ago
#30

  • Keywords has-patch added

Remove the green background from the "dot" accent, to prevent low contrast for the dismiss button. Use menu colors for the background on alternate color schemes. Remove the "Edit styles" link which previously went to the global styles section of the site editor, but there is no longer a direct link to this view.

| Block theme active | Classic theme active |

|

| https://i0.wp.com/user-images.githubusercontent.com/541093/226404099-c88708c9-dae0-4230-8411-b9533ad2d183.png | https://i0.wp.com/user-images.githubusercontent.com/541093/226404104-dbd6b85c-8a0a-4056-866e-c7897113cf0a.png |

On alternate color schemes:

| Ectoplasm | Light |

|

| https://i0.wp.com/user-images.githubusercontent.com/541093/226404105-161cf634-5379-419b-b9ec-d36ad65e8f4f.png | https://i0.wp.com/user-images.githubusercontent.com/541093/226404109-5f28046a-2f1d-4fa6-849a-2e3f71d51a06.png |

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

#31 @ryelle
11 months ago

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

In 55574:

Administration: Update dashboard welcome panel colors, remove broken link

Remove the green background from the "dot" accent, to prevent low contrast for the dismiss button. Use menu colors for the background on alternate color schemes. Remove the "Edit styles" link as there is no longer a direct link to the global styles section of the site editor.

Follow-up to [55451].

Props sabernhardt, ryokuhi, laurlittle, richtabor.
Fixes #57759.

#32 @ryelle
11 months ago

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

Reopening for a 2nd review to backport [55574] to the 6.2 branch.

#33 @hellofromTonya
11 months ago

  • Keywords dev-reviewed added; dev-feedback removed

Tested and confirmed the 3 fixes are working as expected.

[55574] is ready to backport to the 6.2 branch.

@ryelle commented on PR #4251:


11 months ago
#34

Committed in r55574.

#35 @ryelle
11 months ago

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

In 55576:

Administration: Update dashboard welcome panel colors, remove broken link

Remove the green background from the "dot" accent, to prevent low contrast for the dismiss button. Use menu colors for the background on alternate color schemes. Remove the "Edit styles" link as there is no longer a direct link to the global styles section of the site editor.

Follow-up to [55451].

Props sabernhardt, ryokuhi, laurlittle, richtabor.
Reviewed by hellofromTonya.
Merges [55574] to the 6.2 branch.
Fixes #57759.

@csesumonpro
11 months ago

I have added coffee colors dashboard accent. Please check it If I am wrong anywhere please inform me I will try to resolve it.

#36 @csesumonpro
11 months ago

hello, @ryelle I have added coffee colors dashboard accent. Please check it If I am wrong anywhere please inform me I will try to resolve it.

https://user-images.githubusercontent.com/29582239/227129213-a5bada91-25d8-4cbe-84a5-63c3b1b286a5.png

Version 0, edited 11 months ago by csesumonpro (next)
Note: See TracTickets for help on using tickets.