[Product Block Editor]: render empty state for the Upsells section (#43116)

* Upsells block: scafolding

* export Upsells block

* add Upsells block into the Upsells section

* render empty state for the Upsells section

* iadd hardcoded isEmpty flag

* changelog

packages/js/product-editor/changelog/update-product-editor-render-empty-state-for-upsells-section

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: add Upsell advice

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

@@ -34,3 +34,4 @@ export { init as initNoticeHasVariations } from './product-fields/notice-has-var
 export { init as initTaxonomy } from './generic/taxonomy';
 export { init as initText } from './generic/text';
 export { init as initNumber } from './generic/number';
+export { init as initUpsells } from './product-fields/upsells';

packages/js/product-editor/src/blocks/product-fields/upsells/block.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-upsells",
+	"title": "Product Upsells",
+	"category": "woocommerce",
+	"description": "Show a list of products that are related or can be used as an upsell to the current product.",
+	"keywords": [ "products", "linked" ],
+	"textdomain": "default",
+	"attributes": {
+		"__contentEditable": {
+			"type": "string",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": true,
+		"reusable": false,
+		"inserter": false,
+		"lock": false,
+		"__experimentalToolbar": true
+	}
+}

packages/js/product-editor/src/blocks/product-fields/upsells/edit.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { useWooBlockProps } from '@woocommerce/block-templates';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { AdviceCard } from '../../../components/advice-card';
+import { ShoppingBags } from '../../../images/shopping-bugs';
+import type { UpsellsBlockEditComponent } from './types';
+
+export function UpsellsBlockEdit( { attributes }: UpsellsBlockEditComponent ) {
+	const blockProps = useWooBlockProps( attributes );
+
+	const isEmpty = true; // @todo: implement.
+
+	if ( isEmpty ) {
+		return (
+			<div { ...blockProps }>
+				<AdviceCard
+					tip={ __(
+						'Upsells are products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales.',
+						'woocommerce'
+					) }
+					image={ <ShoppingBags /> }
+					isDismissible={ true }
+				/>
+			</div>
+		);
+	}
+
+	return <div { ...blockProps } />;
+}

packages/js/product-editor/src/blocks/product-fields/upsells/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import blockConfiguration from './block.json';
+import { UpsellsBlockEdit } from './edit';
+import { registerProductEditorBlockType } from '../../../utils';
+
+const { name, ...metadata } = blockConfiguration;
+
+export { metadata, name };
+
+export const settings = {
+	example: {},
+	edit: UpsellsBlockEdit,
+};
+
+export const init = () =>
+	registerProductEditorBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

packages/js/product-editor/src/blocks/product-fields/upsells/types.ts

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import {
+	// @ts-expect-error no exported member.
+	ComponentType,
+} from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import {
+	ProductEditorBlockAttributes,
+	ProductEditorBlockEditProps,
+} from '../../../types';
+
+export type UpsellsBlockEditProps =
+	ProductEditorBlockEditProps< ProductEditorBlockAttributes >;
+
+export type UpsellsBlockEditComponent = ComponentType< UpsellsBlockEditProps >;

plugins/woocommerce/changelog/update-product-editor-render-empty-state-for-upsells-section

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: add Upsell advice

plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php

@@ -1114,7 +1114,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 			return;
 		}
 
-		$linked_products_group->add_section(
+		$linked_product_upsells_section = $linked_products_group->add_section(
 			array(
 				'id'         => 'product-linked-upsells-section',
 				'order'      => 10,
@@ -1130,6 +1130,17 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 			)
 		);
 
+		$linked_product_upsells_section->add_block(
+			array(
+				'id'         => 'product-linked-upsells',
+				'blockName'  => 'woocommerce/product-upsells',
+				'order'      => 10,
+				'attributes' => array(
+					'property' => 'upsell_ids',
+				),
+			)
+		);
+
 		$linked_products_group->add_section(
 			array(
 				'id'             => 'product-linked-cross-sells-section',