[PoC][Product Block Editor]: introduce custom Block Binding API

[retrofox]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR introduces the Block Binding API in the product editor app.
Considering that the API is in full development in core, we have introduced an alternative implementation fully aligned with what the core API dictates.
Ideally, when the API is available in core we could switch without any problem.

Additionally, a source handler will be added that connects the block's attributes with the product's entities.

Finally, as an example of use, the product name field is connected to the entity.

Closes # .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Basic

1. Go to the block editor
2. Go to the General tab, Basic details section
3. Confirm you can edit the product name as usual (edit, save, hard-refresh, ...)

Inspect the Name field block

1. Use the React dev tool
2. Identify the Name field block
3. Inspect its attributes
4. Confirm you see the new metadata attribute there

Pro: dispatching an action to update the product property

1. Open the dev console
2. Identify the product ID (it's part of the URL)
3. Run the following code (replace <post-id> with your testing product

wp.data.dispatch( 'core' ).editEntityRecord(
    'postType',
    'product',
    <post-id>,
    {
	  'name': 'The best product ever',
	}
);

4. Confirm the app updates the product title with the value defined above (The best product ever')

Pro: dispatching an action to update the block property

1. Focus the Product Name field (very important)
2. Run the following code

wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes(
    wp.data.select( 'core/block-editor' ).getSelectedBlock()?.clientId,
    {
        name: 'Mate de primera calidad'
    }
)

3. Confirm the app updates the product title
4. Save the product
5. Hard refresh
6. Confirm the product name was properly saved

Screen.Recording.2024-02-09.at.17.57.26.mov

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

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

[github-actions]

Test Results Summary

Commit SHA: eb0d061

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	315	1	1	23	0	340	14m 48s

⚠️ Warning

Please address the following issues prior to merging this pull request:

• FAILED/BROKEN TESTS. There were failed and/or broken API and E2E tests.

---

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.