Replace react imports with wordpress/element

[Aljullu]

Fixes #6732.

This PR:

• Replaces imports from react with imports from @wordpress/element except for type imports.
• Add an eslint rule that will flag new add imports as suggested here.

Testing

User Facing Testing

1. Run npm run lint:js and verify there are no errors (there are some warnings, but they are unrelated).
2. Run several scripts and verify they still work (npm run start, npm run storybook and npm run build).
3. Do some smoking testing with the browser console open and verify there are no error logs related to the changes in this PR: try adding blocks in the editor, viewing them in the frontend, interacting with some of the options...

• Do not include in the Testing Notes

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8520.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	lodash, 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-url, wp-warning, wp-wordcount		⚠️
all-reviews.js	lodash, 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-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	lodash, 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-url		⚠️
featured-product.js	lodash, 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-url		⚠️
filter-wrapper.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
handpicked-products.js	lodash, 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-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart.js	react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, 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-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	lodash, 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	lodash, 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	lodash, 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-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render		⚠️
product-new.js	lodash, 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	lodash, 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	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-hooks, 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	lodash, 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	lodash, 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	lodash, 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		⚠️
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	lodash, 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	lodash, 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-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		⚠️

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

TypeScript Errors Report

• Files with errors: 484
• Total errors: 2303

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

assets/js/base/components/cart-checkout/totals/coupon/index.tsx

assets/js/base/components/read-more/index.tsx

_{comments-aggregator}

[github-actions]

Size Change: -2.27 kB (0%)

Total Size: 1.1 MB

