Add a notice to "track inventory" toggle (#40011)

* Add notice to "track inventory" toggle

* Add changelogs

* Remove console.logs

* Fix link URL

packages/js/product-editor/changelog/dev-39152_add_notice_to_track_inventory_toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add notice to "track inventory" toggle #40011

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

@@ -19,3 +19,4 @@
 @import 'variation-items/editor.scss';
 @import 'variation-options/editor.scss';
 @import 'taxonomy/editor.scss';
+@import 'toggle/editor.scss';

packages/js/product-editor/src/blocks/toggle/block.json

@@ -18,6 +18,10 @@
 		"disabled": {
 			"type": "boolean",
 			"default": false
+		},
+		"disabledCopy": {
+			"type": "string",
+			"__experimentalRole": "content"
 		}
 	},
 	"supports": {

packages/js/product-editor/src/blocks/toggle/edit.tsx

@@ -11,12 +11,13 @@ import { ToggleControl } from '@wordpress/components';
  * Internal dependencies
  */
 import { ToggleBlockAttributes } from './types';
+import { sanitizeHTML } from '../../utils/sanitize-html';
 
 export function Edit( {
 	attributes,
 }: BlockEditProps< ToggleBlockAttributes > ) {
 	const blockProps = useBlockProps();
-	const { label, property, disabled } = attributes;
+	const { label, property, disabled, disabledCopy } = attributes;
 	const [ value, setValue ] = useEntityProp< boolean >(
 		'postType',
 		'product',
@@ -31,6 +32,12 @@ export function Edit( {
 				disabled={ disabled }
 				onChange={ setValue }
 			/>
+			{ disabled && (
+				<p
+					className="wp-block-woocommerce-product-toggle__disable-copy"
+					dangerouslySetInnerHTML={ sanitizeHTML( disabledCopy ) }
+				/>
+			) }
 		</div>
 	);
 }

packages/js/product-editor/src/blocks/toggle/editor.scss

@@ -0,0 +1,6 @@
+.wp-block-woocommerce-product-toggle__disable-copy {
+	margin: $gap-small 0 0;
+	font-size: 12px;
+	color: $gray-700;
+	line-height: 1.5;
+}

plugins/woocommerce/changelog/dev-39152_add_notice_to_track_inventory_toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add notice to "track inventory" toggle #40011

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

@@ -552,6 +552,12 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 					'label'    => __( 'Track stock quantity for this product', 'woocommerce' ),
 					'property' => 'manage_stock',
 					'disabled' => 'yes' !== get_option( 'woocommerce_manage_stock' ),
+					'disabledCopy' => sprintf(
+						/* translators: %1$s: Learn more link opening tag. %2$s: Learn more link closing tag.*/
+							__( 'Per your %1$sstore settings%2$s, inventory management is <strong>disabled</strong>.', 'woocommerce' ),
+							'<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products&section=inventory' ) . '" target="_blank" rel="noreferrer">',
+							'</a>'
+						),
 				],
 			]
 		);