Implement welcome guide modal #18041
Implements the welcome guide modal described in #16315 (comment).
How to test
Unit and E2E tests are included. To manually test the upgrade process, follow these steps:
Would it be possible for the
Separately, it looks like #12632 would still be effected by this tips redesign. AFAICT, the close button here is dismissing all guides instead of just the current "guide".
Good suggestion! I'll look into this.
@mapk: Do you think a guide component would be useful outside of WP Admin? If so, then I think we should consider putting
Thanks for pointing me to #12632. I'll look into moving away from
YES! Adding this to
I really like how this is shaping up! Great work. Here's some design feedback:
1. First image needs to be centered better.
The webpage in the graphic feels like it's not quite centered. Even the blocks in the webpage don't look centered.
2. First two graphics should be equal width.
I think this may help visually if both graphics in the first two images are equal width within the blue container.
3. Should we capitalize certain things?
"Block Editor" or "Block Library" seem like proper nouns. For example, we capitalize Block Library in the sentence, but not in the heading of the third screen.
4. Second screen text addition
Should we mention that you can move the block toolbar to be fixed at the top of the screen for less visual distractions?
5. This icon can probably use some visual cleanup.
Also lets make the triangle white to match the popover graphic too. Right now it's grey.
I think these last few changes will dial it in beautifully.
Hey @noisysocks! This is looking great!
Would it be possible to align the close button so it has the same space around like the previous and next/get-started buttons?
I also noticed that the hover state of the page control buttons looks a bit off. It looks like the right border is missing half a pixel (I'm on a retina display).
I was able to interact with the welcome guide using only my keyboard
I also did a quick test with Voice Over and had a couple of issues:
The page control buttons could use an
I'm thinking these could be grouped on a
I don't think the images need an
Overall, this is looking great! Let me know what you think of my comments and suggestions.
I would absolutely love it if you could update the images for me! I got the SVGs from @jasmussen, who I think exported them from the 'Tips Iteration' project in the WordPress.org Figma team.
I'll defer to you all on this one. Let me know what you'd like the copy to be and I can update it.
I updated the alignment in 47c2879, though I wonder if doing this makes the X button look too much like 'content' instead of 'chrome'? Let me know what you think.
The images already have an empty
Let's look at making the welcome guide use something other than
The modal is not labelled. This is in part a problem with this modal, but should probably be corrected in the component: the Modal component allows the component to be misused.
We should enforce a label for the modal element with role=dialog within the e2e tests, because all modals must be labelled. Additionally, the modal component should enforce 'role="document"' on the content of all modal dialogs. This isn't strictly required on all modals, but the component can't know what type of content a modal will contain, this will give the best overall experience.
There are usability problems with having this modal open automatically on page load.
One possible way that this could be made available is to add a prominent button for users to launch the Welcome Modal if they are detected as new Gutenberg users. The modal, in that case, should have two cancel actions: one that simply closes the modal, and one that dismisses it persistently.
As a second issue, the method for assessing whether a user is "new" to Gutenberg is significantly flawed: the usage of local storage for this means that a user will be new on every device they use, on every browser they use, and on every new site they launch. Secondarily, because the detection appears to be based on the positive presence of 'modal dismissed' setting in local storage, it will essentially be impossible to permanently disable it; anytime the local storage is flushed it will come back. (See #15105)