Only register blocks when user navigates to the product edit page (#38303)

* Remove block registration from within the Editor component

* Expose the initBlocks function to be used outside of the product package

* Register blocks within the ProductPage component

* Add changelog files

* Unregister blocks when product page gets unmounted

packages/js/product-editor/changelog/add-38200

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Only register blocks when user navigates to the product edit page#38200

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

@@ -36,9 +36,6 @@ import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface';
  */
 import { Header } from '../header';
 import { BlockEditor } from '../block-editor';
-import { initBlocks } from './init-blocks';
-
-initBlocks();
 
 export type ProductEditorSettings = Partial<
 	EditorSettings & EditorBlockListSettings

packages/js/product-editor/src/components/editor/index.ts

@@ -1 +1,2 @@
 export * from './editor';
+export * from './init-blocks';

packages/js/product-editor/src/components/editor/init-blocks.ts

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import { BlockInstance, getBlockType } from '@wordpress/blocks';
+import {
+	BlockInstance,
+	getBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
 import {
 	registerCoreBlocks,
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14,7 +18,7 @@ import {
  */
 import * as productBlocks from '../../blocks';
 
-export const initBlocks = () => {
+export function initBlocks() {
 	const coreBlocks = __experimentalGetCoreBlocks();
 	const blocks = coreBlocks.filter( ( block: BlockInstance ) => {
 		return ! getBlockType( block.name );
@@ -23,5 +27,15 @@ export const initBlocks = () => {
 	// @ts-ignore An argument is allowed to specify which blocks to register.
 	registerCoreBlocks( blocks );
 
-	Object.values( productBlocks ).forEach( ( init ) => init() );
-};
+	const woocommerceBlocks = Object.values( productBlocks ).map( ( init ) =>
+		init()
+	);
+
+	const registeredBlocks = [ ...blocks, ...woocommerceBlocks ];
+
+	return function unregisterBlocks() {
+		registeredBlocks.forEach(
+			( block ) => block && unregisterBlockType( block.name )
+		);
+	};
+}

packages/js/product-editor/src/components/index.ts

@@ -13,6 +13,7 @@ export { DetailsDescriptionField as __experimentalDetailsDescriptionField } from
 export { WooProductMoreMenuItem as __experimentalWooProductMoreMenuItem } from './header';
 export {
 	Editor as __experimentalEditor,
+	initBlocks as __experimentalInitBlocks,
 	ProductEditorSettings,
 } from './editor';
 export {

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

@@ -3,11 +3,12 @@
  */
 import {
 	__experimentalEditor as Editor,
+	__experimentalInitBlocks as initBlocks,
 	ProductEditorSettings,
 	productApiFetchMiddleware,
 } from '@woocommerce/product-editor';
-
 import { Spinner } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 import { useParams } from 'react-router-dom';
 
 /**
@@ -26,6 +27,10 @@ export default function ProductPage() {
 
 	const product = useProductEntityRecord( productId );
 
+	useEffect( () => {
+		return initBlocks();
+	}, [] );
+
 	if ( ! product?.id ) {
 		return <Spinner />;
 	}

plugins/woocommerce/changelog/add-38200

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Only register blocks when user navigates to the product edit page#38200