Description

Inserted reusable blocks core/block should be editable and convertible to regular blocks.

On the web, when clicking on a reusable block a bar on the top ow the block appears and let the user:

• Convert to regular blocks.
• Edit. After clicking on the "Edit" button, the grouped blocks are editable, and a "Save" button appears. The block name is also made editable. See the screenshots below:

Reusable block selected	Reusable block editing

Implementation

Edit content

We're going to use the floating toolbar for providing the actions for editing a reusable block. We'll present different actions depending on the editing state:

• Block unselected (no actions will be displayed)
• Block selected
  • Editing disabled
    • Edit: Enables the editing mode of the block. If the editing mode is not enabled, the block should be disabled.
  • Editing enabled
    • Discard: Discards the changes that have been applied to the block and disables the editing mode.
    • Save: Save the changes that have been applied to the block and disables the editing mode. Since this action requires us to make a request to the site, we should provide a loading indicator while the request is in progress.

In relation to adding items to the floating toolbar, the best option would be to add the SlotFill component to allow blocks to add their own actions. We could do something similar to what we do for the toolbar buttons or the inspector control.

Design

Edit button	Discard/save buttons

Edit name

Add Edit Name to the inspector controls to allow the user to modify it. As with the content, the user has explicitly to save the changes.

The name is part of the content so when the value is modified we should enable the editing mode. The discard action should revert any change made in the name and save action as with the rest of the content, it should save the name value.

Convert to regular blocks

Similar to the Group block that also has this action, a toolbar button will be added to execute the conversion. We should be careful to verify if the undo/redo functionality works for this action.

As an optional improvement, we would show a notice message when the action is executed.

Caveats

Undo/redo

This functionality should work similar to editing other blocks, however since we have the editing mode for reusable blocks, we should enable/disable that mode depending on the undo/redo action.

Auto-save

The content of the post is auto-saved automatically on every change but this doesn’t apply to the reusable blocks content. I tested on the web version and it’s not auto-saving it so probably this is a minor issue or even not necessary for this block.

Offline

Updating the content of reusable blocks requires network connection, if the device goes offline and the user tries to make an update we should display an error message and allow it to retry.

Multiple instances of the same block

Based on the web version, if there’re two instances of the same reusable block, the modifications should be applied on both.

Potential bug: As you can see in the example, making changes produce visual glitches on the second instance.