Manage single variation as virtual (#40809)

* Add virtual section to the product variation template

* Add changelog file

* Let the toogle block to use inverted value to be checked

* Fix virtual toggle to be inverted

* Add changelog file

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

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Let the toogle block to use inverted value to be checked

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

@@ -22,6 +22,12 @@
 		"disabledCopy": {
 			"type": "string",
 			"__experimentalRole": "content"
+		},
+		"checkedValue": {
+			"type": "object"
+		},
+		"uncheckedValue": {
+			"type": "object"
 		}
 	},
 	"supports": {

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

@@ -18,19 +18,41 @@ export function Edit( {
 	context: { postType },
 }: ProductEditorBlockEditProps< ToggleBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
-	const { label, property, disabled, disabledCopy } = attributes;
+	const {
+		label,
+		property,
+		disabled,
+		disabledCopy,
+		checkedValue,
+		uncheckedValue,
+	} = attributes;
 	const [ value, setValue ] = useProductEntityProp< boolean >( property, {
 		postType,
 		fallbackValue: false,
 	} );
 
+	function isChecked() {
+		if ( checkedValue !== undefined ) {
+			return checkedValue === value;
+		}
+		return value as boolean;
+	}
+
+	function handleChange( checked: boolean ) {
+		if ( checked ) {
+			setValue( checkedValue !== undefined ? checkedValue : checked );
+		} else {
+			setValue( uncheckedValue !== undefined ? uncheckedValue : checked );
+		}
+	}
+
 	return (
 		<div { ...blockProps }>
 			<ToggleControl
 				label={ label }
-				checked={ value }
+				checked={ isChecked() }
 				disabled={ disabled }
-				onChange={ setValue }
+				onChange={ handleChange }
 			/>
 			{ disabled && (
 				<p

packages/js/product-editor/src/blocks/generic/toggle/types.ts

@@ -7,4 +7,6 @@ export interface ToggleBlockAttributes extends BlockAttributes {
 	label: string;
 	property: string;
 	disabled?: boolean;
+	checkedValue?: never;
+	uncheckedValue?: never;
 }

plugins/woocommerce/changelog/add-40805

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add virtual section to the product variation template

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

@@ -475,11 +475,30 @@ class ProductVariationTemplate extends AbstractProductFormTemplate implements Pr
 				],
 			]
 		);
+		// Virtual section.
+		$shipping_group->add_section(
+			[
+				'id'    => 'product-variation-virtual-section',
+				'order' => 20,
+			]
+		)->add_block(
+			[
+				'id'         => 'product-variation-virtual',
+				'blockName'  => 'woocommerce/product-toggle-field',
+				'order'      => 10,
+				'attributes' => [
+					'property'       => 'virtual',
+					'checkedValue'   => false,
+					'uncheckedValue' => true,
+					'label'          => __( 'This variation requires shipping or pickup', 'woocommerce' ),
+				],
+			]
+		);
 		// Product Shipping Section.
 		$product_fee_and_dimensions_section = $shipping_group->add_section(
 			[
 				'id'         => 'product-variation-fee-and-dimensions-section',
-				'order'      => 20,
+				'order'      => 30,
 				'attributes' => [
 					'title'       => __( 'Fees & dimensions', 'woocommerce' ),
 					'description' => sprintf(

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

@@ -776,8 +776,10 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 				'blockName'  => 'woocommerce/product-toggle-field',
 				'order'      => 10,
 				'attributes' => [
-					'property' => 'virtual',
+					'property'       => 'virtual',
-					'label'    => __( 'This product requires shipping or pickup', 'woocommerce' ),
+					'checkedValue'   => false,
+					'uncheckedValue' => true,
+					'label'          => __( 'This product requires shipping or pickup', 'woocommerce' ),
 				],
 			]
 		);