Try drill down for pattern inserter #61518
Closed
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
draganescu
added
[Type] Enhancement
|
Size Change: -416 B (-0.02%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
5b7a8a7
to
d87890a
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
This comment was marked as resolved.
This comment was marked as resolved.
|
Still to do:
|
|
Tested this out and the biggest pain point I found is getting back to all categories as once you start scrolling the back button disappears, along with the title of the category: drill.down.pattern.movSince it's a fairly small section to return to, it's cumbersome to have to scroll all the way back up to see more. |
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
ea6aa9c
to
acfb0d8
Compare
jeryj
reviewed
May 20, 2024
packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
Outdated
Show resolved
Hide resolved
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
a098115
to
f1bca98
Compare
|
I'd be good to get this in as soon as possible, so it can be used in #61489. Even on its own this is a nice change for 6.6. Are there any blockers? |
It's a pretty big change; I'd like more input from @WordPress/gutenberg-design especially. |
|
I made the case for using the drilldown pattern when this was originally implemented, so it's a 👍 from me in general. Another option could be something like to the block inserter, but with collapsible panels. Similar to Figma's asset browser. 
But on balance I suspect the drilldown would work better. |
|
In terms of UI there is a discrepancy between how the search box works and how it is displayed between tab panels. Since we moved it inside each tab panel these two are to be solved:
|
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
d2039da
to
8d1ce35
Compare
|
The main motivation is to free up space for the canvas to be visible when you're building with patterns, especially in context where the inserter stays open as you build. That's valid enough, and if those pieces come together, this drilldown mechanism can work for it. Here's trunk:
Here's this branch:
The issue Anne notes appears addressed. The main tradeoff here is that it's hard to quickly get a sense of all the patterns in the various categories. That's actually a biggish tradeoff, and it's not clear it's worth it to me. I do wonder, can we apply this drilldown pattern only to smaller viewport sizes? If we do move forward, the media tab needs some love too:
|
|
Anecdotally, just today I went browsing to look for a nice pattern, and I had this branch checked out. I immediately switched to trunk because the clicking in and out was not a great way to browse. |
This was referenced May 22, 2024
|
Imo, if we do this, the pattern category selector should be be a select box at the top vs a drill down. That would solve the problem @jasmussen is describing I think. We need to think data views more here? |
|
I'm not sure the dropdown would help. It's still two clicks and lacking the clear context of the category I'm already in. As noted, I don't know I'm suggesting this to be a blocker, it's ultimately a tradeoff, but at the moment I'm leaning towards finding ways to fit the inserter with the opened "tray" better on screen, than using the drilldown, or dropdown. |
This was referenced May 22, 2024
|
@jameskoster The previews are probably a bit too small? |
|
Potentially yes, it will likely depend on the pattern/category. The number of columns could be easy to adjusted, even by the user (which is also something we want to add to data views: #60630). |
|
@jameskoster the previews in the data grid mockup you linked to are less than the two column previews from search results available in For what we assume is an seeking behaviour to complete a set (to assemble the page with good patterns) having many small previews in a constrained space is less useful than having few large previews because it's very easy and common and expected to just scroll. I think the argument above is correct, but I do concede that having more than one in a view could be useful so it's not perfect. Yet, it's a good tradeoff considering the UX we aim for should resemble assembling a stack rather than finding waldo so each one larger is better than many of them smaller IMO. |
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
427f5e0
to
436409e
Compare
|
@draganescu I think it's a bit more nuanced; we should be aiming to create UIs that can adapt contextually, rather than optimising only for one specific flow. When you're initially building a page I agree the pattern browsing experience is better when the previews are arranged into a single column. But when you're searching for a specific pattern you've used before, a multi-column layout (or even a list) might be easier to scan. The benefit of using data views is that it empowers both the consumer and the user to craft a UI that best suits any given activity. Anyway, I appreciate it's a rabbit hole, and way beyond the scope of this PR :D |
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
436409e
to
23a82e8
Compare
…l panel for patterns
…nt name that makes more sense, moving content outside of header wrappers
Todo: - not sure about the roles. I don't think tree is right, but menu didn't seem right either - Should probably pass an aria-label instead of fixing it as "categories" - CSS cleanup
The showPattern and showMedia and related constants were not needed in menu.js. Also, they were using children to render inner content which has also been removed.
draganescu
force-pushed
the
try/single-panel-pattern-inserter
branch
from
23a82e8
to
bed82a3
Compare
|
I will close this PR because as it stands it showed both the opportunity and the limitations of the UX. Given that the overall page pattern assembly is still being developed as an experiment we should probably tackle this as part of that work connected with those flows - unless the current UX proves tweak-able enough to become just right (*)
|
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.
What?
Enables on large viewports the same drill down navigation we have in the site editor sidebar and in the small viewport for inserter categories, and in the process removes the preview pane.
Why?
The preview pane is not very useful: it creates another content area to skip for focus management, and it uses a lot of viewport area which is quite precious for assembling patterns (e.g. it should be possible on a large viewport to have both the inserter and the inspector open and assemble patterns). All that just to keep the category list available.
How?
Testing Instructions
Testing Instructions for Keyboard
N/A
Screenshots or screencast
new-inserter-explorer.mp4
Known Issues