Changing block.ts to block.json and amending TS config to support

packages/js/product-editor/src/components/details-name-block/block.json

@@ -0,0 +1,23 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-name",
+	"title": "Product name",
+	"category": "widgets",
+	"description": "The product name.",
+	"keywords": [ "products", "name", "title" ],
+	"textdomain": "default",
+	"attributes": {
+		"name": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false,
+		"lock": false
+	}
+}

packages/js/product-editor/src/components/name/edit.tsx → packages/js/product-editor/src/components/details-name-block/edit.tsx

@@ -31,7 +31,7 @@ export function Edit() {
 				name={ 'woocommerce-product-name' }
 				placeholder={ __( 'e.g. 12 oz Coffee Mug', 'woocommerce' ) }
 				onChange={ setName }
-				value={ name }
+				value={ name || '' }
 			/>
 		</div>
 	);

packages/js/product-editor/src/components/name/index.ts → packages/js/product-editor/src/components/details-name-block/index.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { initBlock } from '../../utils';
-import metadata from './block';
+import metadata from './block.json';
 import { Edit } from './edit';
 
 const { name } = metadata;

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { init as initName } from '../name';
+import { init as initName } from '../details-name-block';
 
 export const initBlocks = () => {
 	initName();

packages/js/product-editor/src/utils/parse-product-to-blocks.ts

@@ -7,7 +7,7 @@ import { BlockInstance, createBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import nameBlock from '../components/name/block';
+import nameBlock from '../components/details-name-block/block.json';
 
 export function parseProductToBlocks( product: Partial< Product > ) {
 	const blocks: BlockInstance[] = [];

packages/js/product-editor/tsconfig-cjs.json

@@ -1,6 +1,11 @@
 {
 	"extends": "../tsconfig-cjs",
+	"include": [
+		"**/*",
+		"src/**/*.json"
+	],
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"resolveJsonModule": true,
 	}
 }

packages/js/product-editor/tsconfig.json

@@ -1,10 +1,15 @@
 {
 	"extends": "../tsconfig",
+	"include": [
+		"**/*",
+		"src/**/*.json"
+	],
 	"compilerOptions": {
 		"rootDir": "src",
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"resolveJsonModule": true,
 	}
 }