Adding test name block with support for entity data store

packages/js/product-editor/package.json

@@ -49,6 +49,7 @@
 		"@wordpress/i18n": "wp-6.0",
 		"@wordpress/icons": "wp-6.0",
 		"@wordpress/url": "wp-6.0",
+		"@wordpress/core-data": "wp-6.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"react-router-dom": "^6.3.0"
@@ -57,6 +58,7 @@
 		"@testing-library/react": "^12.1.3",
 		"@types/react": "^17.0.2",
 		"@types/wordpress__block-editor": "^7.0.0",
+		"@types/wordpress__block-library": "^2.6.1",
 		"@types/wordpress__blocks": "^11.0.7",
 		"@types/wordpress__components": "^19.10.3",
 		"@types/wordpress__data": "^6.0.2",

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

@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { BlockInstance } from '@wordpress/blocks';
-import { createElement, useState, useMemo } from '@wordpress/element';
+import {
+	createElement,
+	useState,
+	useMemo,
+	useEffect,
+} from '@wordpress/element';
 import { Product } from '@woocommerce/data';
 import { useSelect, select as WPSelect } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
@@ -26,14 +31,18 @@ import {
 /**
  * Internal dependencies
  */
+import { parseProductToBlocks } from '../../utils/parse-product-to-blocks';
 import { Sidebar } from '../sidebar';
 
 type BlockEditorProps = {
 	product: Partial< Product >;
 	settings: Partial< EditorSettings & EditorBlockListSettings > | undefined;
 };
 
-export function BlockEditor( { settings: _settings }: BlockEditorProps ) {
+export function BlockEditor( {
+	settings: _settings,
+	product,
+}: BlockEditorProps ) {
 	const [ blocks, updateBlocks ] = useState< BlockInstance[] >();
 
 	const canUserCreateMedia = useSelect( ( select: typeof WPSelect ) => {
@@ -80,6 +89,10 @@ export function BlockEditor( { settings: _settings }: BlockEditorProps ) {
 		updateBlocks( _blocks );
 	}
 
+	useEffect( () => {
+		handleUpdateBlocks( parseProductToBlocks( product ) );
+	}, [ product ] );
+
 	function handlePersistBlocks( newBlocks: BlockInstance[] ) {
 		updateBlocks( newBlocks );
 	}

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

@@ -8,6 +8,11 @@ import {
 } from '@wordpress/block-editor';
 import { SlotFillProvider } from '@wordpress/components';
 import { Product } from '@woocommerce/data';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore No types for this exist yet.
+// eslint-disable-next-line @woocommerce/dependency-group
+import { EntityProvider } from '@wordpress/core-data';
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore No types for this exist yet.
 // eslint-disable-next-line @woocommerce/dependency-group
@@ -35,21 +40,23 @@ type EditorProps = {
 export function Editor( { product, settings }: EditorProps ) {
 	return (
 		<StrictMode>
-			<ShortcutProvider>
-				<FullscreenMode isActive={ false } />
-				<SlotFillProvider>
-					<InterfaceSkeleton
-						header={ <Header title={ product.name } /> }
-						sidebar={ <Sidebar /> }
-						content={
-							<BlockEditor
-								settings={ settings }
-								product={ product }
-							/>
-						}
-					/>
-				</SlotFillProvider>
-			</ShortcutProvider>
+			<EntityProvider kind="postType" type="product" id={ product.id }>
+				<ShortcutProvider>
+					<FullscreenMode isActive={ false } />
+					<SlotFillProvider>
+						<InterfaceSkeleton
+							header={ <Header title={ product.name } /> }
+							sidebar={ <Sidebar /> }
+							content={
+								<BlockEditor
+									settings={ settings }
+									product={ product }
+								/>
+							}
+						/>
+					</SlotFillProvider>
+				</ShortcutProvider>
+			</EntityProvider>
 		</StrictMode>
 	);
 }

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

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

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

@@ -0,0 +1,23 @@
+export default {
+	$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

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createElement } from '@wordpress/element';
+import interpolateComponents from '@automattic/interpolate-components';
+import { TextControl } from '@woocommerce/components';
+import { useBlockProps } from '@wordpress/block-editor';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore No types for this exist yet.
+// eslint-disable-next-line @woocommerce/dependency-group
+import { useEntityProp } from '@wordpress/core-data';
+
+export function Edit() {
+	const blockProps = useBlockProps();
+	const [ name, setName ] = useEntityProp( 'postType', 'product', 'name' );
+
+	return (
+		<div { ...blockProps }>
+			<TextControl
+				label={ interpolateComponents( {
+					mixedString: __( 'Name {{required/}}', 'woocommerce' ),
+					components: {
+						required: (
+							<span className="woocommerce-product-form__optional-input">
+								{ __( '(required)', 'woocommerce' ) }
+							</span>
+						),
+					},
+				} ) }
+				name={ 'woocommerce-product-name' }
+				placeholder={ __( 'e.g. 12 oz Coffee Mug', 'woocommerce' ) }
+				onChange={ setName }
+				value={ name }
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import { initBlock } from '../../utils';
+import metadata from './block';
+import { Edit } from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	example: {},
+	edit: Edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -19,6 +19,7 @@ import { preventLeavingProductForm } from './prevent-leaving-product-form';
 
 export * from './create-ordered-children';
 export * from './sort-fills-by-order';
+export * from './init-blocks';
 
 export {
 	AUTO_DRAFT_NAME,

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

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { BlockConfiguration, registerBlockType } from '@wordpress/blocks';
+
+interface BlockRepresentation {
+	name: string;
+	metadata: BlockConfiguration;
+	settings: Partial< BlockConfiguration >;
+}
+
+/**
+ * Function to register an individual block.
+ *
+ * @param {Object} block The block to be registered.
+ *
+ * @return {?WPBlockType} The block, if it has been successfully registered;
+ *                        otherwise `undefined`.
+ */
+export const initBlock = ( block: BlockRepresentation ) => {
+	if ( ! block ) {
+		return;
+	}
+	const { metadata, settings, name } = block;
+	return registerBlockType( { name, ...metadata }, settings );
+};

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

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Product } from '@woocommerce/data';
+import { BlockInstance, createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import nameBlock from '../components/name/block';
+
+export function parseProductToBlocks( product: Partial< Product > ) {
+	const blocks: BlockInstance[] = [];
+
+	blocks.push(
+		createBlock( nameBlock.name, {
+			name: product.name,
+		} )
+	);
+
+	return blocks;
+}