Refactor: Add useIsDescendentOfSingleProductTemplate hook (#9657)

* Add useIsDescendentOfSingleProductTemplate hook

* Replace logic with useIsDescendentOfSingleProductTemplate hook

Author: thealexandrelara

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

@@ -8,12 +8,12 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import type { BlockAlignment } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 type UnsupportedAligments = 'wide' | 'full';
 type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
@@ -53,18 +53,12 @@ const PriceEdit = ( {
 	};
 	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
 
-	const isDescendentOfSingleProductTemplate = useSelect(
-		( select ) => {
-			const store = select( 'core/edit-site' );
-			const postId = store?.getEditedPostId< string | undefined >();
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate( { isDescendentOfQueryLoop } );
 
-			return (
-				postId?.includes( '//single-product' ) &&
-				! isDescendentOfQueryLoop
-			);
-		},
-		[ isDescendentOfQueryLoop ]
-	);
+	if ( isDescendentOfQueryLoop ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
 
 	useEffect(
 		() =>

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

@@ -3,20 +3,16 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { InnerBlockTemplate } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 const Edit = () => {
-	const isDescendentOfSingleProductTemplate = useSelect( ( select ) => {
-		const store = select( 'core/edit-site' );
-		const postId = store?.getEditedPostId< string | undefined >();
-
-		return postId?.includes( '//single-product' );
-	}, [] );
+	const isDescendentOfSingleProductTemplate =
+		useIsDescendentOfSingleProductTemplate();
 
 	const TEMPLATE: InnerBlockTemplate[] = [
 		[

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

@@ -9,7 +9,6 @@ import {
 import type { BlockEditProps } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
 import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,6 +17,7 @@ import Block from './block';
 import { BlockAttributes } from './types';
 import './editor.scss';
 import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 const Edit = (
 	props: BlockEditProps< BlockAttributes > & { context: Context }
@@ -36,21 +36,12 @@ const Edit = (
 		useIsDescendentOfSingleProductBlock( {
 			blockClientId: blockProps?.id,
 		} );
-	const { isDescendentOfSingleProductTemplate } = useSelect(
-		( select ) => {
-			const store = select( 'core/edit-site' );
-			const postId = store?.getEditedPostId< string | undefined >();
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate();
 
-			return {
-				isDescendentOfSingleProductTemplate: Boolean(
-					postId?.includes( '//single-product' ) &&
-						! isDescendentOfQueryLoop &&
-						! isDescendentOfSingleProductBlock
-				),
-			};
-		},
-		[ isDescendentOfQueryLoop, isDescendentOfSingleProductBlock ]
-	);
+	if ( isDescendentOfQueryLoop || isDescendentOfSingleProductBlock ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
 
 	useEffect( () => {
 		setAttributes( {

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

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+export const useIsDescendentOfSingleProductTemplate = () => {
+	const isDescendentOfSingleProductTemplate = useSelect( ( select ) => {
+		const store = select( 'core/edit-site' );
+		const postId = store?.getEditedPostId< string | undefined >();
+
+		return Boolean( postId?.includes( '//single-product' ) );
+	}, [] );
+
+	return { isDescendentOfSingleProductTemplate };
+};

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

@@ -6,14 +6,14 @@ import type { BlockEditProps } from '@wordpress/blocks';
 import EditProductLink from '@woocommerce/editor-components/edit-product-link';
 import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
 import { useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
 import type { Attributes } from './types';
 import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 const Edit = ( {
 	attributes,
@@ -32,22 +32,12 @@ const Edit = ( {
 	const { isDescendentOfSingleProductBlock } =
 		useIsDescendentOfSingleProductBlock( { blockClientId: blockProps.id } );
 
-	const isDescendentOfSingleProductTemplate = useSelect(
-		( select ) => {
-			const store = select( 'core/edit-site' );
-			const postId = store?.getEditedPostId< string | undefined >();
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate();
 
-			if ( ! postId ) {
-				return false;
-			}
-
-			return (
-				postId.includes( '//single-product' ) &&
-				! isDescendentOfQueryLoop
-			);
-		},
-		[ isDescendentOfQueryLoop ]
-	);
+	if ( isDescendentOfQueryLoop ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
 
 	useEffect(
 		() =>