Add Product Meta Block

[gigitux]

This PR adds a new block called Product Meta. This block will be used in the blockified Single Product Template and it will be used to wrap:

• Product SKU
• Product Categories

Consequentially, this PR added support to the Product SKU block to the Single Product Templates.

Also, this block supports those two hooks:

• woocommerce_product_meta_start
• woocommerce_product_meta_end

Fixes #8465

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces and I've updated this doc.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

1. Edit the Single Product Template.
2. Add the Product Meta block.
3. Be sure that the blocks look like the image above.
4. Save the template.
5. On the front end, visit a Single Product page. Be sure that the blocks render the right data.

Developer Facing testing

1. Install the Code Snippets plugin.
2. Create a new snippet and copy-paste this gist.
3. Remove the WooCommerce Single Product block.
4. Edit the Single Product template and add the Product Details block too -> (there is a bug: Compatibility Layer: WP crashes if in the Single Product Template, there is only the Product Meta block #8629)
5. Be sure that all the hooks work correctly.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Add Product Meta block.

[nefeline]

Nice work @gigitux ! Sharing the test results and also a suggestion:

User Facing Testing
Edit the Single Product Template.
Add the Product Meta template part by adding the Template Part block and selecting Product Meta.
Be sure that the blocks look like the image above.

✅ Confirmed the block is displayed as demonstrated on the image.
🗒️ Suggestion: since we are allowing users to customize both the text and link previews, it would be interesting to add a link on the editor preview so users can visualize how it will be displayed on the FE (similarly to what we did with the breadcrumbs block). To exemplify, the current editor preview is:

but on the FE the display is:

Save the template.
On the front end, visit a Single Product page. Be sure that the blocks render the right data.

✅ Confirmed the correct data is displayed.
❌ The classic WooCommerce Single Product Block is not displayed on this branch:

Editor:

Frontend:

This is probably related to the issue you shared below #8629 as the block is displayed correctly as soon as any other block is added, such as the "Add to cart form":

Developer Facing testing
Install the Code Snippets plugin.
Create a new snippet and copy-paste this gist.
Edit the Single Product template and add the Product Details block too -> (there is a bug: #8629)
Be sure that all the hooks work correctly.

❌ The hooks are not being correctly displayed:

[gigitux]

Thanks for the review, @nefeline

🗒️ Suggestion: since we are allowing users to customize both the text and link previews, it would be interesting to add a link on the editor preview so users can visualize how it will be displayed on the FE (similarly to what we did with the breadcrumbs block). To exemplify, the current editor preview is:

Those blocks are variations of core/blocks, so we can't do a lot. I would wait for designer feedback and, if it makes sense open an issue on Gutenberg.

✅ Confirmed the correct data is displayed.
❌ The classic WooCommerce Single Product Block is not displayed on this branch:

I'm not able to replicate it:

❌ The hooks are not being correctly displayed:

Via #8550, the compatibility layer isn't enabled when the classic block is on the page. I will update the testing instructions specifying to remove the WooCommerce Single Product Block.

[nefeline]

Thanks @gigitux !

I'm not able to replicate it:

Hm, this is odd: I've repeated the process a couple of times as a quick sanity check, and there's not a single scenario where the Product meta block doesn't prevent the display of the classic block template. Here's the screencast:

Screen.Recording.2023-03-07.at.16.44.22.mov

As mentioned previously: the issue is gone if any other single product block is added to the template alongside the Product Meta (on this new test, the Product Details block was added):

Screen.Recording.2023-03-07.at.16.50.43.mov

I'm happy to jump on a call to demo & brainstorm/debug if that helps!

Via #8550, the compatibility layer isn't enabled when the classic block is on the page. I will update the testing instructions specifying to remove the WooCommerce Single Product Block.

Thanks for updating the test instructions for the hooks and sharing these additional details! In this second round of tests, with the WooCommerce Single Product Block removed, the hooks are appropriately added only when there's any another single product block in the template (on this test, the Product Details block was used):

Screen.Recording.2023-03-07.at.17.17.06.mov

Edit the Single Product template and add the Product Details block too -> (there is a bug: #8629)

I see #8629 was closed out, but based on the test results here (without any additional third-party plugins enabled), IMO we shouldn't condition the availability of the 'woocommerce_product_meta_start' and 'woocommerce_product_meta_end' actions to the existence of other single product blocks in the template: they should always be available whenever the product meta block is added, independent of the neighbors.

[gigitux]

Thanks @gigitux !

I'm not able to replicate it:

Hm, this is odd: I've repeated the process a couple of times as a quick sanity check, and there's not a single scenario where the Product meta block doesn't prevent the display of the classic block template. Here's the screencast:

As mentioned previously: the issue is gone if any other single product block is added to the template alongside the Product Meta (on this new test, the Product Details block was added):

I'm happy to jump on a call to demo & brainstorm/debug if that helps!

Via #8550, the compatibility layer isn't enabled when the classic block is on the page. I will update the testing instructions specifying to remove the WooCommerce Single Product Block.

Thanks for updating the test instructions for the hooks and sharing these additional details! In this second round of tests, with the WooCommerce Single Product Block removed, the hooks are appropriately added only when there's any another single product block in the template (on this test, the Product Details block was used):

Edit the Single Product template and add the Product Details block too -> (there is a bug: #8629)

I see #8629 was closed out, but based on the test results here (without any additional third-party plugins enabled), IMO we shouldn't condition the availability of the 'woocommerce_product_meta_start' and 'woocommerce_product_meta_end' actions to the existence of other single product blocks in the template: they should always be available whenever the product meta block is added, independent of the neighbors.

I understood now. I added the block inside the first group block! Thanks to your video, I was able to replicate the issue! Thanks a lot for your great patience! 🙇

You found two issues:

• the Compatibility Layer added the wrap even if the Classic Block is in the template.
• the Compatibility Layer didn't add the hooks related to the specific block if this was the first and/or the last.

All the issues that you raised should be fixed! Let me know! 💪

[nefeline]

I understood now. I added the block inside the first group block! Thanks to your video, I was able to replicate the issue! Thanks a lot for your great patience! 🙇

Thanks for addressing all feedback! Confirmed that both bugs were fixed:

✅ The Product meta block is no longer preventing the display on the WooCommerce Single Product Block.
✅ Hooks are now appropriately added when the product meta block is added individually on a page (independent of the neighboring blocks).