Add setting to Checkout block to control Hide shipping costs until an address is entered option

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx

@@ -44,4 +44,8 @@ export default {
 			remove: true,
 		},
 	},
+	shippingCostRequiresAddress: {
+		type: 'boolean',
+		default: false,
+	},
 };

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json

@@ -19,6 +19,10 @@
 				"remove": true,
 				"move": true
 			}
+		},
+		"shippingCostRequiresAddress": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"parent": [ "woocommerce/checkout-fields-block" ],

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx

@@ -23,6 +23,8 @@ import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
 import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
+import { Attributes } from '@woocommerce/blocks/checkout/types';
+import { updateAttributeInSiblingBlock } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -152,7 +154,9 @@ const ShippingSelector = ( {
 export const Edit = ( {
 	attributes,
 	setAttributes,
+	clientId,
 }: {
+	clientId: string;
 	attributes: {
 		title: string;
 		description: string;
@@ -163,9 +167,16 @@ export const Edit = ( {
 		showPrice: boolean;
 		showIcon: boolean;
 		className: string;
+		shippingCostRequiresAddress: boolean;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element | null => {
+	const toggleAttribute = ( key: keyof Attributes ): void => {
+		const newAttributes = {} as Partial< Attributes >;
+		newAttributes[ key ] = ! ( attributes[ key ] as boolean );
+		setAttributes( newAttributes );
+	};
+
 	const { setPrefersCollection } = useDispatch( CHECKOUT_STORE_KEY );
 	const { prefersCollection } = useSelect( ( select ) => {
 		const checkoutStore = select( CHECKOUT_STORE_KEY );
@@ -210,6 +221,30 @@ export const Edit = ( {
 			) }
 		>
 			<InspectorControls>
+				<PanelBody
+					title={ __(
+						'Calculations',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<ToggleControl
+						label={ __(
+							'Hide shipping costs until an address is entered',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ attributes.shippingCostRequiresAddress }
+						onChange={ ( selected ) => {
+							updateAttributeInSiblingBlock(
+								clientId,
+								'shippingCostRequiresAddress',
+								selected,
+								'woocommerce/checkout-shipping-methods-block'
+							);
+
+							toggleAttribute( 'shippingCostRequiresAddress' );
+						} }
+					/>
+				</PanelBody>
 				<PanelBody
 					title={ __( 'Appearance', 'woo-gutenberg-products-block' ) }
 				>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/attributes.tsx

@@ -24,4 +24,8 @@ export default {
 			remove: true,
 		},
 	},
+	shippingCostRequiresAddress: {
+		type: 'boolean',
+		default: false,
+	},
 };

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.json

@@ -19,6 +19,10 @@
 				"remove": true,
 				"move": true
 			}
+		},
+		"shippingCostRequiresAddress": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"parent": [ "woocommerce/checkout-fields-block" ],

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx

@@ -52,7 +52,10 @@ const renderShippingRatesControlOption = (
 	};
 };
 
-const Block = ( { noShippingPlaceholder = null } ): ReactElement | null => {
+const Block = ( {
+	noShippingPlaceholder = null,
+	shippingCostRequiresAddress = false,
+} ): ReactElement | null => {
 	const { isEditor } = useEditorContext();
 
 	const {
@@ -85,9 +88,8 @@ const Block = ( { noShippingPlaceholder = null } ): ReactElement | null => {
 		getShippingRatesPackageCount( shippingRates );
 
 	if (
-		! isEditor &&
-		! hasCalculatedShipping &&
-		! shippingRatesPackageCount
+		( ! hasCalculatedShipping && ! shippingRatesPackageCount ) ||
+		( shippingCostRequiresAddress && isEditor )
 	) {
 		return (
 			<p>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx

@@ -4,12 +4,14 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { PanelBody, ExternalLink } from '@wordpress/components';
+import { PanelBody, ExternalLink, ToggleControl } from '@wordpress/components';
 import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { Attributes } from '@woocommerce/blocks/checkout/types';
+import { updateAttributeInSiblingBlock } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -32,12 +34,15 @@ type shippingAdminLink = {
 export const Edit = ( {
 	attributes,
 	setAttributes,
+	clientId,
 }: {
+	clientId: string;
 	attributes: {
 		title: string;
 		description: string;
 		showStepNumber: boolean;
 		className: string;
+		shippingCostRequiresAddress: boolean;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element | null => {
@@ -54,6 +59,12 @@ export const Edit = ( {
 		return null;
 	}
 
+	const toggleAttribute = ( key: keyof Attributes ): void => {
+		const newAttributes = {} as Partial< Attributes >;
+		newAttributes[ key ] = ! ( attributes[ key ] as boolean );
+		setAttributes( newAttributes );
+	};
+
 	return (
 		<FormStepBlock
 			attributes={ attributes }
@@ -64,6 +75,29 @@ export const Edit = ( {
 			) }
 		>
 			<InspectorControls>
+				<PanelBody
+					title={ __(
+						'Calculations',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<ToggleControl
+						label={ __(
+							'Hide shipping costs until an address is entered',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ attributes.shippingCostRequiresAddress }
+						onChange={ ( selected ) => {
+							updateAttributeInSiblingBlock(
+								clientId,
+								'shippingCostRequiresAddress',
+								selected,
+								'woocommerce/checkout-shipping-method-block'
+							);
+							toggleAttribute( 'shippingCostRequiresAddress' );
+						} }
+					/>
+				</PanelBody>
 				{ globalShippingMethods.length > 0 && (
 					<PanelBody
 						title={ __(
@@ -129,7 +163,12 @@ export const Edit = ( {
 				) }
 			</InspectorControls>
 			<Noninteractive>
-				<Block noShippingPlaceholder={ <NoShippingPlaceholder /> } />
+				<Block
+					noShippingPlaceholder={ <NoShippingPlaceholder /> }
+					shippingCostRequiresAddress={
+						attributes.shippingCostRequiresAddress
+					}
+				/>
 			</Noninteractive>
 			<AdditionalFields block={ innerBlockAreas.SHIPPING_METHODS } />
 		</FormStepBlock>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx

@@ -20,6 +20,7 @@ const FrontendBlock = ( {
 	showStepNumber,
 	children,
 	className,
+	shippingCostRequiresAddress = false,
 }: {
 	title: string;
 	description: string;
@@ -31,6 +32,7 @@ const FrontendBlock = ( {
 	showStepNumber: boolean;
 	children: JSX.Element;
 	className?: string;
+	shippingCostRequiresAddress: boolean;
 } ) => {
 	const checkoutIsProcessing = useSelect( ( select ) =>
 		select( CHECKOUT_STORE_KEY ).isProcessing()
@@ -53,7 +55,9 @@ const FrontendBlock = ( {
 			description={ description }
 			showStepNumber={ showStepNumber }
 		>
-			<Block />
+			<Block
+				shippingCostRequiresAddress={ shippingCostRequiresAddress }
+			/>
 			{ children }
 		</FormStep>
 	);

assets/js/utils/attributes.ts

@@ -3,6 +3,7 @@
  */
 import { getSetting } from '@woocommerce/settings';
 import { AttributeObject, AttributeSetting } from '@woocommerce/types';
+import { dispatch, select } from '@wordpress/data';
 
 const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
 
@@ -82,3 +83,35 @@ export const getTaxonomyFromAttributeId = ( attributeId: number ) => {
 	const attribute = getAttributeFromID( attributeId );
 	return attribute ? attribute.taxonomy : null;
 };
+
+/**
+ * Updates an attribute in a sibling block. Useful if two settings control the same attribute, but you don't want to
+ * have this attribute exist on a parent block.
+ */
+export const updateAttributeInSiblingBlock = (
+	clientId: string,
+	attribute: string,
+	newValue: unknown,
+	siblingBlockName: string
+) => {
+	const store = select( 'core/block-editor' );
+	const actions = dispatch( 'core/block-editor' );
+	const parentBlocks = store.getBlockParents( clientId );
+
+	let shippingMethodsBlockClientId = '';
+
+	// Loop through parent block's children until we find woocommerce/checkout-shipping-methods-block.
+	// Also set this attribute in the woocommerce/checkout-shipping-methods-block.
+	parentBlocks.forEach( ( parent ) => {
+		const childBlock = store
+			.getBlock( parent )
+			.innerBlocks.find( ( child ) => child.name === siblingBlockName );
+		if ( ! childBlock ) {
+			return;
+		}
+		shippingMethodsBlockClientId = childBlock.clientId;
+	} );
+	actions.updateBlockAttributes( shippingMethodsBlockClientId, {
+		[ attribute ]: newValue,
+	} );
+};

src/Shipping/ShippingController.php

@@ -3,6 +3,7 @@
 
 use Automattic\WooCommerce\Blocks\Assets\Api as AssetApi;
 use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry;
+use Automattic\WooCommerce\Blocks\Tests\BlockTypes\Cart;
 use Automattic\WooCommerce\Blocks\Utils\CartCheckoutUtils;
 use Automattic\WooCommerce\StoreApi\Utilities\LocalPickupUtils;
 use Automattic\WooCommerce\Utilities\ArrayUtil;
@@ -52,6 +53,7 @@ function() {
 			);
 		}
 		$this->asset_data_registry->add( 'collectableMethodIds', array( 'Automattic\WooCommerce\StoreApi\Utilities\LocalPickupUtils', 'get_local_pickup_method_ids' ), true );
+		$this->asset_data_registry->add( 'shippingCostRequiresAddress', get_option( 'woocommerce_shipping_cost_requires_address', false ) === 'yes' );
 		add_action( 'rest_api_init', [ $this, 'register_settings' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'admin_scripts' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'hydrate_client_settings' ] );
@@ -62,6 +64,38 @@ function() {
 		add_filter( 'pre_update_option_woocommerce_pickup_location_settings', array( $this, 'flush_cache' ) );
 		add_filter( 'pre_update_option_pickup_location_pickup_locations', array( $this, 'flush_cache' ) );
 		add_filter( 'woocommerce_shipping_settings', array( $this, 'remove_shipping_settings' ) );
+		add_filter( 'wc_shipping_enabled', array( $this, 'force_shipping_enabled' ), 100, 1 );
+
+		// This is required to short circuit `show_shipping` from class-wc-cart.php - without it, that function
+		// returns based on the option's value in the DB and we can't override it any other way.
+		add_filter( 'option_woocommerce_shipping_cost_requires_address', array( $this, 'override_cost_requires_address_option' ) );
+	}
+
+	/**
+	 * Overrides the option to force shipping calculations NOT to wait until an address is entered, but only if the
+	 * Checkout page contains the Checkout Block.
+	 *
+	 * @param boolean $value Whether shipping cost calculation requires address to be entered.
+	 * @return boolean Whether shipping cost calculation should require an address to be entered before calculating.
+	 */
+	public function override_cost_requires_address_option( $value ) {
+		if ( CartCheckoutUtils::is_checkout_block_default() ) {
+			return 'no';
+		}
+		return $value;
+	}
+
+	/**
+	 * Force shipping to be enabled if the Checkout block is in use on the Checkout page.
+	 *
+	 * @param boolean $enabled Whether shipping is currently enabled.
+	 * @return boolean Whether shipping should continue to be enabled/disabled.
+	 */
+	public function force_shipping_enabled( $enabled ) {
+		if ( CartCheckoutUtils::is_checkout_block_default() ) {
+			return true;
+		}
+		return $enabled;
 	}
 
 	/**

tests/e2e/specs/backend/checkout.test.js

@@ -64,6 +64,27 @@ describe( `${ block.name } Block`, () => {
 				await selectBlockByName( block.slug );
 			} );
 
+			it( 'can toggle "hide shipping costs until an address is entered"', async () => {
+				await selectBlockByName(
+					'woocommerce/checkout-shipping-methods-block'
+				);
+				const toggleLabel = await findLabelWithText(
+					'Hide shipping costs until an address is entered'
+				);
+				await toggleLabel.click();
+				const shippingOptionsRequireAddressText = await page.$x(
+					'//p[contains(text(), "Shipping options will be displayed here after entering your full shipping address.")]'
+				);
+				await expect( shippingOptionsRequireAddressText ).toHaveLength(
+					1
+				);
+
+				await toggleLabel.click();
+				await expect( page ).toMatchElement(
+					'.wc-block-components-shipping-rates-control'
+				);
+			} );
+
 			it( 'can enable dark mode inputs', async () => {
 				const toggleLabel = await findLabelWithText(
 					'Dark mode inputs'