Make message editable

[nielslange]

Fixes #4

Note

In i1 of this block, the merchant must be able to edit the messages for insufficient and sufficient cart totals. This PR adds this functionality.

Before:

After (separated textareas):

After (combined textarea):

To enable merchants to adjust the message for insufficient cart totals, e.g. Spend only $35.00 more to get free US shipping!, according to their needs, I initially created two textareas. One textarea for the message before the remaining value and another one for the message after the remaining value. To keep the editing of the messages simple, I decided against that solution and created just one textarea to adjust the message for insufficient cart totals. This message includes the placeholder %s. In the help text, I highlighted the importance of this placeholder.

I created the two tags Insufficient-totals-with-separate-textareas and Insufficient-totals-with-combined-textarea so that both versions can be checked during the code review.

Testing instructions

1. Check out this PR.
2. Create a test page.
3. Add the Free Shipping Progress Bar block to it and save the page.
4. Mark the block and open the sidebar.
5. Change the Insufficient totals message and Sufficient totals message.
6. Change the Free shipping from value to see both messages.
7. Ensure that the changes are visible both in the editor and the frontend.

[senadir]

Hey Niels. Thank you for working on this, I left some changes because this is not how we offer text editing.

[nielslange]

@senadir I've updated this PR according to your feedback and double-checked that the functionality is working as expected, both with Gutenberg activated and deactivated. I'm looking forward to receiving your feedback on this update.

[senadir]

Hey Niels, so far this is looking good and in the correct path, however, there are a lot of things left that I pointed out.

[senadir]

This is looking good, I left a feedback to replace viewSwitcher with the newer version, and a note about notice attribute, but all is fine!

[senadir]

This is looking good! Thank you for working on this.

We have a lot of reused coded from blocks here, we should look (later) into exporting it.

[nielslange]

This is looking good! Thank you for working on this.

Thanks for your review and approving these changes.

We have a lot of reused coded from blocks here, we should look (later) into exporting it.

Absolutely. The two biggest parts I reused are the <BlockErrorBoundary> and the <useViewSwitcher> components.