Commit e042602ee6b for woocommerce
commit e042602ee6be7d57292aac68d8664b27cb13fea2
Author: Deepak Lalwani <deepak.lalwani81@gmail.com>
Date: Sat Mar 7 17:38:22 2026 +0530
Refactor cart and checkout blocks to use isPreviewMode flag (#63313)
* Remove isPreview flag from cart and checkout blocks attributes and components, replacing it with usePreviewMode hook
* Cherry-pick usePreviewMode hook
* Add changefile(s) from automation for the following project(s): woocommerce
* Refactor usePreviewMode hook to simplify settings retrieval
* Add changefile(s) from automation for the following project(s): woocommerce
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/63313-update-53125-implement-preview-mode-flag-cart-checkout b/plugins/woocommerce/changelog/63313-update-53125-implement-preview-mode-flag-cart-checkout
new file mode 100644
index 00000000000..af5951f6528
--- /dev/null
+++ b/plugins/woocommerce/changelog/63313-update-53125-implement-preview-mode-flag-cart-checkout
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Refactor cart, cart-link, mini-cart and checkout blocks to use isPreviewMode flag
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/context/providers/editor-context.tsx b/plugins/woocommerce/client/blocks/assets/js/base/context/providers/editor-context.tsx
index 8459b1396c3..b4d7f7d1b18 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/context/providers/editor-context.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/context/providers/editor-context.tsx
@@ -3,6 +3,7 @@
*/
import { createContext, useContext, useCallback } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
+import { usePreviewMode } from '@woocommerce/base-hooks';
interface EditorContextType {
// Indicates whether in the editor context.
@@ -44,14 +45,13 @@ export const EditorProvider = ( {
currentPostId = 0,
previewData = {},
currentView = '',
- isPreview = false,
}: {
children: React.ReactNode;
currentPostId?: number | undefined;
previewData?: Record< string, unknown > | undefined;
currentView?: string | undefined;
- isPreview?: boolean | undefined;
} ) => {
+ const isPreviewMode = usePreviewMode();
const editingPostId = useSelect(
( select ): number =>
currentPostId
@@ -79,7 +79,7 @@ export const EditorProvider = ( {
currentView,
previewData,
getPreviewData,
- isPreview,
+ isPreview: isPreviewMode,
};
return (
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/hooks/index.js b/plugins/woocommerce/client/blocks/assets/js/base/hooks/index.js
index ed84ad11457..d61f3ea4d05 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/hooks/index.js
+++ b/plugins/woocommerce/client/blocks/assets/js/base/hooks/index.js
@@ -11,3 +11,4 @@ export * from './use-style-props';
export * from './use-observed-viewport';
export * from './use-schema-parser';
export * from './use-query-loop-product-context-validation';
+export * from './use-preview-mode';
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-preview-mode.ts b/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-preview-mode.ts
new file mode 100644
index 00000000000..843a05db827
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-preview-mode.ts
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+export const usePreviewMode = (): boolean => {
+ return useSelect( ( select ) => {
+ // @ts-expect-error No types for this exist yet.
+ const { getSettings } = select( blockEditorStore );
+ return Boolean( getSettings()?.isPreviewMode ?? false );
+ }, [] );
+};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/block.json
index 06382e3319e..b212315e358 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/block.json
@@ -25,16 +25,11 @@
},
"example": {
"attributes": {
- "isPreview": true,
"cartIcon": "cart",
"content": "Cart"
}
},
"attributes": {
- "isPreview": {
- "type": "boolean",
- "default": false
- },
"cartIcon": {
"type": "string",
"default": "cart"
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/attributes.js b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/attributes.js
index fc0dd343c50..9fb55797ee4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/attributes.js
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/attributes.js
@@ -8,10 +8,6 @@ import { filledCart, removeCart } from '@woocommerce/icons';
export const blockName = 'woocommerce/cart';
export const blockAttributes = {
- isPreview: {
- type: 'boolean',
- default: false,
- },
currentView: {
type: 'string',
default: 'woocommerce/filled-cart-block',
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/edit.js b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/edit.js
index 1a655753e66..836820d69f0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/edit.js
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/edit.js
@@ -16,6 +16,7 @@ import { SlotFillProvider } from '@woocommerce/blocks-checkout';
import { useEffect, useRef } from '@wordpress/element';
import { getQueryArg } from '@wordpress/url';
import { dispatch, select } from '@wordpress/data';
+import { usePreviewMode } from '@woocommerce/base-hooks';
/**
* Internal dependencies
@@ -41,14 +42,15 @@ const ALLOWED_BLOCKS = [
];
export const Edit = ( { clientId, className, attributes, setAttributes } ) => {
- const { hasDarkControls, currentView, isPreview = false } = attributes;
+ const { hasDarkControls, currentView } = attributes;
+ const isPreviewMode = usePreviewMode();
const defaultTemplate = [
[ 'woocommerce/filled-cart-block', {}, [] ],
[ 'woocommerce/empty-cart-block', {}, [] ],
];
const blockProps = useBlockPropsWithLocking( {
className: clsx( className, 'wp-block-woocommerce-cart', {
- 'is-editor-preview': isPreview,
+ 'is-editor-preview': isPreviewMode,
} ),
} );
@@ -88,7 +90,6 @@ export const Edit = ( { clientId, className, attributes, setAttributes } ) => {
<EditorProvider
previewData={ { previewCart } }
currentView={ currentView }
- isPreview={ !! isPreview }
>
<CartBlockContext.Provider
value={ {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/metadata.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/metadata.tsx
index 7c9adb47452..40a5779973c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/metadata.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/metadata.tsx
@@ -26,9 +26,6 @@ export const metadata: BlockConfiguration = {
multiple: false,
},
example: {
- attributes: {
- isPreview: true,
- },
viewportWidth: 800,
},
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/types.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/types.ts
index ff898e12b7d..fc0173b1728 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/types.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/types.ts
@@ -5,6 +5,5 @@ export type InnerBlockTemplate = [
];
export interface Attributes {
- isPreview: boolean;
hasDarkControls: boolean;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/block.json
index 380da6b35d6..4815735339b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/block.json
@@ -15,17 +15,9 @@
"multiple": false
},
"example": {
- "attributes": {
- "isPreview": true
- },
"viewportWidth": 800
},
"attributes": {
- "isPreview": {
- "type": "boolean",
- "default": false,
- "save": false
- },
"align": {
"type": "string",
"default": "wide"
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/edit.tsx
index b808556c77b..6764a7e9915 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/edit.tsx
@@ -59,7 +59,6 @@ export const Edit = ( {
showReturnToCart,
showRateAfterTaxName,
cartPageId,
- isPreview = false,
showFormStepNumbers = false,
hasDarkControls = false,
} = attributes;
@@ -132,7 +131,6 @@ export const Edit = ( {
/>
</InspectorControls>
<EditorProvider
- isPreview={ !! isPreview }
previewData={ {
previewCart,
previewSavedPaymentMethods,
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
index b4f8be820a1..2c132e08438 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
@@ -25,7 +25,6 @@ export const Edit = ( {
clientId: string;
attributes: {
className?: string;
- isPreview?: boolean;
};
} ): JSX.Element => {
const blockProps = useBlockProps( {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/block.json
index 662f394b9af..e2aca50db7a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/block.json
@@ -20,15 +20,10 @@
},
"example": {
"attributes": {
- "isPreview": true,
"className": "wc-block-mini-cart--preview"
}
},
"attributes": {
- "isPreview": {
- "type": "boolean",
- "default": false
- },
"miniCartIcon": {
"type": "string",
"default": "cart"
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx
index b01a0a9e7ef..070ccd91313 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx
@@ -8,10 +8,6 @@ import { filledCart, removeCart } from '@woocommerce/icons';
export const blockName = 'woocommerce/mini-cart-contents';
export const attributes = {
- isPreview: {
- type: 'boolean',
- default: false,
- },
lock: {
type: 'object',
default: {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.json
index 267fe60eff3..1f2a10e9226 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.json
@@ -22,10 +22,6 @@
}
},
"attributes": {
- "isPreview": {
- "type": "boolean",
- "default": false
- },
"lock": {
"type": "object",
"default": {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/metadata.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/metadata.tsx
index 06c5e8d71d3..c707d62fa1b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/metadata.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/metadata.tsx
@@ -35,9 +35,5 @@ export const metadata: BlockConfiguration = {
width: true,
},
},
- example: {
- attributes: {
- isPreview: true,
- },
- },
+ example: {},
};