Donations: Save block content

[mmtr]

Changes proposed in this Pull Request:

• Adds support for saving the content of a donations block into the post content, so the published view contains the block output.
  

• It also follows up Donations block: Make currency and amounts editable #16593 (comment) and implements the content sync logic as suggested there:

  • Content synced across all tabs:
    • Text before fixed amounts (e.g. "Choose an amount").
    • Text before custom amount input (e.g. "Or enter a custom amount").
    • Donate buttons labels (e.g. "Donate"). They have defaults that are specific to tabs ("Donate", "Donate monthly", "Donate yearly"), but changing any of those would override and sync across all tabs.
  • Content not synced across all tabs (each tab has different items):
    • Heading (e.g. "Make a one-time donation").
    • Fixed amounts.
    • Text before donate button (e.g. "Your contribution is appreciated.").

Jetpack product discussion

pbMlHh-dW-p2

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

• With a WordPress instance of your choice, install Jetpack Beta and activate this branch. Or visit https://jurassic.ninja/create/?jetpack-beta&branch=update/donations-block-save.
• Connect Jetpack to WordPress.com with a paid plan.
• Make sure Jetpack beta blocks are visible by going to /wp-admin/options-general.php?page=companion_settings and activating JETPACK_BETA_BLOCKS.
• Note that if folks are using the sandbox store method (PCYsg-lW4-p2) to also set the JETPACK__SANDBOX_DOMAIN value.
• Go to Posts > New and insert a Donations block.
• Edit the block at your pleasure and publish the post.
• Make sure the content is synced across tabs according to Donations block: Make currency and amounts editable #16593 (comment).
• Visit the published post.
• Make sure the block is displayed there and that it looks visually the same as in the editor.
• Make sure only the relevant content for the active tab is displayed.
• Make sure the custom amount input behaves as expected (you can enter an amount, invalid amounts are highlighted with a red border, valid amounts are formatted when the input loses focus).
• Reload the post in the editor.
• Make sure the saved block content is loaded.

Proposed changelog entry for your changes:

N/A.

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16705

Scheduled Jetpack release: September 1, 2020.
Scheduled code freeze: August 25, 2020

Generated by 🚫 dangerJS against b19a7ae

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello mmtr! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D47565-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[kwight]

Front-end looks great 🎉

It looks like there's some regressions with the amount handling though. I can have valid values rejected (eg. 15.34), and the block can eventually crash (Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.).

[mmtr]

It looks like there's some regressions with the amount handling though. I can have valid values rejected (eg. 15.34), and the block can eventually crash

Oh, nice catch! Should've been addressed in acda908.

[jeherve]

This looks good to me right now. 👍

[kwight]

Yep, latest fix looks good!