Zoom out: try pattern inserter instead of starter pattern modal for new pages #61489
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
ellatrix
added
[Type] Experimental
|
Size Change: +303 B (+0.02%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
MaggieCabrera
force-pushed
the
try-pattern-inserter-2
branch
from
b0f5bb9
to
7024e02
Compare
ellatrix
force-pushed
the
try/starter-pattern-inserter
branch
2 times, most recently
from
fd4fcda
to
5d9f316
Compare
scruffian
force-pushed
the
try/starter-pattern-inserter
branch
from
34379ec
to
299e7d4
Compare
|
Something isn't working quite right on this PR when I test with playground: testing.zoom.out.inserter.movOpens to the Inserter but I can't insert any patterns. That's because the focus isn't on the post content section :D What's the plan for starter patterns here? I think I would be more into this PR if we surfaced starter patterns still and dropped folks into the Editor. Speaking personally, I find it really annoying to have to close out of the starter patterns nearly every time I create a page (usually for testing purposes but this is true when I'm generally creating content on my sites) and this would work around that nicely while still surfacing patterns. |
|
The rebase probably broke it |
|
Quick question -- will this open to a dedicated set of patterns with a category set to starter patterns? I think that's our best bet here rather than just opening up to all patterns as it seems to based on the GIF above in the PR description. |
|
That's exactly what the PR does, the GIF is old. I haven't had the time to update it, this is the last thing we did obviously Friday and I've been working non stop on other stuff sorry |
ellatrix
force-pushed
the
try/starter-pattern-inserter
branch
from
299e7d4
to
c1356cd
Compare
|
Fixed the site editor, and updated the GIF |
ellatrix
commented
May 16, 2024
ellatrix
commented
May 16, 2024
Completely agree, I personally also find that quite annoying. With #61518 it will be even better, because it will only take up one sidebar. I think a remaining thing to do for this PR is allowing escape from zoom-out when you click the canvas. |
|
I still can't get the PR to work well on playground for testing, particularly within the Site Editor. A quick clip for awareness: GB.test.movIn any case, the drawbacks I see in this approach are:
I do think #61518 will help with nudging folks but the previews are going to be pretty limited. Still worth trying and, to me, with the tradeoff compared to needing to x out of the modal every single time. |
|
How do I test this in the https://playground.wordpress.net/ ? In general it would be better to not have something take over the full screen when creating a new page. Having something that gives a hint about starter patterns would be better. As one could quickly choose to open patterns and check for starter content. Most of the time I go with blank pages. Having to close something every time a new page is created becomes counter protective. So perhaps as one opens a new page the left Block Inserter could be open and Starter Content if there is one could be highlighted. As is mentioned in this comment by Ella: |
|
All the animation that occurs on load is a bit distracting, is there any way to skip it? Should we force-close the Inspector in this case? If the idea is to funnel folks into choosing patterns then it's also quite distracting. Initial focus is a bit unexpected to me, should it be the first item in the list of patterns rather than the Patterns tab itself? |
5 tasks
|
After having setup a new site for a client two days ago to where I added in a lot of blank pages it became annoying having the add new full page pattern/template come up for every new page I made. Anyhow after having clicked the X to close the starter full page patterns popup/modal I then see this screen.
Then I began thinking about the Editor in selecting example Front Page template how the sidebar looks like when the Header is selected and one has access to a Design panel.
In regards to consistency and how we get used to accomplish various tasks it is good to repeat the UI where we can. This way one will see the design panel exists in the sidebar just like the templates have it. |
scruffian
force-pushed
the
try/starter-pattern-inserter
branch
from
c1356cd
to
0ed4d3e
Compare
scruffian
reviewed
Aug 1, 2024
scruffian
reviewed
Aug 1, 2024
| useEffect( () => { | ||
| // Should reset the modal state when navigating to a new page/post. | ||
| // Should reset the start page state when navigating to a new page/post. |
There was a problem hiding this comment.
I'm not sure if this is ever possible?
There was a problem hiding this comment.
If you create a new Page in the Site Editor it's possible.
As this setState will run after render, we could avoid this by using usePrevious with each of the dependencies here and then call setIsClosed immediately if they are not the same as they were previously.
There was a problem hiding this comment.
Actually it's not possible using the existing UI. But perhaps better to account for it?
scruffian
changed the title
getdave
reviewed
Aug 7, 2024
There was a problem hiding this comment.
Coming to this with relatively fresh eyes, it seems clear that removing the full page "Starter Patterns" modal is a step in the right direction.
I like the fact that in this PR, the user is immediately nudged into the "Page building" experience rather than it being a stark choice between inserting a full page pattern (users will see these like templates) or a blank canvas. That's good for new users as low level blocks are pretty overwhelming.
I think we need to do a better job of reducing overwhelm in this initial experience of the "Patterns" sidebar. This is outside the scope of this PR, but currently we have 14 categories - I think we should be aiming to reduce this down considerably, even if that's only for the "New Page" flow. For example, do we need Headers and Footers here?
I also wonder whether we should add a setting/option to allow users (or site owners) to disable this experience for "New Page" and be able to skip directly to the editing canvas. As several folks have noted, being forced into this flow is frustrating for more experienced users.
Personally I'm in favour of this direction, but not in favour of merging this yet. Why? Because this "Page Building" experience with Patterns + Zoom Out still feels too rough. We need to refine drag and drop and the interactions before we make this a primary experience.
I suggest we hold off on merge for now but have this PR ready to go once the experience has been polished.
scruffian
force-pushed
the
try/starter-pattern-inserter
branch
2 times, most recently
from
ca9a091
to
24785ab
Compare
scruffian
force-pushed
the
try/starter-pattern-inserter
branch
from
c86ab09
to
4a4b86b
Compare
getdave
force-pushed
the
try/starter-pattern-inserter
branch
from
de800b9
to
03679f5
Compare
getdave
reviewed
Sep 16, 2024
Comment on lines
188
to
200
| useEffect( () => { | ||
| if ( showInserterOnNewPage ) { | ||
| setIsInserterOpened( { | ||
| tab: 'patterns', | ||
| category: 'core/content', | ||
| } ); | ||
| __unstableSetEditorMode( 'zoom-out' ); | ||
| } | ||
| }, [ | ||
| showInserterOnNewPage, | ||
| setIsInserterOpened, | ||
| __unstableSetEditorMode, | ||
| ] ); |
There was a problem hiding this comment.
Do we need an effect here?
Select starter patterns Put category on top Capitalize Fix for empty starter patterns Fix label on open Fix for site editor simplify StartPageOptions Dont use the registry fix double import
getdave
force-pushed
the
try/starter-pattern-inserter
branch
from
08723fb
to
66ba934
Compare
draganescu
reviewed
Sep 20, 2024
There was a problem hiding this comment.
Some UX issues I want to highlight:
- This PR should also default the setting to "show template" to true
- The fact that the page says Add title - and I can even add it and edit it in the tiny zoomed out canvas is not great, particularly since so much of our starter content is meant for title-less pages
- Double click to exit zoom out is very unexpected when in the flow of assembling a page, and the worst part is that we don't offer a quick way back.
- I suggest we don't user double click to exit until we figure out a fluid way to get in and out of zoom out that keeps everything as it was
- Shouldn't this PR remove the Show starter patterns, or am I misunderstanding something?
- I still think we should collapse the inserter into one panel on medium viewports - it's such a waste of space to have this inert category list while I squint at so thin zoomed out content
- Why does switching a pattern category close the block inspector?
- Sometimes patterns dragged into the composition trigger "mobile" media querries, not sure how to repro
Unrelated to this PR
- drag and drop leaves a ghost when drag is initiated, which is good for small footprint blocks, but bad for large footprint patterns, one never gets to see the destination where they drag and scroll on drag is extremely finnicky
This was referenced Nov 7, 2024
|
Let's close this in favour of #66836. |
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.
Moved to #66836.
What?
Instead of showing the starter patterns modal when creating a draft page, this PR tries opening the patterns inserter instead (+ zoom out mode).
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast