Product Tag Control to a Functional TypeScript component

[mikejolley]

Converts the Product Tag Control from a class based component with prop-types, to a Functional TypeScript component.

Fixes #9531

Screenshots

Testing

Automated Tests

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

Developer Testing

For debounced searches, this requires a store with many tags. You can short circuit this by editing the line:

const limitTags = getSetting( 'limitTags', false );

To:

const limitTags = true;

Then try searching for a tag. After a small 400ms debounce, confirm search results appear in the list.

User Facing Testing

Requires a store with several products which are assigned product tags.

1. Create a new page and insert the Products By Tag Block.
2. Confirm the list of tags loads.
3. Select the checkbox beside some tags and that selections are stored.
4. Enter a search term. The list of tags should be reduced and tags that match the search are highlighted.
5. Clear the search.
6. Test clearing all assigned tags.
7. Select more than 2 tags, and in the "DISPLAY PRODUCTS MATCHING" section, change the option and confirm tags continue to display.
8. Save the page.
9. After reloading the page, edit the Products By Tag Block. Confirm previous selections are still selected.

• Do not include in the Testing Notes
• Should be tested by the development team exclusively

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

[github-actions]

The release ZIP for this PR is accessible via:

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

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
wc-blocks.js	wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives		⚠️
active-filters.js	wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-products.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
all-reviews.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives		⚠️
attribute-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
breadcrumbs.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
cart.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
catalog-sorting.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
checkout.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
customer-account.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
featured-category.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url		⚠️
featured-product.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url		⚠️
filter-wrapper.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
handpicked-products.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
legacy-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-notices, wp-polyfill, wp-primitives		⚠️
mini-cart.js	react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-dom, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart-contents.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
store-notices.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
price-filter.js	react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
product-best-sellers.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-category.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-categories.js	wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render		⚠️
product-gallery.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-gallery-large-image.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-polyfill		⚠️
product-gallery-thumbnails.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-new.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-on-sale.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-query.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-results-count.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-search.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-tag.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-top-rated.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
products-by-attribute.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
rating-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
reviews-by-category.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
reviews-by-product.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
single-product.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
stock-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
product-collection.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-polyfill		⚠️

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

TypeScript Errors Report

• Files with errors: 473
• Total errors: 2242

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: -164 B (0%)

Total Size: 1.34 MB

