Fix Product SKU not being displayed on frontend when outside Single P…

…roduct template

assets/js/atomic/blocks/product-elements/shared/use-is-descendent-of-single-product-block.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+interface UseIsDescendentOfSingleProductBlockProps {
+	blockClientId: string;
+}
+
+export const useIsDescendentOfSingleProductBlock = ( {
+	blockClientId,
+}: UseIsDescendentOfSingleProductBlockProps ) => {
+	const { isDescendentOfSingleProductBlock } = useSelect(
+		( select ) => {
+			const { getBlockParentsByBlockName } =
+				select( 'core/block-editor' );
+			const blockParentBlocksIds = getBlockParentsByBlockName(
+				blockClientId?.replace( 'block-', '' ),
+				[ 'woocommerce/single-product' ]
+			);
+			return {
+				isDescendentOfSingleProductBlock:
+					blockParentBlocksIds.length > 0,
+			};
+		},
+		[ blockClientId ]
+	);
+
+	return { isDescendentOfSingleProductBlock };
+};

assets/js/atomic/blocks/product-elements/sku/edit.tsx

@@ -13,6 +13,7 @@ import { useSelect } from '@wordpress/data';
  */
 import Block from './block';
 import type { Attributes } from './types';
+import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
 
 const Edit = ( {
 	attributes,
@@ -28,6 +29,8 @@ const Edit = ( {
 		...context,
 	};
 	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+	const { isDescendentOfSingleProductBlock } =
+		useIsDescendentOfSingleProductBlock( { blockClientId: blockProps.id } );
 
 	const isDescendentOfSingleProductTemplate = useSelect(
 		( select ) => {
@@ -51,11 +54,13 @@ const Edit = ( {
 			setAttributes( {
 				isDescendentOfQueryLoop,
 				isDescendentOfSingleProductTemplate,
+				isDescendentOfSingleProductBlock,
 			} ),
 		[
 			setAttributes,
 			isDescendentOfQueryLoop,
 			isDescendentOfSingleProductTemplate,
+			isDescendentOfSingleProductBlock,
 		]
 	);
 

assets/js/atomic/blocks/product-elements/sku/types.ts

@@ -2,6 +2,7 @@ export interface Attributes {
 	productId: number;
 	isDescendentOfQueryLoop: boolean;
 	isDescendentOfSingleProductTemplate: boolean;
+	isDescendentOfSingleProductBlock: boolean;
 	showProductSelector: boolean;
 	isDescendantOfAllProducts: boolean;
 }