Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add dropdown version of Filter by Stock Status #7831

Merged
merged 22 commits into from
Dec 14, 2022

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Dec 2, 2022

Main changes:

  • add dropdown version to the Filter by Stock Status
  • add option for multiple or single choice to align with Filter by Attribute

Minor changes:

  • alignment between Filter by Attribute and Stock:
    • Editor settings options: wording and settings order

Know issue:

  • [minor] When typing in the dropdown input, when you put whitespace, there's one character misalignment between what's input and what is underlined. This is due to the limitations of the FormTokenField API. It could be fixed, but requires amendments to the filter keys, which I believe is too complex comparing to the gain. But I'm open for suggestions.

image

_Input: "In stoc", Underline "In st", missing two characters_

Fixes #7770

Accessibility

  • I've tested using only a keyboard (no mouse)
  • I've tested using a screen reader

Screenshots

Watch the video of Dropdown component usage:

filter-by-stock.mov
Case Before After
Editor Settings Screen Shot 2022-12-07 at 09 38 58 AM Screen Shot 2022-12-07 at 09 37 11 AM

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

Check out the video above which will help you go through the testing instructions

Prerequisites:

  1. Have at least few products with different stock status: in stock, out of stock, on backorder
  2. Go to Editor
  3. Add Filters pattern
  4. Add All Products
Dropdown component - single
  1. Change settings of Filter by Stock to: single / dropdown
  2. Open dropdown
  • Expected: dropdown has stock status options to choose from
  1. Choose one option
  • Expected: page refreshes, filter is applied: visible in Active Filters and Products are filtered out
  1. Choose other option
  • Expected: previous filter is replaced by the new one, page refreshes, filter is applied: visible in Active Filters and Products are filtered out
Dropdown component - multiple
  1. Change settings of Filter by Stock to: multiple / dropdown
  2. Open dropdown
  • Expected: dropdown has stock status options to choose from
  1. Choose one option
  • Expected: page refreshes, filter is applied: visible in Active Filters and Products are filtered out
  1. Choose other option
  • Expected: new filter is added to the new one, page refreshes, both filters ("or") is applied: visible in Active Filters and Products are filtered out
List component
  1. Change settings of Filter by Stock to: list
  2. Repeat the above for both: single and multiple
Apply button
  1. In the Editor choose multiple Dropdown again and enable "Show 'Apply filters' button" option
  2. In the frontend choose stock filters
  • Expected: filters are not applied until "Apply" button is clicked. Once clicked page refreshes and filters are applied
Other scenarios

Try to break it! 😉

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Filter by Stock: Add dropdown version.
Filter by Stock: Add option to choose multiple or single option.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7831.zip

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
stock-filter.js wp-deprecated, wp-dom, wp-keycodes, wp-warning ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

TypeScript Errors Report

Files with errors: 434
Total errors: 2116

⚠️ ⚠️ This PR introduces new TS errors on 3 files:

assets/js/blocks/stock-filter/block.tsx

assets/js/blocks/stock-filter/edit.tsx

assets/js/blocks/stock-filter/test/block.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

Size Change: +15.5 kB (+2%)

Total Size: 1.01 MB

