This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Add dropdown version of Filter by Rating #7771
Merged
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
|
The release ZIP for this PR is accessible via: |
|
Size Change: +8.76 kB (+1%) Total Size: 992 kB
ℹ️ View Unchanged
|
TypeScript Errors ReportFiles with errors: 433
assets/js/blocks/rating-filter/block.tsx
assets/js/blocks/rating-filter/edit.tsx assets/js/blocks/rating-filter/test/block.tsx |
…eryType: or or and
handle updateCheckedFilters functionhandle updateCheckedFilters function
woocommerce-blocks/assets/js/blocks/rating-filter/block.tsx Lines 149 to 160 in c6712d4 🚀 This comment was generated by the automations bot based on a
|
Script Dependencies ReportThe
This comment was automatically generated by the |
Additionally, fix the issue with cut off corners of dropdown borders
…way with object copy
kmanijak
force-pushed
the
add/filter-by-rating-dropdown
branch
from
fbb5fa6 to
418a99f
Compare
rubikuserbot
requested review from
a team and
Aljullu
and removed request for
a team
8 tasks
Aljullu
approved these changes
Dec 9, 2022
There was a problem hiding this comment.
Works like a charm, thanks @kmanijak!
I'm pre-approving, but I left a couple of comments that I think should be adressed before merging:
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Not needed for this PR, but I wonder if at some point we should create a filters directory under assets/js/blocks/. That would make it easier to share styles and logic between them, like this one. Similar to what was done with Featured Product and Featured Category, which have a common folder (featured-items).
There was a problem hiding this comment.
I created a assets/js/blocks/shared/styles/style.css file (and added a mixin dedicated to filters), but in the near future we should make a dedicated path (assets/js/blocks/filters/*) with shared JS and SCSS code. There's too much code overlap between three filters to not combine it 😆 The issue is already created: #7875 and that's definitely the direction we should follow.
Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then
…stead of sentence capitalization Not knowing what may be attribute, there may be a case first capital letter will be expected
…ters Instead of using direct classes, rewrite it to mixin and include in the filters
|
Thank you for a great review @Aljullu! 🎉
Great, both comments addressed. PS. Good catch with the capitalization!
|
|
Thank you for a great review @Aljullu! 🎉
Great, both comments addressed. PS. Good catch with the capitalization!
|
The problem was with the Products block, that there was incorrect initial value of product ratings query
…with Filter by Stock
gigitux
approved these changes
Dec 12, 2022
|
The release ZIP for this PR is accessible via: |
kmanijak
added a commit
that referenced
this pull request
Dec 13, 2022
… was set to single The fix was provided with another PR #7771 and had to be resued here
danieldudzic
added
block: filter by rating
gigitux
added a commit
that referenced
this pull request
Dec 14, 2022
* Rename the setting section to match Filter by Attribute * Add Display Style toggle to the block settings * Set list as a default value of displayStyle for Filter by Rating * Add dropdown variant of Filter by Rating * Extend the Editor settings with selectType: single or multiple * Adjust the styles of a FormTokenField to other dropdown * Align Editor settings order and wording between Filter by Attribute and Rating * Fix the issue with cut off corners of dropdown borders * Provide translated screen reader messages and placeholder * Revert the label property, which is necessary to display checkbox list * Make classname for Rating component optional and remove styling in Filter by Rating * Cover the case when filter with zero products needs string methods for comparison * Handle Typescript errors and add ts-ignore annotations when necessary * Remove explicit key prop assignment in Rating component * Remove leftover property in type definition * Refactor JSX element extension with custom properties to more robust way with object copy * Filter by rating tests (#7845) * Filter by Rating tests: - List single - List multiple - Dropdown single - Dropdown multiple * Adjust the font-size of Filter by Rating dropdown to the rest of the filters * Fix E2E tests after the Editor settings label has been changed * Improve sorting in Filter by Rating dropdown With this change the order of options is always descending: in the chips, suggestions, active filters and URL * Change the name of the filter blocks in the test files * Prevent single dropdown input to overflow the wrapper The issue is fixed in three filters, hence a new shared styles file is created at the path assets/js/blocks/shared/styles/style.css * Remove the unused styles of active options in Filter by Rating Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then * Change the approach of shared styles to fix the dropdown issue in filters Instead of using direct classes, rewrite it to mixin and include in the filters * Fix the Filter by Rating with Products block The problem was with the Products block, that there was incorrect initial value of product ratings query * Align the logic of getting the filters from URL for Filter by Rating with Filter by Stock Co-authored-by: Luigi Teschio <[email protected]>
gigitux
added a commit
that referenced
this pull request
Dec 15, 2022
* Empty commit for release pull request * Update the readme file with 9.1.1 release changes * Product Query: Add `Sorted by title` preset. (#7949) * Add `Sort by title` preset. * sorted, thanks @nerrad * Update the readme file with #7949 changes * 9.1.1 Release: Add testing docs * Atomic Block: fix ancestor definition (#7947) * Fix the incorrect layout of Rating and Price in Classic Template and Products block (#7932) * Fix the incorrect layout of Rating and Price in Classic Template There were styles required in Rating Filter that were added globally and influenced the layout of Rating in Products block as well as Classic template. The styles were moved to the Rating Filter block * Add dropdown version of Filter by Stock Status (#7831) * Extend Filter by Stock Editor options with dropdown and single/multiple choice * Add dropdown implementation for Filter by Stock Status * Adjust font-sizes to the rest of the filters * Add tests to Filter by Stock: dropdown and list variants * Change test file extension from .js to .tsx, so it handles types as well * Add E2E test to Filter by Stock checking if display style can be toggled * When typing in Filter by Stock dropdown, handle the space so it highlights the suggestions * Change the name of the filter blocks in the test files * Remove unnecessary waiting step in E2E test for Filter by Stock toMatchElement waits for an element for 30s by itself, hence waitForSelector usage was removed * Improve the STOCK_STATUS_OPTIONS type handling * Extract onDropdownChange function instead of inline arrow function * Fix overlaping dropdown content with the wrapper when Filter by Stock was set to single * Product Query: Add patterns (#7857) * Product Query: First attempt at adding patterns * Product Query: Update patterns and the default block template * Product Query: And new and update existing patterns * Product Query: Adjust layout of the Minimal Product Row pattern * Product Query: Update pattern names * Product Query: Polish spaces between blocks inside the patterns * Product Query patterns: Link product titles and improve spacing between product elements * Product Query patterns: Button font-size update * Product Query patterns: Center the pagination * Product Query patterns: Center the pagination for the default pattern * Product Query patterns: Remove an empty column * Product Query patterns: Remove an empty column from the product list with 1:1 images pattern * Add dropdown version of Filter by Rating (#7771) * Rename the setting section to match Filter by Attribute * Add Display Style toggle to the block settings * Set list as a default value of displayStyle for Filter by Rating * Add dropdown variant of Filter by Rating * Extend the Editor settings with selectType: single or multiple * Adjust the styles of a FormTokenField to other dropdown * Align Editor settings order and wording between Filter by Attribute and Rating * Fix the issue with cut off corners of dropdown borders * Provide translated screen reader messages and placeholder * Revert the label property, which is necessary to display checkbox list * Make classname for Rating component optional and remove styling in Filter by Rating * Cover the case when filter with zero products needs string methods for comparison * Handle Typescript errors and add ts-ignore annotations when necessary * Remove explicit key prop assignment in Rating component * Remove leftover property in type definition * Refactor JSX element extension with custom properties to more robust way with object copy * Filter by rating tests (#7845) * Filter by Rating tests: - List single - List multiple - Dropdown single - Dropdown multiple * Adjust the font-size of Filter by Rating dropdown to the rest of the filters * Fix E2E tests after the Editor settings label has been changed * Improve sorting in Filter by Rating dropdown With this change the order of options is always descending: in the chips, suggestions, active filters and URL * Change the name of the filter blocks in the test files * Prevent single dropdown input to overflow the wrapper The issue is fixed in three filters, hence a new shared styles file is created at the path assets/js/blocks/shared/styles/style.css * Remove the unused styles of active options in Filter by Rating Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then * Change the approach of shared styles to fix the dropdown issue in filters Instead of using direct classes, rewrite it to mixin and include in the filters * Fix the Filter by Rating with Products block The problem was with the Products block, that there was incorrect initial value of product ratings query * Align the logic of getting the filters from URL for Filter by Rating with Filter by Stock Co-authored-by: Luigi Teschio <[email protected]> * Product Query - Enable "Inherit Query from template" option (#7641) * Add Inherit Query from template option * Update label * Product Elements: Fix block settings (#7914) * Product Elements: Fix block settings * Rating: Fix inactive star color * Product Rating: Fix color inheritance * StyleAttributesUtils: Fix PHP notices and invalid CSS output (#7909) * StyleAttributesUtils: Fix PHP notices and invalid CSS output. Closes #7899. * StyleAttributesUtils: Fix border radius and width support * StyleAttributesUtils: Fix border radius and border color support * StyleAttributesUtils: Include additional checks to deal with PHP warnings * StyleAttributesUtils: Improve the custom border array check * Update MiniCart.php to fix price total amount on page load prices are including tax (#7832) * Update MiniCart.php Added an update to the '$cart_contents_total' variable on the 'get_cart_price_markup' function if $cart->display_prices_including_tax is active. Currently displaying wrong amount total on page load if items are already in the basket. * Update MiniCart.php Removed white spaces? * Update MiniCart.php Fixed IF statement * Remove whitespace at end of line Co-authored-by: Albert Juhé Lluveras <[email protected]> * Product Query: implement compatibility with Filter by Rating block (#7792) * Product Query: implement compatibility with Filter by Rating block #7631 Product Query: implement compatibility with Filter by Rating block * address feedback * address feedback * add comment * add new zip file link * add missing class * add testing instructions about #7947 * add new zip file link * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Daniel Dudzic <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: Luigi Teschio <[email protected]> Co-authored-by: kmanijak <[email protected]> Co-authored-by: Luke O'Regan <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]>
gigitux
added a commit
that referenced
this pull request
Dec 21, 2022
* Empty commit for release pull request * Update the readme file with 9.1.1 release changes * Product Query: Add `Sorted by title` preset. (#7949) * Add `Sort by title` preset. * sorted, thanks @nerrad * Update the readme file with #7949 changes * 9.1.1 Release: Add testing docs * Atomic Block: fix ancestor definition (#7947) * Fix the incorrect layout of Rating and Price in Classic Template and Products block (#7932) * Fix the incorrect layout of Rating and Price in Classic Template There were styles required in Rating Filter that were added globally and influenced the layout of Rating in Products block as well as Classic template. The styles were moved to the Rating Filter block * Add dropdown version of Filter by Stock Status (#7831) * Extend Filter by Stock Editor options with dropdown and single/multiple choice * Add dropdown implementation for Filter by Stock Status * Adjust font-sizes to the rest of the filters * Add tests to Filter by Stock: dropdown and list variants * Change test file extension from .js to .tsx, so it handles types as well * Add E2E test to Filter by Stock checking if display style can be toggled * When typing in Filter by Stock dropdown, handle the space so it highlights the suggestions * Change the name of the filter blocks in the test files * Remove unnecessary waiting step in E2E test for Filter by Stock toMatchElement waits for an element for 30s by itself, hence waitForSelector usage was removed * Improve the STOCK_STATUS_OPTIONS type handling * Extract onDropdownChange function instead of inline arrow function * Fix overlaping dropdown content with the wrapper when Filter by Stock was set to single * Product Query: Add patterns (#7857) * Product Query: First attempt at adding patterns * Product Query: Update patterns and the default block template * Product Query: And new and update existing patterns * Product Query: Adjust layout of the Minimal Product Row pattern * Product Query: Update pattern names * Product Query: Polish spaces between blocks inside the patterns * Product Query patterns: Link product titles and improve spacing between product elements * Product Query patterns: Button font-size update * Product Query patterns: Center the pagination * Product Query patterns: Center the pagination for the default pattern * Product Query patterns: Remove an empty column * Product Query patterns: Remove an empty column from the product list with 1:1 images pattern * Add dropdown version of Filter by Rating (#7771) * Rename the setting section to match Filter by Attribute * Add Display Style toggle to the block settings * Set list as a default value of displayStyle for Filter by Rating * Add dropdown variant of Filter by Rating * Extend the Editor settings with selectType: single or multiple * Adjust the styles of a FormTokenField to other dropdown * Align Editor settings order and wording between Filter by Attribute and Rating * Fix the issue with cut off corners of dropdown borders * Provide translated screen reader messages and placeholder * Revert the label property, which is necessary to display checkbox list * Make classname for Rating component optional and remove styling in Filter by Rating * Cover the case when filter with zero products needs string methods for comparison * Handle Typescript errors and add ts-ignore annotations when necessary * Remove explicit key prop assignment in Rating component * Remove leftover property in type definition * Refactor JSX element extension with custom properties to more robust way with object copy * Filter by rating tests (#7845) * Filter by Rating tests: - List single - List multiple - Dropdown single - Dropdown multiple * Adjust the font-size of Filter by Rating dropdown to the rest of the filters * Fix E2E tests after the Editor settings label has been changed * Improve sorting in Filter by Rating dropdown With this change the order of options is always descending: in the chips, suggestions, active filters and URL * Change the name of the filter blocks in the test files * Prevent single dropdown input to overflow the wrapper The issue is fixed in three filters, hence a new shared styles file is created at the path assets/js/blocks/shared/styles/style.css * Remove the unused styles of active options in Filter by Rating Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then * Change the approach of shared styles to fix the dropdown issue in filters Instead of using direct classes, rewrite it to mixin and include in the filters * Fix the Filter by Rating with Products block The problem was with the Products block, that there was incorrect initial value of product ratings query * Align the logic of getting the filters from URL for Filter by Rating with Filter by Stock Co-authored-by: Luigi Teschio <[email protected]> * Product Query - Enable "Inherit Query from template" option (#7641) * Add Inherit Query from template option * Update label * Product Elements: Fix block settings (#7914) * Product Elements: Fix block settings * Rating: Fix inactive star color * Product Rating: Fix color inheritance * StyleAttributesUtils: Fix PHP notices and invalid CSS output (#7909) * StyleAttributesUtils: Fix PHP notices and invalid CSS output. Closes #7899. * StyleAttributesUtils: Fix border radius and width support * StyleAttributesUtils: Fix border radius and border color support * StyleAttributesUtils: Include additional checks to deal with PHP warnings * StyleAttributesUtils: Improve the custom border array check * Update MiniCart.php to fix price total amount on page load prices are including tax (#7832) * Update MiniCart.php Added an update to the '$cart_contents_total' variable on the 'get_cart_price_markup' function if $cart->display_prices_including_tax is active. Currently displaying wrong amount total on page load if items are already in the basket. * Update MiniCart.php Removed white spaces? * Update MiniCart.php Fixed IF statement * Remove whitespace at end of line Co-authored-by: Albert Juhé Lluveras <[email protected]> * Product Query: implement compatibility with Filter by Rating block (#7792) * Product Query: implement compatibility with Filter by Rating block #7631 Product Query: implement compatibility with Filter by Rating block * address feedback * address feedback * add comment * add new zip file link * add missing class * add testing instructions about #7947 * add new zip file link * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Bumping version strings to new version. * Remove feature flag from Products block (#8001) * Remove feature flag from Products block * Remove Products block from feature flags documentation * Empty commit for release pull request * Update changelog * Add zip file link * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Daniel Dudzic <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: Luigi Teschio <[email protected]> Co-authored-by: kmanijak <[email protected]> Co-authored-by: Luke O'Regan <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]>
gigitux
added a commit
that referenced
this pull request
Dec 22, 2022
* Empty commit for release pull request * Update the readme file with 9.1.1 release changes * Product Query: Add `Sorted by title` preset. (#7949) * Add `Sort by title` preset. * sorted, thanks @nerrad * Update the readme file with #7949 changes * 9.1.1 Release: Add testing docs * Atomic Block: fix ancestor definition (#7947) * Fix the incorrect layout of Rating and Price in Classic Template and Products block (#7932) * Fix the incorrect layout of Rating and Price in Classic Template There were styles required in Rating Filter that were added globally and influenced the layout of Rating in Products block as well as Classic template. The styles were moved to the Rating Filter block * Add dropdown version of Filter by Stock Status (#7831) * Extend Filter by Stock Editor options with dropdown and single/multiple choice * Add dropdown implementation for Filter by Stock Status * Adjust font-sizes to the rest of the filters * Add tests to Filter by Stock: dropdown and list variants * Change test file extension from .js to .tsx, so it handles types as well * Add E2E test to Filter by Stock checking if display style can be toggled * When typing in Filter by Stock dropdown, handle the space so it highlights the suggestions * Change the name of the filter blocks in the test files * Remove unnecessary waiting step in E2E test for Filter by Stock toMatchElement waits for an element for 30s by itself, hence waitForSelector usage was removed * Improve the STOCK_STATUS_OPTIONS type handling * Extract onDropdownChange function instead of inline arrow function * Fix overlaping dropdown content with the wrapper when Filter by Stock was set to single * Product Query: Add patterns (#7857) * Product Query: First attempt at adding patterns * Product Query: Update patterns and the default block template * Product Query: And new and update existing patterns * Product Query: Adjust layout of the Minimal Product Row pattern * Product Query: Update pattern names * Product Query: Polish spaces between blocks inside the patterns * Product Query patterns: Link product titles and improve spacing between product elements * Product Query patterns: Button font-size update * Product Query patterns: Center the pagination * Product Query patterns: Center the pagination for the default pattern * Product Query patterns: Remove an empty column * Product Query patterns: Remove an empty column from the product list with 1:1 images pattern * Add dropdown version of Filter by Rating (#7771) * Rename the setting section to match Filter by Attribute * Add Display Style toggle to the block settings * Set list as a default value of displayStyle for Filter by Rating * Add dropdown variant of Filter by Rating * Extend the Editor settings with selectType: single or multiple * Adjust the styles of a FormTokenField to other dropdown * Align Editor settings order and wording between Filter by Attribute and Rating * Fix the issue with cut off corners of dropdown borders * Provide translated screen reader messages and placeholder * Revert the label property, which is necessary to display checkbox list * Make classname for Rating component optional and remove styling in Filter by Rating * Cover the case when filter with zero products needs string methods for comparison * Handle Typescript errors and add ts-ignore annotations when necessary * Remove explicit key prop assignment in Rating component * Remove leftover property in type definition * Refactor JSX element extension with custom properties to more robust way with object copy * Filter by rating tests (#7845) * Filter by Rating tests: - List single - List multiple - Dropdown single - Dropdown multiple * Adjust the font-size of Filter by Rating dropdown to the rest of the filters * Fix E2E tests after the Editor settings label has been changed * Improve sorting in Filter by Rating dropdown With this change the order of options is always descending: in the chips, suggestions, active filters and URL * Change the name of the filter blocks in the test files * Prevent single dropdown input to overflow the wrapper The issue is fixed in three filters, hence a new shared styles file is created at the path assets/js/blocks/shared/styles/style.css * Remove the unused styles of active options in Filter by Rating Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then * Change the approach of shared styles to fix the dropdown issue in filters Instead of using direct classes, rewrite it to mixin and include in the filters * Fix the Filter by Rating with Products block The problem was with the Products block, that there was incorrect initial value of product ratings query * Align the logic of getting the filters from URL for Filter by Rating with Filter by Stock Co-authored-by: Luigi Teschio <[email protected]> * Product Query - Enable "Inherit Query from template" option (#7641) * Add Inherit Query from template option * Update label * Product Elements: Fix block settings (#7914) * Product Elements: Fix block settings * Rating: Fix inactive star color * Product Rating: Fix color inheritance * StyleAttributesUtils: Fix PHP notices and invalid CSS output (#7909) * StyleAttributesUtils: Fix PHP notices and invalid CSS output. Closes #7899. * StyleAttributesUtils: Fix border radius and width support * StyleAttributesUtils: Fix border radius and border color support * StyleAttributesUtils: Include additional checks to deal with PHP warnings * StyleAttributesUtils: Improve the custom border array check * Update MiniCart.php to fix price total amount on page load prices are including tax (#7832) * Update MiniCart.php Added an update to the '$cart_contents_total' variable on the 'get_cart_price_markup' function if $cart->display_prices_including_tax is active. Currently displaying wrong amount total on page load if items are already in the basket. * Update MiniCart.php Removed white spaces? * Update MiniCart.php Fixed IF statement * Remove whitespace at end of line Co-authored-by: Albert Juhé Lluveras <[email protected]> * Product Query: implement compatibility with Filter by Rating block (#7792) * Product Query: implement compatibility with Filter by Rating block #7631 Product Query: implement compatibility with Filter by Rating block * address feedback * address feedback * add comment * add new zip file link * add missing class * add testing instructions about #7947 * add new zip file link * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <[email protected]> * Bumping version strings to new version. * Remove feature flag from Products block (#8001) * Remove feature flag from Products block * Remove Products block from feature flags documentation * Empty commit for release pull request * Update changelog * Add zip file link * Bumping version strings to new version. * Enable Product SKU and Product Stock Indicator in Core (#8009) * Update changelog * Update changelog * Empty commit for release pull request * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Daniel Dudzic <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: Luigi Teschio <[email protected]> Co-authored-by: kmanijak <[email protected]> Co-authored-by: Luke O'Regan <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Main changes:
multipleorsinglechoice to align with Filter by AttributeMinor changes:
Important notice: to be able to provide to the dropdown (
FormTokenFieldcomponent from Gutenberg) the options more complex than a string, a bit hacky solution has been introduced.displayTransformis a place where string value is transformed into what is presented to the user. In this PR JSX element is returned (check here). That solution may stop to work in case of Gutenberg update.Also, seems like this may have a consequence on the built-int accessibility mechanism. There's
messagesprop passed to theFormTokenField, which includes messages that are read in case thee filter is added/removed. That seems to not work in here, which may be an obstacle to go with that solution.Fixes #7769 #7882
Accessibility
Known problem:
Screenshots
Watch the video of Dropdown component usage:
filter-byrating.mov
Testing
Automated Tests
User Facing Testing
Check out the video above which will help you go through the testing instructions
Prerequisites:
Dropdown component - single
Dropdown component - multiple
List component
Apply button
Other scenarios
Try to break it! 😉
WooCommerce Visibility
Changelog