Product Block Editor: Add the fundamental setup for the custom product blocks and map `Select` and `BooleanSelect` inputs to the custom select field block #2164

eason9487 · 2023-11-28T11:48:15Z

Changes proposed in this Pull Request:

To be compatible with Product Block Editor, this PR adds fundamental support:

Adjust the can_enqueue of BaseAsset as it should allow $enqueue_condition_callback to be null.
Adjust the AttributesBlock to register the custom blocks and the related assets.
Adjust the frontend config to build the custom blocks.
Add the structure of custom blocks.
Update the @woocommerce/dependency-extraction-webpack-plugin package to get the support of the newer WC packages.

To show how to develop and use the custom product blocks, this PR:

Implement the custom block of the product select field.
Map Select and BooleanSelect inputs to the custom block of the select field.

Screenshots:

📷 Simple product

📷 Variable product

📷 Variation product

Detailed test instructions:

📌 Prepare test environment

Please refer to the test preparation in PR 2151.
npm install
npm start

📌 Test the simple product type

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.
Operate the selection fields and change their selected option.
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 options are saved.

📌 Test the variable and variation product type

Go to edit a variable product, e.g. the Hoodie imported from WC's sample products
Switch to the Organization tab and find the Google Listings & Ads section.
Within the Google Listings & Ads section, there should be two fields. Operate the selection field and change its selected option.
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 is saved.
Back to edit the same variable product with Product Block Editor.
Switch to the Variations tab and find the Variations section.
Click on one of the Edit links within the Variations section to go to edit a variation product.
With the General tab, find the Google Listings & Ads section.
Repeat the similar test to verify the fields for this variation product.

📌 Test the related filters

Go to edit a simple product.
Filters the options for each attribute - "woocommerce_gla_product_attribute_value_options_{$attribute_id}"
1. Confirm the Condition field has four options: Default, New, Refurbished, and Used.
2. Add a filter to the google-listings-and-ads.php file:
```
add_filter(
	'woocommerce_gla_product_attribute_value_options_condition',
	function ( array $value_options ) {
		$value_options[ 'broken' ] = 'Broken';
		return $value_options;
	}
);
```
3. Refresh the page.
4. Check if the Condition has the fifth option: Broken.

Additional details:

With WooCommerce 8.3.0, the tooltip is not aligned well, and the generic product blocks don't support the tooltip attribute.

These issues will be resolved in WooCommerce 8.4.0, so this PR won't take care of them.

Changelog entry

codecov · 2023-11-28T12:19:01Z

Codecov Report

Attention: 4 lines in your changes are missing coverage. Please review.

Comparison is base (9ff6a97) 60.6% compared to head (5e1f98d) 60.8%.
Report is 1 commits behind head on feature/support-product-block-editor.

Additional details and impacted files

@@                           Coverage Diff                            @@
##             feature/support-product-block-editor   #2164     +/-   ##
========================================================================
+ Coverage                                    60.6%   60.8%   +0.2%     
- Complexity                                   4144    4151      +7     
========================================================================
  Files                                         453     453             
  Lines                                       17785   17824     +39     
========================================================================
+ Hits                                        10777   10843     +66     
+ Misses                                       7008    6981     -27

Flag	Coverage Δ
php-unit-tests	`60.8% <90.7%> (+0.2%)`	⬆️

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

Files	Coverage Δ
src/Admin/Input/Select.php	`100.0% <100.0%> (ø)`
src/Assets/BaseAsset.php	`54.9% <100.0%> (+5.7%)`	⬆️
...ernal/DependencyManagement/CoreServiceProvider.php	`0.0% <0.0%> (ø)`
src/Admin/Product/Attributes/AttributesBlock.php	`94.8% <90.0%> (-2.3%)`	⬇️

... and 4 files with indirect coverage changes

…e to get the support of the newer WC packages.

… select field.

…condition_callback` to be null.

…lated assets.

…lect field.

puntope

✅ LGTM. Thanks for working on this.

I tested changing values in Products Single, Variable and Variations. They worked and they persisted after refreshing.
I tested adding custom values in the fields and also updating the values after.

In regards the code I didn't see any blocker. I left some 💅 and some questions. But as they are not blockers I approve this in advance.

puntope · 2023-12-14T18:27:48Z

js/src/blocks/README.md

+├── product-select-field/  # A custom block
+│   ├── block.json         # The metadata file of this block and also the canonical way to register this block with both PHP and JavaScript side
+│   └── edit.js            # The component to work with the `edit` function when registering this block, and it's the interface for how this block is going to be rendered within the Product Block Editor
+├── another-field/         # Another custom block
+│   ├── block.json
+│   └── edit.js


💅 Thanks for documenting the structure. I'd suggest adding the Custom Blocks in their folder (ie custom_blocks, fields... ) so they are not at the same level as the components folder.

Since at most there will only be 3 or 4 custom blocks, I lead toward not using a deeper directory structure.

puntope · 2023-12-14T19:12:24Z

src/Assets/BaseAsset.php

@@ -130,6 +130,10 @@ public function get_uri(): string {
 	 * @return bool
 	 */
 	public function can_enqueue(): bool {
+		if ( is_null( $this->enqueue_condition_callback ) ) {


💅 Can we cover this by test unit as well?

Added in e4a743e.

puntope · 2023-12-14T19:26:01Z

tests/data/existing-block/block.json

@@ -0,0 +1 @@
+{}


❓ Why is this file for?

For testing the registration of custom blocks without actually building client files.

google-listings-and-ads/tests/Unit/Admin/Product/Attributes/AttributesBlockTest.php

Lines 210 to 235 in 2eaee14

public function test_register_custom_blocks() {

$custom_blocks = [ 'existing-block', 'non-existent-block' ];

$expected_asset = new AdminScriptWithBuiltDependenciesAsset(

'google-listings-and-ads-product-blocks',

'tests/data/blocks',

GLA_TESTS_DATA_DIR . '/blocks.asset.php',

new BuiltScriptDependencyArray(

[

'dependencies' => [],

'version' => (string) filemtime( GLA_TESTS_DATA_DIR . '/blocks.js' ),

]

)

);

$this->assets_handler

->expects( $this->exactly( 1 ) )

->method( 'register' )

->with( $expected_asset );

$this->assets_handler

->expects( $this->exactly( 1 ) )

->method( 'enqueue' )

->with( $expected_asset );

$this->attributes_block->register_custom_blocks( GLA_TESTS_DATA_DIR, 'tests/data/blocks', $custom_blocks );

}

puntope · 2023-12-14T19:31:57Z

js/src/blocks/components/label.js

@@ -0,0 +1,35 @@
+// Copied from WooCommerce core and simplified to leave only the needed parts.


💅 I assume it will be done in future PRs. I expected to have some tests for the JS part as well

Only using jest to test this component or custom blocks would be fragile as they involve a lot of Woo core mechanisms and codes. I planned to test them via E2E tests after all required development settled down.

puntope · 2023-12-14T19:52:17Z

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

+		"_templateBlockHideConditions": {
+			"type": "array"
+		},


❓ Why is this for? When I delete it I don't see any difference at first look

__experimentalRole is an undocumented attribute property, and is commonly set in WooCommerce core, but it seems a bit paradoxical. Although I did find the use of its source code, it's not clear what it's used for, only knew that: without this property, it may lead to a custom block in editing-disabled mode.

As the product block editor in Woo core is still under development, this issue may be/has been resolved. However, it would be safer to keep it for the time being.

Thanks for the explanation. I was referring to

"_templateBlockHideConditions": { "type": "array" },

Sorry, I got it wrong.

In order to make a custom block compatible with the conditionally hiding feature, it requires the _templateBlockHideConditions attribute when registering the custom block on both PHP and JS sides.

On JS side, a custom block can use registerProductEditorBlockType to inject that attribute, but on PHP side, there is no corresponding way to do so. Therefore, a custom block still needs to do a similar injection as BlockRegistry::register_block when calling Gutenberg register_block_type.

The good news is Woo 8.5.0 will have the core support by PR 41973 - Template API: Registration of custom block types, so the _templateBlockHideConditions attribute will be removed in a subsequent PR.

puntope · 2023-12-14T19:56:23Z

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

+		"tooltip": {
+			"type": "string"
+		},
+		"property": {


❓ Same for these "property" and "context". I don't see clear references out there but seems to be an essential part of the config.

The property value will be passed into the corresponding block and be used with the below useProductEntityProp to access a property or meta of product data. The naming is to align with all generic product blocks in Woo core, e.g. number, checkbox, radio and so on.

google-listings-and-ads/js/src/blocks/product-select-field/edit.js

Lines 15 to 17 in 2eaee14

const [ value, setValue ] = useProductEntityProp( attributes.property, {

postType: context.postType,

} );

Not sure if the "context" refers to useContext. If yes, I added its use by this commit in PR #2178

…t` via `ScriptAsset`. Address: #2164 (comment)

…ct-block-editor-custom-block-infra

…ase. Ref: 46830dc

…d test case." This reverts commit 2eaee14.

…ct-block-editor-custom-block-infra

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 Nov 28, 2023

eason9487 force-pushed the add/product-block-editor-custom-block-infra branch from ad893dd to ca54755 Compare November 28, 2023 12:15

eason9487 self-assigned this Nov 28, 2023

eason9487 force-pushed the add/product-block-editor-custom-block-infra branch 3 times, most recently from 917931b to 220dd41 Compare November 29, 2023 10:57

eason9487 marked this pull request as ready for review November 29, 2023 11:17

eason9487 requested a review from a team November 29, 2023 11:17

eason9487 force-pushed the add/product-block-editor-custom-block-infra branch from 220dd41 to 6f17074 Compare November 30, 2023 02:18

eason9487 added 7 commits December 7, 2023 12:46

Update the @woocommerce/dependency-extraction-webpack-plugin packag…

1ea9f4b

…e to get the support of the newer WC packages.

Add the structure of custom blocks and implement the block of product…

8331bb3

… select field.

Adjust the frontend config to build the custom blocks.

ade7092

Adjust the can_enqueue of BaseAsset as it should allow `$enqueue_…

9783aca

…condition_callback` to be null.

