Get product by ID if there's more products returned from useStoreProducts

[kmanijak]

This PR is an improvement found while working on #8131. When there are more products returned from useStoreProducts, the first product was taken as the correct one, while we can take it based on id.

Testing

Automated Tests

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

User Facing Testing

1. Go to Editor
2. Add All Products and Products blocks
3. Smoke test them, so that they display a correct data in the Editor and Frontend
4. During testing disable the "Inherit query from template" option for Products block and when disabled change the Advanced filters and make sure products are still loaded properly

• [] Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

useStoreProducts: Improve the logic of choosing the product from the outcome

[github-actions]

The release ZIP for this PR is accessible via:

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

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.

TypeScript Errors Report

• Files with errors: 452
• Total errors: 2216

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

assets/js/shared/hocs/with-product-data-context.js

_{comments-aggregator}

[github-actions]

Size Change: +17 B (0%)

Total Size: 1.11 MB

Filename	Size	Change
build/wc-blocks-shared-hocs.js	1.75 kB	+17 B (+1%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.99 kB
build/active-filters-wrapper-frontend.js	5.97 kB
build/active-filters.js	7.49 kB
build/all-products-frontend.js	11.8 kB
build/all-products.js	38.5 kB
build/all-reviews.js	7.65 kB
build/attribute-filter-frontend.js	22.4 kB
build/attribute-filter-wrapper-frontend.js	7.07 kB
build/attribute-filter.js	13.2 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.05 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-frontend.js	9.82 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.16 kB
build/cart-blocks/cart-express-payment-frontend.js	719 B
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.4 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-order-summary-frontend.js	1.27 kB
build/cart-blocks/cart-totals-frontend.js	308 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	657 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.62 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	272 B
build/cart-blocks/order-summary-heading-frontend.js	456 B
build/cart-blocks/order-summary-shipping-frontend.js	11.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	432 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.33 kB
build/cart-frontend.js	29.3 kB
build/cart.js	48.7 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address-frontend.js	4.19 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.71 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js	11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	431 B
build/checkout-blocks/payment-frontend.js	8.27 kB
build/checkout-blocks/pickup-options-frontend.js	4.14 kB
build/checkout-blocks/shipping-address-frontend.js	4.14 kB
build/checkout-blocks/shipping-method-frontend.js	2.63 kB
build/checkout-blocks/shipping-methods-frontend.js	5.83 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	311 B
build/checkout-frontend.js	30.9 kB
build/checkout.js	46.4 kB
build/customer-account.js	3.17 kB
build/featured-category.js	14.1 kB
build/featured-product.js	14.3 kB
build/filter-wrapper-frontend.js	14 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	7.92 kB
build/legacy-template.js	5.63 kB
build/mini-cart-component-frontend.js	29.2 kB
build/mini-cart-contents-block/cart-button-frontend.js	867 B
build/mini-cart-contents-block/checkout-button-frontend.js	870 B
build/mini-cart-contents-block/empty-cart-frontend.js	361 B
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	3.2 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	588 B
build/mini-cart-contents-block/shopping-button-frontend.js	760 B
build/mini-cart-contents-block/title-frontend.js	1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	733 B
build/mini-cart-contents-block/title-label-frontend.js	660 B
build/mini-cart-contents.js	17.8 kB
build/mini-cart-frontend.js	2.02 kB
build/mini-cart.js	4.49 kB
build/price-filter-frontend.js	13.9 kB
build/price-filter-wrapper-frontend.js	7.04 kB
build/price-filter.js	8.46 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.43 kB
build/product-add-to-cart.js	8.8 kB
build/product-best-sellers.js	8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js	262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	464 B
build/product-button-frontend.js	1.92 kB
build/product-button.js	4.17 kB
build/product-categories.js	2.37 kB
build/product-category.js	9.25 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	4.3 kB
build/product-new.js	8.26 kB
build/product-on-sale.js	8.58 kB
build/product-price-frontend.js	2.12 kB
build/product-price.js	1.67 kB
build/product-query.js	11.3 kB
build/product-rating-frontend.js	1.33 kB
build/product-rating.js	920 B
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	976 B
build/product-sale-badge.js	800 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1 kB
build/product-sku.js	578 B
build/product-stock-indicator-frontend.js	1.19 kB
build/product-stock-indicator.js	770 B
build/product-summary-frontend.js	1.29 kB
build/product-summary.js	923 B
build/product-tag.js	8.74 kB
build/product-title-frontend.js	1.37 kB
build/product-title.js	3.73 kB
build/product-top-rated.js	8.49 kB
build/products-by-attribute.js	9.59 kB
build/rating-filter-frontend.js	20.8 kB
build/rating-filter-wrapper-frontend.js	5.59 kB
build/rating-filter.js	6.99 kB
build/reviews-by-category.js	11.9 kB
build/reviews-by-product.js	13 kB
build/reviews-frontend.js	7.1 kB
build/single-product.js	11 kB
build/stock-filter-frontend.js	21.1 kB
build/stock-filter-wrapper-frontend.js	5.83 kB
build/stock-filter.js	7.7 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js	6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-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.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js	8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.45 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/wc-blocks-data.js	21.8 kB
build/wc-blocks-editor-style-rtl.css	5.87 kB
build/wc-blocks-editor-style.css	5.87 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-style-rtl.css	27.6 kB
build/wc-blocks-style.css	27.6 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	62.8 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
build/wc-shipping-method-pickup-location.js	29.9 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[Aljullu]

LGTM