Try: Show two columns of patterns. #28322
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
jasmussen
added
the
[Feature] Inserter
|
Size Change: +112 B (0%) Total Size: 1.41 MB
ℹ️ View Unchanged
|
|
Thanks for spinning this up so quickly! Tested via gutenberg.run and it works as expected. I appreciate how this layout strengthens the relationship between the quick/sibling inserter and the main sidebar inserter and allows me to view more pattern options at once (see my comment here for a demo of what more patterns might look like based on the current experience with WordPress.com's larger pattern library). Curious to hear if others think this might help set us up for better pattern browsing as the Core pattern library grows. |
|
This looks excellent. In this example all the patterns have the TT1 green background, what happens when a pattern has a white background? Adding a little border or something like that could help prevent it from blending into the rest of the inserter panel. Otherwise I dig it! |
|
I like that it's easier to scan through a bunch of patterns, if they exist, but I I kind of miss the bigger previews. Either in this PR or a new one, it could be nice to display a larger flyout preview when hovering/focusing the preview. -- Not for this PR, but there could be an interesting followup using math to output some sort of tiled view, mixing full-width and half-width; something based on the rendered height, maybe. |
|
@hedgefield Great point about adding borders to the patterns. In my original mocks, I explored a borderless direction to carry over our existing styles in the Inserter which align with our treatment of Block Icons over in the Blocks tab (no borders except on hover), but I agree that adding a border could help with identifying pattern boundaries. Perhaps something like an inset shadow below the pattern to act as a border for any patterns with a transparent background color? Here's what that could look like (the "Call to action" and "Quote and logos" patterns have background colors, the rest do not):
@shaunandrews Great suggestions.
Were you thinking of something like the block preview? Here's what that could look like with the styles carried over from the block previews for blocks (left-alignment + heavier font weight for block/pattern name):
I really like this idea. It'd be especially helpful for shorter patterns, like Headers or Footers, which look quite squashed at half-width size. Here's a demo of how it could look:
The first full-width pattern has a pair of patterns above it that aren't quite the same height (so there's a larger gap between the second/right half-width pattern and the full-width one), and the second full-width pattern has a pair of patterns above it that are better matched in height. If we can somehow calculate pattern heights to pair similar ones together, the mixed half- and full-widths might work nicely. Can anyone chime in on the feasibility of that? |
|
Specifically regarding borders, this PR doesn't touch what exists there, so borders remain.
✨ |
|
I'd still love to see this one merge. |
jasmussen
force-pushed
the
try/two-column-patterns
branch
from
9e2c8d3 to
3709d33
Compare
|
Rebased. |
|
Rebased for testing and in my setup (with WP 5.8 RC 1) I see only one column. I tested in the site editor and in the post editor. |
|
Thanks for testing Andrei. I still think there's a place for this one, but it's lingered for a bit and probably drifted. Since it's no longer working, I'll close it for now. But let's keep the original issue open so it doesn't fall off the radar. |
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 takes a stab at one half of #28312, showing two columns of patterns in the main inserter, just like we do in the sibling inserter:
The purpose is to show the breadth of patterns, when there are a lot of them. Combined with the drag and drop that was recently added, to me this feels worth trying.