Query Loop block: Add 8 new patterns #44163

critterverse · 2022-09-14T17:37:17Z

Follow up to #30763, closes #44140

It's been a while since we've updated the bundled patterns for the Query Loop block. I wanted to share a few new options, especially some more text-based options as discussed in #44140

This PR adds 8 new patterns for the Query Loop block. If we move forward with adding some of these new patterns, we may also want to go through and remove some of the existing image-based ones. Here are names and screenshots of the patterns added:

Post feed

Post list cards

Post table

Two column text list

Two column with tags

Colorful full width posts

Featured post with post list

More posts

Post and date list
(Adapted from Beaumont theme)

Note: the last three patterns are combinations of blocks that contain a Query Loop block within.

Testing Instructions

Open the site editor
Select the Query Loop block and select "Replace" from the toolbar to open the pattern explore modal
Check to see whether the new patterns appear in the modal
Insert the patterns and make sure they look ok in the template

Requested feedback

Let's figure out which of these patterns we'd like to add and which of the existing Query Loop patterns should be removed. cc @WordPress/gutenberg-design

lib/compat/wordpress-6.0/block-patterns-update.php

carolinan · 2022-09-14T22:17:35Z

I see that in this PR, the color slugs are changed to match Twenty Twenty-Three. Other core patterns use the background and foreground slugs. How can we keep this consistent so that the color works across themes?

I am wondering if instead of slugs, all the core patterns should actually use inline colors? By using a hex color, the color will always be the same no matter what the theme is -and the pattern can ensure that the contrast is always high enough by using both a text and background color.

carolinan · 2022-09-14T22:21:51Z

I wonder if the posts table would be confusing for users of assistive technology, since visually, it is a table without table headers, but it is not a <table>.

Colorful full width posts
It would be interesting to add contrasting hover states for these color blocks, but perhaps that is not possible without theme.json elements?

jasmussen · 2022-09-20T10:44:20Z

Nice, can we replace some of the existing patterns with these? Specifically for the query block, it seems like less is more.

critterverse · 2022-09-20T16:22:56Z

Thanks for the review @carolinan! I think I’ve fixed most of these notes:

References to my wordpress installation have been removed
TT3 color slugs have been removed (I think this has been updated to use the correct core color values but could use a double check here)
I updated the post title to be a link in all patterns where it wasn't already
Made one small tweak to "post feed" to remove some top and bottom padding (screenshot updated in the OP)

Colorful full width posts — It would be interesting to add contrasting hover states for these color blocks, but perhaps that is not possible without theme.json elements?

Really like this idea but haven't had a chance to look into it!

Nice, can we replace some of the existing patterns with these?

Definitely! Here's my list of what I think we should keep/scrap out of this PR and the previously bundled patterns:

This PR:

✅ Post feed
✅ Two column text list
✅ Two column with tags
✅ Colorful full width posts
✅ Featured post with post list
✅ More posts
❌ Post table (see Carolina’s note above)
❌ Post cards (not that visually interesting)
✅ Post and date list (Adapted from Beaumont theme)

Existing patterns:

❌ query standard posts
❌ query medium posts
❌ query small posts
✅ query grid posts
✅ query large post title
✅ query offset posts

carolinan · 2022-09-21T03:43:58Z

In theory, if a FSE HTML template file includes one of the previous patterns, what will happen to that template when the pattern is removed?
Assuming it is not saved but only in the HTML template.

There was some pushback when the core style variations were removed, because theme developers where using them, so I think this should be considered.
Maybe the patterns need to be kept but not available in the inserter?

lib/compat/wordpress-6.0/block-patterns-update.php

carolinan · 2022-09-27T12:48:36Z

I retested this today with WordPress 6.1-beta1-54319 and Twenty Twenty-Three.
I noticed one small difference between the screenshots above; in the "more posts" pattern, the separators do not have the same width, they are shorter, and centered.

Partial screenshot:

