Product Shipping: New class should automatically create a slug (#40847)

* Remove empty values from the shipping class request so slug can be generated server side

* Add changelog file

packages/js/product-editor/changelog/fix-40844

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Remove empty values from the shipping class request so slug can be generated server side

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

@@ -86,7 +86,7 @@ export function Edit( {
 
 	const [ categories ] = useEntityProp< PartialProduct[ 'categories' ] >(
 		'postType',
-		'product',
+		context.postType,
 		'categories'
 	);
 	const [ shippingClass, setShippingClass ] = useEntityProp< string >(

packages/js/product-editor/src/components/add-new-shipping-class-modal/add-new-shipping-class-modal.tsx

@@ -111,6 +111,21 @@ export function AddNewShippingClassModal( {
 	onAdd,
 	onCancel,
 }: AddNewShippingClassModalProps ) {
+	function handleSubmit( values: Partial< ProductShippingClass > ) {
+		return onAdd(
+			Object.entries( values ).reduce( function removeEmptyValue(
+				current,
+				[ name, value ]
+			) {
+				return {
+					...current,
+					[ name ]: value === '' ? undefined : value,
+				};
+			},
+			{} )
+		);
+	}
+
 	return (
 		<Modal
 			title={ __( 'New shipping class', 'woocommerce' ) }
@@ -121,7 +136,7 @@ export function AddNewShippingClassModal( {
 				initialValues={ shippingClass ?? INITIAL_VALUES }
 				validate={ validateForm }
 				errors={ {} }
-				onSubmit={ onAdd }
+				onSubmit={ handleSubmit }
 			>
 				{ ( childrenProps: {
 					handleSubmit: () => Promise< ProductShippingClass >;