Pattern: fetch product id on the JS side (https://github.com/woocommerce/woocommerce-blocks/pull/11138)

* Pattern: fetch product id on the frontend side

* fix TS type

plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.tsx

@@ -2,18 +2,19 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { Placeholder, Button, PanelBody } from '@wordpress/components';
 import { withProduct } from '@woocommerce/block-hocs';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import EditProductLink from '@woocommerce/editor-components/edit-product-link';
-import { singleProductBlockPreview } from '@woocommerce/resource-previews';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { ProductResponseItem } from '@woocommerce/types';
 import ErrorPlaceholder, {
 	ErrorObject,
 } from '@woocommerce/editor-components/error-placeholder';
 
+import { PRODUCTS_STORE_NAME, Product } from '@woocommerce/data';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -52,9 +53,29 @@ const Editor = ( {
 	const [ isEditing, setIsEditing ] = useState( ! productId );
 	const blockProps = useBlockProps();
 
-	if ( isPreview ) {
+	const productPreview = useSelect( ( select ) => {
-		return singleProductBlockPreview;
+		if ( ! isPreview ) {
-	}
+			return null;
+		}
+		return select( PRODUCTS_STORE_NAME ).getProducts< Array< Product > >( {
+			per_page: 1,
+		} );
+	} );
+
+	useEffect( () => {
+		const productPreviewId = productPreview
+			? productPreview[ 0 ]?.id
+			: null;
+		if ( ! productPreviewId ) {
+			return;
+		}
+
+		setAttributes( {
+			...attributes,
+			productId: productPreviewId,
+		} );
+		setIsEditing( false );
+	}, [ attributes, productPreview, setAttributes ] );
 
 	if ( error ) {
 		return (

plugins/woocommerce-blocks/patterns/product-details-listing.php

@@ -4,20 +4,9 @@
  * Slug: woocommerce-blocks/product-details-listing
  * Categories: WooCommerce
  */
-
-$query = new \WC_Product_Query(
-	array(
-		'limit'  => 1,
-		'return' => 'ids',
-		'status' => array( 'publish' ),
-	)
-);
-
-$products   = $query->get_products();
-$product_id = $products ? $products[0] : null;
 ?>
 
-<!-- wp:woocommerce/single-product {"productId":<?php echo esc_attr( $product_id ); ?>} -->
+<!-- wp:woocommerce/single-product {"isPreview": true} -->
 <div class="wp-block-woocommerce-single-product">
 	<!-- wp:columns -->
 	<div class="wp-block-columns">

plugins/woocommerce-blocks/patterns/product-hero.php

@@ -5,19 +5,9 @@
  * Categories: WooCommerce
  */
 
-$query = new \WC_Product_Query(
-	array(
-		'limit'  => 1,
-		'return' => 'ids',
-		'status' => array( 'publish' ),
-	)
-);
-
-$products   = $query->get_products();
-$product_id = $products ? $products[0] : null;
 ?>
 
-<!-- wp:woocommerce/single-product {"productId":<?php echo esc_attr( $product_id ); ?>,"align":"wide"} -->
+<!-- wp:woocommerce/single-product {"isPreview":true, "align":"wide"} -->
 <div class="wp-block-woocommerce-single-product alignwide">
 	<!-- wp:columns -->
 	<div class="wp-block-columns">