Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update shipping class block to match new designs #38301

Merged
merged 3 commits into from May 15, 2023
Merged

Update shipping class block to match new designs #38301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e125da
Change the section title from Shipping fee to Shipping class
mdperez86 May 15, 2023
f9f63f5
Replace the radio buttons with a regular dropdown
mdperez86 May 15, 2023
41cc294
Add changelog files
mdperez86 May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/js/product-editor/changelog/add-38044
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Update shipping class block to match new designs#38044
2 changes: 1 addition & 1 deletion packages/js/product-editor/src/blocks/index.ts
View file
Open in desktop
Expand Up @@ -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';
Expand Down
8 changes: 4 additions & 4 deletions ...editor/src/blocks/shipping-fee/block.json → ...itor/src/blocks/shipping-class/block.json
View file
Open in desktop
@@ -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": {
Expand Down
184 changes: 58 additions & 126 deletions ...t-editor/src/blocks/shipping-fee/edit.tsx → ...editor/src/blocks/shipping-class/edit.tsx
View file
Open in desktop
Expand Up @@ -18,29 +18,22 @@ 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';

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' ) },
{
Expand All @@ -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[]
Expand All @@ -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
);
Expand Down Expand Up @@ -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>

{ 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>

<div className="wp-block-column"></div>
</div>
) }
{ showShippingClassModal && (
<AddNewShippingClassModal
shippingClass={ extractDefaultShippingClassFromProduct(
Expand Down
6 changes: 3 additions & 3 deletions ...t-editor/src/blocks/shipping-fee/index.ts → ...editor/src/blocks/shipping-class/index.ts
View file
Open in desktop
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion ...t-editor/src/blocks/shipping-fee/types.ts → ...editor/src/blocks/shipping-class/types.ts
View file
Open in desktop
Expand Up @@ -3,6 +3,6 @@
*/
import { BlockAttributes } from '@wordpress/blocks';

export interface ShippingFeeBlockAttributes extends BlockAttributes {
export interface ShippingClassBlockAttributes extends BlockAttributes {
title: string;
}
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/add-38044
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Update shipping class block to match new designs#38044
2 changes: 1 addition & 1 deletion plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php
View file
Open in desktop
Expand Up @@ -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',
Expand Down
5 changes: 1 addition & 4 deletions plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
View file
Open in desktop
Expand Up @@ -664,10 +664,7 @@ public function add_product_template( $args ) {
),
array(
array(
'woocommerce/product-shipping-fee-fields',
array(
'title' => __( 'Shipping fee', 'woocommerce' ),
),
'woocommerce/product-shipping-class-field',
),
array(
'woocommerce/product-shipping-dimensions-fields',
Expand Down