WIP: use entities for phone

plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx

@@ -71,7 +71,7 @@ const AddressCard = ( {
 							<span key={ `address-` + index }>{ field }</span>
 						) ) }
 				</div>
-				{ address.phone && ! fieldConfig.phone.hidden ? (
+				{ address.phone ? (
 					<div
 						key={ `address-phone` }
 						className="wc-block-components-address-card__address-section"

plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx

@@ -19,7 +19,8 @@ import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 import type { TemplateArray } from '@wordpress/blocks';
 import { useEffect, useRef } from '@wordpress/element';
 import { getQueryArg } from '@wordpress/url';
-import { dispatch, select } from '@wordpress/data';
+import { dispatch, select, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -58,8 +59,6 @@ export const Edit = ( {
 		requireCompanyField,
 		showApartmentField,
 		requireApartmentField,
-		showPhoneField,
-		requirePhoneField,
 		showOrderNotes,
 		showPolicyLinks,
 		showReturnToCart,
@@ -69,6 +68,36 @@ export const Edit = ( {
 		showFormStepNumbers = false,
 	} = attributes;
 
+	const { requirePhoneField, showPhoneField } = useSelect( ( select ) => {
+		const phoneField = select( coreStore ).getEditedEntityRecord(
+			'root',
+			'site',
+			undefined
+		)?.woocommerce_checkout_phone_field;
+		return {
+			requirePhoneField: phoneField === 'required',
+			showPhoneField: phoneField !== 'hidden',
+		};
+	}, [] );
+
+	const setShowPhoneFieldEntity = ( showField: boolean ) => {
+		dispatch( coreStore ).editEntityRecord( 'root', 'site', undefined, {
+			woocommerce_checkout_phone_field: showField ? '' : 'hidden',
+		} );
+		// Hack to get it update in editor
+		wcSettings.defaultFields.phone.hidden = ! showField;
+		wcSettings.defaultFields.phone.required = showField;
+	};
+
+	const setRequirePhoneFieldEntity = ( value: string ) => {
+		dispatch( coreStore ).editEntityRecord( 'root', 'site', undefined, {
+			woocommerce_checkout_phone_field:
+				value === 'true' ? 'required' : '',
+		} );
+		// Hack to get it update in editor
+		wcSettings.defaultFields.phone.required = value === 'true';
+	};
+
 	// This focuses on the block when a certain query param is found. This is used on the link from the task list.
 	const focus = useRef( getQueryArg( window.location.href, 'focus' ) );
 
@@ -167,7 +196,7 @@ export const Edit = ( {
 				<ToggleControl
 					label={ __( 'Phone', 'woocommerce' ) }
 					checked={ showPhoneField }
-					onChange={ () => toggleAttribute( 'showPhoneField' ) }
+					onChange={ setShowPhoneFieldEntity }
 				/>
 				{ showPhoneField && (
 					<RadioControl
@@ -182,9 +211,7 @@ export const Edit = ( {
 								value: true,
 							},
 						] }
-						onChange={ () =>
-							toggleAttribute( 'requirePhoneField' )
-						}
+						onChange={ setRequirePhoneFieldEntity }
 						className="components-base-control--nested wc-block-components-require-phone-field"
 					/>
 				) }
@@ -201,7 +228,7 @@ export const Edit = ( {
 				/>
 			</InspectorControls>
 			<EditorProvider
-				isPreview={ isPreview }
+				isPreview={ !! isPreview }
 				previewData={ { previewCart, previewSavedPaymentMethods } }
 			>
 				<SlotFillProvider>

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx

@@ -68,18 +68,12 @@ const Block = ( {
 				hidden: ! showApartmentField,
 				required: requireApartmentField,
 			},
-			phone: {
-				hidden: ! showPhoneField,
-				required: requirePhoneField,
-			},
 		};
 	}, [
 		showCompanyField,
 		requireCompanyField,
 		showApartmentField,
 		requireApartmentField,
-		showPhoneField,
-		requirePhoneField,
 	] ) as FormFieldsConfig;
 
 	const WrapperComponent = isEditor ? Noninteractive : Fragment;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -99,18 +99,12 @@ const Block = ( {
 				hidden: ! showApartmentField,
 				required: requireApartmentField,
 			},
-			phone: {
-				hidden: ! showPhoneField,
-				required: requirePhoneField,
-			},
 		};
 	}, [
 		showCompanyField,
 		requireCompanyField,
 		showApartmentField,
 		requireApartmentField,
-		showPhoneField,
-		requirePhoneField,
 	] ) as FormFieldsConfig;
 
 	const WrapperComponent = isEditor ? Noninteractive : Fragment;

plugins/woocommerce/src/Blocks/BlockTypes/Checkout.php

@@ -33,6 +33,7 @@ class Checkout extends AbstractBlock {
 	protected function initialize() {
 		parent::initialize();
 		add_action( 'wp_loaded', array( $this, 'register_patterns' ) );
+		add_action( 'init', array( $this, 'register_settings' ) );
 		// This prevents the page redirecting when the cart is empty. This is so the editor still loads the page preview.
 		add_filter(
 			'woocommerce_checkout_redirect_empty_cart',
@@ -71,6 +72,30 @@ class Checkout extends AbstractBlock {
 		);
 	}
 
+	/**
+	 * Exposes phone setting for the checkout block.
+	 */
+	public function register_settings() {
+		register_setting(
+			'options',
+			'woocommerce_checkout_phone_field',
+			array(
+				'type'         => 'object',
+				'description'  => 'Controls the display of the phone field in checkout.',
+				'label'        => 'Phone number',
+				'show_in_rest' => array(
+					'name'   => 'woocommerce_checkout_phone_field',
+					'schema' => array(
+						'type' => 'string',
+						'enum' => array( 'required', '', 'hidden' ),
+					),
+				),
+				'default'      => get_option( 'woocommerce_checkout_phone_field' ),
+
+			)
+		);
+	}
+
 	/**
 	 * Get the editor script handle for this block type.
 	 *

plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php

@@ -497,7 +497,7 @@ class CheckoutFields {
 	 * @return array An array of fields.
 	 */
 	public function get_core_fields() {
-		return [
+		$fields = [
 			'email'      => [
 				'label'          => __( 'Email address', 'woocommerce' ),
 				'optionalLabel'  => __(
@@ -618,20 +618,25 @@ class CheckoutFields {
 				'autocapitalize' => 'characters',
 				'index'          => 90,
 			],
-			'phone'      => [
-				'label'          => __( 'Phone', 'woocommerce' ),
-				'optionalLabel'  => __(
-					'Phone (optional)',
-					'woocommerce'
-				),
-				'required'       => false,
-				'hidden'         => false,
-				'type'           => 'tel',
-				'autocomplete'   => 'tel',
-				'autocapitalize' => 'characters',
-				'index'          => 100,
-			],
 		];
+
+		$phone_options = get_option( 'woocommerce_checkout_phone_field', '' );
+
+		$fields['phone'] = [
+			'label'          => __( 'Phone', 'woocommerce' ),
+			'optionalLabel'  => __(
+				'Phone (optional)',
+				'woocommerce'
+			),
+			'required'       => 'required' === $phone_options,
+			'hidden'         => 'hidden' === $phone_options,
+			'type'           => 'tel',
+			'autocomplete'   => 'tel',
+			'autocapitalize' => 'characters',
+			'index'          => 100,
+		];
+
+		return $fields;
 	}
 
 	/**