From 5f9c5fc4d6a3325dca4ebf2c9e9b1d78b0d3cac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Mon, 4 Dec 2023 18:59:51 -0300
Subject: [PATCH 01/26] description block uses inner blocks

---
 .../src/blocks/product-fields/description/edit.tsx    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 371dc3a1f0c..fb071805100 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -10,6 +10,7 @@ import {
 	serialize,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useInnerBlocksProps } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { recordEvent } from '@woocommerce/tracks';
@@ -85,8 +86,18 @@ export function DescriptionBlockEdit( {
 		setDescription( html );
 	}, [ modalEditorBlocks, setDescription, hasChanged ] );
 
+	const innerBlockProps = useInnerBlocksProps(
+		{},
+		{
+			templateLock: 'contentOnly',
+			allowedBlocks: [ 'woocommerce/product-summary-field' ],
+		}
+	);
+
 	return (
 		<div { ...blockProps }>
+			<div { ...innerBlockProps } />
+
 			<Button
 				variant="secondary"
 				onClick={ () => {

From 356ac0bdb5be50c00693a5121855d6ff2d43af73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 10:15:42 -0300
Subject: [PATCH 02/26] insert Summary block into the Description one

---
 .../ProductTemplates/SimpleProductTemplate.php     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
index 7e4b31136ee..78286180b1d 100644
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
+++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
@@ -254,7 +254,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 				),
 			)
 		);
