Add track inventory field to inventory section (#37585)

packages/js/product-editor/changelog/add-37400

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add product track inventory block

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

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

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

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import { BlockEditProps } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+import { useEntityProp } from '@wordpress/core-data';
+import { createElement, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	BaseControl,
+	ToggleControl,
+	// @ts-expect-error `__experimentalInputControl` does exist.
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { TrackInventoryBlockAttributes } from './types';
+import { useValidation } from '../../hooks/use-validation';
+
+export function Edit( {}: BlockEditProps< TrackInventoryBlockAttributes > ) {
+	const blockProps = useBlockProps( {
+		className: 'wp-block-woocommerce-product-track-inventory-fields',
+	} );
+
+	const [ manageStock, setManageStock ] = useEntityProp< boolean >(
+		'postType',
+		'product',
+		'manage_stock'
+	);
+
+	const [ stockQuantity, setStockQuantity ] = useEntityProp< number | null >(
+		'postType',
+		'product',
+		'stock_quantity'
+	);
+
+	const stockQuantityId = useInstanceId( BaseControl ) as string;
+
+	const isStockQuantityValid = useValidation(
+		'product/stock_quantity',
+		function stockQuantityValidator() {
+			if ( ! manageStock ) return true;
+			return Boolean( stockQuantity && stockQuantity >= 0 );
+		}
+	);
+
+	useEffect( () => {
+		if ( manageStock && stockQuantity === null ) {
+			setStockQuantity( 1 );
+		}
+	}, [ manageStock, stockQuantity ] );
+
+	return (
+		<div { ...blockProps }>
+			<ToggleControl
+				label={ __(
+					'Track stock quantity for this product',
+					'woocommerce'
+				) }
+				checked={ manageStock }
+				onChange={ setManageStock }
+			/>
+
+			{ manageStock && (
+				<div className="wp-block-columns">
+					<div className="wp-block-column">
+						<BaseControl
+							id={ stockQuantityId }
+							className={
+								isStockQuantityValid ? undefined : 'has-error'
+							}
+							help={
+								isStockQuantityValid
+									? undefined
+									: __(
+											'Stock quantity must be a positive number.',
+											'woocommerce'
+									  )
+							}
+						>
+							<InputControl
+								name="stock_quantity"
+								label={ __(
+									'Available quantity',
+									'woocommerce'
+								) }
+								value={ stockQuantity }
+								onChange={ setStockQuantity }
+								type="number"
+								min={ 0 }
+							/>
+						</BaseControl>
+					</div>
+
+					<div className="wp-block-column" />
+				</div>
+			) }
+		</div>
+	);
+}

packages/js/product-editor/src/blocks/track-inventory/editor.scss

@@ -0,0 +1,15 @@
+.wp-block-woocommerce-product-track-inventory-fields {
+	.components-toggle-control {
+		margin-bottom: $gap-large;
+	}
+
+	.has-error {
+		.components-base-control .components-input-control__backdrop {
+			border-color: $studio-red-50;
+		}
+
+		.components-base-control__help {
+			color: $studio-red-50;
+		}
+	}
+}

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

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { BlockConfiguration } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { initBlock } from '../../utils/init-blocks';
+import blockConfiguration from './block.json';
+import { Edit } from './edit';
+import { TrackInventoryBlockAttributes } from './types';
+
+const { name, ...metadata } =
+	blockConfiguration as BlockConfiguration< TrackInventoryBlockAttributes >;
+
+export { metadata, name };
+
+export const settings: Partial<
+	BlockConfiguration< TrackInventoryBlockAttributes >
+> = {
+	example: {},
+	edit: Edit,
+};
+
+export function init() {
+	return initBlock( { name, metadata, settings } );
+}

packages/js/product-editor/src/blocks/track-inventory/types.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import { BlockAttributes } from '@wordpress/blocks';
+
+export interface TrackInventoryBlockAttributes extends BlockAttributes {
+	name: string;
+}

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

@@ -21,6 +21,7 @@ import { init as initTab } from '../tab';
 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';
 
 export const initBlocks = () => {
 	const coreBlocks = __experimentalGetCoreBlocks();
@@ -40,4 +41,5 @@ export const initBlocks = () => {
 	initPricing();
 	initCollapsible();
 	initScheduleSale();
+	initTrackInventory();
 };

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

@@ -1,4 +1,5 @@
 @import 'blocks/schedule-sale/editor.scss';
+@import 'blocks/track-inventory/editor.scss';
 @import 'components/editor/style.scss';
 @import 'components/product-section-layout/style.scss';
 @import 'components/edit-product-link-modal/style.scss';

plugins/woocommerce/changelog/add-37400

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Register product track inventory block

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

@@ -584,6 +584,12 @@ class WC_Post_Types {
 								'id'    => 'inventory',
 								'title' => __( 'Inventory', 'woocommerce' ),
 							),
+							array(
+								array(
+									'woocommerce/product-track-inventory-fields',
+									array(),
+								),
+							),
 						),
 						array(
 							'woocommerce/product-tab',