Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
With the the fix in #2831409: Remove Confirm Deletion / restore actions for paragraphs it is now very easy and quick to remove a paragraph which is generally a good thing and much preferred to the previous behaviour. However since in some cases a user might accidentally remove a paragraph and loose a lot of her work, I suggest that we look into a solution that has a JS confirmation state with a small footprint.
Proposed resolution
After clicking the delete button show a little overlay in place with two buttons, one to confirm deletion and one to cancel the deletion. We need to see if we can implement this in a way that one can delete the paragraph with two consecutive clicks without moving the mouse too much, but also prevent a double-click that would skip the confirmation entirely.
A wireframe that was created during UX reviews for the thunder distribution (see related issue):
Screenshots of the current implementation:
Remaining tasks
- Create a patch as a proof of concept and to be able to review that
- Create JS tests to make sure this is working as expected
User interface changes
API changes
Data model changes
Issue fork paragraphs-2833934
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
miro_dietikerGreat to see this posted as a follow-up.
Just a quick note:
There are already two layers to revert a remove.
- Just cancel the edit process. A remove is not saved. It's just an intermediate state.
- Use the revisions to revert. Paragraphs is nicely integrated.
But yeah, if this confirmation is lightweight and client side, i'm supporting this double click.
Adding this to our Trello boards / roadmap.
Comment #3
gpap CreditAttribution: gpap commented[deleted]
Comment #4
sarathkmThis should be optional and should have a checkbox at form widget settings.
Comment #5
yseki CreditAttribution: yseki as a volunteer and commentedHere is a patch that creates a client site confirmation button for the new experimental Paragraphs widget.
It's based on https://github.com/thunder/paragraphs_features/pull/12/files
Comment #6
BerdirComment #7
BerdirComment #8
BerdirScreenshots would be helpful.
I'm even considering to go a step further. We could have a hidden checkbox "Delete", and the client-side code should just check that and visually hide the paragraph, then we could skip an extra ajax roundtrip and only process it the time it is submitted, for adding another paragraph, saving or some other action.
Comment #10
miro_dietikerYeah...
The current ajax states also have ugly side effects like this: https://www.drupal.org/project/paragraphs/issues/2956843
Just cover removes client side until you save is much better.
For me the current pain point of working with content and removal is the slowness of the remove button.
If you need to remove multiple Paragraphs, you end up click + wait for multiple times.
If you experiment with content, it can easily happen that you need to delete 4..10 Paragraphs at some point.
(And sometimes if you click too early the form state breaks and you need to start over again...)
An "undo deletes" could be placed on the most top "..." button, resetting all client side delete states.
I do not really like to keep a row reserved for "deleted" Paragraphs like we had before.
What do you think?
Comment #11
miro_dietikerAs improving speed of editing is a current priority, i'm promoting.
Comment #12
AaronBaumanCan someone please update the summary to explain what is the feature request here, because i'm confused?
Looks like the "confirm removal" behavior was removed in #2831409: Remove Confirm Deletion / restore actions for paragraphs
But then, at some point - i haven't investigated to find out when - it was restored.
Is that a regression, or was it intentional?
If we can't agree on whether this feature should exist, can we at least wrap it with a toggle?
Comment #13
Lukas von BlarerThe patch in #5 works for me.
Adding screenshots to the IS.
Comment #14
saltwaterskin CreditAttribution: saltwaterskin at Mediacurrent commentedIn my case I needed to apply these changes because I am using a custom paragraphs widget based on the one provided by the paragraphs browser module. The widget does not appear to support the confirmation on removal functionality. I made a small adjustment to the patch in #5 to add a value="Remove" attribute to the remove button.
Comment #17
Lukas von BlarerThe MR is using jQuery.once resulting in errors like this:
Uncaught TypeError: $(...).find(...).once is not a functionComment #18
queenielow CreditAttribution: queenielow as a volunteer commentedFollowing on this thread
Comment #19
sourabhjainComment #20
sourabhjain