-		$description_section->add_block(
+		$description_field_block = $description_section->add_block(
 			array(
 				'id'        => 'product-description',
 				'blockName' => 'woocommerce/product-description-field',
@@ -262,6 +262,18 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 			)
 		);
 
+		$description_field_block->add_block(
+			array(
+				'id'        => 'product-description__content',
+				'blockName' => 'woocommerce/product-summary-field',
+				'order'     => 10,
+				'attributes' => array(
+					'helpText' => null,
+					'label'    => null,
+				),
+			)
+		);
+
 		// External/Affiliate section.
 		if ( Features::is_enabled( 'product-external-affiliate' ) ) {
 			$buy_button_section = $general_group->add_section(

From 5f91f74a93d489b6c3d3e2c2b82132c96a43fb7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 09:33:43 -0300
Subject: [PATCH 03/26] silent useInnerBlocksProps TS issue

---
 .../src/blocks/product-fields/description/edit.tsx           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index fb071805100..550ce36fcc1 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -10,11 +10,14 @@ import {
 	serialize,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useInnerBlocksProps } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { recordEvent } from '@woocommerce/tracks';
 import { useEntityProp } from '@wordpress/core-data';
+import {
+	// @ts-expect-error no exported member.
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies

From bcd6669721b0b3933d3afdfa6f289b30722e9615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 09:43:27 -0300
Subject: [PATCH 04/26] add hooks dependency

---
 packages/js/product-editor/package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/js/product-editor/package.json b/packages/js/product-editor/package.json
index 2fbefca3cc5..a9ef145e3e5 100644
--- a/packages/js/product-editor/package.json
+++ b/packages/js/product-editor/package.json
@@ -51,9 +51,10 @@
 		"@wordpress/data": "wp-6.0",
 		"@wordpress/date": "wp-6.0",
 		"@wordpress/deprecated": "wp-6.0",
-		"@wordpress/editor": "wp-6.0",
 		"@wordpress/edit-post": "wp-6.0",
+		"@wordpress/editor": "wp-6.0",
 		"@wordpress/element": "wp-6.0",
+		"@wordpress/hooks": "wp-6.0",
 		"@wordpress/html-entities": "wp-6.0",
 		"@wordpress/i18n": "wp-6.0",
 		"@wordpress/icons": "wp-6.0",
@@ -88,8 +89,8 @@
 		"@types/wordpress__core-data": "2.4.5",
 		"@types/wordpress__data": "6.0.2",
 		"@types/wordpress__date": "3.3.2",
-		"@types/wordpress__editor": "13.0.0",
 		"@types/wordpress__edit-post": "7.5.4",
+		"@types/wordpress__editor": "13.0.0",
 		"@types/wordpress__keycodes": "2.3.1",
 		"@types/wordpress__media-utils": "3.0.0",
 		"@types/wordpress__plugins": "3.0.0",

From 0a513661c18499c574526a23f4650cbfb6be82f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 09:54:42 -0300
Subject: [PATCH 05/26] update deps

---
 pnpm-lock.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f5fa826010..1b66fe3f5ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2498,6 +2498,9 @@ importers:
       '@wordpress/element':
         specifier: wp-6.0
         version: 4.4.1
+      '@wordpress/hooks':
+        specifier: wp-6.0
+        version: 3.6.1
       '@wordpress/html-entities':
         specifier: wp-6.0
         version: 3.6.1

From 100263a64bfe2e1a9e775bb0aaf5fde630d7aa18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 11:09:09 -0300
Subject: [PATCH 06/26] introduce wooBlockwithFullEditorToolbarButton HOC

---
 .../withFullEditorToolbarButton.tsx           | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx
new file mode 100644
index 00000000000..35b751b1c0d
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { createElement, Fragment } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { BlockControls } from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../../../../store/product-editor-ai';
+
+/**
+ * Internal dependencies
+ */
+// import type { ProductEditorBlockEditProps } from '../../../types';
+
+const wooBlockwithFullEditorToolbarButton = createHigherOrderComponent<
+	Record< string, unknown >
+>( ( BlockEdit ) => {
+	return ( props ) => {
+		const { openModalEditor } = useDispatch( store );
+
+		// Only extend summary field block instances
+		if ( props?.name !== 'woocommerce/product-summary-field' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		// Only add the `Full editor` button when the block is selected
+		if ( ! props?.isSelected ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		/*
+		 * Extend the toolbar only to the sumary field block instance
+		 * that has the `woocommerce/product-description-field__content` template block ID.
+		 */
+		if (
+			props?.attributes?._templateBlockId !==
+			'product-description__content'
+		) {
+			return <BlockEdit { ...props } />;
+		}
+
+		return (
+			<>
+				<BlockControls group="other">
+					<ToolbarButton
+						label={ __(
+							'Edit Product description',
+							'woocommerce'
+						) }
+						onClick={ () => {
+							recordEvent( 'product_add_description_click' );
+							openModalEditor();
+						} }
+					>
+						{ __( 'Full editor', 'woocommerce' ) }
+					</ToolbarButton>
+				</BlockControls>
+				<BlockEdit { ...props } />
+			</>
+		);
+	};
+}, 'wooBlockwithFullEditorToolbarButton' );
+
+export default wooBlockwithFullEditorToolbarButton;

From b3c606d2490bf2c2c7bd820578fff8c8d743a786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 11:09:50 -0300
Subject: [PATCH 07/26] extend Description block with toolbar button

---
 .../src/blocks/product-fields/description/index.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/index.ts b/packages/js/product-editor/src/blocks/product-fields/description/index.ts
index bf3c89a21b8..196ae99f4b1 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/index.ts
+++ b/packages/js/product-editor/src/blocks/product-fields/description/index.ts
@@ -1,9 +1,16 @@
+/**
+ * External dependencies
+ */
+import { postContent } from '@wordpress/icons';
+import { addFilter } from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
 import blockConfiguration from './block.json';
 import { DescriptionBlockEdit } from './edit';
 import { registerProductEditorBlockType } from '../../../utils';
+import wooDescriptionBlockWithFullEditorButton from './components/withFullEditorToolbarButton';
 
 const { name, ...metadata } = blockConfiguration;
 
@@ -12,6 +19,7 @@ export { metadata, name };
 export const settings = {
 	example: {},
 	edit: DescriptionBlockEdit,
+	icon: postContent,
 };
 
 export const init = () =>
@@ -20,3 +28,9 @@ export const init = () =>
 		metadata: metadata as never,
 		settings: settings as never,
 	} );
+
+addFilter(
+	'editor.BlockEdit',
+	'woocommerce/summary-block-with-full-editor-button',
+	wooDescriptionBlockWithFullEditorButton
+);

From 23c8d67821220d4109e8bdc56dc1c1ab3a22a12b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 11:15:02 -0300
Subject: [PATCH 08/26] remove Add/Update button

---
 .../product-fields/description/edit.tsx       | 30 ++-----------------
 1 file changed, 2 insertions(+), 28 deletions(-)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 550ce36fcc1..5ba4cf86710 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -1,18 +1,10 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { createElement, useEffect } from '@wordpress/element';
-import {
-	BlockAttributes,
-	BlockInstance,
-	parse,
-	serialize,
-} from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { BlockAttributes, BlockInstance, serialize } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 import { useWooBlockProps } from '@woocommerce/block-templates';
-import { recordEvent } from '@woocommerce/tracks';
 import { useEntityProp } from '@wordpress/core-data';
 import {
 	// @ts-expect-error no exported member.
@@ -73,8 +65,6 @@ export function DescriptionBlockEdit( {
 		[]
 	);
 
-	const { openModalEditor, setModalEditorBlocks } = useDispatch( store );
-
 	// Update the description when the blocks change.
 	useEffect( () => {
 		if ( ! hasChanged ) {
@@ -101,22 +91,6 @@ export function DescriptionBlockEdit( {
 		<div { ...blockProps }>
 			<div { ...innerBlockProps } />
 
-			<Button
-				variant="secondary"
-				onClick={ () => {
-					if ( description ) {
-						setModalEditorBlocks( parse( description ) );
-					}
-
-					openModalEditor();
-					recordEvent( 'product_add_description_click' );
-				} }
-			>
-				{ description.length
-					? __( 'Edit description', 'woocommerce' )
-					: __( 'Add description', 'woocommerce' ) }
-			</Button>
-
 			{ !! description.length && (
 				<ContentPreview content={ description } />
 			) }

From ba52220f392def21fd6059a174f99d1e47245585 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 13:18:39 -0300
Subject: [PATCH 09/26] introduce _templateBlockId attr to Product block

---
 packages/js/product-editor/src/types.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/js/product-editor/src/types.ts b/packages/js/product-editor/src/types.ts
index cbb19f729e5..0dd35cd4e71 100644
--- a/packages/js/product-editor/src/types.ts
+++ b/packages/js/product-editor/src/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { BlockEditProps } from '@wordpress/blocks';
+import { BlockAttributes, BlockEditProps } from '@wordpress/blocks';
 
 export interface ProductEditorContext {
 	postId: number;
@@ -13,6 +13,11 @@ export interface ProductEditorContext {
 export interface ProductEditorBlockEditProps< T extends Record< string, any > >
 	extends BlockEditProps< T > {
 	readonly context: ProductEditorContext;
+	readonly name: string;
+}
+
+export interface ProductEditorBlockAttributes extends BlockAttributes {
+	_templateBlockId?: string;
 }
 
 export interface Metadata< T > {

From 25626b8df00a2c90b3ce68c417865220475ca59e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 13:19:27 -0300
Subject: [PATCH 10/26] fix TS issues

---
 .../withFullEditorToolbarButton.tsx           | 101 +++++++++---------
 .../product-fields/description/edit.tsx       |   6 +-
 .../product-fields/description/types.ts       |  20 ++++
 3 files changed, 76 insertions(+), 51 deletions(-)
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/description/types.ts

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx
index 35b751b1c0d..5f5df3c8993 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx
@@ -13,59 +13,64 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store } from '../../../../store/product-editor-ai';
+import type {
+	DescriptionBlockEditComponent,
+	DescriptionBlockEditProps,
+} from '../types';
 
-/**
- * Internal dependencies
- */
-// import type { ProductEditorBlockEditProps } from '../../../types';
+const wooBlockwithFullEditorToolbarButton =
+	createHigherOrderComponent< DescriptionBlockEditComponent >(
+		( BlockEdit: DescriptionBlockEditComponent ) => {
+			return ( props: DescriptionBlockEditProps ) => {
+				const { openModalEditor } = useDispatch( store );
 
-const wooBlockwithFullEditorToolbarButton = createHigherOrderComponent<
-	Record< string, unknown >
->( ( BlockEdit ) => {
-	return ( props ) => {
-		const { openModalEditor } = useDispatch( store );
+				// Only extend summary field block instances
+				if ( props?.name !== 'woocommerce/product-summary-field' ) {
+					return <BlockEdit { ...props } />;
+				}
 
-		// Only extend summary field block instances
-		if ( props?.name !== 'woocommerce/product-summary-field' ) {
-			return <BlockEdit { ...props } />;
-		}
+				// Only add the `Full editor` button when the block is selected
+				if ( ! props?.isSelected ) {
+					return <BlockEdit { ...props } />;
+				}
 
-		// Only add the `Full editor` button when the block is selected
-		if ( ! props?.isSelected ) {
-			return <BlockEdit { ...props } />;
-		}
+				/*
+				 * Extend the toolbar only to the sumary field block instance
+				 * that has the `woocommerce/product-description-field__content` template block ID.
+				 */
+				if (
+					props?.attributes?._templateBlockId !==
+					'product-description__content'
+				) {
+					return <BlockEdit { ...props } />;
+				}
 
-		/*
-		 * Extend the toolbar only to the sumary field block instance
-		 * that has the `woocommerce/product-description-field__content` template block ID.
-		 */
-		if (
-			props?.attributes?._templateBlockId !==
-			'product-description__content'
-		) {
-			return <BlockEdit { ...props } />;
-		}
+				const blockControlProps = { group: 'other' };
 
-		return (
-			<>
-				<BlockControls group="other">
-					<ToolbarButton
-						label={ __(
-							'Edit Product description',
-							'woocommerce'
-						) }
-						onClick={ () => {
-							recordEvent( 'product_add_description_click' );
-							openModalEditor();
-						} }
-					>
-						{ __( 'Full editor', 'woocommerce' ) }
-					</ToolbarButton>
-				</BlockControls>
-				<BlockEdit { ...props } />
-			</>
-		);
-	};
-}, 'wooBlockwithFullEditorToolbarButton' );
+				return (
+					<>
+						<BlockControls { ...blockControlProps }>
+							<ToolbarButton
+								label={ __(
+									'Edit Product description',
+									'woocommerce'
+								) }
+								onClick={ () => {
+									recordEvent(
+										'product_add_description_click'
+									);
+									openModalEditor();
+								} }
+							>
+								{ __( 'Full editor', 'woocommerce' ) }
+							</ToolbarButton>
+						</BlockControls>
+						<BlockEdit { ...props } />
+					</>
+				);
+			};
+		},
+		'wooBlockwithFullEditorToolbarButton'
+	);
 
 export default wooBlockwithFullEditorToolbarButton;
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 5ba4cf86710..0b6d4a3dee9 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createElement, useEffect } from '@wordpress/element';
-import { BlockAttributes, BlockInstance, serialize } from '@wordpress/blocks';
+import { BlockInstance, serialize } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { useEntityProp } from '@wordpress/core-data';
@@ -15,9 +15,9 @@ import {
  * Internal dependencies
  */
 import { ContentPreview } from '../../../components/content-preview';
-import { ProductEditorBlockEditProps } from '../../../types';
 import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
 import { store } from '../../../store/product-editor-ui';
+import type { DescriptionBlockEditComponent } from './types';
 
 /**
  * Internal dependencies
@@ -45,7 +45,7 @@ function clearDescriptionIfEmpty( blocks: BlockInstance[] ) {
 
 export function DescriptionBlockEdit( {
 	attributes,
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
+}: DescriptionBlockEditComponent ) {
 	const blockProps = useWooBlockProps( attributes );
 	const [ description, setDescription ] = useEntityProp< string >(
 		'postType',
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/types.ts b/packages/js/product-editor/src/blocks/product-fields/description/types.ts
new file mode 100644
index 00000000000..60719cb6d17
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/description/types.ts
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import {
+	// @ts-expect-error no exported member.
+	ComponentType,
+} from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import {
+	ProductEditorBlockAttributes,
+	ProductEditorBlockEditProps,
+} from '../../../types';
+
+export type DescriptionBlockEditProps =
+	ProductEditorBlockEditProps< ProductEditorBlockAttributes >;
+
+export type DescriptionBlockEditComponent =
+	ComponentType< DescriptionBlockEditProps >;

From f573a0a4b4d52a03c539c5b27ef3edea83345864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 13:21:17 -0300
Subject: [PATCH 11/26] use kebab-case to file names

---
 ...torToolbarButton.tsx => with-full-editor-toolbar-button.tsx} | 0
 .../src/blocks/product-fields/description/index.ts              | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/js/product-editor/src/blocks/product-fields/description/components/{withFullEditorToolbarButton.tsx => with-full-editor-toolbar-button.tsx} (100%)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
similarity index 100%
rename from packages/js/product-editor/src/blocks/product-fields/description/components/withFullEditorToolbarButton.tsx
rename to packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/index.ts b/packages/js/product-editor/src/blocks/product-fields/description/index.ts
index 196ae99f4b1..59eda68e201 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/index.ts
+++ b/packages/js/product-editor/src/blocks/product-fields/description/index.ts
@@ -10,7 +10,7 @@ import { addFilter } from '@wordpress/hooks';
 import blockConfiguration from './block.json';
 import { DescriptionBlockEdit } from './edit';
 import { registerProductEditorBlockType } from '../../../utils';
-import wooDescriptionBlockWithFullEditorButton from './components/withFullEditorToolbarButton';
+import wooDescriptionBlockWithFullEditorButton from './components/with-full-editor-toolbar-button';
 
 const { name, ...metadata } = blockConfiguration;
 

From beca44c12b03f6b83de11b7ab504f2d41551d9ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 16:02:29 -0300
Subject: [PATCH 12/26] react -> extract full editor toolbar button cpm

---
 .../components/full-editor-toolbar-button.tsx | 32 +++++++++++++++++++
 .../with-full-editor-toolbar-button.tsx       | 23 ++-----------
 2 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
new file mode 100644
index 00000000000..583931d253d
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import { dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../../../../store/product-editor-ui';
+
+export default function FullEditorToolbarButton( {
+	label = __( 'Edit Product description', 'woocommerce' ),
+	text = __( 'Full editor', 'woocommerce' ),
+} ) {
+	const { openModalEditor } = dispatch( store );
+
+	return (
+		<ToolbarButton
+			label={ label }
+			onClick={ () => {
+				recordEvent( 'product_add_description_click' );
+				openModalEditor();
+			} }
+		>
+			{ text }
+		</ToolbarButton>
+	);
+}
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
index 5f5df3c8993..4385e9d0842 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
@@ -4,26 +4,20 @@
 import { createElement, Fragment } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { store } from '../../../../store/product-editor-ai';
 import type {
 	DescriptionBlockEditComponent,
 	DescriptionBlockEditProps,
 } from '../types';
+import FullEditorToolbarButton from './full-editor-toolbar-button';
 
 const wooBlockwithFullEditorToolbarButton =
 	createHigherOrderComponent< DescriptionBlockEditComponent >(
 		( BlockEdit: DescriptionBlockEditComponent ) => {
 			return ( props: DescriptionBlockEditProps ) => {
-				const { openModalEditor } = useDispatch( store );
-
 				// Only extend summary field block instances
 				if ( props?.name !== 'woocommerce/product-summary-field' ) {
 					return <BlockEdit { ...props } />;
@@ -50,20 +44,7 @@ const wooBlockwithFullEditorToolbarButton =
 				return (
 					<>
 						<BlockControls { ...blockControlProps }>
-							<ToolbarButton
-								label={ __(
-									'Edit Product description',
-									'woocommerce'
-								) }
-								onClick={ () => {
-									recordEvent(
-										'product_add_description_click'
-									);
-									openModalEditor();
-								} }
-							>
-								{ __( 'Full editor', 'woocommerce' ) }
-							</ToolbarButton>
+							<FullEditorToolbarButton />
 						</BlockControls>
 						<BlockEdit { ...props } />
 					</>

From d336a1c508e86ca75a38b8f267a7ec34ee928cc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 16:16:59 -0300
Subject: [PATCH 13/26] show full editor toolbar button when blocks

---
 .../blocks/product-fields/description/block.json    |  2 +-
 .../src/blocks/product-fields/description/edit.tsx  | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/block.json b/packages/js/product-editor/src/blocks/product-fields/description/block.json
index 8ecafe04e9a..3306eedfe1a 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/block.json
+++ b/packages/js/product-editor/src/blocks/product-fields/description/block.json
@@ -20,6 +20,6 @@
 		"reusable": false,
 		"inserter": false,
 		"lock": false,
-		"__experimentalToolbar": false
+		"__experimentalToolbar": true
 	}
 }
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 0b6d4a3dee9..4d3e01be401 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -6,9 +6,11 @@ import { BlockInstance, serialize } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
 import {
 	// @ts-expect-error no exported member.
 	useInnerBlocksProps,
+	BlockControls,
 } from '@wordpress/block-editor';
 
 /**
@@ -18,6 +20,7 @@ import { ContentPreview } from '../../../components/content-preview';
 import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
 import { store } from '../../../store/product-editor-ui';
 import type { DescriptionBlockEditComponent } from './types';
+import FullEditorToolbarButton from './components/full-editor-toolbar-button';
 
 /**
  * Internal dependencies
@@ -89,7 +92,15 @@ export function DescriptionBlockEdit( {
 
 	return (
 		<div { ...blockProps }>
-			<div { ...innerBlockProps } />
+			{ description.length && (
+				<BlockControls>
+					<FullEditorToolbarButton
+						text={ __( 'Edit in full editor', 'woocommerce' ) }
+					/>
+				</BlockControls>
+			) }
+
+			{ ! description.length && <div { ...innerBlockProps } /> }
 
 			{ !! description.length && (
 				<ContentPreview content={ description } />

From b24ddef6c0a1f524c4dad2288dc86f1d64a99d23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Mon, 4 Dec 2023 12:44:35 -0300
Subject: [PATCH 14/26] tweak description preview

---
 .../product-fields/description/edit.tsx       | 13 +++++++-
 .../product-fields/description/editor.scss    | 33 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/description/editor.scss

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 4d3e01be401..6b3139953db 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -4,6 +4,7 @@
 import { createElement, useEffect } from '@wordpress/element';
 import { BlockInstance, serialize } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import classNames from 'classnames';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
@@ -49,7 +50,6 @@ function clearDescriptionIfEmpty( blocks: BlockInstance[] ) {
 export function DescriptionBlockEdit( {
 	attributes,
 }: DescriptionBlockEditComponent ) {
-	const blockProps = useWooBlockProps( attributes );
 	const [ description, setDescription ] = useEntityProp< string >(
 		'postType',
 		'product',
@@ -82,6 +82,10 @@ export function DescriptionBlockEdit( {
 		setDescription( html );
 	}, [ modalEditorBlocks, setDescription, hasChanged ] );
 
+	const blockProps = useWooBlockProps( attributes, {
+		className: classNames( { 'has-blocks': !! description.length } ),
+	} );
+
 	const innerBlockProps = useInnerBlocksProps(
 		{},
 		{
@@ -102,6 +106,13 @@ export function DescriptionBlockEdit( {
 
 			{ ! description.length && <div { ...innerBlockProps } /> }
 
+			{ !! description.length && (
+				<div
+					tabIndex={ 0 }
+					className="wp-block-woocommerce-product-description-field__cover"
+				/>
+			) }
+
 			{ !! description.length && (
 				<ContentPreview content={ description } />
 			) }
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
new file mode 100644
index 00000000000..fcc44d1658c
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
@@ -0,0 +1,33 @@
+
+.wp-block-woocommerce-product-description-field {
+	&.has-blocks {
+		min-height: 320px;
+		.wp-block-woocommerce-product-description-field__cover,
+		.woocommerce-content-preview {
+			min-height: 320px;
+			&:after {
+				display: none;
+			}
+
+			.woocommerce-content-preview__iframe {
+				min-height: 320px;
+			}
+		}
+	}
+
+	.woocommerce-content-preview {
+		position: absolute;
+		top: 0;
+		left: 0;
+		margin: 0;
+		z-index: 100;
+	}
+}
+
+.wp-block-woocommerce-product-description-field__cover {
+	position: absolute;
+	width: 100%;
+	top: 0;
+	left: 0;
+	z-index: 200;
+}

From b7aeaecb3bab3abf162f516255dfeafe0448eec8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 11:53:31 -0300
Subject: [PATCH 15/26] load description styles

---
 packages/js/product-editor/src/blocks/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/js/product-editor/src/blocks/style.scss b/packages/js/product-editor/src/blocks/style.scss
index 3697d625ab1..60bc70206c0 100644
--- a/packages/js/product-editor/src/blocks/style.scss
+++ b/packages/js/product-editor/src/blocks/style.scss
@@ -1,4 +1,5 @@
 @import "product-fields/attributes/editor.scss";
+@import "product-fields/description/editor.scss";
 @import "product-fields/downloads/editor.scss";
 @import "product-fields/images/editor.scss";
 @import "product-fields/inventory-email/editor.scss";

From 52c95d242c2b5567f475dc9cdd435e5a42320ea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 12:21:15 -0300
Subject: [PATCH 16/26] fix checking description is defined

---
 .../src/blocks/product-fields/description/edit.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 6b3139953db..5ba1accbdda 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -96,7 +96,7 @@ export function DescriptionBlockEdit( {
 
 	return (
 		<div { ...blockProps }>
-			{ description.length && (
+			{ !! description.length && (
 				<BlockControls>
 					<FullEditorToolbarButton
 						text={ __( 'Edit in full editor', 'woocommerce' ) }

From c2967761211667db8cef551843de090cebba8d4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 12:21:44 -0300
Subject: [PATCH 17/26] parse and set iframe blocks when clicking on toolbar
 button

---
 .../components/full-editor-toolbar-button.tsx          | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
index 583931d253d..348b497ae68 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
@@ -6,6 +6,8 @@ import { ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
 import { dispatch } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,12 +18,18 @@ export default function FullEditorToolbarButton( {
 	label = __( 'Edit Product description', 'woocommerce' ),
 	text = __( 'Full editor', 'woocommerce' ),
 } ) {
-	const { openModalEditor } = dispatch( store );
+	const { openModalEditor, setModalEditorBlocks } = dispatch( store );
+	const [ description ] = useEntityProp< string >(
+		'postType',
+		'product',
+		'description'
+	);
 
 	return (
 		<ToolbarButton
 			label={ label }
 			onClick={ () => {
+				setModalEditorBlocks( parse( description ) );
 				recordEvent( 'product_add_description_click' );
 				openModalEditor();
 			} }

From 69914eea348c3406c3cae3be5c8a6e441c6d253d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 12:29:30 -0300
Subject: [PATCH 18/26] set initial blocks from the store

---
 .../src/components/iframe-editor/iframe-editor.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
index 2e68d8b8215..435c159bbb5 100644
--- a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
+++ b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
@@ -43,7 +43,6 @@ type IframeEditorProps = {
 };
 
 export function IframeEditor( {
-	initialBlocks = [],
 	onChange = () => {},
 	onClose,
 	onInput = () => {},
@@ -51,14 +50,23 @@ export function IframeEditor( {
 	showBackButton = false,
 }: IframeEditorProps ) {
 	const [ resizeObserver ] = useResizeObserver();
-	const [ temporalBlocks, setTemporalBlocks ] =
-		useState< BlockInstance[] >( initialBlocks );
+	const [ temporalBlocks, setTemporalBlocks ] = useState< BlockInstance[] >(
+		[]
+	);
 
 	// Pick the blocks from the store.
 	const blocks: BlockInstance[] = useSelect( ( select ) => {
 		return select( productEditorUiStore ).getModalEditorBlocks();
 	}, [] );
 
+	/*
+	 * Set the initial blocks from the store.
+	 * @todo: probably we can get rid of the initialBlocks prop.
+	 */
+	useEffect( () => {
+		setTemporalBlocks( blocks );
+	}, [] ); // eslint-disable-line
+
 	const { setModalEditorBlocks: setBlocks, setModalEditorContentHasChanged } =
 		useDispatch( productEditorUiStore );
 

From 74e2e166c0cc263940897ed63ec4cbdd514b658f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 13:00:12 -0300
Subject: [PATCH 19/26] don't allow focusing to Preview component

---
 .../src/components/content-preview/content-preview.tsx       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/js/product-editor/src/components/content-preview/content-preview.tsx b/packages/js/product-editor/src/components/content-preview/content-preview.tsx
index c2ab4ccce58..fac99210622 100644
--- a/packages/js/product-editor/src/components/content-preview/content-preview.tsx
+++ b/packages/js/product-editor/src/components/content-preview/content-preview.tsx
@@ -67,7 +67,10 @@ export function ContentPreview( { content }: ContentPreviewProps ) {
 
 	return (
 		<div className="woocommerce-content-preview">
-			<Iframe className="woocommerce-content-preview__iframe">
+			<Iframe
+				className="woocommerce-content-preview__iframe"
+				tabIndex={ -1 }
+			>
 				<>
 					<EditorStyles styles={ parentEditorSettings?.styles } />
 					<style>

From d602d928e57da5642d5de8665029a97e5b01b7d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 13:02:00 -0300
Subject: [PATCH 20/26] allow focusing to description block

---
 .../src/blocks/product-fields/description/edit.tsx          | 6 ++----
 .../src/blocks/product-fields/description/editor.scss       | 5 +++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
index 5ba1accbdda..d3ee67fcc4a 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
@@ -84,6 +84,7 @@ export function DescriptionBlockEdit( {
 
 	const blockProps = useWooBlockProps( attributes, {
 		className: classNames( { 'has-blocks': !! description.length } ),
+		tabIndex: 0,
 	} );
 
 	const innerBlockProps = useInnerBlocksProps(
@@ -107,10 +108,7 @@ export function DescriptionBlockEdit( {
 			{ ! description.length && <div { ...innerBlockProps } /> }
 
 			{ !! description.length && (
-				<div
-					tabIndex={ 0 }
-					className="wp-block-woocommerce-product-description-field__cover"
-				/>
+				<div className="wp-block-woocommerce-product-description-field__cover" />
 			) }
 
 			{ !! description.length && (
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
index fcc44d1658c..7a6cf72cafb 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
+++ b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
@@ -1,5 +1,10 @@
 
 .wp-block-woocommerce-product-description-field {
+	&:focus {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+		outline: 3px solid transparent;
+	}
+
 	&.has-blocks {
 		min-height: 320px;
 		.wp-block-woocommerce-product-description-field__cover,

From 1cc78c7ce1a2335e41f7147827e82d7053158e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 13:24:08 -0300
Subject: [PATCH 21/26] changelog

---
 .../update-product-editor-description-block-with-inner-blocks | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 packages/js/product-editor/changelog/update-product-editor-description-block-with-inner-blocks

diff --git a/packages/js/product-editor/changelog/update-product-editor-description-block-with-inner-blocks b/packages/js/product-editor/changelog/update-product-editor-description-block-with-inner-blocks
new file mode 100644
index 00000000000..70442a56f5f
--- /dev/null
+++ b/packages/js/product-editor/changelog/update-product-editor-description-block-with-inner-blocks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+[Product Block Editor]: replace description button by editable block

From a5f889a87f157ba5e06b14df86fd0e8f995b0529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 13:33:31 -0300
Subject: [PATCH 22/26] changelog

---
 .../update-product-editor-description-block-with-inner-blocks | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 plugins/woocommerce/changelog/update-product-editor-description-block-with-inner-blocks

diff --git a/plugins/woocommerce/changelog/update-product-editor-description-block-with-inner-blocks b/plugins/woocommerce/changelog/update-product-editor-description-block-with-inner-blocks
new file mode 100644
index 00000000000..7a6c8c2b017
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-product-editor-description-block-with-inner-blocks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: replace description button by editable block

From c99c04b160d0ecaa36629c18f19aff67fdf27aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 16:35:36 -0300
Subject: [PATCH 23/26] fix lint issues

---
 .../ProductTemplates/SimpleProductTemplate.php                   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
index 78286180b1d..c2d9a0ee911 100644
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
+++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
@@ -254,6 +254,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 				),
 			)
 		);
+
 		$description_field_block = $description_section->add_block(
 			array(
 				'id'        => 'product-description',

From a31f09bb065f93797e551f10c38736b4dc05684d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 19:34:28 -0300
Subject: [PATCH 24/26] fix e2e failing tests

---
 ...create-simple-product-block-editor.spec.js | 88 +++++++++----------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js
index 2747b7be8bd..08b0d734891 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js
@@ -88,55 +88,55 @@ test.describe( 'General tab', () => {
 			}
 		} );
 
-		test( 'can create a simple product', async ( { page } ) => {
-			await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
-			await clickOnTab( 'General', page );
-			await page
-				.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
-				.fill( productData.name );
-			await page
-				.locator( '.components-summary-control' )
-				.fill( productData.summary );
-			await page
-				.locator(
-					'[id^="wp-block-woocommerce-product-regular-price-field"]'
-				)
-				.first()
-				.fill( productData.productPrice );
-			await page
-				.locator(
-					'[id^="wp-block-woocommerce-product-sale-price-field"]'
-				)
-				.first()
-				.fill( productData.salePrice );
+test( 'can create a simple product', async ( { page } ) => {
+	await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
+	await clickOnTab( 'General', page );
+	await page
+		.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
+		.fill( productData.name );
+	await page
+		.locator( '[data-template-block-id="basic-details"] .components-summary-control' )
+		.fill( productData.summary );
+	await page
+		.locator(
+			'[id^="wp-block-woocommerce-product-regular-price-field"]'
+		)
+		.first()
+		.fill( productData.productPrice );
+	await page
+		.locator(
+			'[id^="wp-block-woocommerce-product-sale-price-field"]'
+		)
+		.first()
+		.fill( productData.salePrice );
 
-			await page
-				.locator( '.woocommerce-product-header__actions' )
-				.getByRole( 'button', {
-					name: 'Add',
-				} )
-				.click();
+	await page
+		.locator( '.woocommerce-product-header__actions' )
+		.getByRole( 'button', {
+			name: 'Add',
+		} )
+		.click();
 
-			const element = await page.locator(
-				'div.components-snackbar__content'
-			);
-			const textContent = await element.innerText();
+	const element = await page.locator(
+		'div.components-snackbar__content'
+	);
+	const textContent = await element.innerText();
 
-			await expect( textContent ).toMatch( /Product added/ );
+	await expect( textContent ).toMatch( /Product added/ );
 
-			const title = await page.locator(
-				'.woocommerce-product-header__title'
-			);
+	const title = await page.locator(
+		'.woocommerce-product-header__title'
+	);
 
-			// Save product ID
-			const productIdRegex = /product%2F(\d+)/;
-			const url = await page.url();
-			const productIdMatch = productIdRegex.exec( url );
-			productId = productIdMatch ? productIdMatch[ 1 ] : null;
+	// Save product ID
+	const productIdRegex = /product%2F(\d+)/;
+	const url = await page.url();
+	const productIdMatch = productIdRegex.exec( url );
+	productId = productIdMatch ? productIdMatch[ 1 ] : null;
 
-			await expect( productId ).toBeDefined();
-			await expect( title ).toHaveText( productData.name );
-		} );
+	await expect( productId ).toBeDefined();
+	await expect( title ).toHaveText( productData.name );
+} );
 		test( 'can not create a product with duplicated SKU', async ( {
 			page,
 		} ) => {
@@ -146,7 +146,7 @@ test.describe( 'General tab', () => {
 				.locator( '//input[@placeholder="e.g. 12 oz Coffee Mug"]' )
 				.fill( productData.name );
 			await page
-				.locator( '.components-summary-control' )
+				.locator( '[data-template-block-id="basic-details"] .components-summary-control' )
 				.fill( productData.summary );
 			await page
 				.locator(

From a459f1eb7e2d053bafde02ba0fa44b7dc5de71bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 19:55:18 -0300
Subject: [PATCH 25/26] fix eslint error

---
 .../ProductTemplates/SimpleProductTemplate.php              | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
index c2d9a0ee911..671f9377492 100644
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
+++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
@@ -265,9 +265,9 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 
 		$description_field_block->add_block(
 			array(
-				'id'        => 'product-description__content',
-				'blockName' => 'woocommerce/product-summary-field',
-				'order'     => 10,
+				'id'         => 'product-description__content',
+				'blockName'  => 'woocommerce/product-summary-field',
+				'order'      => 10,
 				'attributes' => array(
 					'helpText' => null,
 					'label'    => null,

From 4508f8764c5d5011f99b28a1ac6a67630b0c1fcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 7 Dec 2023 20:22:16 -0300
Subject: [PATCH 26/26] fix tests

---
 .../js/product-editor/src/components/tabs/test/tabs.spec.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx b/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx
index 55d3c9df346..f94f96a1d44 100644
--- a/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx
+++ b/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx
@@ -54,6 +54,7 @@ function MockTabs( { onChange = jest.fn() } ) {
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore editedProduct is not used, so we can just ignore the fact that our context doesn't have it
 				context={ mockContext }
+				name="test1"
 			/>
 			<Tab
 				{ ...blockProps }
@@ -61,6 +62,7 @@ function MockTabs( { onChange = jest.fn() } ) {
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore editedProduct is not used, so we can just ignore the fact that our context doesn't have it
 				context={ mockContext }
+				name="test2"
 			/>
 			<Tab
 				{ ...blockProps }
@@ -68,6 +70,7 @@ function MockTabs( { onChange = jest.fn() } ) {
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore editedProduct is not used, so we can just ignore the fact that our context doesn't have it
 				context={ mockContext }
+				name="test3"
 			/>
 		</SlotFillProvider>
 	);