Filename	Size	Change
build/active-filters.js	7.5 kB	+1 B (0%)
build/all-products.js	41.3 kB	+4 B (0%)
build/all-reviews.js	7.76 kB	-3 B (0%)
build/attribute-filter.js	13.1 kB	-1 B (0%)
build/cart.js	45 kB	+3 B (0%)
build/catalog-sorting.js	1.71 kB	+1 B (0%)
build/checkout.js	47.7 kB	+1 B (0%)
build/customer-account.js	3.18 kB	-1 B (0%)
build/featured-product.js	15.1 kB	-1 B (0%)
build/handpicked-products.js	7.96 kB	+1 B (0%)
build/legacy-template.js	8.15 kB	+2 B (0%)
build/mini-cart-contents.js	17.6 kB	+1 B (0%)
build/mini-cart.js	6.34 kB	+1 B (0%)
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js	272 B	+1 B (0%)
build/product-add-to-cart.js	8.55 kB	-5 B (0%)
build/product-button.js	3.88 kB	-3 B (0%)
build/product-categories.js	2.71 kB	+2 B (0%)
build/product-collection.js	13.8 kB	-1 B (0%)
build/product-gallery.js	6.08 kB	+1 B (0%)
build/product-image.js	1.5 kB	-1 B (0%)
build/product-query.js	12.8 kB	+1 B (0%)
build/product-rating.js	1.04 kB	+1 B (0%)
build/product-results-count.js	1.66 kB	-1 B (0%)
build/product-summary.js	920 B	+1 B (0%)
build/product-tag.js	8.61 kB	-176 B (-2%)
build/product-title.js	964 B	-1 B (0%)
build/products-by-attribute.js	9.63 kB	+4 B (0%)
build/rating-filter.js	6.88 kB	+1 B (0%)
build/reviews-by-category.js	12 kB	-3 B (0%)
build/reviews-by-product.js	13.1 kB	-1 B (0%)
build/single-product.js	11.2 kB	+2 B (0%)
build/store-notices.js	1.69 kB	-3 B (0%)
build/wc-blocks-vendors.js	65.5 kB	+8 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.56 kB
build/active-filters-rtl.css	1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js	929 B
build/active-filters-wrapper-frontend.js	7.58 kB
build/active-filters-wrapper-rtl.css	1.85 kB
build/active-filters-wrapper.css	1.85 kB
build/active-filters.css	1.99 kB
build/add-to-cart-form-rtl.css	355 B
build/add-to-cart-form.css	354 B
build/all-products-frontend.js	9.94 kB
build/all-products-rtl.css	4.19 kB
build/all-products.css	4.19 kB
build/all-reviews-rtl.css	1.79 kB
build/all-reviews.css	1.79 kB
build/attribute-filter-frontend.js	22.9 kB
build/attribute-filter-rtl.css	4.14 kB
build/attribute-filter-wrapper-frontend.js	8.01 kB
build/attribute-filter-wrapper-rtl.css	4.01 kB
build/attribute-filter-wrapper.css	4.01 kB
build/attribute-filter.css	4.14 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs-rtl.css	232 B
build/breadcrumbs.css	232 B
build/breadcrumbs.js	2.15 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js	136 B
build/cart-blocks/cart-cross-sells-frontend.js	249 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.89 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.72 kB
build/cart-blocks/cart-cross-sells-products-style.js	137 B
build/cart-blocks/cart-cross-sells-style.js	250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5 kB
build/cart-blocks/cart-express-payment-frontend.js	712 B
build/cart-blocks/cart-express-payment-style.js	138 B
build/cart-blocks/cart-items-frontend.js	286 B
build/cart-blocks/cart-items-style.js	218 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.34 kB
build/cart-blocks/cart-line-items-frontend.js	1.04 kB
build/cart-blocks/cart-line-items-style.js	137 B
build/cart-blocks/cart-order-summary-frontend.js	1.24 kB
build/cart-blocks/cart-order-summary-style.js	318 B
build/cart-blocks/cart-totals-frontend.js	289 B
build/cart-blocks/cart-totals-style.js	228 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/empty-cart-style.js	335 B
build/cart-blocks/filled-cart-frontend.js	650 B
build/cart-blocks/filled-cart-style.js	310 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js	136 B
build/cart-blocks/order-summary-discount-frontend.js	2.04 kB
build/cart-blocks/order-summary-discount-style.js	137 B
build/cart-blocks/order-summary-fee-frontend.js	270 B
build/cart-blocks/order-summary-fee-style.js	136 B
build/cart-blocks/order-summary-heading-frontend.js	326 B
build/cart-blocks/order-summary-heading-style.js	325 B
build/cart-blocks/order-summary-shipping-frontend.js	12 kB
build/cart-blocks/order-summary-shipping-style.js	177 B
build/cart-blocks/order-summary-subtotal-frontend.js	270 B
build/cart-blocks/order-summary-subtotal-style.js	137 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/order-summary-taxes-style.js	177 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.41 kB
build/cart-blocks/proceed-to-checkout-style.js	1.09 kB
build/cart-frontend.js	29.7 kB
build/cart-rtl.css	9.51 kB
build/cart.css	9.49 kB
build/catalog-sorting-rtl.css	256 B
build/catalog-sorting.css	256 B
build/checkout-blocks/actions--checkout-blocks/terms-style.js	485 B
build/checkout-blocks/actions-frontend.js	1.81 kB
build/checkout-blocks/actions-style.js	680 B
build/checkout-blocks/billing-address-frontend.js	4.29 kB
build/checkout-blocks/billing-address-style.js	533 B
build/checkout-blocks/contact-information-frontend.js	2.02 kB
build/checkout-blocks/contact-information-style.js	606 B
build/checkout-blocks/express-payment-frontend.js	1.11 kB
build/checkout-blocks/fields-frontend.js	301 B
build/checkout-blocks/fields-style.js	248 B
build/checkout-blocks/order-note-frontend.js	1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.63 kB
build/checkout-blocks/order-summary-cart-items-style.js	136 B
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.72 kB
build/checkout-blocks/order-summary-coupon-form-style.js	136 B
build/checkout-blocks/order-summary-discount-frontend.js	2.21 kB
build/checkout-blocks/order-summary-discount-style.js	136 B
build/checkout-blocks/order-summary-fee-frontend.js	273 B
build/checkout-blocks/order-summary-fee-style.js	137 B
build/checkout-blocks/order-summary-frontend.js	1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js	12 kB
build/checkout-blocks/order-summary-shipping-style.js	137 B
build/checkout-blocks/order-summary-style.js	317 B
build/checkout-blocks/order-summary-subtotal-frontend.js	271 B
build/checkout-blocks/order-summary-subtotal-style.js	137 B
build/checkout-blocks/order-summary-taxes-frontend.js	434 B
build/checkout-blocks/order-summary-taxes-style.js	177 B
build/checkout-blocks/payment-frontend.js	9.12 kB
build/checkout-blocks/payment-style.js	461 B
build/checkout-blocks/pickup-options-frontend.js	4.13 kB
build/checkout-blocks/pickup-options-style.js	439 B
build/checkout-blocks/shipping-address-frontend.js	4.28 kB
build/checkout-blocks/shipping-address-style.js	476 B
build/checkout-blocks/shipping-method-frontend.js	2.58 kB
build/checkout-blocks/shipping-method-style.js	1.35 kB
build/checkout-blocks/shipping-methods-frontend.js	5.69 kB
build/checkout-blocks/shipping-methods-style.js	416 B
build/checkout-blocks/terms-frontend.js	1.51 kB
build/checkout-blocks/terms-style.js	673 B
build/checkout-blocks/totals-frontend.js	332 B
build/checkout-blocks/totals-style.js	275 B
build/checkout-frontend.js	31.6 kB
build/checkout-rtl.css	9.07 kB
build/checkout.css	9.06 kB
build/customer-account-rtl.css	388 B
build/customer-account.css	387 B
build/featured-category-rtl.css	971 B
build/featured-category.css	970 B
build/featured-category.js	14.9 kB
build/featured-product-rtl.css	1.02 kB
build/featured-product.css	1.02 kB
build/filter-wrapper-frontend.js	14.1 kB
build/filter-wrapper-rtl.css	375 B
build/filter-wrapper.css	375 B
build/filter-wrapper.js	2.39 kB
build/legacy-template-rtl.css	238 B
build/legacy-template.css	238 B
build/mini-cart-component-frontend.js	30.8 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js	249 B
build/mini-cart-contents-block/cart-button-frontend.js	1.69 kB
build/mini-cart-contents-block/cart-button-style.js	380 B
build/mini-cart-contents-block/checkout-button-frontend.js	1.77 kB
build/mini-cart-contents-block/checkout-button-style.js	463 B
build/mini-cart-contents-block/empty-cart-frontend.js	357 B
build/mini-cart-contents-block/empty-cart-style.js	356 B
build/mini-cart-contents-block/filled-cart-frontend.js	266 B
build/mini-cart-contents-block/filled-cart-style.js	267 B
build/mini-cart-contents-block/footer-frontend.js	3.77 kB
build/mini-cart-contents-block/footer-rtl.css	400 B
build/mini-cart-contents-block/footer-style.js	2.34 kB
build/mini-cart-contents-block/footer.css	400 B
build/mini-cart-contents-block/items-frontend.js	228 B
build/mini-cart-contents-block/items-style.js	228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js	316 B
build/mini-cart-contents-block/products-table-frontend.js	546 B
build/mini-cart-contents-block/products-table-rtl.css	2.12 kB
build/mini-cart-contents-block/products-table-style.js	5.32 kB
build/mini-cart-contents-block/products-table.css	2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js	488 B
build/mini-cart-contents-block/shopping-button-style.js	395 B
build/mini-cart-contents-block/title-frontend.js	1.85 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.57 kB
build/mini-cart-contents-block/title-items-counter-style.js	302 B
build/mini-cart-contents-block/title-label-frontend.js	1.51 kB
build/mini-cart-contents-block/title-label-style.js	301 B
build/mini-cart-contents-block/title-style.js	438 B
build/mini-cart-contents-rtl.css	2.66 kB
build/mini-cart-contents.css	2.65 kB
build/mini-cart-frontend.js	2.79 kB
build/mini-cart-rtl.css	2.56 kB
build/mini-cart.css	2.56 kB
build/packages-style-rtl.css	3.55 kB
build/packages-style.css	3.55 kB
build/price-filter-frontend.js	14.5 kB
build/price-filter-rtl.css	2.67 kB
build/price-filter-wrapper-frontend.js	8.57 kB
build/price-filter-wrapper-rtl.css	2.53 kB
build/price-filter-wrapper.css	2.53 kB
build/price-filter.css	2.67 kB
build/price-filter.js	8.51 kB
build/price-format.js	1.15 kB
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js	150 B
build/product-add-to-cart--product-image--product-title.js	319 B
build/product-add-to-cart-frontend.js	8.51 kB
build/product-add-to-cart-rtl.css	1.35 kB
build/product-add-to-cart.css	1.36 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js	933 B
build/product-average-rating-frontend.js	1.71 kB
build/product-average-rating.js	400 B
build/product-best-sellers.js	8.32 kB
build/product-button-frontend.js	4.87 kB
build/product-button-rtl.css	864 B
build/product-button.css	863 B
build/product-categories-rtl.css	651 B
build/product-categories.css	649 B
build/product-category.js	9.29 kB
build/product-details-rtl.css	394 B
build/product-details.css	391 B
build/product-gallery-large-image-rtl.css	295 B
build/product-gallery-large-image.css	295 B
build/product-gallery-large-image.js	2.02 kB
build/product-gallery-rtl.css	371 B
build/product-gallery-thumbnails-rtl.css	272 B
build/product-gallery-thumbnails.css	271 B
build/product-gallery-thumbnails.js	3.91 kB
build/product-gallery.css	373 B
build/product-image-frontend.js	2.65 kB
build/product-image-gallery-rtl.css	304 B
build/product-image-gallery.css	303 B
build/product-image-rtl.css	922 B
build/product-image.css	920 B
build/product-new.js	8.6 kB
build/product-on-sale.js	8.6 kB
build/product-price-frontend.js	247 B
build/product-price-rtl.css	667 B
build/product-price.css	665 B
build/product-price.js	1.65 kB
build/product-query-rtl.css	347 B
build/product-query.css	347 B
build/product-rating-counter-frontend.js	2.01 kB
build/product-rating-counter.js	687 B
build/product-rating-frontend.js	2.36 kB
build/product-rating-rtl.css	244 B
build/product-rating-stars-frontend.js	2.25 kB
build/product-rating-stars-rtl.css	895 B
build/product-rating-stars.css	897 B
build/product-rating-stars.js	938 B
build/product-rating.css	244 B
build/product-results-count-rtl.css	228 B
build/product-results-count.css	228 B
build/product-reviews-rtl.css	456 B
build/product-reviews.css	455 B
build/product-sale-badge-frontend.js	1.8 kB
build/product-sale-badge-rtl.css	369 B
build/product-sale-badge.css	370 B
build/product-sale-badge.js	671 B
build/product-search-rtl.css	415 B
build/product-search.css	415 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1.84 kB
build/product-sku-rtl.css	237 B
build/product-sku.css	237 B
build/product-sku.js	522 B
build/product-stock-indicator-frontend.js	2.02 kB
build/product-stock-indicator-rtl.css	229 B
build/product-stock-indicator.css	229 B
build/product-stock-indicator.js	709 B
build/product-summary-frontend.js	2.18 kB
build/product-summary-rtl.css	546 B
build/product-summary.css	546 B
build/product-template-rtl.css	418 B
build/product-template.css	418 B
build/product-template.js	3.43 kB
build/product-title-frontend.js	2.21 kB
build/product-title-rtl.css	688 B
build/product-title.css	689 B
build/product-top-rated.js	8.87 kB
build/rating-filter-frontend.js	21.5 kB
build/rating-filter-rtl.css	4.2 kB
build/rating-filter-wrapper-frontend.js	6.62 kB
build/rating-filter-wrapper-rtl.css	4.07 kB
build/rating-filter-wrapper.css	4.07 kB
build/rating-filter.css	4.19 kB
build/reviews-by-category-rtl.css	1.79 kB
build/reviews-by-category.css	1.79 kB
build/reviews-by-product-rtl.css	1.79 kB
build/reviews-by-product.css	1.79 kB
build/reviews-frontend.js	7.06 kB
build/single-product-rtl.css	375 B
build/single-product.css	375 B
build/stock-filter-frontend.js	21.7 kB
build/stock-filter-rtl.css	4.01 kB
build/stock-filter-wrapper-frontend.js	6.82 kB
build/stock-filter-wrapper-rtl.css	3.88 kB
build/stock-filter-wrapper.css	3.88 kB
build/stock-filter.css	4.01 kB
build/stock-filter.js	7.61 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js	606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.29 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js	8.22 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js	179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.59 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.4 kB
build/vendors--checkout-blocks/shipping-method-style.js	11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js	5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js	3.16 kB
build/vendors--product-add-to-cart-frontend.js	7.52 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css	237 B
build/wc-blocks-classic-template-revert-button-style.css	236 B
build/wc-blocks-classic-template-revert-button.js	1.53 kB
build/wc-blocks-data.js	21.9 kB
build/wc-blocks-editor-style-rtl.css	6.37 kB
build/wc-blocks-editor-style.css	6.38 kB
build/wc-blocks-google-analytics.js	1.55 kB
build/wc-blocks-middleware.js	934 B
build/wc-blocks-registry.js	3.19 kB
build/wc-blocks-rtl.css	2.46 kB
build/wc-blocks-shared-context.js	1.1 kB
build/wc-blocks-shared-hocs.js	1.63 kB
build/wc-blocks.css	2.46 kB
build/wc-blocks.js	2.62 kB
build/wc-interactivity.js	10.3 kB
build/wc-payment-method-bacs.js	817 B
build/wc-payment-method-cheque.js	813 B
build/wc-payment-method-cod.js	914 B
build/wc-payment-method-paypal.js	852 B
build/wc-settings.js	2.68 kB
build/wc-shipping-method-pickup-location.js	30.4 kB

_{compressed-size-action}

[tarhi-saad]

Hey, @mikejolley! Thank you for working on this PR! I left some questions below.

[tarhi-saad]

We set the list state in the previous code to an empty array inside the catch block. Shouldn't we do the same here?

[mikejolley]

I decided not to. It seemed like keeping a list visible on fail would be more graceful than showing an empty state with no items.

[tarhi-saad]

This is a unique approach to executing useEffect just once. Wouldn't providing an empty array achieve the same outcome? This way, we could eliminate the need for the isMounted state.

[mikejolley]

That won't work here because of the dependencies of the hook. Without the mounted check it would run on other renders if onSearch changed (it did in testing). We've used this pattern before.

[tarhi-saad]

Thank you for the clarification, @mikejolley! The code and testing look good! Let's 🚢 it.