Commit 5c5e69b59c9 for woocommerce
commit 5c5e69b59c9ab666a7ec454fd3fa40c7fda107f9
Author: Deepak Lalwani <deepak.lalwani81@gmail.com>
Date: Thu May 7 14:13:41 2026 +0530
Implement the stabilized isPreviewMode flag (#63270)
* Implement the stabilized isPreviewMode flag
* Add changelog entry
* Remove isPreview flag from EditorProps interface
* Refactor usePreviewMode hook to simplify settings retrieval
* Add changefile(s) from automation for the following project(s): woocommerce
* remove changelog
* fix TS comment
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
diff --git a/plugins/woocommerce/changelog/63270-update-53125-implement-preview-mode-flag b/plugins/woocommerce/changelog/63270-update-53125-implement-preview-mode-flag
new file mode 100644
index 00000000000..64b4e7177f5
--- /dev/null
+++ b/plugins/woocommerce/changelog/63270-update-53125-implement-preview-mode-flag
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Refactor Product block to use isPreviewMode flag
\ No newline at end of file
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
index 263b022979f..198ee461972 100644
--- 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
@@ -7,6 +7,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
export const usePreviewMode = (): boolean => {
return useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
+ // @ts-expect-error No types for this exist yet.
return Boolean( getSettings()?.isPreviewMode ?? false );
}, [] );
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/block.json
index 997286f8aa3..070f1e32933 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/block.json
@@ -10,19 +10,11 @@
"align": [ "wide", "full" ]
},
"attributes": {
- "isPreview": {
- "type": "boolean",
- "default": false
- },
"productId": {
"type": "number"
}
},
- "example": {
- "attributes": {
- "isPreview": true
- }
- },
+ "example": {},
"usesContext": [ "postId", "postType", "queryId" ],
"textdomain": "woocommerce",
"apiVersion": 3,
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/edit/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/edit/index.tsx
index 4f6ae64110c..c8aa327578e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/edit/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/edit/index.tsx
@@ -14,6 +14,7 @@ import ErrorPlaceholder, {
import { PRODUCTS_STORE_NAME, Product } from '@woocommerce/data';
import { useSelect } from '@wordpress/data';
import { Icon, info } from '@wordpress/icons';
+import { usePreviewMode } from '@woocommerce/base-hooks';
import {
Placeholder,
// @ts-expect-error Using experimental features
@@ -41,7 +42,6 @@ interface EditorProps {
className: string;
attributes: {
productId: number;
- isPreview: boolean;
};
setAttributes: ( attributes: Attributes ) => void;
error: string | ErrorObject;
@@ -60,7 +60,8 @@ const Editor = ( {
isLoading,
clientId,
}: EditorProps ) => {
- const { productId, isPreview } = attributes;
+ const { productId } = attributes;
+ const isPreviewMode = usePreviewMode();
const [ isEditing, setIsEditing ] = useState( ! productId );
const blockProps = useBlockProps();
@@ -70,7 +71,7 @@ const Editor = ( {
);
const productPreview = useSelect( ( select ) => {
- if ( ! isPreview ) {
+ if ( ! isPreviewMode ) {
return null;
}
return select( PRODUCTS_STORE_NAME ).getProducts< Array< Product > >( {