Add inventory section and SKU blocks (#37623)

packages/js/product-editor/changelog/add-inventory-sku-block-37399

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding sku block to product editor.

packages/js/product-editor/src/blocks/inventory-sku/block.json

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-sku",
+	"title": "Product text control",
+	"category": "woocommerce",
+	"description": "The product sku.",
+	"keywords": [ "products", "sku" ],
+	"textdomain": "default",
+	"attributes": {
+		"name": {
+			"type": "string",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": true,
+		"reusable": false,
+		"inserter": false,
+		"lock": false,
+		"__experimentalToolbar": false
+	},
+	"editorStyle": "file:./editor.css"
+}

packages/js/product-editor/src/blocks/inventory-sku/edit.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createElement, createInterpolateElement } from '@wordpress/element';
+import { useBlockProps } from '@wordpress/block-editor';
+
+import {
+	BaseControl,
+	// @ts-expect-error `__experimentalInputControl` does exist.
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+// 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';
+
+/**
+ * Internal dependencies
+ */
+
+export function Edit() {
+	const blockProps = useBlockProps();
+
+	const [ sku, setSku ] = useEntityProp( 'postType', 'product', 'sku' );
+
+	return (
+		<div { ...blockProps }>
+			<BaseControl
+				id={ 'product_sku' }
+				className="woocommerce-product-form_inventory-sku"
+				label={ createInterpolateElement(
+					__( 'Sku <description />', 'woocommerce' ),
+					{
+						description: (
+							<span className="woocommerce-product-form__optional-input">
+								{ __( '(STOCK KEEPING UNIT)', 'woocommerce' ) }
+							</span>
+						),
+					}
+				) }
+			>
+				<InputControl
+					name={ 'woocommerce-product-sku' }
+					onChange={ setSku }
+					value={ sku || '' }
+				/>
+			</BaseControl>
+		</div>
+	);
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../../utils/init-block';
+import metadata from './block.json';
+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/blocks/inventory-sku/style.scss

@@ -0,0 +1,13 @@
+
+.woocommerce-product-form_inventory-sku {
+	.components-base-control__label {
+		display: flex;
+		align-items: center;
+	}
+	.woocommerce-product-form__optional-input {
+		margin-left: $gap-smallest;
+	}
+	.woocommerce-tooltip__button {
+		padding: 0 0 0 $gap-smallest;
+	}
+}

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

@@ -33,6 +33,7 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
  */
 import { AUTO_DRAFT_NAME } from '../../utils';
 import { EditProductLinkModal } from '../edit-product-link-modal';
+
 import { useValidation } from '../../hooks/use-validation';
 
 export function Edit() {
@@ -52,6 +53,7 @@ export function Edit() {
 		)
 	);
 
+	const [ sku, setSku ] = useEntityProp( 'postType', 'product', 'sku' );
 	const [ name, setName ] = useEntityProp< string >(
 		'postType',
 		'product',
@@ -79,6 +81,13 @@ export function Edit() {
 		() => Boolean( name ) && name !== AUTO_DRAFT_NAME
 	);
 
+	const setSkuIfEmpty = () => {
+		if ( sku || ! nameIsValid ) {
+			return;
+		}
+		setSku( cleanForSlug( name ) );
+	};
+
 	return (
 		<>
 			<div { ...blockProps }>
@@ -103,6 +112,7 @@ export function Edit() {
 						) }
 						onChange={ setName }
 						value={ name || '' }
+						onBlur={ setSkuIfEmpty }
 					/>
 				</BaseControl>
 				{ productId &&

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

@@ -22,6 +22,7 @@ import { init as initPricing } from '../pricing-block';
 import { init as initCollapsible } from '../collapsible-block';
 import { init as initScheduleSale } from '../../blocks/schedule-sale';
 import { init as initTrackInventory } from '../../blocks/track-inventory';
+import { init as initSku } from '../../blocks/inventory-sku';
 
 export const initBlocks = () => {
 	const coreBlocks = __experimentalGetCoreBlocks();
@@ -42,4 +43,5 @@ export const initBlocks = () => {
 	initCollapsible();
 	initScheduleSale();
 	initTrackInventory();
+	initSku();
 };

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

@@ -16,3 +16,4 @@
 @import 'components/product-mvp-ces-footer/style.scss';
 @import 'components/product-mvp-feedback-modal/style.scss';
 @import 'components/details-name-block/style.scss';
+@import 'blocks/inventory-sku/style.scss';

plugins/woocommerce/changelog/add-inventory-sku-block-37399

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding inventory section and sku blocks to product block editor.

plugins/woocommerce/includes/class-wc-post-types.php

@@ -585,10 +585,30 @@ class WC_Post_Types {
 							),
 							array(
 								array(
-									'woocommerce/product-track-inventory-fields',
+									'woocommerce/product-section',
-									array(),
+									array(
+										'title'       => __( 'Inventory', 'woocommerce' ),
+										'description' => sprintf(
+											/* translators: %1$s: Inventory settings link opening tag. %2$s: Inventory settings link closing tag.*/
+											__( 'Set up and manage inventory for this product, including status and available quantity. %1$sManage store inventory settings%2$s', 'woocommerce' ),
+											'<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products&section=inventory' ) . '" target="_blank" rel="noreferrer">',
+											'</a>'
+										),
+										'icon'        => array(
+											'src' => '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H14C14.2761 2 14.5 2.22386 14.5 2.5V9.5H11.5H10C10 10.6046 9.10457 11.5 8 11.5C6.89543 11.5 6 10.6046 6 9.5H4.5H1.5V2.5C1.5 2.22386 1.72386 2 2 2ZM1.5 11V14.5C1.5 14.7761 1.72386 15 2 15H14C14.2761 15 14.5 14.7761 14.5 14.5V11H11.1632C10.6015 12.1825 9.3962 13 8 13C6.6038 13 5.39855 12.1825 4.83682 11H1.5ZM0 9.5V2.5C0 1.39543 0.895431 0.5 2 0.5H14C15.1046 0.5 16 1.39543 16 2.5V9.5V11V14.5C16 15.6046 15.1046 16.5 14 16.5H2C0.895431 16.5 0 15.6046 0 14.5V11V9.5Z" fill="#1E1E1E"/></svg>',
+										),
+									),
+									array(
+										array(
+											'woocommerce/product-sku',
+										),
+										array(
+											'woocommerce/product-track-inventory-fields',
+										),
+									),
 								),
 							),
+
 						),
 						array(
 							'woocommerce/product-tab',
@@ -600,7 +620,7 @@ class WC_Post_Types {
 								array(
 									'woocommerce/product-section',
 									array(
-										'title' => __( 'Shipping section', 'woocommerce' ),
+										'title' => __( 'Shipping', 'woocommerce' ),
 										'icon'  => array(
 											'src' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7.75C3.5 6.7835 4.2835 6 5.25 6H14.75H15.5V6.75V9H17.25H17.5607L17.7803 9.21967L20.7803 12.2197L21 12.4393V12.75V14.75C21 15.7165 20.2165 16.5 19.25 16.5H19.2377C19.2458 16.5822 19.25 16.6656 19.25 16.75C19.25 18.1307 18.1307 19.25 16.75 19.25C15.3693 19.25 14.25 18.1307 14.25 16.75C14.25 16.6656 14.2542 16.5822 14.2623 16.5H14H10.2377C10.2458 16.5822 10.25 16.6656 10.25 16.75C10.25 18.1307 9.13071 19.25 7.75 19.25C6.36929 19.25 5.25 18.1307 5.25 16.75C5.25 16.6656 5.25418 16.5822 5.26234 16.5H4.25H3.5V15.75V7.75ZM14 15V9.75V9V7.5H5.25C5.11193 7.5 5 7.61193 5 7.75V15H5.96464C6.41837 14.5372 7.05065 14.25 7.75 14.25C8.44935 14.25 9.08163 14.5372 9.53536 15H14ZM18.5354 15H19.25C19.3881 15 19.5 14.8881 19.5 14.75V13.0607L16.9393 10.5H15.5V14.5845C15.8677 14.3717 16.2946 14.25 16.75 14.25C17.4493 14.25 18.0816 14.5372 18.5354 15ZM6.7815 16.5C6.76094 16.5799 6.75 16.6637 6.75 16.75C6.75 17.3023 7.19772 17.75 7.75 17.75C8.30228 17.75 8.75 17.3023 8.75 16.75C8.75 16.6637 8.73906 16.5799 8.7185 16.5C8.60749 16.0687 8.21596 15.75 7.75 15.75C7.28404 15.75 6.89251 16.0687 6.7815 16.5ZM15.7815 16.5C15.7609 16.5799 15.75 16.6637 15.75 16.75C15.75 17.3023 16.1977 17.75 16.75 17.75C17.3023 17.75 17.75 17.3023 17.75 16.75C17.75 16.6637 17.7391 16.5799 17.7185 16.5C17.7144 16.4841 17.7099 16.4683 17.705 16.4526C17.5784 16.0456 17.1987 15.75 16.75 15.75C16.284 15.75 15.8925 16.0687 15.7815 16.5Z" fill="#1E1E1E"/></svg>',
 										),