FSE: Add welcome guide #36172
Merged
FSE: Add welcome guide #36172
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Mamaduka
added
[Feature] Site Editor
|
Size Change: +1.55 kB (0%) Total Size: 1.09 MB
ℹ️ View Unchanged
|
Mamaduka
force-pushed
the
add/site-editor-welcome-guide
branch
from
2208939
to
8be664f
Compare
noisysocks
added
the
Backport to WP 6.7 Beta/RC
|
Hi, @javierarce I think we might need to adjust the graphics. Currently, the "Close dialog" button overlaps with them. Plus, if the designs are final, can I also get static versions of them? P.S. I can also adjust the modal design in CSS, but then "Lear more" might have too much space around it. |
|
This is working well for me. The only thing that feels a bit strange is the "Try" label in the primary button(s). The welcome guide in the Post Editor says "Get started" – we can probably mimic that here? Edit: One issue I noticed – clicking "Welcome guide" in the ellipsis menu of the Top Bar doesn't open the welcome guide like it does in the Post Editor. |
|
One other thing, the graphic that appears on the editor welcome guide feels a little too heavily weighted towards styles, considering we have a dedicated styles welcome guide as well. I wonder if that graphic could focus more on the template editing aspects of the site editor? Re-arranging the header, adding a sidebar, something like that? What do you think @javierarce ? |
Mamaduka
force-pushed
the
add/site-editor-welcome-guide
branch
from
ebda8ac
to
0d2a677
Compare
|
I think it's in good shape code-wise; it just needs final designs and review. |
Oh, sorry, I didn't notice this. I'll adjust the animations and add some space around them, maybe something like this:
Yes, once I finish the changes and they get approved, I'll add the static versions.
I think you are right, @jameskoster. I'll work on a new animation. |
|
Here are the three style-related gifs with more space on top for: Welcome to styles
Set the design
Personalize blocks
|
|
Here are the static versions (on SVG) for the previous animations: |
|
Here's the fourth gif for "Edit your site." Let me know what you think, and I'll upload the SVG version:
|
|
That is egg-cellent 😇 |
Haha… thanks, @jameskoster! Here's a zip with all the static assets: static_versions.zip |
|
Thank you, @javierarce. |
|
Re-opened track ticket so we can host assets on WP.org - https://meta.trac.wordpress.org/ticket/5741#comment:13 |
|
Assets deployed to WordPress.org. |
|
Thank you, @dd32. |
Mamaduka
force-pushed
the
add/site-editor-welcome-guide
branch
from
0d2a677
to
e4dc7fc
Compare
Mamaduka
force-pushed
the
add/site-editor-welcome-guide
branch
from
e4dc7fc
to
78ea3d9
Compare
|
@javierarce updated the styles as you suggested. |
Thanks, @Mamaduka! I think this PR is good to go then. |
|
Thanks, @javierarce. Can I get an ✅ if we're good to merge? /cc @jameskoster |
|
😍 Love this. Great work! |
talldan
reviewed
Nov 16, 2021
| editSiteStore.name | ||
| ); | ||
| const isStylesSidebar = sidebar === 'edit-site/global-styles'; | ||
| const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide'; |
There was a problem hiding this comment.
@Mamaduka I noticed that if you go into 'Styles' first (having never seen either welcome guide), the 'Welcome to Styles' welcome guide displays as expected.
You might then do some editing with the styles sidebar still open.
But then when you close the styles sidebar you also get the 'Edit your site' welcome guide, which feels out of place.
Not sure what the right solution would be here. 🤔
Maybe the 'Edit your site' welcome guide shouldn't ever show when visiting the Styles link. Or maybe when visiting the Styles link, a Welcome guide that combines both 'Edit your site' and 'Welcome to Styles' should be shown.
There was a problem hiding this comment.
@talldan, I agree it's a little confusing.
I can use the query argument styles=open for this logic. Or maybe we should combine welcome guides since it's the same screen, just different entry points.
We can switch back to separate Welcome Guide modals once the "Global Styles" has a dedicated screen.
@jameskoster, @kellychoffman, what do you think?
noisysocks
removed
the
Backport to WP 6.7 Beta/RC
noisysocks
pushed a commit
that referenced
this pull request
Nov 22, 2021
* FSE: Add welcome guide * Fix e2e tests * Split welcome guide * remove extraneous full stop * get started * Close styles welcome guide for e2e tests * Add tools menu item * Update assets * Adjust styles * Fix new e2e test Co-authored-by: James Koster <james@jameskoster.co.uk>
|
@Mamaduka any chance you could kick off a new PR to link the support doc I'm working on to the welcome guide? The URL will eventually be: https://wordpress.org/support/article/styles-overview/ |
7 tasks
33 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds Welcome Guide to the Site Editor.
Fixes #32844.
Todos
How has this been tested?
To display editor modal enter this snippet in DevTools console:
To display welcome guide for Global Styles, open styles panel and then use this snippet in console:
Screenshots
Types of changes
New feature
Checklist:
*.native.jsfiles for terms that need renaming or removal).