carolinan · 2022-09-27T12:53:33Z

I do not know if this is still considered for 6.1 since it was not completed before the feature freeze.
But I don't think that lib/compat/wordpress-6.0/block-patterns-update.php is the correct file to update? Should it not be wordpress-6.1?

critterverse · 2022-09-30T18:33:18Z

I noticed one small difference between the screenshots above; in the "more posts" pattern, the separators do not have the same width, they are shorter, and centered.

This pattern should now be updated with wide lines to match the screenshot.

I'm also adding one more pattern adapted from @andersnoren's beautiful new Beaumont theme based on @annezazu's note in #44140. The screenshot has also been added to the description for this PR.

There are a few things I wasn't sure how to move forward with:

But I don't think that lib/compat/wordpress-6.0/block-patterns-update.php is the correct file to update? Should it not be wordpress-6.1?

@carolinan I noticed this file doesn't exist in the 6.1 folder — can I just make a new file there with the same name? Do you think the older/existing patterns that we'd like to keep should be moved there as well, or those can stay in 6.0?

Maybe the patterns need to be kept but not available in the inserter?

I haven't removed any of the patterns mentioned for removal above because I wasn't sure where to move them in order for them to still be accessible in the inserter. Do you know @carolinan? Thanks again for all your guidance!

carolinan · 2022-10-01T03:29:42Z

I don't fully understand how the compatibility files work myself. -I am not sure if both the new and old patterns should be in a new 6.1 or 6.2 compat file.
I'll ping some contributors who has worked on lib/compat recently: @talldan @gziolo @scruffian

talldan · 2022-10-03T02:00:40Z

I don't fully understand how the compatibility files work myself. -I am not sure if both the new and old patterns should be in a new 6.1 or 6.2 compat file.

Yep, my understanding is it should be in 6.1 or 6.2 (the version that it will be released in). It would be a 6.2 folder if this can't be released in 6.1. A new folder may be needed for 6.2.

I think it'd be fine to copy the file over to that folder and make changes to it. Make sure gutenberg_register_gutenberg_patterns only contains these new patterns (removing any that are already in the 6.0 file). Update the list of patterns in gutenberg_remove_core_patterns to only contain the names of the patterns that should be removed in 6.2.

The final remaining task would be to require the new file in lib/load.php -

gutenberg/lib/load.php

Lines 64 to 96 in 6ffdde0

    
           // WordPress 6.0 compat. 
        
           require __DIR__ . '/compat/wordpress-6.0/block-gallery.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/block-editor-settings.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/get-global-styles-and-settings.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/render-svg-filters.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/post-lock.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/blocks.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/block-template-utils.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/functions.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/class-wp-theme-json-6-0.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/block-patterns.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/site-editor.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/edit-form-blocks.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/block-patterns-update.php'; 
        
           require __DIR__ . '/compat/wordpress-6.0/client-assets.php'; 
        
           // WordPress 6.1 compat. 
        
           require __DIR__ . '/compat/wordpress-6.1/blocks.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/script-loader.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/date-settings.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/block-patterns.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/edit-form-blocks.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/template-parts-screen.php'; 
        
           require __DIR__ . '/compat/wordpress-6.1/theme.php';

Mamaduka · 2024-08-29T05:07:53Z

Should we close this PR? We're already in the WP 6.7 release cycle.

github-actions · 2024-08-29T05:08:05Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @critterverse, @apeatling.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: critterverse, apeatling.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: mtias <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: annezazu <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

annezazu · 2024-08-29T05:43:29Z

Yeah, let's do it. For new patterns, let's loop (get it) back on this issue: #49280

Add 8 new Query Loop patterns

1c77389

critterverse requested a review from spacedmonkey as a code owner September 14, 2022 17:37

critterverse added Needs Design Feedback Needs general design feedback. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Block] Query Loop Affects the Query Loop Block labels Sep 14, 2022

carolinan reviewed Sep 14, 2022

View reviewed changes