Patterns explorer experiment #35006
Patterns explorer experiment #35006
Conversation
ntsekouras
added
[Type] Experimental
ntsekouras
requested review from
mcsf,
youknowriad,
ryelle,
mtias,
jameskoster,
kjellr,
jasmussen,
paaljoachim and
a team
|
Size Change: +1.89 kB (0%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
|
I personally love this a lot. The preview with parent is awesome as well. Why would this need its own modal and not an expanded inserter panel? |
|
This looks very interesting! |
|
I recall seeing some thoughts @jameskoster poured into this, which might go well for the design side of things. |
|
Thanks for the ping @jasmussen, I did a lot of work around patterns earlier in the year, but nothing like a dedicated "Pattern explorer" modal as we see in this PR. To @draganescu's point, there seems to be considerable overlap in terms of purpose with the "Patterns" tab in the inserter. I'd be in favour of exploring how we might align any enhancements in this PR more closely with the the existing UI. I seem to recall seeing some designs suggesting how it might be possible to invoke a modal from the Patterns tab in the Inserter. I can't find them now though 🙈 FWIW we originally had this design for surfacing contextually relevant patterns based on the selected blocks: I still think there's a lot of value there. So if we also like the idea in this PR of being able to preview a pattern relative to the selected blocks container, we may need to think about an interface that caters to multiple pattern selection flows. E.G. If I've selected two Images in a Column, I may want to see either:
We also had this issue for moving the existing pattern suggestion interface to a modal: So I certainly see potential for multiple applications of patterns-in-modals. |
|
Here is the issue in regards to the Pattern "expander" #26905 |
|
I wonder if it's worth connecting this PR with #26905, and concentrating solely on the tab -> modal interaction? That could lay the foundation for moving other flows to modals, and that's where we can explore the more intricate elements like contextual previews. Should we also circle back to #28574 for the full-screen modal component? There were some enhancement there for mobile that may be worth bringing in. |
|
For this experiment I had #26905 in mind from the start. I just wanted to trigger discussions and get feedback. We should certainly make many iterations on things of this experiment. I can create a separate PR for the above issue. Does the design there looks good, or needs polishing? |
|
If we use the full screen modal component I think that design seems like a decent starting point from which we can polish. I have some reservations about using tabs for filtering – if there are many categories, the tabs will end up wrapping on smaller screens which always looks a bit awkward. Maybe we can just use the dropdown select from the current Patterns tab to begin with? We should probably bring the search input in to the modal as well. Another thing we'll need to think about is the breakpoint at which this expanded view is accessible – the Inserter switches to full screen at <782px, so we can probably hide the expanded view there. Finally we'll need some good defaults for the rows/columns. A scale slider might be good to try similar to:
But we can probably do that in a follow-up :) |
|
I tracked down some of the design work that @shaunandrews did around this 'expanding patterns grid' idea. He hypothesised using some alternative modal patterns for this purpose: modal.alternatives.mp4Perhaps some more design exploration would be beneficial here before going too much further? |
|
When the wporg pattern directory was first being designed, @shaunandrews mocked up a possible new UI for how the pattern inserter would work, loading in patterns & categories from the wporg directory (not just featured/core), plus added searching ability & pulling down favorites. In this case, the sidebar is the categories, and the main panel is a grid of patterns, since there might be many patterns when they're loaded from wporg. I don't honestly know how far along this design is, but wanted to flag it too.
|
|
My initial thought is that we probably need both:
I don't know if these affordances live in the same thing, or if any design exploration that combines them was ever undertaken? |
|
From the initial discussions (back in March), there was no difference in source - local and remote/pattern-directory patterns would both show up here. IIRC, the local patterns would be weighted higher in the results list, but otherwise the two sources would be rendered the same. So this exploration does already combine the two ideas. |
|
I assume as the [Patterns]: Browse Patterns in a Modal #35773 has been merged that this PR can be closed? |
|
I think there's some improvements we could look at bringing to the newly merged modal:
Otherwise, I think this PR is no longer relevant. |
Related: #26905,
This is way far from being good and functioning properly but it's an experiment for a
pattern explorer. The poor design is just for demo purposes and just wanted to gather feedback if any of these parts makes sense to integrate.We could just keep part of this functionality with changes or nothing at all 😄
The flex layout I've used is not good and I'm attaching a video with okayish dimensions to show the functionality.
I've added a
buttonfor now in theheader of post-editor, next to thelist viewicon (it was easier for me to one-click).The main new functionality would be:
Columns), you can togglepreview with parent blockand can see how it looks where it's going to be inserted.Screen.Recording.2021-09-21.at.3.55.46.PM.mov