diff --git a/packages/js/product-editor/changelog/add-38044 b/packages/js/product-editor/changelog/add-38044 new file mode 100644 index 00000000000..25b146641e5 --- /dev/null +++ b/packages/js/product-editor/changelog/add-38044 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Update shipping class block to match new designs#38044 diff --git a/packages/js/product-editor/src/blocks/index.ts b/packages/js/product-editor/src/blocks/index.ts index 97029b5a6cf..78db019ef1d 100644 --- a/packages/js/product-editor/src/blocks/index.ts +++ b/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'; diff --git a/packages/js/product-editor/src/blocks/shipping-fee/block.json b/packages/js/product-editor/src/blocks/shipping-class/block.json similarity index 68% rename from packages/js/product-editor/src/blocks/shipping-fee/block.json rename to packages/js/product-editor/src/blocks/shipping-class/block.json index 984cacd6165..124054818db 100644 --- a/packages/js/product-editor/src/blocks/shipping-fee/block.json +++ b/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": { diff --git a/packages/js/product-editor/src/blocks/shipping-fee/edit.tsx b/packages/js/product-editor/src/blocks/shipping-class/edit.tsx similarity index 55% rename from packages/js/product-editor/src/blocks/shipping-fee/edit.tsx rename to packages/js/product-editor/src/blocks/shipping-class/edit.tsx index 377dce3f18b..85061e49b52 100644 --- a/packages/js/product-editor/src/blocks/shipping-fee/edit.tsx +++ b/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 (
- { + 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 global settings.', + 'woocommerce' + ), + { + Link: ( + { + recordEvent( + 'product_shipping_global_settings_link_click' + ); + } } + > + + + ), + } + ) } />
+ +
- { option === FOLLOW_CLASS_OPTION_VALUE && ( -
-
- { - 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 global settings.', - 'woocommerce' - ), - { - Link: ( - { - recordEvent( - 'product_shipping_global_settings_link_click' - ); - } } - > - - - ), - } - ) - } - /> -
- -
-
- ) } { showShippingClassModal && ( ; + blockConfiguration as BlockConfiguration< ShippingClassBlockAttributes >; export { metadata, name }; export const settings: Partial< - BlockConfiguration< ShippingFeeBlockAttributes > + BlockConfiguration< ShippingClassBlockAttributes > > = { example: {}, edit: Edit, diff --git a/packages/js/product-editor/src/blocks/shipping-fee/types.ts b/packages/js/product-editor/src/blocks/shipping-class/types.ts similarity index 59% rename from packages/js/product-editor/src/blocks/shipping-fee/types.ts rename to packages/js/product-editor/src/blocks/shipping-class/types.ts index 90877619db6..4e2daa9c8fc 100644 --- a/packages/js/product-editor/src/blocks/shipping-fee/types.ts +++ b/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; } diff --git a/plugins/woocommerce/changelog/add-38044 b/plugins/woocommerce/changelog/add-38044 new file mode 100644 index 00000000000..25b146641e5 --- /dev/null +++ b/plugins/woocommerce/changelog/add-38044 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Update shipping class block to match new designs#38044 diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php index 3baf0db8e51..6967b468545 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php +++ b/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', diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php index d10cfa695df..1b6d91d5c58 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php +++ b/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',