Edit Custom Fields for New Product Editor

[mdperez86]

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:

Partially closes #44169
Depends on #45360

How to test the changes in this Pull Request:

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

1. Create a new product from the classic editor, add some custom fields and save its id.
2. Make sure feature New product editor is enabled under /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
3. Make sure feature product-custom-fields is enabled under Features tab from /wp-admin/tools.php?page=woocommerce-admin-test-helper (WooCommerce Beta Tester plugin) is required
4. Go to /wp-admin/admin.php?page=wc-admin&path=/product/{id}&tab=organization. Replace the {id} with the one saved in point 1.
5. You should see the Organization tab
6. Under the Custom fields section the list of the custom fields added in point 1 should be shown

7. Each row should show an Edit button
8. When click it a new Edit ... modal should be shown so the custom field could be edited

9. Change the name and value of the custom field and then click Update
10. The modal should close and the changes should be reflected on the table
11. The update the product and after refreshing the page the changes should persist.

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 @octaedro,

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: 53e53f9

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	304	0	0	47	0	351	6m 26s

---

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.

[octaedro]

I just realized we added this empty scss here. Can we delete it in this PR?

[mdperez86]

I just realized we added this empty scss #45360. Can we delete it in this PR?

done -> 53e53f9

[octaedro]

LGTM! 🚀