From 54476cb7f30f3e3e300e0e1c320ca161fb030df9 Mon Sep 17 00:00:00 2001 From: Maikel Perez Date: Fri, 22 Mar 2024 13:52:42 -0300 Subject: [PATCH] =?UTF-8?q?After=20Variations=20are=20created,=20disable?= =?UTF-8?q?=20the=20fields=20that=20don=E2=80=99t=20do=20anything=20(#4583?= =?UTF-8?q?8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Disable woocommerce/product-regular-price-field when product type is variable * Disable woocommerce/product-sale-price-field when product type is variable * Disable woocommerce/product-sku-field when product type is variable * Disable Track stock quantity toggle when product type is variable * Disable woocommerce/product-radio-field when product type is variable * Disable woocommerce/product-shipping-class-field when product type is variable * Disable woocommerce/product-shipping-dimensions-fields when product type is variable * Add changelog files * Fix php linter --- .../js/product-editor/changelog/add-44761 | 4 + .../src/blocks/generic/radio/README.md | 22 +++-- .../src/blocks/generic/radio/block.json | 4 + .../src/blocks/generic/radio/edit.tsx | 3 +- .../src/blocks/generic/radio/types.ts | 1 + .../product-fields/inventory-sku/block.json | 4 + .../product-fields/inventory-sku/edit.tsx | 1 + .../product-fields/regular-price/block.json | 4 + .../product-fields/regular-price/edit.tsx | 3 +- .../product-fields/regular-price/types.ts | 1 + .../product-fields/sale-price/block.json | 4 + .../blocks/product-fields/sale-price/edit.tsx | 3 +- .../blocks/product-fields/sale-price/types.ts | 1 + .../product-fields/shipping-class/block.json | 4 + .../product-fields/shipping-class/edit.tsx | 2 +- .../product-fields/shipping-class/types.ts | 1 + .../shipping-dimensions/block.json | 4 + .../shipping-dimensions/edit.tsx | 4 +- .../shipping-dimensions/types.ts | 1 + .../src/components/radio-field/types.ts | 1 + plugins/woocommerce/changelog/add-44761 | 4 + .../SimpleProductTemplate.php | 97 +++++++++++++------ .../product-inventory-block-editor.spec.js | 2 +- 23 files changed, 129 insertions(+), 46 deletions(-) create mode 100644 packages/js/product-editor/changelog/add-44761 create mode 100644 plugins/woocommerce/changelog/add-44761 diff --git a/packages/js/product-editor/changelog/add-44761 b/packages/js/product-editor/changelog/add-44761 new file mode 100644 index 00000000000..6b49f9a3c0c --- /dev/null +++ b/packages/js/product-editor/changelog/add-44761 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Disable the fields that are not required in variable products because they are set in each variation diff --git a/packages/js/product-editor/src/blocks/generic/radio/README.md b/packages/js/product-editor/src/blocks/generic/radio/README.md index 4bb31e8c26e..6b91be995b0 100644 --- a/packages/js/product-editor/src/blocks/generic/radio/README.md +++ b/packages/js/product-editor/src/blocks/generic/radio/README.md @@ -8,24 +8,28 @@ Radio button field for the product editor. ### title -- **Type:** `String` -- **Required:** `Yes` +- **Type:** `String` +- **Required:** `Yes` ### description -- **Type:** `String` -- **Required:** `No` - +- **Type:** `String` +- **Required:** `No` ### property -- **Type:** `String` -- **Required:** `Yes` +- **Type:** `String` +- **Required:** `Yes` ### options -- **Type:** `Array` -- **Required:** `Yes` +- **Type:** `Array` +- **Required:** `Yes` + +### disabled + +- **Type:** `Boolean` +- **Required:** `No` ## Usage diff --git a/packages/js/product-editor/src/blocks/generic/radio/block.json b/packages/js/product-editor/src/blocks/generic/radio/block.json index 76030c8da35..d480795cf9e 100644 --- a/packages/js/product-editor/src/blocks/generic/radio/block.json +++ b/packages/js/product-editor/src/blocks/generic/radio/block.json @@ -24,6 +24,10 @@ }, "default": [], "__experimentalRole": "content" + }, + "disabled": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/generic/radio/edit.tsx b/packages/js/product-editor/src/blocks/generic/radio/edit.tsx index 5bba087cd35..759ba2e2e81 100644 --- a/packages/js/product-editor/src/blocks/generic/radio/edit.tsx +++ b/packages/js/product-editor/src/blocks/generic/radio/edit.tsx @@ -17,7 +17,7 @@ export function Edit( { context: { postType }, }: ProductEditorBlockEditProps< RadioBlockAttributes > ) { const blockProps = useWooBlockProps( attributes ); - const { description, options, property, title } = attributes; + const { description, options, property, title, disabled } = attributes; const [ value, setValue ] = useProductEntityProp< string >( property, { postType, fallbackValue: '', @@ -31,6 +31,7 @@ export function Edit( { selected={ value } options={ options } onChange={ ( selected ) => setValue( selected || '' ) } + disabled={ disabled } /> ); diff --git a/packages/js/product-editor/src/blocks/generic/radio/types.ts b/packages/js/product-editor/src/blocks/generic/radio/types.ts index 6833ed8f9c8..b984f0b5d9a 100644 --- a/packages/js/product-editor/src/blocks/generic/radio/types.ts +++ b/packages/js/product-editor/src/blocks/generic/radio/types.ts @@ -8,4 +8,5 @@ export interface RadioBlockAttributes extends BlockAttributes { description: string; property: string; options: []; + disabled?: boolean; } diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json index 45b120192a7..5608abb15a1 100644 --- a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json +++ b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json @@ -11,6 +11,10 @@ "name": { "type": "string", "__experimentalRole": "content" + }, + "disabled": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx index 32aba6971bb..d694a60517c 100644 --- a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx @@ -57,6 +57,7 @@ export function Edit( { name={ 'woocommerce-product-sku' } onChange={ setSku } value={ sku || '' } + disabled={ attributes.disabled } /> diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json b/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json index fffa0e8ca58..ae8a00100d8 100644 --- a/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json +++ b/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json @@ -21,6 +21,10 @@ }, "tooltip": { "type": "string" + }, + "disabled": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx index 3b9067e4a11..5353a4160ef 100644 --- a/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx @@ -30,7 +30,7 @@ export function Edit( { context, }: ProductEditorBlockEditProps< SalePriceBlockAttributes > ) { const blockProps = useWooBlockProps( attributes ); - const { label, help, isRequired, tooltip } = attributes; + const { label, help, isRequired, tooltip, disabled } = attributes; const [ regularPrice, setRegularPrice ] = useEntityProp< string >( 'postType', context.postType || 'product', @@ -120,6 +120,7 @@ export function Edit( { label ) } + disabled={ disabled } onBlur={ validateRegularPrice } /> diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts b/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts index f8d3bdc2a6e..32b3c598730 100644 --- a/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts +++ b/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts @@ -7,4 +7,5 @@ export interface SalePriceBlockAttributes extends BlockAttributes { label: string; help?: string; isRequired?: boolean; + disabled?: boolean; } diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json b/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json index 5dfa1a7f5f5..b68ecb4522a 100644 --- a/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json +++ b/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json @@ -17,6 +17,10 @@ }, "tooltip": { "type": "string" + }, + "disabled": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx index 605732f593d..58cab6e232c 100644 --- a/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx @@ -29,7 +29,7 @@ export function Edit( { context, }: ProductEditorBlockEditProps< SalePriceBlockAttributes > ) { const blockProps = useWooBlockProps( attributes ); - const { label, help, tooltip } = attributes; + const { label, help, tooltip, disabled } = attributes; const [ regularPrice ] = useEntityProp< string >( 'postType', context.postType || 'product', @@ -102,6 +102,7 @@ export function Edit( { label ) } + disabled={ disabled } onBlur={ validateSalePrice } /> diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts b/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts index 99ceaa60e80..391724f162f 100644 --- a/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts +++ b/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts @@ -6,4 +6,5 @@ import { BlockAttributes } from '@wordpress/blocks'; export interface SalePriceBlockAttributes extends BlockAttributes { label: string; help?: string; + disabled?: boolean; } diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json b/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json index 09a39cee5e0..a8677d06e88 100644 --- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json +++ b/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json @@ -11,6 +11,10 @@ "title": { "type": "string", "__experimentalRole": "content" + }, + "disabled": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx index eaaa5b409c2..d35bdd56d5b 100644 --- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx @@ -161,7 +161,7 @@ export function Edit( { shippingClasses ?? [] ), ] } - disabled={ virtual } + disabled={ attributes.disabled || virtual } help={ createInterpolateElement( __( 'Manage shipping classes and rates in global settings.', diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts b/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts index 4e2daa9c8fc..324c034e729 100644 --- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts +++ b/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts @@ -5,4 +5,5 @@ import { BlockAttributes } from '@wordpress/blocks'; export interface ShippingClassBlockAttributes extends BlockAttributes { title: string; + disabled?: boolean; } diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json index 84a8bea926a..d012cf18546 100644 --- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json +++ b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json @@ -11,6 +11,10 @@ "__contentEditable": { "type": "string", "__experimentalRole": "content" + }, + "disabled": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx index a5c245e5440..d7ff6564e6b 100644 --- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx @@ -90,7 +90,7 @@ export function Edit( { onFocus: () => setHighlightSide( side ), onBlur: () => setHighlightSide( undefined ), suffix: dimensionUnit, - disabled: virtual, + disabled: attributes.disabled || virtual, }; } @@ -185,7 +185,7 @@ export function Edit( { suffix: weightUnit, ref: weightRef, onBlur: validateWeight, - disabled: virtual, + disabled: attributes.disabled || virtual, }; return ( diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts index 0c642345e46..a919208f079 100644 --- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts +++ b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts @@ -5,4 +5,5 @@ import { BlockAttributes } from '@wordpress/blocks'; export interface ShippingDimensionsBlockAttributes extends BlockAttributes { __contentEditable: string; + disabled?: boolean; } diff --git a/packages/js/product-editor/src/components/radio-field/types.ts b/packages/js/product-editor/src/components/radio-field/types.ts index f652960843b..38dcad84320 100644 --- a/packages/js/product-editor/src/components/radio-field/types.ts +++ b/packages/js/product-editor/src/components/radio-field/types.ts @@ -6,4 +6,5 @@ import { RadioControl } from '@wordpress/components'; export type RadioFieldProps< T > = Omit< RadioControl.Props< T >, 'label' > & { title: string; description?: string; + disabled?: boolean; }; diff --git a/plugins/woocommerce/changelog/add-44761 b/plugins/woocommerce/changelog/add-44761 new file mode 100644 index 00000000000..6b49f9a3c0c --- /dev/null +++ b/plugins/woocommerce/changelog/add-44761 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Disable the fields that are not required in variable products because they are set in each variation diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index 134732e8a8b..07de77e433e 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -610,10 +610,10 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ ); $pricing_column_1->add_block( array( - 'id' => 'product-pricing-regular-price', - 'blockName' => 'woocommerce/product-regular-price-field', - 'order' => 10, - 'attributes' => array( + 'id' => 'product-pricing-regular-price', + 'blockName' => 'woocommerce/product-regular-price-field', + 'order' => 10, + 'attributes' => array( 'name' => 'regular_price', 'label' => __( 'List price', 'woocommerce' ), 'help' => $is_calc_taxes_enabled ? null : sprintf( @@ -623,6 +623,11 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ '' ), ), + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); $pricing_column_2 = $pricing_columns->add_block( @@ -637,12 +642,17 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ ); $pricing_column_2->add_block( array( - 'id' => 'product-pricing-sale-price', - 'blockName' => 'woocommerce/product-sale-price-field', - 'order' => 10, - 'attributes' => array( + 'id' => 'product-pricing-sale-price', + 'blockName' => 'woocommerce/product-sale-price-field', + 'order' => 10, + 'attributes' => array( 'label' => __( 'Sale price', 'woocommerce' ), ), + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); $product_pricing_section->add_block( @@ -788,32 +798,44 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ ); $product_inventory_inner_section->add_block( array( - 'id' => 'product-sku-field', - 'blockName' => 'woocommerce/product-sku-field', - 'order' => 10, + 'id' => 'product-sku-field', + 'blockName' => 'woocommerce/product-sku-field', + 'order' => 10, + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); + + $manage_stock = 'yes' === get_option( 'woocommerce_manage_stock' ); $product_inventory_inner_section->add_block( array( - 'id' => 'product-track-stock', - 'blockName' => 'woocommerce/product-toggle-field', - 'order' => 20, - 'attributes' => array( + 'id' => 'product-track-stock', + 'blockName' => 'woocommerce/product-toggle-field', + 'order' => 20, + 'attributes' => array( 'label' => __( 'Track inventory', 'woocommerce' ), 'property' => 'manage_stock', - 'disabled' => 'yes' !== get_option( 'woocommerce_manage_stock' ), - 'disabledCopy' => sprintf( + 'disabled' => ! $manage_stock, + 'disabledCopy' => ! $manage_stock ? sprintf( /* translators: %1$s: Learn more link opening tag. %2$s: Learn more link closing tag.*/ __( 'Per your %1$sstore settings%2$s, inventory management is disabled.', 'woocommerce' ), '', '' - ), + ) : null, ), - 'hideConditions' => Features::is_enabled( 'product-external-affiliate' ) || Features::is_enabled( 'product-grouped' ) ? array( + 'hideConditions' => Features::is_enabled( 'product-external-affiliate' ) || Features::is_enabled( 'product-grouped' ) ? array( array( 'expression' => 'editedProduct.type === "external" || editedProduct.type === "grouped"', ), ) : null, + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); $product_inventory_quantity_hide_conditions = array( @@ -846,10 +868,10 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ } $product_inventory_section->add_block( array( - 'id' => 'product-stock-status', - 'blockName' => 'woocommerce/product-radio-field', - 'order' => 10, - 'attributes' => array( + 'id' => 'product-stock-status', + 'blockName' => 'woocommerce/product-radio-field', + 'order' => 10, + 'attributes' => array( 'title' => __( 'Stock status', 'woocommerce' ), 'property' => 'stock_status', 'options' => array( @@ -867,7 +889,12 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ ), ), ), - 'hideConditions' => $product_stock_status_hide_conditions, + 'hideConditions' => $product_stock_status_hide_conditions, + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); @@ -1042,16 +1069,26 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ ); $product_fee_and_dimensions_section->add_block( array( - 'id' => 'product-shipping-class', - 'blockName' => 'woocommerce/product-shipping-class-field', - 'order' => 10, + 'id' => 'product-shipping-class', + 'blockName' => 'woocommerce/product-shipping-class-field', + 'order' => 10, + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); $product_fee_and_dimensions_section->add_block( array( - 'id' => 'product-shipping-dimensions', - 'blockName' => 'woocommerce/product-shipping-dimensions-fields', - 'order' => 20, + 'id' => 'product-shipping-dimensions', + 'blockName' => 'woocommerce/product-shipping-dimensions-fields', + 'order' => 20, + 'disableConditions' => array( + array( + 'expression' => 'editedProduct.type === "variable"', + ), + ), ) ); } diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-inventory-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-inventory-block-editor.spec.js index 9a29f420d6d..d6fb7030841 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-inventory-block-editor.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-inventory-block-editor.spec.js @@ -91,7 +91,7 @@ test( 'can update stock status', async ( { page, product } ) => { test( 'can track stock quantity', async ( { page, product } ) => { await test.step( 'enable track stock quantity', async () => { - await page.getByLabel( 'Track stock quantity for this' ).check(); + await page.getByLabel( 'Track inventory' ).check(); // await closeTourModal( { page, timeout: 2000 } ); await page.getByRole( 'button', { name: 'Advanced' } ).click(); await page.getByLabel( "Don't allow purchases" ).check();