Commit a9cbb2b13f8 for woocommerce
commit a9cbb2b13f8f7a63ef170c8e952a279742e87541
Author: Raluca Stan <ralucastn@gmail.com>
Date: Mon Jun 8 16:33:13 2026 +0200
Restrict @wordpress/components imports in storefront block files (#65381)
Restrict @wordpress/components from cart and checkout storefront files
Adds an ESLint override in plugins/woocommerce/client/blocks/.eslintrc.js
that errors on `import ... from '@wordpress/components'` in files that
ship to the storefront:
- assets/js/blocks/cart/**/block.{ts,tsx}
- assets/js/blocks/checkout/**/block.{ts,tsx}
- assets/js/blocks/**/frontend.{ts,tsx}
- assets/js/base/**/*.{ts,tsx}
edit.{ts,tsx}, tests, and stories are excluded.
Replaces the `Icon` import in PlaceOrderButton with an inline SVG of the
WordPress check mark so the one pre-existing violation is cleared.
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/add-eslint-restrict-wp-components-storefront b/plugins/woocommerce/changelog/add-eslint-restrict-wp-components-storefront
new file mode 100644
index 00000000000..3d7adff8798
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-eslint-restrict-wp-components-storefront
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Adds an ESLint rule to prevent `@wordpress/components` from being imported in storefront-bound files in the Cart and Checkout blocks, and refactors the Place Order button icon to use an inline SVG instead.
+
diff --git a/plugins/woocommerce/client/blocks/.eslintrc.js b/plugins/woocommerce/client/blocks/.eslintrc.js
index 499f9858a7d..e80d9420711 100644
--- a/plugins/woocommerce/client/blocks/.eslintrc.js
+++ b/plugins/woocommerce/client/blocks/.eslintrc.js
@@ -351,5 +351,34 @@ module.exports = {
'no-shadow': 'off',
},
},
+ {
+ files: [
+ 'assets/js/blocks/cart/**/block.{ts,tsx}',
+ 'assets/js/blocks/checkout/**/block.{ts,tsx}',
+ 'assets/js/blocks/**/frontend.{ts,tsx}',
+ 'assets/js/base/**/*.{ts,tsx}',
+ ],
+ excludedFiles: [
+ '**/edit.{ts,tsx}',
+ '**/*.test.{ts,tsx}',
+ '**/test/**',
+ '**/stories/**',
+ ],
+ rules: {
+ 'no-restricted-imports': [
+ 'error',
+ {
+ paths: [
+ ...restrictedImports,
+ {
+ name: '@wordpress/components',
+ message:
+ '@wordpress/components must not ship to the storefront. Use it only in edit.tsx.',
+ },
+ ],
+ },
+ ],
+ },
+ },
],
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx
index eed367eb2bf..644c6518c70 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx
@@ -7,8 +7,6 @@ import {
usePaymentMethodInterface,
useStoreCart,
} from '@woocommerce/base-context/hooks';
-import { check } from '@wordpress/icons';
-import { Icon } from '@wordpress/components';
import Button from '@woocommerce/base-components/button';
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import {
@@ -99,10 +97,17 @@ const PlaceOrderButton = ( {
>
{ waitingForProcessing && <Spinner /> }
{ waitingForRedirect && (
- <Icon
+ <svg
className="wc-block-components-checkout-place-order-button__icon"
- icon={ check }
- />
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ width="24"
+ height="24"
+ aria-hidden="true"
+ focusable="false"
+ >
+ <path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
+ </svg>
) }
<div
className={