[Product blocks editor]: Add help text to Shipping toggle (#41590)

packages/js/product-editor/changelog/update-product-editor-add-variation-pickup-help

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+[Product blocks editor]: Add help text to Shipping toggle

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

@@ -12,6 +12,15 @@
 			"type": "string",
 			"__experimentalRole": "content"
 		},
+		"help": {
+			"type": "string"
+		},
+		"checkedHelp": {
+			"type": "string"
+		},
+		"uncheckedHelp": {
+			"type": "string"
+		},
 		"property": {
 			"type": "string"
 		},

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

@@ -5,6 +5,7 @@ import { createElement } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { recordEvent } from '@woocommerce/tracks';
+import { ReactNode } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore No types for this exist yet.
 // eslint-disable-next-line @woocommerce/dependency-group
@@ -64,6 +65,43 @@ export function Edit( {
 		}
 	}
 
+	let help: ReactNode = null;
+
+	// Default help text.
+	if ( attributes?.help ) {
+		help = createElement( 'div', {
+			dangerouslySetInnerHTML: {
+				__html: sanitizeHTML( attributes.help )?.__html,
+			},
+		} );
+	}
+
+	/*
+	 * Redefine the help text when:
+	 * - The checked help text is defined
+	 * - The toggle is checked
+	 */
+	if ( attributes?.checkedHelp && isChecked() ) {
+		help = createElement( 'div', {
+			dangerouslySetInnerHTML: {
+				__html: sanitizeHTML( attributes.checkedHelp )?.__html,
+			},
+		} );
+	}
+
+	/*
+	 * Redefine the help text when:
+	 * - The unchecked help text is defined
+	 * - The toggle is unchecked
+	 */
+	if ( attributes?.uncheckedHelp && ! isChecked() ) {
+		help = createElement( 'div', {
+			dangerouslySetInnerHTML: {
+				__html: sanitizeHTML( attributes.uncheckedHelp )?.__html,
+			},
+		} );
+	}
+
 	return (
 		<div { ...blockProps }>
 			<ToggleControl
@@ -71,6 +109,7 @@ export function Edit( {
 				checked={ isChecked() }
 				disabled={ disabled }
 				onChange={ handleChange }
+				help={ help }
 			/>
 			{ disabled && (
 				<p

plugins/woocommerce/changelog/update-product-editor-add-variation-pickup-help

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+[Product blocks editor]: Add help text to Shipping toggle

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

@@ -493,6 +493,7 @@ class ProductVariationTemplate extends AbstractProductFormTemplate implements Pr
 						'checkedValue'   => false,
 						'uncheckedValue' => true,
 						'label'          => __( 'This variation requires shipping or pickup', 'woocommerce' ),
+						'uncheckedHelp'  => __( 'This variation will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. <a href="https://woo.com/document/managing-products/#adding-a-virtual-product" target="_blank" rel="noreferrer">Read more about virtual products</a>.', 'woocommerce' ),
 					),
 				)
 			);

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

@@ -882,6 +882,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 						'checkedValue'   => false,
 						'uncheckedValue' => true,
 						'label'          => __( 'This product requires shipping or pickup', 'woocommerce' ),
+						'uncheckedHelp'  => __( 'This product will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. <a href="https://woo.com/document/managing-products/#adding-a-virtual-product" target="_blank" rel="noreferrer">Read more about virtual products</a>.', 'woocommerce' ),
 					),
 				)
 			);