Product Block Editor: Map `SelectWithTextInput` and `DateTime` inputs to the custom product blocks #2178

eason9487 · 2023-12-07T09:33:40Z

Changes proposed in this Pull Request:

To be compatible with Product Block Editor, this PR makes the conversions for the last two attribute inputs:

Implement the custom blocks for the product select-with-text field and product date-time field.
Map SelectWithTextInput and DateTime inputs to the above custom product blocks.
Set the minimum required Woo version of AttributesBlock class to 8.4 as it's the minimum version that the __experimentalTextControl component is exported from @woocommerce/product-editor.

Screenshots:

📷 Field is converted from text block to select-with-text block

📷 Date-time block

Detailed test instructions:

📌 Prepare test environment

Please refer to the test preparation in PR 2151 with Woo 8.4.0.
- Currently, it can be tested with 8.4.0-rc.1
npm install
npm start

📌 Test the select-with-text block

Install WooCommerce Brands but don't activate it.
Go to edit a simple product, e.g. the Beanie with Logo imported from WC's sample products.
Switch to the Organization tab and find the Google Listings & Ads section.
The brand field should be shown in a text block.
Activate WooCommerce Brands and refresh the product editor page.
Check if the brand field is shown in a select-with-text block with three options:
1. "Default"
2. "From WooCommerce Brands"
3. "Enter a custom value"
Change the selected option to see if the UI works well.
After selecting the "Enter a custom value" option, a text field should be shown below the selection.
Operate the selection and text fields.
Click on the Update button at the top-right of the page.
Refresh the page or switch back to the classical product editor to see if the changed option or text is saved.

The GTIN and MPN will be converted to use the select-with-text block when Yoast WooCommerce SEO is installed and activated.

If want to also test this part without actually getting the extension, an alternative way is to locally make the following function return true;

google-listings-and-ads/src/Integration/YoastWooCommerceSeo.php

Lines 32 to 34 in abd3492

    
           public function is_active(): bool { 
        
           	return defined( 'WPSEO_WOO_VERSION' ); 
        
           }

📌 Test the date-time block

Go to Settings > General. Set the site's timezone to another one different from your machine's system time, which is also the local timezone of browsers.
Go to edit a simple product that has not yet set an availability date.
Switch to the Organization tab and find the Google Listings & Ads section.
Check if there is an Availability Date field shown in a date-time block.
Operate the date-time block to set a date.
Click on the Update button at the top-right of the page.
Refresh the page to see if the availability date is saved.
Switch back to the classical product editor to see if the values on the availability date field are the same.
Set the site's timezone to another or the same as your machine.
Refresh and check both classical and blockified product editors to see if the date values are shifted as per the delta of the two timezones.

Additional details:

TODOs will be cleaned up in a separate PR.

google-listings-and-ads/src/Admin/Input/Input.php

