Editing and Saving Reusable Blocks

On Friday I took a look at a really cool issue in the Gutenberg repo about a UX pattern that would allow users to click through a Reusable block to select the child blocks within. Here’s a Figma prototype made by contributor James Koster showing how that might work.

Picking up where James left off, I made some small additions to this flow:

Changes made in this version:

  • Shows inner child blocks with parent selector (current behavior)
  • Includes the ability to edit the Reusable block in an isolated editing view, which mirrors Template Part editing:
    • Navigate to the isolated view via the ellipses menu in the Reusable block toolbar → Edit Reusable block
    • The Publish button in top toolbar becomes Save

Here’s an updated Figma prototype which includes the isolated view.

I’ve added the above additions as a comment on the existing GitHub issue, here.

I also explored adding a Save button in the toolbar for the Reusable block so that users can save changes directly from the canvas. Building from an existing proposal to use dots as an indication of unsaved changes, this version explores using both dots and an explicit Save button as indicators.

It would be nice to be able to save what you’ve changed within the inner blocks without having to click back over to the Reusable parent block, so I looked at including the Save button as part of the parent selector.

Saving sequence:

  • A change is made to an inner child block
  • Save button appears in the parent selector, green dot appears next to the Reusable blocks tab in the block inspector, white dot appears next to the Publish button in top toolbar
  • When user saves changes (either directly from toolbar or from the block inspector), there would be a saving sequence in the toolbar similar to Save draft behavior in the top toolbar
  • When changes are saved, the parent selector returns to its normal state and dots disappear from the top toolbar/block inspector

And of course, you could also save changes to inner blocks while the Reusable parent block is selected, either from the toolbar or the block inspector:

Note that in this flow, the Save button would replace the move up/down arrows and drag handle in the Reusable block toolbar until the save action is complete.

I’ve opened this potential save flow as a new GitHub issue, here.

One response to “Editing and Saving Reusable Blocks”

Leave a Reply

Your email address will not be published.