Add category field block #37295

louwie17 · 2023-03-17T14:58:01Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This adds a new category block that is currently a wrapper around the CategoryField component.
It also adds a new section to the product template.

Initial work on #37263
Note:
There are still some minor styling issues with the Select tree control, which will be done as follow ups:

Allow the option to list the options as a comma separated list when list is not expanded.
Fix popover location when the dropdown menu doesn't have enough room at the bottom and renders above the input field.

Kapture.2023-03-17.at.15.47.59.mp4

How to test the changes in this Pull Request:

Have you followed the Writing high-quality testing instructions guide?

Build this branch and enable the product blocks feature flag: block-editor-feature-enabled
Go to WooCommerce > Products and select a product with categories ( if not create one using the old UI )
The product block editor should load correctly and display a categories field with the selected categories.
You should be able to search for categories, select new ones, and remove current ones (similar to how the current category dropdown works).

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?
Have you included testing instructions?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

louwie17 · 2023-03-17T14:59:45Z

packages/js/components/src/experimental-select-control/menu.tsx

+	useLayoutEffect( () => {
+		if (
+			selectControlMenuRef.current?.parentElement &&
+			selectControlMenuRef.current?.parentElement.clientWidth > 0


This was needed as the block editor seems to render the blocks before they are being displayed on the screen, so this would return a bounding rect with width and height being zero every time.
This condition and the additional dependency below helps with this.

louwie17 · 2023-03-17T15:00:18Z

packages/js/product-editor/src/components/block-editor/block-editor.tsx

+				value={ {
+					selectedTab,
+					postType: 'product',
+					postId: product.id,


exposing the postType and postId in the context as well.

codecov · 2023-03-17T15:19:56Z

Codecov Report

Merging #37295 (c329a3d) into trunk (c5285ec) will decrease coverage by 5.7%.
The diff coverage is 0.0%.

❗ Current head c329a3d differs from pull request most recent head 14be6cc. Consider uploading reports for the commit 14be6cc to get more accurate results

Additional details and impacted files

@@             Coverage Diff             @@
##             trunk   #37295      +/-   ##
===========================================
- Coverage     51.5%    45.8%    -5.7%     
+ Complexity   17283    17196      -87     
===========================================
  Files          430      429       -1     
  Lines        80037    64914   -15123     
===========================================
- Hits         41216    29703   -11513     
+ Misses       38821    35211    -3610

Impacted Files	Coverage Δ
...ugins/woocommerce/includes/class-wc-post-types.php	`2.6% <0.0%> (+1.6%)`	⬆️

... and 345 files with indirect coverage changes

github-actions · 2023-03-17T15:35:09Z

Test Results Summary

Commit SHA: 14be6cc

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 51s
E2E Tests	187	0	0	10	0	197	18m 20s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

github-actions · 2023-04-14T09:25:42Z

Hi , @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

joelclimbsthings

Great work @louwie17 , working well and try as I might, I see no issues with the code.

One quick thing--the font for the popover items is 16px, while the design calls for 13px.

Also (likely just me), but if feels a bit weird that if you enter text, and then select an item that came up in search, that the text you entered is still present in the dropdown.

packages/js/product-editor/src/blocks/category/block.json

louwie17 · 2023-04-20T15:13:15Z

Thanks for the review @joelclimbsthings I have addressed the styling issues.

Also (likely just me), but if feels a bit weird that if you enter text, and then select an item that came up in search, that the text you entered is still present in the dropdown.

Yeah that one may be a preference thing, as this may also cause some weird behaviour if we clear it upon selection, as this would reset the search results while the popover remained open.
I did notice though that the input also remains after closing the popup, which seems a bit odd to me.
I think both of these could be addressed as follow ups though.

joelclimbsthings

Right on, looks good @louwie17 🚢

louwie17 requested review from joelclimbsthings and joshuatf March 17, 2023 14:58

github-actions bot added focus: react admin [team:Ghidorah] package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Mar 17, 2023

louwie17 requested a review from mdperez86 March 17, 2023 14:58

louwie17 commented Mar 17, 2023

View reviewed changes

louwie17 force-pushed the add/37263_category_field_block branch 3 times, most recently from c329a3d to 3261a05 Compare March 22, 2023 10:09

louwie17 force-pushed the add/37263_category_field_block branch 2 times, most recently from 2ca8773 to 246c77b Compare April 5, 2023 12:12

louwie17 force-pushed the add/37263_category_field_block branch from 246c77b to 72668b4 Compare April 14, 2023 09:22

louwie17 requested review from a team and removed request for joelclimbsthings, joshuatf and mdperez86 April 14, 2023 09:25

joelclimbsthings requested review from joelclimbsthings and removed request for a team April 18, 2023 19:07

joelclimbsthings suggested changes Apr 18, 2023

View reviewed changes

packages/js/product-editor/src/blocks/category/block.json Outdated Show resolved Hide resolved

louwie17 added 6 commits April 20, 2023 16:38

Add initial category block

5c3b639

Add changelogs

4e15db4

Add label to font family for block editor and fix template

3370c9a

Fix rebase conflict and add content role

ae2cc4c

Some styling changes for the category field

4742e8b

Move category block to blocks folder and fix merge conflict.

6267250

Address some styling issues, and update keywords

841de2b

louwie17 force-pushed the add/37263_category_field_block branch from 72668b4 to 841de2b Compare April 20, 2023 15:09

github-actions bot removed the focus: react admin [team:Ghidorah] label Apr 20, 2023

Fix css lint error

14be6cc

joelclimbsthings approved these changes Apr 20, 2023

View reviewed changes

louwie17 merged commit e88152f into trunk Apr 21, 2023

louwie17 deleted the add/37263_category_field_block branch April 21, 2023 08:10

github-actions bot added this to the 7.8.0 milestone Apr 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add category field block #37295

Add category field block #37295

Uh oh!

louwie17 commented Mar 17, 2023 •

edited

Loading

Uh oh!

louwie17 Mar 17, 2023

Uh oh!

louwie17 Mar 17, 2023

Uh oh!

codecov bot commented Mar 17, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Mar 17, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Apr 14, 2023

Uh oh!

joelclimbsthings left a comment

Uh oh!

Uh oh!

louwie17 commented Apr 20, 2023

Uh oh!

joelclimbsthings left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add category field block #37295

Add category field block #37295

Uh oh!

Conversation

louwie17 commented Mar 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

louwie17 Mar 17, 2023

Choose a reason for hiding this comment

Uh oh!

louwie17 Mar 17, 2023

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Mar 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Mar 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

github-actions bot commented Apr 14, 2023

Uh oh!

joelclimbsthings left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

louwie17 commented Apr 20, 2023

Uh oh!

joelclimbsthings left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

louwie17 commented Mar 17, 2023 •

edited

Loading

codecov bot commented Mar 17, 2023 •

edited

Loading

github-actions bot commented Mar 17, 2023 •

edited

Loading