Lines 60 to 61 in abd3492

    
           public function __construct( string $type, string $block_name = '' ) { 
        
           	// TODO: Remove the default value of $block_name after all attribute inputs have specified a block name

google-listings-and-ads/src/Admin/Product/Attributes/AttributesBlock.php

Lines 194 to 197 in abd3492

    
           // TODO: Remove this check after all attribute inputs have specified a block name 
        
           if ( '' === $input->get_block_config()['blockName'] ) { 
        
           	continue; 
        
           }

Changelog entry

…roduct blocks.

…lect-with-text field.

codecov · 2023-12-07T09:36:51Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (5e1f98d) 60.8% compared to head (0fb9cf0) 60.9%.
Report is 2 commits behind head on feature/support-product-block-editor.

Additional details and impacted files

@@                           Coverage Diff                            @@
##             feature/support-product-block-editor   #2178     +/-   ##
========================================================================
+ Coverage                                    60.8%   60.9%   +0.1%     
- Complexity                                   4151    4153      +2     
========================================================================
  Files                                         453     453             
  Lines                                       17824   17843     +19     
========================================================================
+ Hits                                        10843   10865     +22     
+ Misses                                       6981    6978      -3

Flag	Coverage Δ
php-unit-tests	`60.9% <100.0%> (+0.1%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
src/Admin/Input/DateTime.php	`73.5% <100.0%> (ø)`
src/Admin/Input/SelectWithTextInput.php	`100.0% <100.0%> (ø)`
src/Admin/Product/Attributes/AttributesBlock.php	`94.2% <100.0%> (-0.7%)`	⬇️

... and 1 file with indirect coverage changes

puntope

Thanks @eason9487 for working on this. Overall looking very good.

I left some comments in the code and a warning in regards the functionallity.

puntope · 2023-12-15T19:49:44Z

js/src/blocks/README.md

+- In block.json, it needs to list `"postType"` in the `usesContext` array to ask for the current post type ('product' or 'product_variation') from the context provider.
+- Forwarding the `context.postType` to `useProductEntityProp` hook is required in order to be compatible with both simple and variation product block templates.
+
+#### Derived value for initialization


❓ Can we elaborate or reword this explanation? Maybe my lack of knowledge of the concepts but not sure if I understand what those "derived values" are. I assume is just the data itself?

In the React ecosystem, the derived value/state is commonly referred to the value calculated based on another value. I'm guessing that it probably comes from the wording in the React API getDerivedStateFromProps.

Added in 0965ef9.

puntope · 2023-12-15T19:55:49Z

js/src/blocks/index.js

+import DatetimeFieldEdit from './product-date-time-field/edit';
+import datetimeFieldMetadata from './product-date-time-field/block.json';


I guess it should be DateTimeFieldEdit and dateTimeFieldMetadata because there is a - between date and time in the folder name. Another option may be to call the folder product-datetime-field.

Thanks! Fixed in b94f33a.

puntope · 2023-12-15T19:58:34Z

js/src/blocks/product-date-time-field/block.json

+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "google-listings-and-ads/product-date-time-field",
+	"title": "Product datetime control",


💅 Minor: can we keep it consistent with the block name conventions you are using?

So in this case:

"Product datetime field."

I don't mind control or field, but I think is better to call them in one single way. WDYT?

Adjusted in 776ffb8.

puntope · 2023-12-15T20:07:33Z

js/src/blocks/product-date-time-field/edit.js

💅 WDYT of renaming value, setValue, setNextValue to dateTime, setDateTime, setNextDateTime

So it's less generic.

The use of value and setValue naming is to maintain consistency in the state and updater names that actually operate to the product data (wp-store) in each custom block.

puntope · 2023-12-15T20:30:19Z

js/src/blocks/product-date-time-field/edit.js

⚠️ I found some inconsistencies between both legacy and new editor:

In the legacy Editor you can set the date without time and it saves the time as 00:00.

Screen.Recording.2023-12-15.at.15.28.51.mov

In the new editor, you cannot update til you update the time. If you edit only the date and also another field to allow the update button, the changes are not saved.

Screen.Recording.2023-12-15.at.15.24.56.mov

Thanks for finding this! Adjusted in b916bd3.

puntope · 2023-12-15T20:32:50Z

js/src/blocks/product-select-with-text-field/block.json

+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "google-listings-and-ads/product-select-with-text-field",
+	"title": "Product select control with text control",


💅 In line with the other block. WDYT to keep is as just Fields?

"Product Select with Text Field"

Adjusted in 776ffb8.

puntope · 2023-12-15T20:39:49Z

js/src/blocks/product-select-with-text-field/edit.js

+		if ( nextOptionValue === customInputValue ) {
+			setValue( text );
+		} else {
+			setValue( nextOptionValue );
+		}


💅 This can be reduced to:

setValue( nextOptionValue === customInputValue ? text : nextOptionValue );

I lead toward keeping it as it is.

puntope · 2023-12-15T20:42:49Z

js/src/blocks/product-select-with-text-field/edit.js

+
+const FALLBACK_VALUE = '';
+
+export default function Edit( { attributes, context } ) {


💅 Can we add a bit of documentation of what customInputValue attribute is for?

Added JSDoc for all custom blocks by d8252b8.

Address: #2178 (comment)

Address: - #2178 (comment) - #2178 (comment)

Address: #2178 (comment)

…tring and fall back to '00:00:00'. Address: #2178 (comment)

eason9487 · 2023-12-28T06:46:16Z

@puntope, thanks for the code review. This PR is ready for the new round. Could you take another look?

…block-editor-custom-select-with-text-and-date-time

puntope · 2023-12-29T12:18:35Z

js/src/blocks/product-date-time-field/edit.js

+async function resolveValidationMessage( inputRef ) {
+	const input = inputRef.current;
+
+	if ( ! input.validity.valid ) {
+		return input.validationMessage;
+	}
+}


Why do we need validation for the datetime? I wasn't able to set an invalid date time in the inputs.

I didn't test all browsers, but Chrome and FireFox both allow entering date by keyboard, which may result in an invalid value.

Kapture.2024-01-03.at.11.23.23.mp4

"請輸入有效的日期" and "請輸入有效的時間" mean "Please enter a valid date" and "Please enter a valid time".

puntope

✅ LGTM Thanks for the changes

I left tho a question in regards the validation.

eason9487 added 6 commits December 7, 2023 15:13

Set the minimum required Woo version of AttributesBlock to 8.4.

f3dee6e

Add the "Accessing product data" section to the README.md of custom p…

57e1128

…roduct blocks.

Implement the custom block for the product select-with-text field.

1fe2fe5

Map SelectWithTextInput input to the custom block of the product se…

e05bbb3

…lect-with-text field.

Implement the custom block for the product date-time field.

1015760

Map DateTime input to the custom block of the product date-time field.

abd3492

eason9487 self-assigned this Dec 7, 2023

github-actions bot added changelog: add A new feature, function, or functionality was added. type: enhancement The issue is a request for an enhancement. labels Dec 7, 2023

eason9487 requested a review from a team December 7, 2023 09:37

puntope reviewed Dec 15, 2023

View reviewed changes

Base automatically changed from add/product-block-editor-custom-block-infra to feature/support-product-block-editor December 25, 2023 10:58

eason9487 added 5 commits December 28, 2023 14:28

Add an explanation to blocks README for the term "derived value".

0965ef9

Address: #2178 (comment)

Correct the inconsistent variable names in js/src/blocks/index.js.

b94f33a

Address: #2178 (comment)

Correct the inconsistent titles in each block JSON config.

776ffb8

Address: - #2178 (comment) - #2178 (comment)

Add JSDoc for the custom blocks.

d8252b8

Address: #2178 (comment)

Make the date-time custom field block allow the time to be an empty s…

b916bd3

…tring and fall back to '00:00:00'. Address: #2178 (comment)

eason9487 requested a review from puntope December 28, 2023 06:46

Merge branch 'feature/support-product-block-editor' into add/product-…

0fb9cf0

…block-editor-custom-select-with-text-and-date-time

puntope reviewed Dec 29, 2023

View reviewed changes

puntope approved these changes Dec 29, 2023

View reviewed changes

eason9487 merged commit d50c151 into feature/support-product-block-editor Jan 3, 2024
15 checks passed

eason9487 deleted the add/product-block-editor-custom-select-with-text-and-date-time branch January 3, 2024 03:36

eason9487 mentioned this pull request Feb 27, 2024

Release 2.6.0 #2282

Merged

21 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product Block Editor: Map `SelectWithTextInput` and `DateTime` inputs to the custom product blocks #2178

Product Block Editor: Map `SelectWithTextInput` and `DateTime` inputs to the custom product blocks #2178

eason9487 commented Dec 7, 2023 •

edited

Loading

codecov bot commented Dec 7, 2023 •

edited

Loading

puntope left a comment

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

puntope Dec 15, 2023

eason9487 Dec 28, 2023

eason9487 commented Dec 28, 2023

puntope Dec 29, 2023

eason9487 Jan 3, 2024

puntope left a comment

	public function is_active(): bool {
	return defined( 'WPSEO_WOO_VERSION' );
	}

	public function __construct( string $type, string $block_name = '' ) {
	// TODO: Remove the default value of $block_name after all attribute inputs have specified a block name

	// TODO: Remove this check after all attribute inputs have specified a block name
	if ( '' === $input->get_block_config()['blockName'] ) {
	continue;
	}

		import DatetimeFieldEdit from './product-date-time-field/edit';
		import datetimeFieldMetadata from './product-date-time-field/block.json';


		const FALLBACK_VALUE = '';

		export default function Edit( { attributes, context } ) {

Product Block Editor: Map SelectWithTextInput and DateTime inputs to the custom product blocks #2178

Product Block Editor: Map SelectWithTextInput and DateTime inputs to the custom product blocks #2178

Conversation

eason9487 commented Dec 7, 2023 • edited Loading

Changes proposed in this Pull Request:

Screenshots:

📷 Field is converted from text block to select-with-text block

📷 Date-time block

Detailed test instructions:

📌 Prepare test environment

📌 Test the select-with-text block

📌 Test the date-time block

Additional details:

Changelog entry

codecov bot commented Dec 7, 2023 • edited Loading

Codecov Report

puntope left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eason9487 commented Dec 28, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

puntope left a comment

Choose a reason for hiding this comment

Product Block Editor: Map `SelectWithTextInput` and `DateTime` inputs to the custom product blocks #2178

Product Block Editor: Map `SelectWithTextInput` and `DateTime` inputs to the custom product blocks #2178

eason9487 commented Dec 7, 2023 •

edited

Loading

codecov bot commented Dec 7, 2023 •

edited

Loading