Make WordPress Core

#56703 closed task (blessed) (fixed)

Update the Dashboard welcome banner for 6.1

Reported by: ryelle's profile ryelle Owned by: davidbaumwald's profile davidbaumwald
Milestone: 6.1 Priority: high
Severity: normal Version:
Component: Administration Keywords: has-patch commit dev-reviewed
Focuses: accessibility Cc:

Description

The Dashboard's welcome panel currently shows the "6.0" background image. It will need to be updated for 6.1, at least the image asset. Any string changes would need to happen ASAP (before beta 3 on Oct 4, unless this is considered part of the "About" strings).

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

See #55532 for the previous update.

Attachments (2)

Screen Shot 2022-09-30 at 12.24.40 PM.png (251.7 KB) - added by ryelle 19 months ago.
Current dashboard widget
56703.diff (19.5 KB) - added by sabernhardt 18 months ago.
adding aria-hidden, focusable and viewBox attributes; removing clip-path; converting path elements to circle

Download all attachments as: .zip

Change History (40)

@ryelle
19 months ago

Current dashboard widget

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


19 months ago

#2 @davidbaumwald
19 months ago

  • Priority changed from normal to high

Moving this up in prio for visibility.

#3 @rudlinkon
19 months ago

@sabbirmc or @msnewas you may help by providing the design.

#4 @adampickering
19 months ago

@richtabor and myself whipped up many concepts for the Dashboard welcome banner for 6.1

See threads.

https://wordpress.slack.com/archives/C02S78ZAL/p1664551500695589

https://wordpress.slack.com/archives/C02S78ZAL/p1664915916310249

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


19 months ago

#6 @kirasong
19 months ago

  • Keywords needs-design-feedback added; needs-design removed

@chaion07 and I looked at this ticket during triage today.

Thanks @ryelle for creating the ticket for tracking, and @adampickering and @richtabor for the designs!

Swapping keyword for needs-design-feedback since there are designs posted for review now.

Looks like there's some good conversation happening over on Slack.

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


19 months ago

#8 @ryelle
19 months ago

  • Keywords needs-design added; needs-design-feedback removed

Updating the keywords back to needs-design, the designs posted were for the About page headers. The design here will be related, but isn't done yet. The dashboard page designs could also reflect the chosen admin color scheme.

Since we'll be past hard string freeze, we can only change the style (background of the header).

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


19 months ago

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


18 months ago

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


18 months ago
#11

  • Keywords has-patch added

Apply the "About page" style update to the Welcome panel on the dashboard. This includes the 6.1 bubble image which is also added via https://github.com/WordPress/wordpress-develop/pull/3461.

This also updates the design to match the current color scheme. I'll link to screenshots, to avoid image-dumping in the ticket.

Default, Blue, Coffee, Ectoplasm, Light, Midnight, Modern, Ocean, Sunrise.

And on small screens, the background disappears. Default, Blue, Coffee, Ectoplasm, Light, Midnight, Modern, Ocean, Sunrise.

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

#12 @ryelle
18 months ago

  • Keywords needs-design-feedback added; needs-design removed

@richtabor commented on PR #3483:


18 months ago
#13

Mind swapping out the first icon with this one? I'd say its a bit clearer. Thanks!

https://i0.wp.com/user-images.githubusercontent.com/1813435/196431125-68e94c1f-e04e-4dbc-9ec0-094825283503.svg

@richtabor commented on PR #3483:


18 months ago
#14

I think they look ace ✨

@ryelle commented on PR #3483:


18 months ago
#15

Mind swapping out the first icon with this one? I'd say its a bit clearer. Thanks!

Done ✅
https://i0.wp.com/user-images.githubusercontent.com/541093/196455656-6fb233f4-6ba2-4a19-8bc5-8c60e26ef144.png

#16 @ryelle
18 months ago

  • Keywords commit dev-feedback added; needs-design-feedback removed

design approved, now it just needs 2nd committer sign off.

#17 @davidbaumwald
18 months ago

  • Keywords dev-reviewed added; dev-feedback removed

