Query loop / Post template: Enable post format filter #64167
Merged
+958
−5
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
carolinan
added
[Type] Enhancement
|
Size Change: +923 B (+0.05%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
This comment was marked as resolved.
This comment was marked as resolved.
youknowriad
reviewed
Aug 1, 2024
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
youknowriad
reviewed
Aug 2, 2024
packages/block-library/src/query/edit/inspector-controls/post-format-controls.js
Outdated
Show resolved
Hide resolved
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
youknowriad
reviewed
Aug 5, 2024
youknowriad
reviewed
Aug 5, 2024
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.
|
I made two changes: There was still a JavaScript error in the editor that prevented the editor from functioning, so I also added a check with a 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.
Mamaduka
reviewed
Sep 11, 2024
packages/block-library/src/query/edit/inspector-controls/format-controls.js
Outdated
Show resolved
Hide resolved
Mamaduka
approved these changes
Sep 13, 2024
|
Nicely done, @carolinan! |
|
Agreed! Great work 👏🏼 |
|
Nice! Made it! |
This was referenced Sep 26, 2024
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.
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_7that extendsWP_REST_Posts_Controlleris 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_paramsQuery loop block:
format, to thequeryblock attribute in the query loop block.FormatControlsthat uses a list of supported post formats inside aFormTokenField.getThemeSupportsis used to get the supported post formats from the store.Post Template block:
formatparameter is passed from the query loop block to the post template block as part of thequery.queryusing the newformatkey (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:
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:
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.
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