Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Query loop / Post template: Enable post format filter #64167

Merged
merged 65 commits into from
Sep 16, 2024

Conversation

carolinan
Copy link
Contributor

@carolinan carolinan commented Aug 1, 2024

What?

Enables filtering the query loop result by post format.
Partial for #53049

Additional props @justintadlock @SergeyBiryukov

Why?

This feature is often requested by users, see the linked issue.

How?

Description updated September 5 2024.

This PR attempts to enable filtering the post query by post format, but handles the post format separately from
other taxonomies
, as requested by reviewers.

REST API changes:

A new class Gutenberg_REST_Posts_Controller_6_7 that extends WP_REST_Posts_Controller is added to the 6.7 compatibility folder.
The intention of this new temporary class is to add 'format' to the Posts controller, so that it can be used to filter the query result per post format.

Updates are made to these class methods: get_item, get_collection_params

Query loop block:

  • Adds a new parameter, format, to the query block attribute in the query loop block.
  • Adds a new FormatControls that uses a list of supported post formats inside a FormTokenField.
  • getThemeSupports is used to get the supported post formats from the store.

Post Template block:

  • The new format parameter is passed from the query loop block to the post template block as part of the query.
  • The post format is added to the query using the new format key (as opposed to using the post format taxonomy).

Filtering query_loop_block_query_vars

Filter the query vars (tax_query) for the Query Loop block to support post formats on the front of the site.

Todo & follow ups

To be handled as a follow up in a separate PR:
Ensure that the query loop displays the correct posts when the block is set to inherit the query, when the block is placed in a post format archive template.

Testing Instructions

Enable post formats in a theme by adding the theme support. Example:

function twentytwentyfour_setup(){
	add_theme_support( 'post-formats', array( 'standard', 'aside', 'gallery', 'audio', 'video', 'link', 'image', 'chat', 'status', 'quote' ) );
}

add_action( 'after_setup_theme', 'twentytwentyfour_setup' );

Add some test content, both with and without post formats assigned.

Test the query loop both in a template and in a post/page.

Add or select an existing query loop block.
Enable the custom query type in the query loop settings sidebar.

Find and open the Filters panel.
Select the three dot menu on the filters panel and toggle all available filters.
Confirm that one of the filters is an input field for "Formats.".
Confirm that all post formats that you registered with the theme supports can be entered into and selected in the input field.

Test that there are no regressions with the query loop features and its filters:

  • When the format filter is not enabled

  • When the format filter is enabled

  • When a single format is selected

  • When multiple formats are selected

  • Especially test that the 'standard' format displays posts that has no post format assigned, when it is chosen as the only format, and when combined with another format.

  • Confirm that you can reset the format filter with the reset options in the Filter panel.

  • Test with classic themes and block themes

  • Test that there are no regressions if post formats are not enabled on the theme (All features should work as before this patch).

Testing custom post types

Follow the steps above to register support for post formats in the theme.

Register a custom post type with post format support, include:

'show_in_rest' => true 
'supports' => array( 'title', 'editor', 'thumbnail', 'post-formats'),
function twentytwentyfour_custom_post_type() {
	register_post_type( 'test',
		array(
			'labels' => array(
				'name' => __( 'Tests' ),
				'singular_name' => __( 'Test' ),
			),
			'public' => true,
			'has_archive' => true,
			'show_in_rest' => true,
			'supports' => array( 'title', 'editor', 'thumbnail', 'post-formats'),
			'taxonomies' => array( 'category', 'post_tag' ),
			'rewrite' => array('slug' => 'tests'),
		)
	);
}

add_action( 'init', 'twentytwentyfour_custom_post_type' );

In the admin, create a few items of this post type, with and without a post format assigned.
Go to Appearance > Editor and select a template with a query -or create one.

  1. In the query loop setting, change query type to custom.
  2. Under post type, select your post type.
  3. Open the Filters panel. Confirm that you can toggle the display of the Formats control.
  4. When you select / focus on / place the cursor on the input for the formats control there should be a dropdown with the same formats that you registered with the theme support.
  5. Confirm that entering a random value that is not a registered format does nothing.
  6. Select a format. Confirm if the query loop displays the correct items in the editor and front.
  7. Select multiple formats. Confirm if the query loop displays the correct items in the editor and front.

Switching post types (After registering your custom post type)

In the settings sidebar of the query loop, set the post type to posts.
Open the Filters panel, and add a post format.
Switch the post type to the custom post type. Confirm that the filter is unchanged.
Switch the post type to page, which does not support post formats: Confirm that the filter is not showing in the panel.
Switch the post type to posts: confirm that the filter is reset (it was reset when you switched to the page).

Testing the query pagination

After creating a number of posts with formats, set the "items per page" setting to something low so that the query pagination block will show on the front.
Save and view the front of the site. Use the pagination and confirm that page 2 etc displays the correct posts.

Screenshots or screencast

