-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
[Block Library - Query Loop]: Add support for custom taxonomies filtering #38063
[Block Library - Query Loop]: Add support for custom taxonomies filtering #38063
Conversation
Size Change: +244 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for working on this 🤗 this is such a valuable addition!
I currently only reviewed the code and will follow up when I got a chance to test it locally :)
packages/block-library/src/query/edit/inspector-controls/index.js
Outdated
Show resolved
Hide resolved
I have now also tested this locally and it is working like a charm :) Exactly what you would expect. In a follow up I think we can improve the UX by using the pattern established by the spacing & font controls where not all controls are shown by default but rather you can use the ellipsis to hide/show individual items because it can easily get very cluttered when you have many taxonomies. I believe that @shaunandrews has done a design exploration for this but I am unable to find it at the moment :( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good, awesome work @ntsekouras!
Works as expected and also cleans up some code, making things easier to understand and follow.
I only had a minor comment regarding spacing, but I'll go ahead and pre-approve it 👍
Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
@fabiankaegy that's exactly what I had in mind for the next steps for the block 😄. I think it's time to start the new overview issue we talked about, to get suggestions and prioritize things. |
Thanks so much for working on this @ntsekouras! So appreciated! |
Resolves: #34977
This PR adds support for custom taxonomies filtering. In order to do that I had also had to change the way the block was holding information about tags and categories with explicitly defined props(
categoryIds, tagIds
).I added a new property in the
query
attribute which is calledtaxQuery
and holds the relevant information. My original plan was to split this PR in two (migrate totaxQuery
and add custom taxonomies support), but the only difference would be to whitelist the previous supported taxonomies(categories, tags
) so it didn't make much sense..Show case
Existing Query Loop blocks
In the below video I initially show an existing
Query Loop
block (both editor and front end) withcategories and tags
filters - I also highlight the set properties in code editor. After that I reload the pages with the new code to show the proper migration of the existing values by using thetaxQuery
property.existing.blocks.mov
Custom taxonomies
In the following video I add some WooCommerce product categories filter:
custom.taxonomies.mov
Testing instructions
Query Loop
should work as before with no regressionsQuery Loop
blocks with the new taxonomy filters (try any combination)post type
filter that should show conditionally the available taxonomies' filters and reset the unavailable ones