Query Loop block: Bundle more text focused patterns

[annezazu]

What problem does this address?

During the 6.1 walkthrough @mtias noted the large number of image heavy patterns for the Query Loop block and shared a desire for more text focused patterns to balance out the mix.

What is your proposed solution?

Add more text focused patterns to the Query Loop block initial setup state/bundled pattern options cc @WordPress/gutenberg-design

[carolinan]

One of the difficulties with adding more text is creating a sentence like "Posted by (author name) on (date) in (category)", in the post template since it uses 6 separate blocks (that also need to be translation ready).
The blocks can only be spaced for example by placing them in a container block and setting blockGap on the container to use ch, a unit that is not available in the spacing control.

[mtias]

With more text focused patterns I meant more cases that don't use featured images so prominently and just compose the elements in different ways with interesting typography choices. For example:

Or uses featured images as a small thumbnail / square.

It might be fine to include a separate "Meta" block that constructs the sentence "Posted by ... on ... in ...", though you quickly start getting into cases of "how do I exclude author?" "how do I add tags?" "how do I show just parent category?" etc.

[annezazu]

Noting that I chatted with @andersnoren about his new theme and great post layout: https://wordpress.org/themes/beaumont/ He said he's game to have it reused for a core pattern for the query loop. Noting here so we can add this in perhaps to your PR @critterverse.

[ntsekouras]

@mtias @annezazu - these new patterns should be core ones or we want to bundle them in GB only?

[annezazu]

AFAIK these should match what we currently have in place with the query loop patterns but just allow for more options. @iamtakashi is working on creating these. How is that work progressing?

[ntsekouras]

these should match what we currently have in place with the query loop patterns but just allow for more options

Sorry but I need some clarifications about the above. The current Query Loop patterns are bundled in core. The plan is to keep them and add the new ones? Or the plan is to remove the old ones in favor of the new ones?

I guess we can fetch them as core patterns, as we're doing with other new patterns like the header.footer ones recently(that's a technicality that affects the dev side of things only).

I'm in touch with @iamtakashi and the patterns are ready. We just need to know where/how to add them 😄

[annezazu]

The current Query Loop patterns are bundled in core. The plan is to keep them and add the new ones? Or the plan is to remove the old ones in favor of the new ones?

Got it! My understanding is to keep them and add news ones bundled in the same way (aka as core patterns). @richtabor also has some ideas for patterns to include so adding him to this convo for awareness!

[richtabor]

I have a couple patterns to pitch:

Fullwidth with uppercase title: — Gist

Left aligned: — Gist

Fullwidth with date and bold title: — Gist

[ntsekouras]

Based on the direction of this issue, we'll aim to add them to Pattern Directory as 'core' patterns(also mark the WP version to 6.2) and fetch them from there.

@iamtakashi also please take a look at @richtabor 's suggestions above.

[annezazu]

Noting that looking at the above emoji reactions from various designers, including Matías, tells me we can move forward with Rich's suggestions! It would be excellent to have these make into 6.2 so just trying to unblock for now :)

[apeatling]

I've opened a new PR to add these as @critterverse's is now quite a bit out of date, I can go ahead and add @richtabor's above.

[apeatling]

Actually, @richtabor could you send me the source code for the query block patterns you posted above? I don't think I can just use the view source from above can I? I'm actually not sure. 😄

[richtabor]

Actually, @richtabor could you send me the source code for the query block patterns you posted above?

Just added gists to each one in the original comment. ✅

[apeatling]

Thanks. Also -- what do you want to call these patterns?

[richtabor]

what do you want to call these patterns?

Hmm, that's a tough one. 😬 I updated the source above with suggestions. We can adjust if need be once they all land.

[richtabor]

I've added the three I have here to the pattern directory @ryelle:

https://wordpress.org/patterns/pattern/left-aligned-posts/
https://wordpress.org/patterns/pattern/fullwidth-posts-titles-with-dates/
https://wordpress.org/patterns/pattern/fullwidth-posts-with-uppercase-titles/

[richtabor]

Ran into a snag with those patterns loading in the editor (WordPress/pattern-directory#552).

[ntsekouras]

Can we close this one or we wait for more patterns to be added? --cc @annezazu

[annezazu]

Let's close this out! More text based patterns can be added but we have three in place now which nicely moves this issue forward for 6.2 (I confirmed that I can find them with 6.2 beta 2). @iamtakashi feel free to add more outside of the 6.2 release cycle :)