Request shipping classes conditionally (woocommerce#47196)

* Request shipping classes conditionally * Add changelog * Fix getProdcutShippingClasses return * Refactor useSelect
nigeljamesstevenson · May 8, 2024 · 9ad1321 · 9ad1321
1 parent e7aff94
commit 9ad1321
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/packages/js/product-editor/changelog/dev-47195_request_shipping_classes_conditionally b/packages/js/product-editor/changelog/dev-47195_request_shipping_classes_conditionally
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Request shipping classes conditionally #47196
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json b/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json
@@ -26,5 +26,5 @@
 		"lock": false,
 		"__experimentalToolbar": false
 	},
-	"usesContext": [ "postType" ]
+	"usesContext": [ "postType", "isInSelectedTab" ]
 }
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx
@@ -71,7 +71,7 @@ function extractDefaultShippingClassFromProduct(
 
 export function Edit( {
 	attributes,
-	context,
+	context: { postType, isInSelectedTab },
 }: ProductEditorBlockEditProps< ShippingClassBlockAttributes > ) {
 	const [ showShippingClassModal, setShowShippingClassModal ] =
 		useState( false );
@@ -86,17 +86,17 @@ export function Edit( {
 
 	const [ categories ] = useEntityProp< PartialProduct[ 'categories' ] >(
 		'postType',
-		context.postType,
+		postType,
 		'categories'
 	);
 	const [ shippingClass, setShippingClass ] = useEntityProp< string >(
 		'postType',
-		context.postType,
+		postType,
 		'shipping_class'
 	);
 	const [ virtual ] = useEntityProp< boolean >(
 		'postType',
-		context.postType,
+		postType,
 		'virtual'
 	);
 
@@ -122,15 +122,22 @@ export function Edit( {
 		throw error;
 	}
 
-	const { shippingClasses } = useSelect( ( select ) => {
-		const { getProductShippingClasses } = select(
-			EXPERIMENTAL_PRODUCT_SHIPPING_CLASSES_STORE_NAME
-		);
-		return {
-			shippingClasses:
-				getProductShippingClasses< ProductShippingClass[] >() ?? [],
-		};
-	}, [] );
+	const { shippingClasses } = useSelect(
+		( select ) => {
+			const { getProductShippingClasses } = select(
+				EXPERIMENTAL_PRODUCT_SHIPPING_CLASSES_STORE_NAME
+			);
+			return {
+				shippingClasses:
+					( isInSelectedTab &&
+						getProductShippingClasses<
+							ProductShippingClass[]
+						>() ) ||
+					[],
+			};
+		},
+		[ isInSelectedTab ]
+	);
 
 	const shippingClassControlId = useInstanceId(
 		BaseControl,