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

Product Query - Enable "Inherit Query from template" option #7641

Merged
merged 7 commits into from
Dec 12, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Nov 9, 2022

This PR restores the "Inherit Query from template" from Gutenberg. The setting option will be visible only when the block is added in the Site Editor. Furthermore, at least for now, when the setting is enabled, the rest of the settings that customize the query are hidden.

Also, this PR could be considered the starting point for working on #7629. These E2E tests check that the results between the Classic Templates and the Product Query are equal (same products, in the same order).

Fixes #7629

Warning
The UI is not definitive.

Post/Page Editor

image

Site Editor

Screen.Capture.on.2022-12-07.at.12-42-13.mp4

Testing

Automated Tests

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

User Facing Testing

Site Editor

  1. Add the Product Query in a template (eg: Product Catalog)
  2. Check that the Inherit Query from template option is visible.
  3. Enable it.
  4. Be sure that all the settings that customize the query are hidden.
  5. Save.
  6. Be sure that the result generated by the Product Query is the same as the classic FSE template (there are E2E tests that check this ).
  7. Edit the Product Catalog and disable the Inherit Query from template option.
  8. Ensure all the settings that customize the query are visible.

Post/Page Editor

  1. Add the Product Query in a template (eg: Product Catalog)
  2. Check that the Inherit Query from template option isn't visible.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Product Query: Add the "Inherit Query from template" option.

@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team November 9, 2022 15:43
@github-actions
Copy link
Contributor

github-actions bot commented Nov 9, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 9, 2022

TypeScript Errors Report

Files with errors: 430
Total errors: 2063

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

assets/js/blocks/product-query/constants.ts

assets/js/blocks/product-query/utils.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Nov 9, 2022

Size Change: +474 B (0%)

Total Size: 975 kB

Filename Size Change
build/active-filters.js 7.32 kB +1 B (0%)
build/all-products-frontend.js 11.3 kB +2 B (0%)
build/all-products.js 33.2 kB +1 B (0%)
build/all-reviews.js 7.79 kB +2 B (0%)
build/attribute-filter-frontend.js 22.7 kB +50 B (0%)
build/attribute-filter-wrapper-frontend.js 7.17 kB +39 B (+1%)
build/attribute-filter.js 12.3 kB +39 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 4.77 kB +7 B (0%)
build/cart-frontend.js 46.2 kB +3 B (0%)
build/cart.js 46.4 kB +10 B (0%)
build/featured-category.js 13.2 kB +1 B (0%)
build/filter-wrapper-frontend.js 13.8 kB +2 B (0%)
build/filter-wrapper.js 2.4 kB +2 B (0%)
build/handpicked-products.js 7.29 kB +1 B (0%)
build/legacy-template.js 2.86 kB +1 B (0%)
build/mini-cart-contents.js 17.1 kB -2 B (0%)
build/price-filter.js 8.39 kB -1 B (0%)
build/product-add-to-cart.js 8.37 kB +2 B (0%)
build/product-best-sellers.js 7.62 kB +1 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 438 B +8 B (+2%)
build/product-button-frontend.js 2.17 kB +7 B (0%)
build/product-category-list-frontend.js 1.14 kB +8 B (+1%)
build/product-category.js 8.61 kB +2 B (0%)
build/product-image-frontend.js 2.17 kB +7 B (0%)
build/product-new.js 7.62 kB +2 B (0%)
build/product-on-sale.js 7.95 kB -1 B (0%)
build/product-price-frontend.js 2.17 kB +7 B (0%)
build/product-query.js 5.91 kB +172 B (+3%)
build/product-rating-frontend.js 1.48 kB +6 B (0%)
build/product-sale-badge-frontend.js 1.39 kB +9 B (+1%)
build/product-stock-indicator-frontend.js 1.26 kB +8 B (+1%)
build/product-summary-frontend.js 1.53 kB +8 B (+1%)
build/product-tag-list-frontend.js 1.13 kB +8 B (+1%)
build/product-tag.js 8 kB -2 B (0%)
build/product-title-frontend.js 1.58 kB +6 B (0%)
build/product-title.js 3.3 kB -1 B (0%)
build/product-top-rated.js 7.86 kB +1 B (0%)
build/reviews-by-category.js 11.2 kB -1 B (0%)
build/reviews-by-product.js 12.3 kB -2 B (0%)
build/single-product-frontend.js 17.5 kB +3 B (0%)
build/stock-filter.js 6.71 kB +1 B (0%)
build/wc-blocks-editor-style-rtl.css 5.22 kB +38 B (+1%)
build/wc-blocks-editor-style.css 5.23 kB +39 B (+1%)
build/wc-blocks-style-rtl.css 24.2 kB -8 B (0%)
build/wc-blocks-style.css 24.2 kB -8 B (0%)
build/wc-blocks-vendors.js 62.4 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
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/cart-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB
build/cart-blocks/cart-express-payment-frontend.js 778 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 5.99 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB
build/checkout-blocks/billing-address-frontend.js 1.09 kB
build/checkout-blocks/contact-information-frontend.js 1.87 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.32 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 48.3 kB
build/checkout.js 40.6 kB
build/featured-product.js 13.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/mini-cart-component-frontend.js 20 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/footer-frontend.js 2.95 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button.js 3.85 kB
build/product-categories.js 2.36 kB
build/product-category-list.js 503 B
build/product-image.js 3.93 kB
build/product-price.js 1.54 kB
build/product-rating.js 816 B
build/product-sale-badge.js 811 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator.js 644 B
build/product-summary.js 920 B
build/product-tag-list.js 497 B
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.8 kB
build/reviews-frontend.js 7.02 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.8 kB
build/stock-filter-wrapper-frontend.js 6.04 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.2 kB
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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.8 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

