Edit: Redo save feature for Reusable blocks.

[paaljoachim]

I have EDITED (Saturday 20 Feb) the below information.

Description

From what I noticed the following method is also being added to WordPress 5.7. I would recommend to either revert this change or make the process of saving a reusable block far easier than this new method.

It is too easy to make a change inside a Reusable block, and then remove the change and still see the dot beside the Publish button. One will have to resave the Reusable block as part of the publishing process to be able to publish the page.

Step-by-step reproduction instructions

1. Add some blocks with content. I added a Heading, Paragraph and Image. (Save the page as a draft)
2. Select all three blocks and select to "Add to Reusable blocks" (Should really be "Save as Reusable blocks")
3. Click inside the newly created Reusable block and add some additional text inside the paragraph block, and then remove the added text.
4. Notice a dot show up in the Publish button.
5. Click the Publish button.
6. Notice a new Save screen show up. The Publish button has changed to a Save button.
7. Uncheck the Reusable Block checkbox (Should probably be Reusable block).
8. Click Save.
9. Click Publish.
10. Notice that the Publish button has become unclickable.
11. Click Cancel. Then Publish again.
12. Notice the Reusable Block does not have a check mark. Also notice the Save button is disabled.

The difficult UX part here is the mixing of saving a change to a reusable block into the Publish procedure of the page/post.

Expected behaviour

I did not expect a dot in the Publish button.
I did expect a way to easily save the change to the Reusable block, and if I did not want to save the
change being able to easily publish and disregard the change.

Actual behaviour

Not able to easily publish page.
Stuck on a Publish and Save screen.

Screenshots or screen recording (optional)

It becomes harder to publish a page/post that includes a save to an adjusted reusable block.

Reusable-block-publish.mp4

---

Making it easier to save a change to a reusable block.

Keep things separate.

When adjusting the block(s) information inside a Reusable block it needs to be simple to save the change.

A few suggestions:

Adding a save button closer to the Reusable block. (Not making it a part of the Publish page process.)
Adding a Save and cancel button in the toolbar settings.

Adding a Save button directly to the toolbar which shows up when a change has happened.

The above solutions would bring back a save process that is associated directly to the Reusable block.

Another method would be to disregard changes in the reusable block directly in the Publish/Save screen.

@bph @youknowriad

Improvements to Reusable block tracking issue:
#27890

[talldan]

Just renaming as 'save function' will be confusing for devs who think it's related to the JavaScript function save.

[ashleyleia]

The redesign of reusable blocks that happened in Gutenberg a few weeks back is confusing and makes them much harder to use.

With Gutenberg disabled, here's what a reusable block looks like in the editor (and what Gutenberg used to look like):

With Gutenberg activated, a reusable block looks like this:

Before: super easy. Now: confusing, and sufficiently annoying that I've disabled Gutenberg because I use reusable blocks a lot.

[paaljoachim]

Hi

I have made a few new issues for reusable blocks.
GB29269, GB29268 and GB29267.

[pwkip]

I agree that it should be less easy to accidentally edit reusable blocks. I switched off the Gutenberg plugin when seamless reusable blocks were introduced, trusting that it would be revised before making it to core.

Right now I think it's not obvious at all what is happening when you edit a reusable block. This change feels like a step in the wrong direction.

[jessevoogt]

It's good to see this issue is being thought about/discussed. Just a thought: besides some of the UI improvements being considered here, could there be some role-restriction for seamless editing of reusable blocks?

If nothing else, it would be great to have some way to prevent reusable blocks from getting inadvertently edited because someone accidentally dragged/dropped something in or out of there. On this page, someone posted some CSS that used pointer-events: none to try to prevent everyone from doing seamless editing, but now with Wordpress 5.9 having the ability to drag/drop into the List view, this once again opens up the possibility that things get inserted into or moved out of the reusable block (and I haven't yet been able to identify a way to target these and prevent this with a similar approach).

Even something as simple as requiring the click of an 'Edit' button before making any changes to a reusable block could go a long way. I'm not a fan of the checkbox under "Are you ready to save?" that you get if you seamlessly edit a reusable block and then try to update the page. A save button that's much closer visually to the reusable block being updated would help I think (especially if it appears as soon as you've made some change - a visual cue).