Filename Size Change
build/active-filters-frontend.js 7.75 kB +7 B (0%)
build/active-filters-wrapper-frontend.js 6.01 kB -12 B (0%)
build/active-filters.js 7.32 kB -2 B (0%)
build/all-products-frontend.js 11.3 kB -14 B (0%)
build/all-products.js 33.3 kB +11 B (0%)
build/all-reviews.js 7.78 kB +1 B (0%)
build/attribute-filter-frontend.js 22.6 kB +8 B (0%)
build/attribute-filter-wrapper-frontend.js 7.65 kB +459 B (+6%) 🔍
build/attribute-filter.js 12.3 kB +28 B (0%)
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB +9 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 4.77 kB -3 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB +4 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 777 B -1 B (0%)
build/cart-blocks/cart-items-frontend.js 298 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB +8 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.06 kB -4 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.23 kB -1 B (0%)
build/cart-blocks/cart-totals-frontend.js 320 B +1 B (0%)
build/cart-blocks/empty-cart-frontend.js 345 B -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 781 B -3 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB -1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB +4 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 274 B +2 B (+1%)
build/cart-blocks/order-summary-shipping-frontend.js 5.99 kB +5 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 274 B +1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 431 B -2 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.23 kB -2 B (0%)
build/cart-frontend.js 46.2 kB -87 B (0%)
build/cart.js 46 kB -31 B (0%)
build/checkout-blocks/actions-frontend.js 1.78 kB +5 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB +5 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.09 kB +2 B (0%)
build/checkout-blocks/contact-information-frontend.js 1.86 kB +1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB -1 B (0%)
build/checkout-blocks/fields-frontend.js 344 B +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB -1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.88 kB -4 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB -1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 276 B +1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB -2 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB +5 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 431 B -3 B (-1%)
build/checkout-blocks/payment-frontend.js 8.31 kB -6 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.07 kB +2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.02 kB +6 B (0%)
build/checkout-blocks/terms-frontend.js 1.63 kB -2 B (0%)
build/checkout-frontend.js 48.3 kB -35 B (0%)
build/checkout.js 40.6 kB -22 B (0%)
build/featured-category.js 13.2 kB +42 B (0%)
build/featured-product.js 13.5 kB +55 B (0%)
build/filter-wrapper-frontend.js 13.8 kB +1 B (0%)
build/handpicked-products.js 7.33 kB +41 B (+1%)
build/mini-cart-component-frontend.js 20 kB +11 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.98 kB +4 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 588 B -3 B (-1%)
build/mini-cart-contents-block/title-frontend.js 366 B -2 B (-1%)
build/mini-cart-contents.js 17.2 kB -8 B (0%)
build/mini-cart-frontend.js 1.88 kB +1 B (0%)
build/mini-cart.js 4.28 kB -1 B (0%)
build/price-filter-frontend.js 13.6 kB -2 B (0%)
build/price-filter-wrapper-frontend.js 7.01 kB -6 B (0%)
build/price-filter.js 8.37 kB -1 B (0%)
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 225 B -1 B (0%)
build/product-add-to-cart-frontend.js 1.46 kB -2 B (0%)
build/product-add-to-cart.js 8.37 kB +1 B (0%)
build/product-best-sellers.js 7.71 kB +80 B (+1%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B -1 B (0%)
build/product-button-frontend.js 2.18 kB +2 B (0%)
build/product-button.js 3.85 kB -6 B (0%)
build/product-categories.js 2.36 kB +3 B (0%)
build/product-category-list-frontend.js 1.14 kB +1 B (0%)
build/product-category-list.js 503 B +1 B (0%)
build/product-category.js 8.7 kB +77 B (+1%)
build/product-image-frontend.js 2.17 kB +4 B (0%)
build/product-new.js 7.7 kB +69 B (+1%)
build/product-on-sale.js 8.01 kB +61 B (+1%)
build/product-price-frontend.js 2.17 kB -4 B (0%)
build/product-query.js 5.94 kB +3 B (0%)
build/product-rating-frontend.js 1.48 kB -1 B (0%)
build/product-rating.js 814 B -2 B (0%)
build/product-sale-badge-frontend.js 1.39 kB +2 B (0%)
build/product-sale-badge.js 812 B -1 B (0%)
build/product-search.js 2.62 kB +1 B (0%)
build/product-sku-frontend.js 627 B -2 B (0%)
build/product-stock-indicator-frontend.js 1.27 kB +3 B (0%)
build/product-stock-indicator.js 646 B +1 B (0%)
build/product-summary-frontend.js 1.53 kB +4 B (0%)
build/product-tag-list-frontend.js 1.13 kB -2 B (0%)
build/product-tag.js 8.05 kB +47 B (+1%)
build/product-title-frontend.js 1.58 kB -5 B (0%)
build/product-title.js 3.3 kB +1 B (0%)
build/product-top-rated.js 7.93 kB +70 B (+1%)
build/products-by-attribute.js 8.62 kB +77 B (+1%)
build/rating-filter-frontend.js 21.1 kB -1 B (0%)
build/rating-filter-wrapper-frontend.js 6.2 kB +475 B (+8%) 🔍
build/rating-filter.js 7.4 kB -3 B (0%)
build/reviews-by-category.js 11.3 kB +89 B (+1%)
build/reviews-by-product.js 12.4 kB +111 B (+1%)
build/reviews-frontend.js 7.01 kB -5 B (0%)
build/single-product-frontend.js 17.5 kB -5 B (0%)
build/single-product.js 10.1 kB +42 B (0%)
build/stock-filter-frontend.js 20.8 kB +13 kB (+167%) 🆘
build/stock-filter-wrapper-frontend.js 5.85 kB -184 B (-3%)
build/stock-filter.js 8.14 kB +1.43 kB (+21%) 🚨
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart--rating-fil--b47816ec-frontend.js 0 B -6.86 kB (removed) 🏆
build/vendors--attribute-filter-wrapper--rating-filter-wrapper-frontend.js 0 B -8.21 kB (removed) 🏆
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB -3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.82 kB -34 B (-1%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB +1 B (0%)
build/wc-blocks-style-rtl.css 24.4 kB +119 B (0%)
build/wc-blocks-style.css 24.4 kB +120 B (0%)
build/wc-blocks-vendors.js 62.7 kB -84 B (0%)
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart--rating-fil--b8470171-frontend.js 6.85 kB +6.85 kB (new file) 🆕
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB +7.69 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 27.3 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/totals-frontend.js 325 B
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/legacy-template.js 2.85 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 440 B
build/product-image.js 3.93 kB
build/product-price.js 1.54 kB
build/product-sku.js 376 B
build/product-summary.js 917 B
build/product-tag-list.js 497 B
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/wc-blocks-data.js 18.8 kB
build/wc-blocks-editor-style-rtl.css 5.22 kB
build/wc-blocks-editor-style.css 5.23 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

@kmanijak kmanijak changed the title [WIP] Add dropdown version of Filter by Stock Status Add dropdown version of Filter by Stock Status Dec 7, 2022
@kmanijak kmanijak marked this pull request as ready for review December 7, 2022 11:21
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team December 7, 2022 11:21
@sunyatasattva
Copy link
Contributor

Could you clarify which limitations you mean on the FormTokenField? I've used the component from Gutenberg in the exact same scenario and it works fine in my use-case:

Screenshot 2022-12-07 at 23 50 30

Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

Really nice UI improvement, well done! Works nice! I've got a few code comments :)

assets/js/blocks/stock-filter/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/stock-filter/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/stock-filter/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/stock-filter/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/stock-filter/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/stock-filter/edit.tsx Show resolved Hide resolved
assets/js/blocks/stock-filter/edit.tsx Outdated Show resolved Hide resolved
assets/js/blocks/stock-filter/preview.tsx Show resolved Hide resolved
assets/js/blocks/stock-filter/utils.ts Show resolved Hide resolved
tests/e2e/specs/backend/stock-filter.test.js Outdated Show resolved Hide resolved
toMatchElement waits for an element for 30s by itself, hence waitForSelector usage was removed
@kmanijak kmanijak force-pushed the add/filter-by-stock-dropdown branch from b42da7a to 7256bab Compare December 8, 2022 14:58
@kmanijak
Copy link
Contributor Author

kmanijak commented Dec 9, 2022

Could you clarify which limitations you mean on the FormTokenField? I've used the component from Gutenberg in the exact same scenario and it works fine in my use-case:

@sunyatasattva , hmm.. I checked your implementation in PQ inspector-controls and it's much simpler. I was basing on the Filter by Attribute assuming there are cases covered I'm not aware of. Let me simplify the implementation here before next round of review.

@kmanijak
Copy link
Contributor Author

kmanijak commented Dec 9, 2022

Followup to the previous comment: I tried to simplify the usage, but then I realised I cannot achieve the same result as yourself. It's because in the Filter by Stock we use FormTokenField from wordpress-components (which points to @wordpress-components: 14.2.0), while in Editor you used @wordpress-components: 19.1.5. I did a quick check and replaced FormTokenField in PQ inspector-controls to the old one and I can reproduce the problem: using whitespace in the input shows no suggestions (see the video below). I encountered the same in Filter by Stock and by playing with props I was able to achieve the result with the limitations as described.

formtokenfield.mov

My suggestion would be to leave it as it is and improve it once we update the wordpress-components, what do you think?

Having said that, we can go with second round of review:

  • comments with 👍 reaction were addressed
  • others have a response.

PS. That's a lot for a thorough review 🙏

@Aljullu Aljullu added this to the 9.1.1 milestone Dec 12, 2022
@gigitux
Copy link
Contributor

gigitux commented Dec 12, 2022

My review is only related to the feature. I didn't check the code.
Everything works great. I noticed a strange behavior with the order of the labels:

Screen.Capture.on.2022-12-12.at.16-45-51.1.mp4

For me, it isn't a blocker, so I suggest creating an issue, and we will address the fix in the next iteration 👍

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7831.zip

… was set to single

The fix was provided with another PR #7771 and had to be resued here
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

Great Job 🎉 ! I've tested multiple scenarios, and they all worked as expected:

Display Style: Dropdown - Single

✅ Confirmed dropdown has stock status options to choose from.
✅ Confirmed when choosing one option, the page refreshes, and the filter is applied.
✅ Confirmed that when choosing another option, the previous filter is replaced by the new one, the page refreshes, and the filter is applied.
✅ Confirmed both the products and the selected filters are correctly displayed when changing between filters.

Display Style: Dropdown - Multiple

✅ Confirmed dropdown has stock status options to choose from.
✅ Confirmed that when choosing a single option page refreshes & the filter is applied.
✅ Confirmed that when choosing a second option, both filters are in place.
✅ Confirmed both the products and the selected filters are correctly displayed when changing between filters.

Display Style: List - (Single and Multiple)

✅ Confirmed that when changing the filter settings to list, everything works as expected, for both: single and multiple

Apply button

✅ Confirmed the filters are not applied until the "Apply" button is clicked.

🗒️ I've noticed a small spacing issue when using the Stock Filter (with the Apply button enabled) alongside the Products Block:

Screenshot 2022-12-13 at 14 49 58

This is reproducible on trunk as well (pre-existing), so not a blocker here.

✅ Tested other scenarios, including filtering in conjunction with other filters (by rating, by attribute, etc.): confirmed things are working as expected.

@nefeline
Copy link
Contributor

nefeline commented Dec 13, 2022

Minor: I've just noticed that in the editor, the color of this block differs from others:

Screenshot 2022-12-13 at 15 52 22

What do you think about aiming for consistency and ensuring the same initial default color is used here?

@gigitux
Copy link
Contributor

gigitux commented Dec 13, 2022

@nefeline, what theme do you have? With TT3, I'm not able to replicate it.

image

I don't consider it a blocker (not sure that this PR introduces the issue). Does it make sense to create a new issue?

@nefeline
Copy link
Contributor

nefeline commented Dec 13, 2022

Hi @gigitux ! I don't consider this a blocker, either. @kmanijak and I were already chatting about creating a separate issue earlier today: the issue happens when you configure the color via global settings.

@kmanijak
Copy link
Contributor Author

@nefeline, good catch and thanks for raising it! 🙌

I created an issue for that #7940. This will be easier to fix for all three filters that support dropdowns at once: by Attribute, by Rating and by Stock once this PR is merged.

@kmanijak kmanijak merged commit d5a943d into trunk Dec 14, 2022
@kmanijak kmanijak deleted the add/filter-by-stock-dropdown branch December 14, 2022 07:16
@danieldudzic danieldudzic added type: enhancement The issue is a request for an enhancement. block: filter by stock Issues related to the Filter by Stock block. labels Dec 14, 2022
gigitux pushed a commit that referenced this pull request Dec 14, 2022
* 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
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 <gigitux@gmail.com>

* 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 <contact@albertjuhe.com>

* 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 <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Bumping version strings to new version.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
Co-authored-by: Luke O'Regan <oregan.luke@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
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 <gigitux@gmail.com>

* 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 <contact@albertjuhe.com>

* 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 <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* 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 <github-actions@github.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
Co-authored-by: Luke O'Regan <oregan.luke@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
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 <gigitux@gmail.com>

* 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 <contact@albertjuhe.com>

* 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 <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update docs/internal-developers/testing/releases/911.md

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* 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 <github-actions@github.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
Co-authored-by: Luke O'Regan <oregan.luke@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: filter by stock Issues related to the Filter by Stock block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Filter patterns: [Filters alignment] Add dropdown version to *Filter by Stock* block
6 participants