Donations Block: Undo button will not remove the block

[coder-karen]

What is the issue

On a self-hosted site using the Jetpack plugin, once a Donation block is added to a post or page it isn't possible to remove it with the undo button. With most other blocks, after adding the block and making none or a few changes, clicking the undo button will undo any changes and then remove the block (as a demo you can try with the Business Hours block).

To reproduce:

• Create a new post or edit a template in the Site editor
• Add the Donations block
• Click undo
• Verify the block is not removed

Demo:

Screen.Recording.2024-05-02.at.16.15.23.mov

Originally reported here: #35505 (comment)

Likely next steps

The issue is that we set the attributes for oneTimeDonation, monthlyDonation and annualDonation within a useEffect (see projects/plugins/jetpack/extensions/blocks/donations/tabs.js) which checks first to see if those values are set and that the planID matches the respective products value. The products value is set by doing a fetch request to WordPress.com (see projects/plugins/jetpack/extensions/blocks/donations/edit.js), and the oneTimeDonation, monthlyDonation and annualDonation attributes only set once that is received.

This happens on initial load, so clicking undo just repeats the fetch and setting of attributes.

Possible solutions (I've not looked into the feasibility of any of these):

• fetching server side first for the initial attribute values.
• do not save the oneTime, monthly and annual donations in attributes at all (perhaps we can always access the data dynamically...).
• change the default display of the donations block (in the editor) until clicking a tab, so that the fetch request doesn't happen on the initial load.