Update the Dashboard welcome banner for 6.2

[laurlittle]

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.

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

Just wanted to mention this possibility :)

[ryelle]

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.

[laurlittle]

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.

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 |

|

| | | | |

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

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 |

|

| | |

Works for me.

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

[ryelle]

In 55451:

Administration: Update the Dashboard welcome banner for 6.2.

Props richtabor, markoserb, laurlittle.
See #57759.

[ryelle]

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

Merged in r55451.

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

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.

[ryokuhi]

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.

[ryelle]

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?

[ryokuhi]

@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).

[laurlittle]

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

[ryelle]

@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).

[richtabor]

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.

[ryelle]

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).

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 |

|

| | |

On alternate color schemes:

| Ectoplasm | Light |

|

| | |

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

[ryelle]

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.

[ryelle]

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

[hellofromTonya]

Tested and confirmed the 3 fixes are working as expected.

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

Committed in r55574.

[ryelle]

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]

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

[csesumonpro]

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.