LGTM! @ryelle If you want to get this in before RC2, go for it!

#18 @davidbaumwald
18 months ago

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

In 54638:

Administration: Update the Dashboard welcome banner for 6.1.

Reviewed by ryelle and davidbaumwald.

Props ryelle, adampickering, mikeschroder, richtabor.
Fixes #56703.

#20 @davidbaumwald
18 months ago

  • Keywords dev-reviewed removed

Cleaning up the keywords after the merge.

#21 @kebbet
18 months ago

In the latest commit the 6.0 header image was added, was this by intension? Running trunk now displays 6.0 in the welcome banner background, and in the header of about.php …

Last edited 18 months ago by kebbet (previous) (diff)

#22 @kebbet
18 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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


18 months ago

#26 @SergeyBiryukov
18 months ago

In 54645:

Help/About: Restore the correct header image for WordPress 6.1.

The new About header image appears to have been accidentally reverted to the older one in a previous commit.

Follow-up to [54635], [54638].

Props kebbet.
See #56703.

@SergeyBiryukov commented on PR #3494:


18 months ago
#27

Thanks for the PR! Merged in r54645.

#28 @SergeyBiryukov
18 months ago

  • Keywords dev-feedback added

Marking [54645] for backporting to the 6.1 branch after a second committer's review.

#29 @ryelle
18 months ago

  • Keywords dev-reviewed added; dev-feedback removed

Looks good, I can do the backport commit.

#30 @ryelle
18 months ago

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

In 54648:

Help/About: Restore the correct header image for WordPress 6.1.

The new About header image appears to have been accidentally reverted to the older one in a previous commit.

Follow-up to [54635], [54638].

Props kebbet.
Reviewed by SergeyBiryukov, ryelle.
Merges [54645] to the 6.1 branch.
Fixes #56703.

#31 @sabernhardt
18 months ago

  • Focuses accessibility added
  • Keywords commit dev-reviewed removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

The SVG still needs aria-hidden, as it has had in 6.0 (changeset:53383 / ticket:55532#comment:13).

I'd also like to consider changing each path element to circle and removing the clip-path so the image can be much smaller. (I could convert the Freedoms image to circles, too, but the Credits and Privacy SVGs are more complicated.)

@sabernhardt
18 months ago

adding aria-hidden, focusable and viewBox attributes; removing clip-path; converting path elements to circle

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


18 months ago

#33 @ryokuhi
18 months ago

  • Keywords needs-design-feedback added

We reviewed this ticket today during the Accessibility Team's weekly bug scrub.

The changes suggested by @sabernhardt regarding the aria-hidded, the focusable, and the viewBox attributes are needed.

Regarding the use of circles instead of paths, such a change would make the file sizes much smaller.
It would probably be easier if someone from the Design Team with the source files could make these changes.

#34 @ryelle
18 months ago

  • Keywords commit added; needs-design-feedback removed

Patch 56703.diff looks good, I don't see any visual change from using circle and the file is notably smaller. I'm going to move the conversation about the other About images over to the About page ticket though.

#35 @ryelle
18 months ago

In 54662:

Help/About: Update the About header image.

When used inline, the SVG needs the aria-hidden, focusable, and viewBox properties for accessibility. Additionally, this optimizes the SVG by using cirlce elements in place of path, and removing clipPath. There is no visible change, but the file is now one-third the size.

Props sabernhardt.
See #56703, #56357.

#36 @ryelle
18 months ago

  • Keywords dev-feedback added

Marking [54662] for backport after a second committer review.

#37 @SergeyBiryukov
18 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[54662] looks good to backport.

#38 @ryelle
18 months ago

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

In 54677:

Help/About: Update the About header image.

When used inline, the SVG needs the aria-hidden, focusable, and viewBox properties for accessibility. Additionally, this optimizes the SVG by using circle elements in place of path, and removing clipPath. There is no visible change, but the file is now one-third the size.

Props sabernhardt.
Reviewed by SergeyBiryukov, ryelle.
Merges [54662] to the 6.1 branch.
Fixes #56703. See #56357.

Note: See TracTickets for help on using tickets.