[Patterns]: Browse Patterns in a Modal #35773
Merged
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
ntsekouras
added
[Type] Enhancement
ntsekouras
requested review from
ajitbohra,
chrisvanpatten and
ellatrix
as code owners
|
Size Change: +1.55 kB (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
ntsekouras
requested review from
youknowriad,
ryelle,
jameskoster,
mcsf,
mtias,
shaunandrews,
priethor,
paaljoachim,
jasmussen and
annezazu
mcsf
reviewed
Oct 20, 2021
packages/block-editor/src/components/inserter/block-patterns-explorer/search-results.js
Outdated
Show resolved
Hide resolved
I know :) I made the PR to gather the design wise feedback first. I'll have to check the performance and make adjustments like moving state in lower levels etc.. |
|
This looks very interesting! This is what I see.
Tool tip says "Pattern explorer". Should it instead say "Explore patterns" ? Clicking the extender (what I call it) I see the Pattern explorer. Gallery of patterns.
What if we instead of having a black button for selected area just use an underline (and overline). Sidebar links should be sticky/fixed in place so that scrolling will keep the links visible in the sidebar. So one would not scroll a long page of patterns and need to scroll up to change to another pattern category. I assume when clicking to add a pattern that the extender would automatically close (and Block inserter would close) so that we can see the new pattern added to the canvas. It is a very nice beginning Nik! Good work! |
|
Just tested! Excited to see this coming together. Personally, I don't find the icon used to open this up to be the right one (not sure if design came up with this though but wanted to note) - it feels very easy to not find or use as a default experience. As for the UX, it's mostly smooth but I found lots of double scrollbars that made the experience very janky: scrollbars.mov |
|
Very cool. In addition to the scrollbar issue Anne mentions, I think there's a few other things to do to make this ready: -- I think the Fullscreen icon probably isn't the best way to expose this modal. Instead, a button is probably the best option.
-- The modal's sidebar shouldn't scroll with the rest of the modal. -- The menu in the sidebar should stretch to the same width as the search. I think it would be nice to add a Newest item, and group it with Featured. Then the categories would be grouped under that.
If it helps, here's a redline from the design file for the spacing around the sidebar menu. My designs have the sidebar at 240px, with the grid of patterns taking up the remainder of the space.
-- Here's a design for the modal showing a section title, a "sort by" dropdown menu, the grid of results, and a pager:
The "sort by" dropdown probably isn't necessary, though I imagine it could be interesting to sort by newest first, oldest first, most favorites, insertions, and more. -- It would be nice to add a light-gray border around the pattern previews (not including the pattern name). When hovering/focusing a pattern in the grid, the border should turn blue (primary color) and an overlay+button could appear to help explain what happens when you click:
In a follow up PR it might be nice to add a second button to this hover to "Learn more" about a pattern. Clicking the learn more button would display the pattern detail page in the modal; This isn't necessary for this first pass of the feature. |
|
Here's a quick video of how the above designs come together: Pattern.Browser.mp4 |
|
Thanks for the feedback! I'll work on some updates. Just noting though that the concept of |
ntsekouras
force-pushed
the
try/pattern-explorer-modal
branch
from
dec08cf
to
40e63de
Compare
|
I think we need an outline on patterns in their resting state too. Otherwise the grid feels poorly defined when there are lots of patterns with white backgrounds:
|
|
Yup the design above suggests a border for the resting state. |
…ns at breakpoints.
- Moving the margin to the bottom and increasing it to give the list some room to breathe. - Removing an unnecessary position, background, and transition. - Adjusting the title's padding to only apply to the top and adding a hover state.
… other spacing in the sidebar.
… pattern item in quick inserter results
ntsekouras
force-pushed
the
try/pattern-explorer-modal
branch
from
cd47a54
to
e0210ce
Compare
mcsf
approved these changes
Nov 5, 2021
packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
Outdated
Show resolved
Hide resolved
| return ( | ||
| <Heading | ||
| level={ 2 } | ||
| lineHeight={ '48px' } |
There was a problem hiding this comment.
Minor note, but what could we do instead of keeping this magic constant?
There was a problem hiding this comment.
I expect this would go away as we iterate more; Right now it helps resolve a visual imbalance when searching, but I expect the headings to change (like adding descriptions or actions) as we add them to the other parts of the browsing experience.
paaljoachim
approved these changes
Nov 5, 2021
paaljoachim
added
Backport to WP 6.6 Beta/RC
andrewserong
pushed a commit
that referenced
this pull request
Nov 7, 2021
* [Patterns]: Paterns explorer in modal * add search results header info * Update packages/block-editor/src/components/inserter/block-patterns-explorer/search-results.js Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> * fix lint error * small design changes * Refactor patterns tab/explorer for performance * Moving hover and focus styles to the preview container. * Specifying a gap for the Grid component. * Updating the button label to Explore and using the outlined style of button. * Visual tweaks to the inserter modal - No need for custom styles on the explore button. - No need to separate the Featured tab on its own. - Switching from 3 to 2 columns for the list. - Increased the max-height and ensured no scrolling within the preview container. * adjust min-height in quick inserter * remove commented line * Adjusting min/max height for previews in the modal and changing columns at breakpoints. * More visual tweaks to the patterns list. - Moving the margin to the bottom and increasing it to give the list some room to breathe. - Removing an unnecessary position, background, and transition. - Adjusting the title's padding to only apply to the top and adding a hover state. * Increasing the space between the dropdown and the button to match the other spacing in the sidebar. * Using the Heading component and adding a className to the list container div. * Absolute positioning the explorer sidebar to allow for independent scrolling. * hide explore button when inserter goes full width + small css fix for pattern item in quick inserter results * address feedback Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> Co-authored-by: Shaun Andrews <shaun@automattic.com>
|
Cherry-picked into the GB 11.9 release in 8c598f4 |
ntsekouras
added
the
Backport to WP 6.6 Beta/RC
|
This made it into WP 5.9 because it landed in |
noisysocks
removed
the
Backport to WP 6.6 Beta/RC
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.
This PR is another experiment for a better pattern insertion experience with the related design: #35006 (comment).
Related issues (#26905, #35274, #31153)
Different pattern explorer experiment: #35006
Show case
Screen.Recording.2021-10-20.at.12.43.27.PM.mov
Notes
Clicking a pattern in the modal (if you have search anything) will not close the modal and is known.