I apologise, I have compressed the video but it is still almost 4 MB.
In this video I am testing different post formats in a template in the Site Editor.
I am testing formats in combination with other taxonomies, entering a non-existing format name in the control, etc.
I am switching between Post, page, and a custom post type with post format support, to illustrate that the filter is reset when switching to pages, but maintained when switching between posts and custom post types.

(Aside: I am not using a mouse and I do see that I often miss click when trying to remove a format from the control)

query-loop-post-format-filter-september-5.mp4

@carolinan carolinan added [Type] Enhancement A suggestion for improvement. [Block] Query Loop Affects the Query Loop Block [Block] Post Template Affects the Post Template Block labels Aug 1, 2024
Copy link

github-actions bot commented Aug 1, 2024

Size Change: +923 B (+0.05%)

Total Size: 1.77 MB

Filename Size Change
build/block-editor/index.min.js 257 kB +91 B (+0.04%)
build/block-editor/style-rtl.css 16 kB -39 B (-0.24%)
build/block-editor/style.css 16 kB -44 B (-0.27%)
build/block-library/index.min.js 219 kB +694 B (+0.32%)
build/edit-site/index.min.js 217 kB +221 B (+0.1%)
ℹ️ View Unchanged
Filename Size
build-module/a11y/index.min.js 898 B
build-module/block-library/file/view.min.js 447 B
build-module/block-library/image/view.min.js 1.78 kB
build-module/block-library/navigation/view.min.js 1.16 kB
build-module/block-library/query/view.min.js 743 B
build-module/block-library/search/view.min.js 616 B
build-module/interactivity-router/index.min.js 2.8 kB
build-module/interactivity/debug.min.js 16.6 kB
build-module/interactivity/index.min.js 13.3 kB
build/a11y/index.min.js 949 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.11 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.65 kB
build/block-editor/content.css 4.64 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-edit-link/style-rtl.css 70 B
build/block-library/blocks/comment-edit-link/style.css 70 B
build/block-library/blocks/comment-reply-link/style-rtl.css 71 B
build/block-library/blocks/comment-reply-link/style.css 71 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 228 B
build/block-library/blocks/comments-pagination/editor.css 217 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 641 B
build/block-library/blocks/cover/editor.css 642 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 357 B
build/block-library/blocks/form-input/style.css 357 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 955 B
build/block-library/blocks/gallery/editor.css 958 B
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.82 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 785 B
build/block-library/blocks/image/editor.css 787 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 179 B
build/block-library/blocks/latest-posts/editor.css 179 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 321 B
build/block-library/blocks/media-text/editor.css 320 B
build/block-library/blocks/media-text/style-rtl.css 558 B
build/block-library/blocks/media-text/style.css 556 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 644 B
build/block-library/blocks/navigation-link/editor.css 645 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.19 kB
build/block-library/blocks/navigation/editor.css 2.2 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/editor-rtl.css 107 B
build/block-library/blocks/post-author/editor.css 107 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 527 B
build/block-library/blocks/post-comments-form/style.css 528 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-content/style-rtl.css 79 B
build/block-library/blocks/post-content/style.css 79 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 226 B
build/block-library/blocks/post-title/style.css 226 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 154 B
build/block-library/blocks/query-pagination/editor.css 154 B
build/block-library/blocks/query-pagination/style-rtl.css 237 B
build/block-library/blocks/query-pagination/style.css 237 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/site-title/style-rtl.css 206 B
build/block-library/blocks/site-title/style.css 206 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 757 B
build/block-library/blocks/social-links/editor.css 756 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 144 B
build/block-library/blocks/tag-cloud/editor.css 144 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 396 B
build/block-library/blocks/video/editor.css 397 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 15 kB
build/block-library/style.css 15 kB
build/block-library/theme-rtl.css 708 B
build/block-library/theme.css 712 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.3 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.82 kB
build/core-data/index.min.js 73.2 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.66 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 13.1 kB
build/edit-post/style-rtl.css 2.57 kB
build/edit-post/style.css 2.57 kB
build/edit-site/posts-rtl.css 7.3 kB
build/edit-site/posts.css 7.3 kB
build/edit-site/style-rtl.css 12.6 kB
build/edit-site/style.css 12.6 kB
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 102 kB
build/editor/style-rtl.css 9.28 kB
build/editor/style.css 9.28 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.11 kB
build/format-library/style-rtl.css 476 B
build/format-library/style.css 476 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 3.2 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.61 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.34 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.55 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.9 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@carolinan

This comment was marked as resolved.

youknowriad

This comment was marked as outdated.

@youknowriad

This comment was marked as outdated.

@carolinan

This comment was marked as outdated.

@carolinan carolinan added the Needs Design Needs design efforts. label Aug 2, 2024
@carolinan

This comment was marked as outdated.

@carolinan

This comment was marked as outdated.

@youknowriad

This comment was marked as outdated.

@nickbohle

This comment was marked as outdated.

@carolinan

This comment was marked as outdated.

@carolinan carolinan requested a review from Mamaduka August 5, 2024 10:21
…tenberg_add_format_query_vars_to_query_loop_block
…rsion