@gigitux gigitux marked this pull request as draft November 9, 2022 17:09
@gigitux gigitux changed the title [WIP]Add/add e2e test product query global query Product Query - Add E2E test to check that the block and Classic Template render the same results Nov 9, 2022
@gigitux gigitux self-assigned this Nov 9, 2022
@gigitux gigitux added category: tests focus: template Related to API powering block template functionality in the Site Editor block-type: product-query Issues related to/affecting all product-query variations. labels Nov 9, 2022
@gigitux gigitux changed the title Product Query - Add E2E test to check that the block and Classic Template render the same results Product Query - Add E2E test to check that the block and Classic Templates render the same results Nov 9, 2022
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 17, 2022
@gigitux gigitux removed the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 17, 2022
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 25, 2022
@gigitux gigitux removed the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 25, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Nov 28, 2022

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

@gigitux gigitux force-pushed the add/add_e2e_test_product_query_global_query branch 3 times, most recently from 774837d to c02df57 Compare November 29, 2022 15:04
testMatch: [
'**/__tests__/**/*.[jt]s?(x)',
'**/?(*.)+(spec|test).[jt]s?(x)',
'!**/?(*.)+(utils).[jt]s?(x)',
Copy link
Contributor Author

@gigitux gigitux Nov 29, 2022

Choose a reason for hiding this comment

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

The first two lines are the default from the jest configuration (source: https://jestjs.io/docs/28.x/configuration#testmatch-arraystring).
The last one is for not running jest on all the files that have the suffix -utils or called utils.

Copy link
Contributor

Choose a reason for hiding this comment

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

Could the last line be included in testPathIgnorePatterns so we don't need testMatch?

@gigitux gigitux force-pushed the add/add_e2e_test_product_query_global_query branch from 3e3a37c to 421435f Compare November 29, 2022 15:14
@gigitux gigitux marked this pull request as ready for review November 29, 2022 15:24
@rubikuserbot rubikuserbot requested a review from a team November 29, 2022 15:24
@gigitux gigitux force-pushed the add/add_e2e_test_product_query_global_query branch from 5ca26d5 to ab6fb58 Compare November 29, 2022 15:29
@sunyatasattva sunyatasattva self-requested a review December 1, 2022 13:42
@Aljullu Aljullu added this to the 9.1.1 milestone Dec 12, 2022
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

LGTM, thanks for working on this complex PR, @gigitux!

One question: should WooCommerce Visibility in the PR description be updated to WooCommerce Core?

Also, not a blocker but I found an unexpected situation:

  • Edit the Product Search Results template.
  • Add the Products block.
  • Add the Sale Status filter and select Show only products on sale.
  • Now, enable Inherit query from template.
  • Notice only products on sale are displayed in the editor.
  • Instead, all products are shown in the frontend.

As said, I don't think it's a blocker because in the frontend it works fine, but it might be good to create a follow-up issue.

@gigitux
Copy link
Contributor Author

gigitux commented Dec 12, 2022

@vivialice @nerrad Should we improve the labels before merging this PR?

image

@nerrad
Copy link
Contributor

nerrad commented Dec 12, 2022

@vivialice @nerrad Should we improve the labels before merging this PR?

How trivial is it to change the labels or description?

@gigitux
Copy link
Contributor Author

gigitux commented Dec 12, 2022

@vivialice @nerrad Should we improve the labels before merging this PR?

How trivial is it to change the labels or description?

Super easy! It is necessary updates the strings here.

@nerrad
Copy link
Contributor

nerrad commented Dec 12, 2022

Hmm, I'm on the fence about changing the wording. As is, it concisely explains technically what the option does. I'd prefer to roll out with minimal changes for now until we see how much of an issue it is.

So I would suggest changing just the description for now:

Before After
Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently. Toggle to use the global query context that is set with the current template, such as variations of the product catalog or search. Disable to customize the filtering independently.

@gigitux
Copy link
Contributor Author

gigitux commented Dec 12, 2022

LGTM, thanks for working on this complex PR, @gigitux!

One question: should WooCommerce Visibility in the PR description be updated to WooCommerce Core?

Also, not a blocker but I found an unexpected situation:

  • Edit the Product Search Results template.
  • Add the Products block.
  • Add the Sale Status filter and select Show only products on sale.
  • Now, enable Inherit query from template.
  • Notice only products on sale are displayed in the editor.
  • Instead, all products are shown in the frontend.

As said, I don't think it's a blocker because in the frontend it works fine, but it might be good to create a follow-up issue.

Nice catch! The preview for other templates is updated correctly because Gutenberg logic takes care of it.

This doesn't happen with the Product Search Results because its slug doesn't start with archive- or category-.
We can easily fix this by restoring the default query.
The only disadvantage of this approach is that if the user applies some filters, enables the inherit query from the template option, and after that disables it, will lose all the customization that did.

@gigitux
Copy link
Contributor Author

gigitux commented Dec 12, 2022

Hmm, I'm on the fence about changing the wording. As is, it concisely explains technically what the option does. I'd prefer to roll out with minimal changes for now until we see how much of an issue it is.

So I would suggest changing just the description for now:

Before After
Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently. Toggle to use the global query context that is set with the current template, such as variations of the product catalog or search. Disable to customize the filtering independently.

Update the label with 49be1e7.

@Aljullu
Copy link
Contributor

Aljullu commented Dec 12, 2022

We can easily fix this by restoring the default query.
The only disadvantage of this approach is that if the user applies some filters, enables the inherit query from the template option, and after that disables it, will lose all the customization that did.

Yeah, I prefer the current behavior than the user losing the attributes after toggling on and off the inherit query from the template option.

For this specific PR, I would merge it as-is. In the future, we can investigate if there are alternative approaches to reset the query in the editor, but definitely not a blocker.

@gigitux gigitux merged commit a7d7083 into trunk Dec 12, 2022
@gigitux gigitux deleted the add/add_e2e_test_product_query_global_query branch December 12, 2022 15:06
@gigitux
Copy link
Contributor Author

gigitux commented Dec 12, 2022

I merged the PR and I created a follow-up issue #7921.

@vivialice
Copy link

Hmm, I'm on the fence about changing the wording. As is, it concisely explains technically what the option does. I'd prefer to roll out with minimal changes for now until we see how much of an issue it is.

Do you think this may be too technical @nerrad ? I am okay with your suggestion but I feel like the average user might not understand what a global query context is. Perhaps we can think about including some messaging around it being a "recommended" setting?

@sunyatasattva
Copy link
Contributor

+1 On the copy being a tad too technical and esoteric, both of the label and the help text. Summoning @ifinoi 😁

@nerrad
Copy link
Contributor

nerrad commented Dec 13, 2022

I am okay with your suggestion but I feel like the average user might not understand what a global query context is.

I don't disagree, I just haven't thought of more friendly wording to describe what this toggle does.

Perhaps we can think about including some messaging around it being a "recommended" setting?

Maybe? But then why is it recommended?

If we can come up with some more user-friendly wording that still correctly describes what this toggle does, I'm all for changing it, just not sure it needs to block the release to core while still beta. I also want to avoid too much churn around translated strings until we've settled on something.

@nerrad
Copy link
Contributor

nerrad commented Dec 13, 2022

Something else that I waffle between is that while we are aiming to make the store editing experience in the context of the Site editor as merchant friendly as possible, I think there are still areas where more technical terms are the best way of describing what certain functionality does. Things like "query", "template", "filter" are words used to describe behaviour that often doesn't have really great similes and descriptions can get fairly wordy fast (which pollutes the UI). At some point, the concept of "this template uses data from the context of the route" needs to be understood on some level when modifying the template's layout.

What we could do, is for those concepts that are more technical than others, we could link off to documentation that uses more words to describe what a query is, or further expands on a description.

@nerrad
Copy link
Contributor

nerrad commented Dec 13, 2022

Some good reference material around the topic of phrasing and user experience in general for the WP Query Loop block are the following issues in the Gutenberg project:

@danieldudzic danieldudzic added the type: enhancement The issue is a request for an enhancement. label Dec 14, 2022
gigitux added a commit that referenced this pull request Dec 14, 2022
* Add Inherit Query from template option

* Update label
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-type: product-query Issues related to/affecting all product-query variations. focus: template Related to API powering block template functionality in the Site Editor type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Query [3]: [Tests] Add E2E tests for the FSE functionalities
7 participants