Filename	Size	Change
build/active-filters-frontend.js	7.97 kB	-11 B (0%)
build/active-filters-wrapper-frontend.js	5.98 kB	-2 B (0%)
build/active-filters.js	7.32 kB	-14 B (0%)
build/all-products-frontend.js	11.7 kB	-14 B (0%)
build/all-products.js	36.4 kB	-22 B (0%)
build/all-reviews.js	7.65 kB	-14 B (0%)
build/attribute-filter-frontend.js	22.4 kB	-3 B (0%)
build/attribute-filter-wrapper-frontend.js	4.46 kB	-2.62 kB (-37%)	🎉
build/attribute-filter.js	12.4 kB	+5 B (0%)
build/blocks-checkout.js	41.2 kB	-24 B (0%)
build/breadcrumbs.js	2.04 kB	+2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js	9.69 kB	-13 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.19 kB	-3 B (0%)
build/cart-blocks/cart-express-payment-frontend.js	719 B	-1 B (0%)
build/cart-blocks/cart-items-frontend.js	302 B	+3 B (+1%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.36 kB	+1 B (0%)
build/cart-blocks/cart-line-items-frontend.js	1.07 kB	+1 B (0%)
build/cart-blocks/cart-totals-frontend.js	308 B	-14 B (-4%)
build/cart-frontend.js	28.9 kB	-11 B (0%)
build/cart.js	47.4 kB	-26 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	3.92 kB	-1 B (0%)
build/checkout-blocks/express-payment-frontend.js	1.13 kB	+1 B (0%)
build/checkout-blocks/fields-frontend.js	331 B	-14 B (-4%)
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB	+1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js	277 B	+1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js	14.9 kB	+1 B (0%)
build/checkout-blocks/payment-frontend.js	8.42 kB	-3 B (0%)
build/checkout-blocks/totals-frontend.js	310 B	-14 B (-4%)
build/checkout-frontend.js	30.5 kB	-6 B (0%)
build/checkout.js	44.2 kB	-10 B (0%)
build/featured-category.js	13.5 kB	-30 B (0%)
build/featured-product.js	13.7 kB	-33 B (0%)
build/filter-wrapper-frontend.js	14.1 kB	+31 B (0%)
build/handpicked-products.js	7.24 kB	+2 B (0%)
build/legacy-template.js	5.28 kB	-1 B (0%)
build/mini-cart-component-frontend.js	28 kB	-10 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js	360 B	-6 B (-2%)
build/mini-cart-contents-block/products-table-frontend.js	588 B	-1 B (0%)
build/mini-cart-contents.js	16.6 kB	+4 B (0%)
build/mini-cart.js	4.3 kB	-3 B (0%)
build/price-filter-frontend.js	13.9 kB	+2 B (0%)
build/price-filter-wrapper-frontend.js	6.99 kB	+4 B (0%)
build/price-filter.js	8.38 kB	-4 B (0%)
build/product-add-to-cart-frontend.js	6.7 kB	-13 B (0%)
build/product-add-to-cart.js	8.6 kB	-15 B (0%)
build/product-best-sellers.js	7.6 kB	+3 B (0%)
build/product-button-frontend.js	2.22 kB	-1 B (0%)
build/product-button.js	3.99 kB	-3 B (0%)
build/product-category.js	8.58 kB	+1 B (0%)
build/product-image.js	4.09 kB	-2 B (0%)
build/product-new.js	7.58 kB	+5 B (0%)
build/product-on-sale.js	7.91 kB	+4 B (0%)
build/product-price.js	1.58 kB	+2 B (0%)
build/product-rating-frontend.js	1.65 kB	+1 B (0%)
build/product-sku.js	376 B	-2 B (-1%)
build/product-tag.js	8.07 kB	+3 B (0%)
build/product-title.js	3.46 kB	-1 B (0%)
build/product-top-rated.js	7.82 kB	+4 B (0%)
build/products-by-attribute.js	8.53 kB	+5 B (0%)
build/rating-filter-frontend.js	20.9 kB	+1 B (0%)
build/rating-filter-wrapper-frontend.js	5.61 kB	-2 B (0%)
build/rating-filter.js	7.42 kB	+2 B (0%)
build/reviews-by-category.js	11.2 kB	-6 B (0%)
build/reviews-by-product.js	12.3 kB	+1 B (0%)
build/reviews-frontend.js	7.12 kB	-21 B (0%)
build/single-product-frontend.js	17.9 kB	-16 B (0%)
build/single-product.js	9.94 kB	-2 B (0%)
build/stock-filter-wrapper-frontend.js	3.15 kB	-2.7 kB (-46%)	🎉
build/stock-filter.js	8.13 kB	-2 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	7.69 kB	+1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js	7.25 kB	+1 B (0%)
build/wc-blocks-data.js	21.5 kB	-7 B (0%)
build/wc-blocks-registry.js	3.15 kB	+1 B (0%)
build/wc-blocks-shared-hocs.js	1.73 kB	-2 B (0%)
build/wc-blocks-vendors.js	64.4 kB	-1 B (0%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	3.36 kB	+3.36 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
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-order-summary-frontend.js	1.24 kB
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	655 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	274 B
build/cart-blocks/order-summary-heading-frontend.js	455 B
build/cart-blocks/order-summary-shipping-frontend.js	14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js	275 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.24 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address-frontend.js	1.18 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
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-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-frontend.js	1.24 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	275 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/pickup-options-frontend.js	2.8 kB
build/checkout-blocks/shipping-address-frontend.js	1.14 kB
build/checkout-blocks/shipping-method-frontend.js	2.28 kB
build/checkout-blocks/shipping-methods-frontend.js	4.58 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/customer-account.js	3.08 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	2.86 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/shopping-button-frontend.js	313 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-frontend.js	2 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	253 B
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	500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js	262 B
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	1.19 kB
build/product-category-list.js	502 B
build/product-image-frontend.js	2.23 kB
build/product-price-frontend.js	2.32 kB
build/product-query.js	6.6 kB
build/product-rating.js	920 B
build/product-results-count.js	1.65 kB
build/product-sale-badge-frontend.js	1.45 kB
build/product-sale-badge.js	816 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	629 B
build/product-stock-indicator-frontend.js	1.31 kB
build/product-stock-indicator.js	645 B
build/product-summary-frontend.js	1.58 kB
build/product-summary.js	920 B
build/product-tag-list-frontend.js	1.18 kB
build/product-tag-list.js	497 B
build/product-title-frontend.js	1.65 kB
build/stock-filter-frontend.js	21.1 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.86 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.4 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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js	8.84 kB
build/wc-blocks-editor-style-rtl.css	5.74 kB
build/wc-blocks-editor-style.css	5.75 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-style-rtl.css	26.7 kB
build/wc-blocks-style.css	26.7 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 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.7 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[nefeline]

Massive work here; well done 🎉 ! I left a couple of questions, but pre-approving.

Run npm run lint:js and verify there are no errors (there are some warnings, but they are unrelated).

Can you confirm what the expected errors are? Are these the warnings that are a-ok?

Run several scripts and verify they still work (npm run start, npm run storybook and npm run build).

✅ Confirmed all these scripts are working as expected.

Do some smoking testing with the browser console open and verify there are no error logs related to the changes in this PR: try adding blocks in the editor, viewing them in the frontend, interacting with some of the options...

✅ I didn't test all blocks, but a handful (filter blocks, a few atomic blocks, mini-cart, checkout), and everything works as expected. Should we be more detail-oriented here and review them all one by one, or are we a-ok with a superficial test?

[Aljullu]

Thanks for the review @nefeline!

Can you confirm what the expected errors are? Are these the warnings that are a-ok?

I think we should still fix or investigate them, but since they are reproducible in trunk as well and are unrelated to the changes on this PR, I wanted to exclude them to avoid the diff growing too much. Do you agree?

Btw, I pushed a couple more fixes in 1068dae, which were introduced these last days.

[nefeline]

I think we should still fix or investigate them, but since they are reproducible in trunk as well and are unrelated to the changes on this PR, I wanted to exclude them to avoid the diff growing too much. Do you agree?

Agreed!

[nefeline]

Btw, I pushed a couple more fixes in 1068dae, which were introduced these last days.

👍 I'm taking another look here quickly to confirm things are a-ok after the latest commit.

[nefeline]

All good! 🙌