Update product rest config and template block usage (#37206)

* Update product post rest configs

* Update block usage

* Add changelogs

* Fix lint

* Make use of setupEditorState instead of setupEditor as we do not have a content block

* Simplify product condition

* Make use of core store only

packages/js/product-editor/changelog/update-product_rest_config

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update use of blocks within block editor to always make use of template.

packages/js/product-editor/src/components/block-editor/block-editor.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Template } from '@wordpress/blocks';
+import { synchronizeBlocksWithTemplate, Template } from '@wordpress/blocks';
 import {
 	createElement,
 	useMemo,
@@ -9,7 +9,7 @@ import {
 	useState,
 } from '@wordpress/element';
 import { Product } from '@woocommerce/data';
-import { useSelect, select as WPSelect, useDispatch } from '@wordpress/data';
+import { useSelect, select as WPSelect } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 import {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -59,11 +59,6 @@ export function BlockEditor( {
 }: BlockEditorProps ) {
 	const [ selectedTab, setSelectedTab ] = useState< string | null >( null );
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore __experimentalTearDownEditor is not yet included in types package.
-	const { setupEditor, __experimentalTearDownEditor } =
-		useDispatch( 'core/editor' );
-
 	const canUserCreateMedia = useSelect( ( select: typeof WPSelect ) => {
 		const { canUser } = select( 'core' );
 		return canUser( 'create', 'media', '' ) !== false;
@@ -93,20 +88,19 @@ export function BlockEditor( {
 		};
 	}, [ canUserCreateMedia, _settings ] );
 
-	useLayoutEffect( () => {
-		setupEditor( product, {}, _settings?.template );
-
-		return () => {
-			__experimentalTearDownEditor();
-		};
-	}, [] );
-
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'product',
 		{ id: product.id }
 	);
 
+	useLayoutEffect( () => {
+		onChange(
+			synchronizeBlocksWithTemplate( [], _settings?.template ),
+			{}
+		);
+	}, [] );
+
 	if ( ! blocks ) {
 		return null;
 	}

plugins/woocommerce-admin/client/products/product-page.tsx

@@ -22,7 +22,7 @@ declare const productBlockEditorSettings: ProductEditorSettings;
 const ProductEditor: React.FC< { product: Product | undefined } > = ( {
 	product,
 } ) => {
-	if ( ! product ) {
+	if ( ! product?.id ) {
 		return <Spinner />;
 	}
 

plugins/woocommerce/changelog/update-product_rest_config

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Update product post rest config when block editor feature is enabled.

plugins/woocommerce/src/Admin/Features/BlockEditorFeatureEnabled.php

@@ -32,6 +32,7 @@ class BlockEditorFeatureEnabled {
 		}
 		if ( Features::is_enabled( self::FEATURE_ID ) ) {
 			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
+			add_filter( 'woocommerce_register_post_type_product', array( $this, 'add_rest_base_config' ) );
 		}
 	}
 
@@ -102,4 +103,15 @@ class BlockEditorFeatureEnabled {
 		return $link;
 	}
 
+	/**
+	 * Updates the product endpoint to use WooCommerce REST API.
+	 *
+	 * @param array $post_args Args for the product post type.
+	 * @return array
+	 */
+	public function add_rest_base_config( $post_args ) {
+		$post_args['rest_base']      = 'products';
+		$post_args['rest_namespace'] = 'wc/v3';
+		return $post_args;
+	}
 }