Adjust the AttributesBlock to register the custom blocks and the re…

69cdf1f

…lated assets.

Map Select and BooleanSelect inputs to the custom block of the se…

9570524

…lect field.

Add a README about the development of custom blocks.

a308eb7

eason9487 force-pushed the add/product-block-editor-generic-blocks branch from 9a81d84 to 0408038 Compare December 7, 2023 04:50

eason9487 force-pushed the add/product-block-editor-custom-block-infra branch from 6f17074 to a308eb7 Compare December 7, 2023 04:50

puntope approved these changes Dec 14, 2023

View reviewed changes

eason9487 added 5 commits December 15, 2023 19:25

Add a PHP unit test for testing the can_enqueue method of `BaseAsse…

e4a743e

…t` via `ScriptAsset`. Address: #2164 (comment)

Merge branch 'add/product-block-editor-generic-blocks' into add/produ…

b7c9eaa

…ct-block-editor-custom-block-infra

Adjust AttributesBlockTest.php accordingly for the newly added test c…

2eaee14

…ase. Ref: 46830dc

Revert "Adjust AttributesBlockTest.php accordingly for the newly adde…

8d09cd3

…d test case." This reverts commit 2eaee14.

Merge branch 'add/product-block-editor-generic-blocks' into add/produ…

5e1f98d

…ct-block-editor-custom-block-infra

Base automatically changed from add/product-block-editor-generic-blocks to feature/support-product-block-editor December 25, 2023 10:55

eason9487 merged commit cb432d9 into feature/support-product-block-editor Dec 25, 2023
15 checks passed

eason9487 deleted the add/product-block-editor-custom-block-infra branch December 25, 2023 10:58

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: Add the fundamental setup for the custom product blocks and map `Select` and `BooleanSelect` inputs to the custom select field block #2164

Product Block Editor: Add the fundamental setup for the custom product blocks and map `Select` and `BooleanSelect` inputs to the custom select field block #2164

eason9487 commented Nov 28, 2023 •

edited

Loading

codecov bot commented Nov 28, 2023 •

edited

Loading

puntope left a comment

puntope Dec 14, 2023

eason9487 Dec 15, 2023

puntope Dec 14, 2023

eason9487 Dec 15, 2023

puntope Dec 14, 2023

eason9487 Dec 15, 2023 •

edited

Loading

puntope Dec 14, 2023

eason9487 Dec 15, 2023

puntope Dec 14, 2023

eason9487 Dec 15, 2023

puntope Dec 15, 2023

eason9487 Dec 25, 2023 •

edited

Loading

puntope Dec 14, 2023

eason9487 Dec 15, 2023

	public function test_register_custom_blocks() {
	$custom_blocks = [ 'existing-block', 'non-existent-block' ];
	$expected_asset = new AdminScriptWithBuiltDependenciesAsset(
	'google-listings-and-ads-product-blocks',
	'tests/data/blocks',
	GLA_TESTS_DATA_DIR . '/blocks.asset.php',
	new BuiltScriptDependencyArray(
	[
	'dependencies' => [],
	'version' => (string) filemtime( GLA_TESTS_DATA_DIR . '/blocks.js' ),
	]
	)
	);

	$this->assets_handler
	->expects( $this->exactly( 1 ) )
	->method( 'register' )
	->with( $expected_asset );

	$this->assets_handler
	->expects( $this->exactly( 1 ) )
	->method( 'enqueue' )
	->with( $expected_asset );

	$this->attributes_block->register_custom_blocks( GLA_TESTS_DATA_DIR, 'tests/data/blocks', $custom_blocks );
	}

		@@ -0,0 +1,35 @@
		// Copied from WooCommerce core and simplified to leave only the needed parts.

	const [ value, setValue ] = useProductEntityProp( attributes.property, {
	postType: context.postType,
	} );

Product Block Editor: Add the fundamental setup for the custom product blocks and map Select and BooleanSelect inputs to the custom select field block #2164

Product Block Editor: Add the fundamental setup for the custom product blocks and map Select and BooleanSelect inputs to the custom select field block #2164

Conversation

eason9487 commented Nov 28, 2023 • edited Loading

Changes proposed in this Pull Request:

Screenshots:

📷 Simple product

📷 Variable product

📷 Variation product

Detailed test instructions:

📌 Prepare test environment

📌 Test the simple product type

📌 Test the variable and variation product type

📌 Test the related filters

Additional details:

Changelog entry

codecov bot commented Nov 28, 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

eason9487 Dec 15, 2023 • edited Loading

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 Dec 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Product Block Editor: Add the fundamental setup for the custom product blocks and map `Select` and `BooleanSelect` inputs to the custom select field block #2164

Product Block Editor: Add the fundamental setup for the custom product blocks and map `Select` and `BooleanSelect` inputs to the custom select field block #2164

eason9487 commented Nov 28, 2023 •

edited

Loading

codecov bot commented Nov 28, 2023 •

edited

Loading

eason9487 Dec 15, 2023 •

edited

Loading

eason9487 Dec 25, 2023 •

edited

Loading