Automattic / Automattic/jetpack

Donations Block: Undo button will not remove the block

Open
#37,185 1 comment 0 reactions 0 assignees View on GitHub
[Block] Donations [Pri] Low [Status] Auto-allocated Bug Earn Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### 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:

https://github.com/Automattic/jetpack/assets/16754605/4a09e214-5a1f-4253-826f-8245aaff5755

Originally reported here: https://github.com/Automattic/jetpack/issues/35505#issuecomment-1932230242

### 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.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue by adding the Donations block in a post or Site editor template and clicking undo. Read projects/plugins/jetpack/extensions/blocks/donations/tabs.js and edit.js, focusing on the useEffect attributes and the WordPress.com products fetch. Done means undo removes the newly added block without the initial fetch restoring its attributes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.