Try more opinionated query block patterns #30763
Conversation
kjellr
added
[Type] Enhancement
|
Size Change: 0 B Total Size: 1.43 MB ℹ️ View Unchanged
|
|
Visually, these patterns look good to me 👍 |
|
Just ran through on http://gutenberg.run/. There isn't a block-based theme available on the generated site, but I was able to add query blocks into pages and test it out. It took me a minute to get them all working, which might be a problem just because I'm testing with pages, not templates — I had to toggle off the "Inherit query from URL" setting for the blocks to work correctly on the grid and list patterns. The offset one is unselected by default. Also wish I could adjust the width on the grid one; the others have containers, but this pattern isn't wrapped in a group or anything. Otherwise, still lookin' good 👍 |
Yeah, I think in general we'll want the inherit query setting to be on by default. The offset pattern is a bit of a special case, because it needs the inherit setting off to work right out of the box — It's actually two query blocks, but one uses an offset values, as per the idea here.
Yeah, that should hopefully be available once #29289 (or something similar) lands. |
|
Took this for a spin. These look good! This is what I see:
I do wonder if we should be color agnostic in query patterns, though. I feel like that may be one opinionated step just too far, mostly because when global styles comes out in full swing, background and text color feel like they should be defined site wide, not on a per-query/per-template basis. Another question: how many patterns are the right amount? Maybe the amount is a non-issue, once we get the carousel. But just looking at this, it feels like a lot of choice and implicit complexity right up front:
☝️ that one also speaks to the need for a max-height so the items can look harmonious next to each other. I'll see if I can fix that squashed "start blank" button. |
Your theme has got some tall separators! 😄
Yeah, I'll swap those out to hex values just to be totally sure.
I agree that global colors make sense, but I'm pretty sure there's no way to actually hook into global color settings in patterns at the moment. Maybe that's something we need a new issue for. 🤔 In any case, only one of these patterns uses colors, and it's just black and white. Plus, in the near term I think being a bit more opinionated really helps show what's possible. We did that a bit with the new block patterns — many of those include colors.
Eventually, these won't be bundled here at all — they'll be in the pattern directory. So for the time being, I think it makes sense to create a bunch, cycle them in and out to test them in Gutenberg, and migrate them over to the pattern directory when that's ready. |
Actually I meant that background and text color is something you set on the equivalent of the But I'm happy to test this! |
|
One other question for folks: How should we label query patterns? Now that they're in the main inserter, generic names like Small, Medium, and Large seem a little confusing. I generally feel aimless when coming up with pattern names but maybe something like this works?
|
|
I always try to keep the names as small as possible. While the descriptive can be helpful, once you have a hundred patterns that all have similarly generic descriptions, I find the value of such titles becomes diluted, and the simpler ones win out. Could be Small, Medium, Large, Grid, Offset, Large Title. I may be oversimplifying, but I do tend to try and start simple. Adding complexity is always easier :) |
|
Sounds good to me. I've pushed a couple commits to use hex values, and simplify those names. 👍 I think these should be in a decent spot for merge if we're into them. As noted above, all of these are just temporary anyway, so I'd love to see us start cycling them in and out to test the possibilities. |
|
I pushed a quick update to remove the "Small" pattern. That one is pretty similar to the new "Large Title" pattern anyway. This gives us a pretty diverse, but concise group for now:
|
|
I find it strange to focus on size of the image. As image size should be adjusted as part of the customization of the design. |
This PR should give us a head start on some of the patterns proposed in #30508. Many of the ones in there aren't possible quite yet, but I pulled out a few that are. These are all a bit more complicated and opinionated than the default ones added in #28891, so I think they'd provide a nice additional set to test with.
This PR adds three new Query Block patterns:
They're mostly working just fine, though there are a few small quirks related to spacing in between items.
Screenshots