Change the blocks editor header to support variations (#40606)

* Add variation name and parent id to REST API

* Add variation title

* Add changelog

* Change changelog

* Fix lint

* Add changelog

* Fix typo

* Modify header check

packages/js/product-editor/changelog/dev-40590_change_header_to_support_variation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Change the blocks editor header to support variations #40606

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

@@ -7,6 +7,10 @@ import { useEntityProp } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { createElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+import { chevronLeft, group, Icon } from '@wordpress/icons';
+import { getNewPath, navigateTo } from '@woocommerce/navigation';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -17,12 +21,18 @@ import { PreviewButton } from './preview-button';
 import { SaveDraftButton } from './save-draft-button';
 import { PublishButton } from './publish-button';
 import { Tabs } from '../tabs';
+import { TRACKS_SOURCE } from '../../constants';
 
 export type HeaderProps = {
 	onTabSelect: ( tabId: string | null ) => void;
 	productType?: string;
 };
 
+const RETURN_TO_MAIN_PRODUCT = __(
+	'Return to the main product',
+	'woocommerce'
+);
+
 export function Header( {
 	onTabSelect,
 	productType = 'product',
@@ -63,12 +73,56 @@ export function Header( {
 			tabIndex={ -1 }
 		>
 			<div className="woocommerce-product-header__inner">
-				<div />
+				{ lastPersistedProduct?.parent_id > 0 ? (
+					<div className="woocommerce-product-header__back">
+						<Tooltip
+							// @ts-expect-error className is missing in TS, should remove this when it is included.
+							className="woocommerce-product-header__back-tooltip"
+							text={ RETURN_TO_MAIN_PRODUCT }
+						>
+							<div className="woocommerce-product-header__back-tooltip-wrapper">
+								<Button
+									icon={ chevronLeft }
+									isTertiary={ true }
+									onClick={ () => {
+										recordEvent(
+											'product_variation_back_to_main_product',
+											{
+												source: TRACKS_SOURCE,
+											}
+										);
+										const url = getNewPath(
+											{ tab: 'variations' },
+											`/product/${ lastPersistedProduct.parent_id }`
+										);
+										navigateTo( { url } );
+									} }
+								>
+									{ __( 'Main product', 'woocommerce' ) }
+								</Button>
+							</div>
+						</Tooltip>
+					</div>
+				) : (
+					<div />
+				) }
 
 				<h1 className="woocommerce-product-header__title">
-					{ getHeaderTitle(
+					{ lastPersistedProduct?.parent_id > 0 ? (
-						editedProductName,
+						<div className="woocommerce-product-header__variable-product-title">
-						lastPersistedProduct?.name
+							<Icon icon={ group } />
+							<span className="woocommerce-product-header__variable-product-name">
+								{ lastPersistedProduct?.name }
+							</span>
+							<span className="woocommerce-product-header__variable-product-id">
+								# { lastPersistedProduct.id }
+							</span>
+						</div>
+					) : (
+						getHeaderTitle(
+							editedProductName,
+							lastPersistedProduct.name
+						)
 					) }
 				</h1>
 

packages/js/product-editor/src/components/header/style.scss

@@ -47,6 +47,27 @@
 			color: #fff;
 		}
 	}
+
+	&__back-tooltip-wrapper {
+		width: fit-content;
+	}
+
+	&__variable-product-title {
+		display: flex;
+		align-items: center;
+		svg {
+			fill: $gray-600;
+		}
+	}
+
+	&__variable-product-name {
+		margin-left: 10px;
+	}
+
+	&__variable-product-id {
+		margin-left: 10px;
+		color: $gray-700;
+	}
 }
 
 .woocommerce-product-header__more-menu {

plugins/woocommerce/changelog/dev-40590_change_header_to_support_variation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Change the blocks editor header to support variations #40606

plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-product-variations-controller.php

@@ -119,6 +119,8 @@ class WC_REST_Product_Variations_Controller extends WC_REST_Product_Variations_V
 			'attributes'            => $this->get_attributes( $object ),
 			'menu_order'            => $object->get_menu_order(),
 			'meta_data'             => $object->get_meta_data(),
+			'name'                  => preg_replace( '/' . preg_quote( $object->get_title() . ' - ', '/' ) . '/', '', $object->get_name(), 1 ),
+			'parent_id'             => $object->get_parent_id(),
 		);
 
 		$data     = $this->add_additional_fields_to_object( $data, $request );