From 9ad4615527a7f9d36f579f1b119da107cf4c0d42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Mon, 20 Nov 2023 14:03:56 -0300 Subject: [PATCH 1/7] add help for Product and Variation block instances --- .../ProductTemplates/ProductVariationTemplate.php | 1 + .../ProductTemplates/SimpleProductTemplate.php | 1 + 2 files changed, 2 insertions(+) diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php index e75992a52fb..19b9e80eac4 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php @@ -493,6 +493,7 @@ class ProductVariationTemplate extends AbstractProductFormTemplate implements Pr 'checkedValue' => false, 'uncheckedValue' => true, 'label' => __( 'This variation requires shipping or pickup', 'woocommerce' ), + 'help' => __( 'This variation will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. Read more about virtual products.', 'woocommerce' ), ), ) ); diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index 75efd725faf..aa02925e83e 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -877,6 +877,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ 'checkedValue' => false, 'uncheckedValue' => true, 'label' => __( 'This product requires shipping or pickup', 'woocommerce' ), + 'help' => __( 'This product will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. Read more about virtual products.', 'woocommerce' ), ), ) ); From b3da1853d45e9c3ef90662745d4331b00696ce54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Mon, 20 Nov 2023 14:05:22 -0300 Subject: [PATCH 2/7] add help attr to toggle component --- .../js/product-editor/src/blocks/generic/toggle/block.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/js/product-editor/src/blocks/generic/toggle/block.json b/packages/js/product-editor/src/blocks/generic/toggle/block.json index 7011b23bf67..0a38c4e4f2c 100644 --- a/packages/js/product-editor/src/blocks/generic/toggle/block.json +++ b/packages/js/product-editor/src/blocks/generic/toggle/block.json @@ -12,6 +12,9 @@ "type": "string", "__experimentalRole": "content" }, + "help": { + "type": "string" + }, "property": { "type": "string" }, From 69e2900e26f56464529fe5fb541791a07580a382 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Mon, 20 Nov 2023 14:06:06 -0300 Subject: [PATCH 3/7] render help component when defined --- .../src/blocks/generic/toggle/edit.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx index 4af48f29dcf..4f64cf16950 100644 --- a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx +++ b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx @@ -64,6 +64,18 @@ export function Edit( { } } + /** + * Create a Help component in case + * the help attribute is set. + */ + const help = attributes?.help + ? sanitizeHTML( attributes.help )?.__html + : null; + + const helpComponent = createElement( 'div', { + dangerouslySetInnerHTML: { __html: help }, + } ); + return (
{ disabled && (

Date: Mon, 20 Nov 2023 14:08:50 -0300 Subject: [PATCH 4/7] changelog --- .../changelog/update-product-editor-add-variation-pickup-help | 4 ++++ .../changelog/update-product-editor-add-variation-pickup-help | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 packages/js/product-editor/changelog/update-product-editor-add-variation-pickup-help create mode 100644 plugins/woocommerce/changelog/update-product-editor-add-variation-pickup-help diff --git a/packages/js/product-editor/changelog/update-product-editor-add-variation-pickup-help b/packages/js/product-editor/changelog/update-product-editor-add-variation-pickup-help new file mode 100644 index 00000000000..ca49108a262 --- /dev/null +++ b/packages/js/product-editor/changelog/update-product-editor-add-variation-pickup-help @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak + +[Product blocks editor]: Add help text to Shipping toggle diff --git a/plugins/woocommerce/changelog/update-product-editor-add-variation-pickup-help b/plugins/woocommerce/changelog/update-product-editor-add-variation-pickup-help new file mode 100644 index 00000000000..ca49108a262 --- /dev/null +++ b/plugins/woocommerce/changelog/update-product-editor-add-variation-pickup-help @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak + +[Product blocks editor]: Add help text to Shipping toggle From 56f59ff9696862142aa5760fe68b6e717d42733c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Mon, 20 Nov 2023 15:35:55 -0300 Subject: [PATCH 5/7] hide help when it's disabled --- packages/js/product-editor/src/blocks/generic/toggle/edit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx index 4f64cf16950..bf0b0f8b566 100644 --- a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx +++ b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx @@ -83,7 +83,7 @@ export function Edit( { checked={ isChecked() } disabled={ disabled } onChange={ handleChange } - help={ helpComponent } + help={ isChecked() ? null : helpComponent } /> { disabled && (

Date: Tue, 21 Nov 2023 08:57:41 -0300 Subject: [PATCH 6/7] introduce checkedHelp and uncheckedHelp attributes --- .../src/blocks/generic/toggle/block.json | 6 +++ .../src/blocks/generic/toggle/edit.tsx | 48 ++++++++++++++----- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/packages/js/product-editor/src/blocks/generic/toggle/block.json b/packages/js/product-editor/src/blocks/generic/toggle/block.json index 0a38c4e4f2c..5b41cb951c8 100644 --- a/packages/js/product-editor/src/blocks/generic/toggle/block.json +++ b/packages/js/product-editor/src/blocks/generic/toggle/block.json @@ -15,6 +15,12 @@ "help": { "type": "string" }, + "checkedHelp": { + "type": "string" + }, + "uncheckedHelp": { + "type": "string" + }, "property": { "type": "string" }, diff --git a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx index bf0b0f8b566..507aca8ea11 100644 --- a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx +++ b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx @@ -5,6 +5,7 @@ import { createElement } from '@wordpress/element'; import { ToggleControl } from '@wordpress/components'; import { useWooBlockProps } from '@woocommerce/block-templates'; import { recordEvent } from '@woocommerce/tracks'; +import { ReactNode } from 'react'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore No types for this exist yet. // eslint-disable-next-line @woocommerce/dependency-group @@ -64,17 +65,42 @@ export function Edit( { } } - /** - * Create a Help component in case - * the help attribute is set. - */ - const help = attributes?.help - ? sanitizeHTML( attributes.help )?.__html - : null; + let help: ReactNode = null; - const helpComponent = createElement( 'div', { - dangerouslySetInnerHTML: { __html: help }, - } ); + // Default help text. + if ( attributes?.help ) { + help = createElement( 'div', { + dangerouslySetInnerHTML: { + __html: sanitizeHTML( attributes.help )?.__html, + }, + } ); + } + + /* + * Redefine the help text when: + * - The checked help text is defined + * - The toggle is checked + */ + if ( attributes?.checkedHelp && isChecked() ) { + help = createElement( 'div', { + dangerouslySetInnerHTML: { + __html: sanitizeHTML( attributes.checkedHelp )?.__html, + }, + } ); + } + + /* + * Redefine the help text when: + * - The unchecked help text is defined + * - The toggle is unchecked + */ + if ( attributes?.uncheckedHelp && ! isChecked() ) { + help = createElement( 'div', { + dangerouslySetInnerHTML: { + __html: sanitizeHTML( attributes.uncheckedHelp )?.__html, + }, + } ); + } return (

@@ -83,7 +109,7 @@ export function Edit( { checked={ isChecked() } disabled={ disabled } onChange={ handleChange } - help={ isChecked() ? null : helpComponent } + help={ help } /> { disabled && (

Date: Tue, 21 Nov 2023 08:58:10 -0300 Subject: [PATCH 7/7] use uncheckedHelp to set the toggle help --- .../ProductTemplates/ProductVariationTemplate.php | 2 +- .../ProductTemplates/SimpleProductTemplate.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php index 19b9e80eac4..1deea44a4fe 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php @@ -493,7 +493,7 @@ class ProductVariationTemplate extends AbstractProductFormTemplate implements Pr 'checkedValue' => false, 'uncheckedValue' => true, 'label' => __( 'This variation requires shipping or pickup', 'woocommerce' ), - 'help' => __( 'This variation will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. Read more about virtual products.', 'woocommerce' ), + 'uncheckedHelp' => __( 'This variation will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. Read more about virtual products.', 'woocommerce' ), ), ) ); diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index aa02925e83e..9276b166dd7 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -877,7 +877,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ 'checkedValue' => false, 'uncheckedValue' => true, 'label' => __( 'This product requires shipping or pickup', 'woocommerce' ), - 'help' => __( 'This product will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. Read more about virtual products.', 'woocommerce' ), + 'uncheckedHelp' => __( 'This product will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. Read more about virtual products.', 'woocommerce' ), ), ) );