Update shipping class block to match new designs (#38301)

* Change the section title from Shipping fee to Shipping class

* Replace the radio buttons with a regular dropdown

* Add changelog files

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

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Update shipping class block to match new designs#38044

packages/js/product-editor/src/blocks/index.ts

@@ -13,8 +13,8 @@ export { init as initRegularPrice } from './regular-price';
 export { init as initSalePrice } from './sale-price';
 export { init as initScheduleSale } from './schedule-sale';
 export { init as initSection } from './section';
+export { init as initShippingClass } from './shipping-class';
 export { init as initShippingDimensions } from './shipping-dimensions';
-export { init as initShippingFee } from './shipping-fee';
 export { init as initSummary } from './summary';
 export { init as initTab } from './tab';
 export { init as initInventoryQuantity } from './inventory-quantity';

packages/js/product-editor/src/blocks/shipping-class/block.json

@@ -1,11 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-shipping-fee-fields",
-	"title": "Product shipping fee fields",
+	"name": "woocommerce/product-shipping-class-field",
+	"title": "Product shipping class field",
 	"category": "woocommerce",
-	"description": "The product shipping fee fields.",
-	"keywords": [ "products", "shipping", "fee" ],
+	"description": "The product shipping class field.",
+	"keywords": [ "products", "shipping", "class" ],
 	"textdomain": "default",
 	"attributes": {
 		"title": {

packages/js/product-editor/src/blocks/shipping-class/edit.tsx

@@ -18,19 +18,15 @@ import {
 	Fragment,
 	createElement,
 	createInterpolateElement,
-	useEffect,
 	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
 import { useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { ShippingFeeBlockAttributes } from './types';
-import { useValidation } from '../../hooks/use-validation';
-import { RadioField } from '../../components/radio-field';
+import { ShippingClassBlockAttributes } from './types';
 import { AddNewShippingClassModal } from '../../components';
 import { ADD_NEW_SHIPPING_CLASS_OPTION_VALUE } from '../../constants';
 
@@ -38,9 +34,6 @@ type ServerErrorResponse = {
 	code: string;
 };
 
-const FOLLOW_CLASS_OPTION_VALUE = 'follow_class';
-const FREE_SHIPPING_OPTION_VALUE = 'free_shipping';
-
 export const DEFAULT_SHIPPING_CLASS_OPTIONS: SelectControl.Option[] = [
 	{ value: '', label: __( 'No shipping class', 'woocommerce' ) },
 	{
@@ -58,17 +51,6 @@ function mapShippingClassToSelectOption(
 	} ) );
 }
 
-const options = [
-	{
-		label: __( 'Follow class', 'woocommerce' ),
-		value: FOLLOW_CLASS_OPTION_VALUE,
-	},
-	{
-		label: __( 'Free shipping', 'woocommerce' ),
-		value: FREE_SHIPPING_OPTION_VALUE,
-	},
-];
-
 function extractDefaultShippingClassFromProduct(
 	categories?: PartialProduct[ 'categories' ],
 	shippingClasses?: ProductShippingClass[]
@@ -87,19 +69,12 @@ function extractDefaultShippingClassFromProduct(
 	}
 }
 
-export function Edit( {
-	attributes,
-}: BlockEditProps< ShippingFeeBlockAttributes > ) {
-	const { title } = attributes;
+export function Edit( {}: BlockEditProps< ShippingClassBlockAttributes > ) {
 	const [ showShippingClassModal, setShowShippingClassModal ] =
 		useState( false );
 
 	const blockProps = useBlockProps();
 
-	const [ option, setOption ] = useState< string >(
-		FREE_SHIPPING_OPTION_VALUE
-	);
-
 	const { createProductShippingClass, invalidateResolution } = useDispatch(
 		EXPERIMENTAL_PRODUCT_SHIPPING_CLASSES_STORE_NAME
 	);
@@ -149,114 +124,71 @@ export function Edit( {
 		};
 	}, [] );
 
-	const shippingClassControlId = useInstanceId( BaseControl ) as string;
-
-	const shippingClassValidationError = useValidation(
-		'product/shipping_class',
-		function shippingClassValidator() {
-			if ( option === FOLLOW_CLASS_OPTION_VALUE && ! shippingClass ) {
-				return __( 'The shipping class is required.', 'woocommerce' );
-			}
-		}
-	);
-
-	function handleOptionChange( value: string ) {
-		setOption( value );
-
-		if ( value === FOLLOW_CLASS_OPTION_VALUE ) {
-			const [ firstShippingClass ] = shippingClasses;
-			setShippingClass( firstShippingClass?.slug ?? '' );
-		} else {
-			setShippingClass( '' );
-		}
-	}
-
-	useEffect( () => {
-		if ( shippingClass ) {
-			setOption( FOLLOW_CLASS_OPTION_VALUE );
-		}
-	}, [ shippingClass ] );
+	const shippingClassControlId = useInstanceId(
+		BaseControl,
+		'wp-block-woocommerce-product-shipping-class-field'
+	) as string;
 
 	return (
 		<div { ...blockProps }>
 			<div className="wp-block-columns">
 				<div className="wp-block-column">
-					<RadioField
-						title={ title }
-						selected={ option }
-						options={ options }
-						onChange={ handleOptionChange }
+					<SelectControl
+						id={ shippingClassControlId }
+						name="shipping_class"
+						value={ shippingClass }
+						onChange={ ( value: string ) => {
+							if (
+								value === ADD_NEW_SHIPPING_CLASS_OPTION_VALUE
+							) {
+								setShowShippingClassModal( true );
+								return;
+							}
+							setShippingClass( value );
+						} }
+						label={ __( 'Shipping class', 'woocommerce' ) }
+						options={ [
+							...DEFAULT_SHIPPING_CLASS_OPTIONS,
+							...mapShippingClassToSelectOption(
+								shippingClasses ?? []
+							),
+						] }
+						help={ createInterpolateElement(
+							__(
+								'Manage shipping classes and rates in <Link>global settings</Link>.',
+								'woocommerce'
+							),
+							{
+								Link: (
+									<Link
+										href={ getNewPath(
+											{
+												tab: 'shipping',
+												section: 'classes',
+											},
+											'',
+											{},
+											'wc-settings'
+										) }
+										target="_blank"
+										type="external"
+										onClick={ () => {
+											recordEvent(
+												'product_shipping_global_settings_link_click'
+											);
+										} }
+									>
+										<Fragment />
+									</Link>
+								),
+							}
+						) }
 					/>
 				</div>
+
+				<div className="wp-block-column"></div>
 			</div>
 
-			{ option === FOLLOW_CLASS_OPTION_VALUE && (
-				<div className="wp-block-columns">
-					<div
-						className={ classNames( 'wp-block-column', {
-							'has-error': shippingClassValidationError,
-						} ) }
-					>
-						<SelectControl
-							id={ shippingClassControlId }
-							name="shipping_class"
-							value={ shippingClass }
-							onChange={ ( value: string ) => {
-								if (
-									value ===
-									ADD_NEW_SHIPPING_CLASS_OPTION_VALUE
-								) {
-									setShowShippingClassModal( true );
-									return;
-								}
-								setShippingClass( value );
-							} }
-							label={ __( 'Shipping class', 'woocommerce' ) }
-							options={ [
-								...DEFAULT_SHIPPING_CLASS_OPTIONS,
-								...mapShippingClassToSelectOption(
-									shippingClasses ?? []
-								),
-							] }
-							help={
-								shippingClassValidationError ||
-								createInterpolateElement(
-									__(
-										'Manage shipping classes and rates in <Link>global settings</Link>.',
-										'woocommerce'
-									),
-									{
-										Link: (
-											<Link
-												href={ getNewPath(
-													{
-														tab: 'shipping',
-														section: 'classes',
-													},
-													'',
-													{},
-													'wc-settings'
-												) }
-												target="_blank"
-												type="external"
-												onClick={ () => {
-													recordEvent(
-														'product_shipping_global_settings_link_click'
-													);
-												} }
-											>
-												<Fragment />
-											</Link>
-										),
-									}
-								)
-							}
-						/>
-					</div>
-
-					<div className="wp-block-column"></div>
-				</div>
-			) }
 			{ showShippingClassModal && (
 				<AddNewShippingClassModal
 					shippingClass={ extractDefaultShippingClassFromProduct(

packages/js/product-editor/src/blocks/shipping-class/index.ts

@@ -10,15 +10,15 @@ import { BlockConfiguration } from '@wordpress/blocks';
 import { initBlock } from '../../utils/init-blocks';
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { ShippingFeeBlockAttributes } from './types';
+import { ShippingClassBlockAttributes } from './types';
 
 const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< ShippingFeeBlockAttributes >;
+	blockConfiguration as BlockConfiguration< ShippingClassBlockAttributes >;
 
 export { metadata, name };
 
 export const settings: Partial<
-	BlockConfiguration< ShippingFeeBlockAttributes >
+	BlockConfiguration< ShippingClassBlockAttributes >
 > = {
 	example: {},
 	edit: Edit,

packages/js/product-editor/src/blocks/shipping-class/types.ts

@@ -3,6 +3,6 @@
  */
 import { BlockAttributes } from '@wordpress/blocks';
 
-export interface ShippingFeeBlockAttributes extends BlockAttributes {
+export interface ShippingClassBlockAttributes extends BlockAttributes {
 	title: string;
 }

plugins/woocommerce/changelog/add-38044

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Update shipping class block to match new designs#38044

plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php

@@ -35,8 +35,8 @@ class BlockRegistry {
 		'woocommerce/product-sale-price-field',
 		'woocommerce/product-schedule-sale-fields',
 		'woocommerce/product-section',
+		'woocommerce/product-shipping-class-field',
 		'woocommerce/product-shipping-dimensions-fields',
-		'woocommerce/product-shipping-fee-fields',
 		'woocommerce/product-summary-field',
 		'woocommerce/product-tab',
 		'woocommerce/product-inventory-quantity-field',

plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php

@@ -664,10 +664,7 @@ class Init {
 							),
 							array(
 								array(
-									'woocommerce/product-shipping-fee-fields',
-									array(
-										'title' => __( 'Shipping fee', 'woocommerce' ),
-									),
+									'woocommerce/product-shipping-class-field',
 								),
 								array(
 									'woocommerce/product-shipping-dimensions-fields',