$request['format'] does not need to be converted into an array, any array conversion needed is handled by the schema.
This commit removes the array conversion from get_items.
@carolinan
Copy link
Contributor Author

I have removed the array conversion in get_items in Gutenberg_REST_Posts_Controller_6_7 and everything seems to be working as expected. Thank you.


I tested manually changing the block attributes by editing the markup of the query loop in the block editor.
This is the expected format: "format":["gallery","video"]. If I change it to for example "format":"aside" there is a fatal PHP error. This would happen independently of the change to get_items, (in blocks.php) and it might be a good idea to check if format really is an array and fail more gracefully. Would it be overkill?

@Mamaduka
Copy link
Member

it might be a good idea to check if format really is an array and fail more gracefully. Would it be overkill?

Yes. Let's add check-in blocks.php and return early if $formats isn't an array.

In gutenberg_add_format_query_vars_to_query_loop_block: return early if the format attribute is not an array.

In FormatControls: Prevent a JS error that occurs if the format is not an array.
- The purpose is to prevent a user error from breaking the editor, for example if the format is invalid because the user has edited the block markup incorrectly. A check is implemented that preserves the value if for format is an array or string, and uses an empty array if it is neither.
@carolinan
Copy link
Contributor Author

carolinan commented Sep 11, 2024

I made two changes:
I updated the early return that already existed in blocks.php gutenberg_add_format_query_vars_to_query_loop_block to also check if the format is an array.

There was still a JavaScript error in the editor that prevented the editor from functioning, so I also added a check with a
string to array conversion to the FormatControls.
-That way when I make a typo in the code editor, (of course this is fiction because that has never happened to me ;) ) both the editor and format control will still work. The result in the query itself will depend on the typo, but it can be corrected by using the control.

Update: To anyone reading this without already having the full context, this JavaScript error that is mentioned was created on purpose, and the only reason for adding these two changes is to fail gracefully on user error.

…_block

Add apostrophes around the hook name in the docBlock of gutenberg_add_format_query_vars_to_query_loop_block.
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is testing well for me, and I couldn't spot any regression to Query block behavior.

@carolinan carolinan merged commit 45d33f0 into trunk Sep 16, 2024
62 checks passed
@carolinan carolinan deleted the try/post-format-query branch September 16, 2024 02:57
@github-actions github-actions bot added this to the Gutenberg 19.3 milestone Sep 16, 2024
@dmsnell
Copy link
Member

dmsnell commented Sep 16, 2024

Nicely done, @carolinan!

@annezazu
Copy link
Contributor

Agreed! Great work 👏🏼

@jasmussen
Copy link
Contributor

Nice! Made it!

@fabiankaegy fabiankaegy mentioned this pull request Oct 1, 2024
97 tasks
carolinan added a commit that referenced this pull request Oct 11, 2024
…oop filter

This pull request copies changes that were made in WordPress core in WordPress/wordpress-develop#7314: The pull request that added the PHP changes related to #64167.

- Improved logic for the use of the `AND`  `relation` key when a user queries for both a format and a taxonomy.
- Improved inline documentation, for clarity and readability.
- Improved validation of the queried formats against the registered formats.
- Misc: renaming of variables for better readability.
carolinan added a commit that referenced this pull request Oct 30, 2024
…oop filter (#66037)

This pull request copies changes that were made in WordPress core in WordPress/wordpress-develop#7314: The pull request that added the PHP changes related to #64167.

- Improved logic for the use of the `AND`  `relation` key when a user queries for both a format and a taxonomy.
- Improved inline documentation, for clarity and readability.
- Improved validation of the queried formats against the registered formats.
- Misc: renaming of variables for better readability.


Co-authored-by: carolinan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
peterwilsoncc pushed a commit to peterwilsoncc/gutenberg-build that referenced this pull request Oct 30, 2024
…oop filter (#66037)

This pull request copies changes that were made in WordPress core in WordPress/wordpress-develop#7314: The pull request that added the PHP changes related to WordPress/gutenberg#64167.

- Improved logic for the use of the `AND`  `relation` key when a user queries for both a format and a taxonomy.
- Improved inline documentation, for clarity and readability.
- Improved validation of the queried formats against the registered formats.
- Misc: renaming of variables for better readability.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

Source: WordPress/gutenberg@b95553f
karthick-murugan pushed a commit to karthick-murugan/gutenberg that referenced this pull request Nov 13, 2024
…oop filter (WordPress#66037)

This pull request copies changes that were made in WordPress core in WordPress/wordpress-develop#7314: The pull request that added the PHP changes related to WordPress#64167.

- Improved logic for the use of the `AND`  `relation` key when a user queries for both a format and a taxonomy.
- Improved inline documentation, for clarity and readability.
- Improved validation of the queried formats against the registered formats.
- Misc: renaming of variables for better readability.


Co-authored-by: carolinan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
@WordPress WordPress deleted a comment from bystrzan Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Template Affects the Post Template Block [Block] Query Loop Affects the Query Loop Block Needs PHP backport Needs PHP backport to Core REST API Interaction Related to REST API [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

9 participants