[POC] Added custom fields to the checkout blocks

[leonardola]

This PR is only a POC so we can test different approaches to create a way of adding custom fields in the checkout page.

To test it

• Checkout to this branch
• Edit your blocks checkout page
• Click the contact Information block
• Expand the Custom Fields accordion in the blocks settings
• Click the Add Custom Field button
• The post Update button will be available
• Save the post
• Reload the page
• The custom field should still show up in the block settings
• If you try to edit the field name it won't work yet
• It's not possible to delete fields yet

Fixes #

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

Before	After

Testing

Automated Tests

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

User Facing Testing

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Add suggested changelog entry here.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8959.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 452
• Total errors: 2216

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/checkout/form-step/custom-fields.tsx

_{comments-aggregator}

[github-actions]

Size Change: +167 B (0%)

Total Size: 1.07 MB

Filename	Size	Change
build/active-filters.js	7.49 kB	+2 B (0%)
build/all-products.js	37.4 kB	-3 B (0%)
build/all-reviews.js	7.65 kB	+1 B (0%)
build/attribute-filter.js	13.2 kB	-4 B (0%)
build/cart.js	48.3 kB	-3 B (0%)
build/checkout.js	46.2 kB	+189 B (0%)
build/featured-category.js	14 kB	-1 B (0%)
build/featured-product.js	14.4 kB	-3 B (0%)
build/handpicked-products.js	7.92 kB	-2 B (0%)
build/mini-cart.js	4.49 kB	+1 B (0%)
build/price-filter.js	8.4 kB	-2 B (0%)
build/rating-filter.js	6.98 kB	-2 B (0%)
build/stock-filter.js	7.7 kB	-3 B (0%)
build/wc-blocks-vendors.js	64.2 kB	-3 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.98 kB
build/active-filters-wrapper-frontend.js	5.97 kB
build/all-products-frontend.js	11.8 kB
build/attribute-filter-frontend.js	22.4 kB
build/attribute-filter-wrapper-frontend.js	7.1 kB
build/blocks-checkout.js	44 kB
build/breadcrumbs.js	2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products-frontend.js	9.72 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.2 kB
build/cart-blocks/cart-express-payment-frontend.js	718 B
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.36 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.24 kB
build/cart-blocks/cart-totals-frontend.js	307 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	655 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.62 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	272 B
build/cart-blocks/order-summary-heading-frontend.js	455 B
build/cart-blocks/order-summary-shipping-frontend.js	10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	433 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.32 kB
build/cart-frontend.js	29.3 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address-frontend.js	4.18 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.14 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js	10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	433 B
build/checkout-blocks/payment-frontend.js	8.39 kB
build/checkout-blocks/pickup-options-frontend.js	4.11 kB
build/checkout-blocks/shipping-address-frontend.js	4.14 kB
build/checkout-blocks/shipping-method-frontend.js	2.6 kB
build/checkout-blocks/shipping-methods-frontend.js	4.82 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	309 B
build/checkout-frontend.js	30.9 kB
build/customer-account.js	3.16 kB
build/filter-wrapper-frontend.js	14 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/legacy-template.js	5.57 kB
build/mini-cart-component-frontend.js	28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js	816 B
build/mini-cart-contents-block/checkout-button-frontend.js	818 B
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	3.18 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	589 B
build/mini-cart-contents-block/shopping-button-frontend.js	705 B
build/mini-cart-contents-block/title-frontend.js	368 B
build/mini-cart-contents.js	17.4 kB
build/mini-cart-frontend.js	2.02 kB
build/price-filter-frontend.js	13.9 kB
build/price-filter-wrapper-frontend.js	6.96 kB
build/price-format.js	1.19 kB
build/product-add-to-cart-frontend.js	6.43 kB
build/product-add-to-cart.js	178 B
build/product-best-sellers.js	8.26 kB
build/product-button-frontend.js	1.91 kB
build/product-categories.js	2.36 kB
build/product-category.js	9.25 kB
build/product-image-frontend.js	1.77 kB
build/product-image.js	178 B
build/product-new.js	8.26 kB
build/product-on-sale.js	8.59 kB
build/product-price-frontend.js	2.08 kB
build/product-query.js	11 kB
build/product-rating-frontend.js	1.34 kB
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	977 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	453 B
build/product-stock-indicator-frontend.js	1.01 kB
build/product-summary-frontend.js	1.29 kB
build/product-tag.js	8.74 kB
build/product-title-frontend.js	1.37 kB
build/product-title.js	178 B
build/product-top-rated.js	8.49 kB
build/products-by-attribute.js	9.58 kB
build/rating-filter-frontend.js	20.8 kB
build/rating-filter-wrapper-frontend.js	5.58 kB
build/reviews-by-category.js	11.9 kB
build/reviews-by-product.js	13 kB
build/reviews-frontend.js	7.11 kB
build/stock-filter-frontend.js	21 kB
build/stock-filter-wrapper-frontend.js	5.82 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js	6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js	19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js	7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js	8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/wc-blocks-data.js	21.8 kB
build/wc-blocks-editor-style-rtl.css	5.79 kB
build/wc-blocks-editor-style.css	5.79 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	930 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.73 kB
build/wc-blocks-style-rtl.css	27.1 kB
build/wc-blocks-style.css	27.1 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks.js	2.63 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/wc-shipping-method-pickup-location.js	29.9 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.