Add tab blocks to the blocks product editor

[joshuatf]

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 tab block for use in the new product editor that is treated like a normal block. The tab button itself is slotfilled above the editor, while the selected tab is set using context.

This does not address the following, which will be added in follow-up PRs:

• Accessibility
• Unit tests
• Placement within the header (new header has not yet been merged)

Closes (part of) #37096 .

How to test the changes in this Pull Request:

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

1. Check out add/37096-test for initially hydrated sample tab blocks
2. Make sure that the blocks product editor feature is enabled
3. Navigate to the add product page
4. See that the "General" tab is initially selected and the general content is shown
5. Click "Shipping" and see that the shipping tab is selected and shipping content is shown
6. Refresh the page (noting &tab=shipping is in the URL) and note that shipping is initially selected
7. Note that styling is a bit off since the new header is not yet in place, but margin/padding matches the Figma designs

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.

[github-actions]

Test Results Summary

Commit SHA: 79dba45

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 9s
E2E Tests	189	0	0	6	0	195	16m 18s

---

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.

[joelclimbsthings]

Thanks much @joshuatf , and well done. Had a comment or two, and also have this in the console that I'm wondering if we should address:

[joelclimbsthings]

I believe having this set to false is giving me this error:

I think this should be true ?

That said, this would be true of some of our other blocks such as Section, but that doesn't seem to be giving me the same error.

[joshuatf]

Good catch. I never ran into this with this block already inserted, but regardless seems like something that should be enabled. Updated in ebfafab

[joelclimbsthings]

Nice use of this util 👍🏻

[joelclimbsthings]

Would it be useful to have support for disabled via an attribute here?

[joshuatf]

Definitely. Planned for the follow-ups to tabs, but I'd like for us to flesh out how we plan on "templating" different product types.

If we go with individual templates per product type, attributes may work well, but otherwise we may have to build logic directly into the block.

[joshuatf]

Thanks for the feedback, @joelclimbsthings! Addressed the comments.

Had a comment or two, and also have this in the console that I'm wondering if we should address:

I can create a follow-up for this. I don't see this being registered in WC blocks either, but they use the same category 🤔

We might need to double check before adding it to avoid duplicate categories.

[joelclimbsthings]

Thanks @joshuatf , changes look good and everything is working well. 🚢

[codecov]

Codecov Report

Merging #37174 (79dba45) into trunk (0cf5677) will decrease coverage by 0.0%.
The diff coverage is 0.0%.

Additional details and impacted files

@@            Coverage Diff             @@
##             trunk   #37174     +/-   ##
==========================================
- Coverage     46.7%    46.7%   -0.0%     
  Complexity   17191    17191             
==========================================
  Files          429      429             
  Lines        64845    64862     +17     
==========================================
  Hits         30275    30275             
- Misses       34570    34587     +17     

Impacted Files	Coverage Δ
...ugins/woocommerce/includes/class-wc-post-types.php	2.7% <0.0%> (-0.1%)	⬇️