Gutenberg: Can't cancel creation of Resuable Block

[maddisondesigns]

Describe the bug
If you accidentally click the _Add to Reusable Blocks_ menu option, there's no Cancel button to allow you to cancel the Creation of the Block.

To Reproduce
Steps to reproduce the behavior:

1. Select a block
2. Click the _Add to Reusable Blocks_ menu option and then try and cancel out of that action

Expected behavior
I should be able to cancel the creation of a Reusable Block if I accidentally click that menu option or decide that I no longer want to create a Reusable Block.

Desktop (please complete the following information):

• macOS Sierra
• Firefox Quantum 63.0.3
• WP 5.0.1

[swissspidy]

Closing as duplicate of #12286 because this was suggested there already.

[paaljoachim]

@swissspidy
@youknowriad
please re-open as we need to create separate issues for each item from my list. https://github.com/WordPress/gutenberg/issues/12286

Thanks.

We need the cancel button.

Existing:

With a cancel button:

[youknowriad]

A solution here would be to use a "modal" to give a name for the block before even saving it. I tried this in a custom development at some point, I think it works fairly well.

[paaljoachim]

I was just reminded with using Gutenberg 7.7 that we are still missing the cancel button for Reusable Blocks.

@youknowriad
Let's get this in..:)
Who should we ping whom has earlier worked on Reusable blocks?

Or is there another iteration of Reusable blocks being worked on these days that this and whatever else needed is being upgraded?

[youknowriad]

I believe this should be fixed with an alternative design. In a personal project, I implemented something close to reusable blocks but before showing the reusable block in place like we do now, I showed a small modal to enter the initial title and potentially fill other informations (icon, description..). A design like that would allow. "canceling", the current design doesn't.

[mapk]

Here's a quick mockup with the "cancel" button. Ignore the black background. I had trouble with Figma. :)

[chrisvanpatten]

@youknowriad Any chance that personal project is open source? I'm looking to implement something similar and would be very interested in seeing some prior art.

[youknowriad]

@chrisvanpatten no it's not unfortunately :(

@mapk With this UI (block toolbar ...), it's already a reusable block. The idea I believe here is to propose this modal as soon as you click "Add to Reusable Blocks" before even persisting the reusable block.

[paaljoachim]

In regards to https://github.com/WordPress/gutenberg/pull/12009

I notice that clicking Edit one can adjust the permalink. If one changes ones mind and does not want to save then one can just click outside of the area and the open save is automatically closed. The same method can be used for Creating a reusable block, and deciding not create one anyway. One can just click outside of the area.

Click outside this area to cancel saving a reusable block.

@youknowriad @mapk

[mapk]

The idea I believe here is to propose this modal as soon as you click "Add to Reusable Blocks" before even persisting the reusable block.

I think adding a modal is too much here. I noticed that the keyboard command for "undo" works just fine except it has a flaw. The first undo shows a weird state [block has been deleted or unavailable]. After doing "undo" again, it returns back to the original state.

If we can fix this weird step in the undo process, I'd say we're golden.

[earnjam]

The problem here is that the block is already saved from the moment you select "Add to reusable blocks" and you can't really undo it. Doing an undo doesn't delete the block you've already created from the database.

This also leads to the problem of every block having slugs like untitled-reusable-block, untitled-reusable-block-2, untitled-reusable-block-3, etc. We don't currently use those slugs for anything, but they can't be changed after being created either. Even if you were to change the title. See #5152

[paaljoachim]

The issue title could probably be read as
"bug: Reusable block saved before clicking save."

Actionable items.

Clicking "Add to reusable blocks" SHOULD not save a reusable block but instead open the screen to give the option to do so.

Made using Figma.

[paaljoachim]

@earnjam @chrisvanpatten

Is it possible for one of you or someone else to tackle this issue and fix the Reusable Block so we get correct save/cancel?

Thanks.

[mapk]

I think working in a "Cancel" button here which deletes the resuable block would work just fine.

[noisysocks]

The difficulty with the proposed flow here is that while you're in the intermittent step in between creating the reusable block and saving the block, the post's content will have gone from looking like this:

<!-- wp:paragraph -->
<p>Paragraph 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Paragraph 2.</p>
<!-- /wp:paragraph -->

To looking like this:

<!-- wp:paragraph -->
<p>Paragraph 1.</p>
<!-- /wp:paragraph -->

<!-- wp:block /-->

If, at this point, the user saves the post but does not save the reusable block, they will have permanently lost Paragraph 2. This is why, for simplicity's sake, we opted for a flow saves the reusable block immediately.

[paaljoachim]

It seems the next step is to fix the technical hurdle you mentioned @noisysocks
Before a cancel button can be added as suggested above.

[paaljoachim]

This issue is still valid.

Creating a reusable block.
One can "convert to regular blocks" which in a way is like a cancel button.
But for clarity it would be helpful to have a cancel button to cancel the creation of the reusable block. Which does the same as "convert to regular blocks"

---

With an existing reusable block.
Click the edit button.
Notice only a save button is seen.
There is no cancel button.

@noisysocks @earnjam

[mapk]

Okay, I've returned to take another look at this. So from what I gather, the reusable block creation process needs a cancel button for the primary purpose that it creates stored elements elsewhere in the backend that can't be removed by just converting it back into regular blocks. It differs from all other transforming or grouping processes in that detail.

For example the Group block can group blocks together, and be ungrouped without needing a cancel option because no additional content is created elsewhere in the backend. But when I create a reusable block and convert it back into regular blocks, there remains a Reusable block in the Inserter. And that is the thing we want to avoid from being created if the click was a mistake.

This messaging should then be displayed BEFORE the reusable block shows up on the page. As @youknowriad mentioned above, a modal or notification of sorts is the way to go. Riad, do you have a PR for the work you mentioned above?

Aligning with that concept, Riad, I created this prototype: