Change Checkout form step numbering so it can only be toggled for all blocks, not individually per-step

[opr]

Changes proposed in this Pull Request:

This PR removes the "Show step number" option from individual form steps and adds a new toggle to the Checkout Fields block to control all form steps.

I added a new property to the CheckoutBlockContext called showFormStepNumbers and the frontend.tsx file for each Checkout inner block that renders a form step consumes the value from here and passes it to the form step. In the editor, the FormStepBlock consumes this directly from the CheckoutBlockContext.

The reason I made each inner block pass the value to the FormStep is because the FormStep component is exported in the @woocommerce/blocks-components. I chose not to change the API of this or make it rely on CheckoutBlockContext as it is possible the component may be rendered outside of this context and would break consuming applications.

How to test the changes in this Pull Request:

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

0. Have local pickup enabled, with valid locations. Have shipping enabled with valid methods. Have payment methods set up.
1. Go to the Checkout block in the editor.
2. Click on the Contact Information block and open the editor sidebar.
3. Ensure you do not see an option to Show step number
4. Go to the list view and select the Checkout Fields Block.
5. Open the editor sidebar and ensure you see an option to Show form step numbers
6. Turn it on and ensure each step in the form has a number (Express payment, Order notes and Terms and Conditions don't have one).
7. Turn it off and ensure none of the sections have a number.
8. Save the page. Keep this editor tab open, you'll need it later!
9. Open a new tab and add an item to your cart and go to the Checkout block in the front end.
10. Ensure none of the sections have a number.
11. Go back to the editor and toggle the Show form step numbers option on.
12. Reload the front-end Checkout block and ensure all sections (except order notes and T&C) have a number.
13. Check the Use same address for billing checkbox and ensure the numbers are still sequential when the billing form appears.
14. Uncheck the Use same address for billing checkbox and ensure the numbers are still sequential when the billing form appears.
15. Change the shipping method from Shipping to Local pickup and vice/versa checking the numbering is still OK in each configuration.
16. Go back to the editor, delete the Checkout block and re-insert it. Ensure the numbers are not shown by default.

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]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[github-actions]

Hi @wavvves,

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

[senadir]

I was gonna say why complicate the code this much but yeah I agree that doing this is backward compatible.

The issue here is that if a step is already registered, it would have its number? How about:

• You remove the option from all steps.
• You leave the top level option.
• You apply your changes using CSS on the top level item, so that it overrides whatever option the consumer block had?

I'm not sure how to best do this, can be a follow up.

[opr]

The issue here is that if a step is already registered, it would have its number

Can you expand on this point? You mean going from a 8.9 checkout with numbers enabled? This PR would disable them. If the merchant wants it back on they would have to enable the setting again.

Along with the spacing changes I thought we agreed that the numbers added little value, so I don't think defaulting to them being disabled is a bad thing (given the effort required to re-enable them is minimal), do you agree?

[senadir]

What I mean is that if you install EU VAT, it will show a step number

[senadir]

A change would be that any step inside Checkout would only be able to opt-out of steps numbers, not opt-in while the rest are opted out.

[senadir]

LGTM