WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 months ago

Last modified 6 months ago

#52831 closed enhancement (reported-upstream)

Workflow of Reusable Blocks for the future

Reported by: davelo Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.7
Component: Editor Keywords:
Focuses: ui Cc:

Description

Since the new auto-save feature in 5.7, the reusable blocks became very unpleasant to use.
I have recorded the pain points in this screencast: https://share.woofers.be/mXu1eo8o

First:
It starts with the naming of a newly made reusable block; which is totally out of the viewport of the user. This can result in having tens of resuable blocks with the same name. The 'Gutenberg' rule has to be: when a notification is expected, show it in the viewport of the user, within 500px to max. 600px. Certainly not in the right bar, which is to be proven as the grave-yard part of a page. Yes, that's a study of Nielsen group in the nineties.

Second:
it's now not obvious for the user when he/she starts editing a reusable block. This is also a general UI-concern of Gutenberg. We assume that users know the blocks by hand and are aware that there is a toplevel. I can tell to be honest: very very few of my clients look at the breadcrumbs below (cause what i said: out of viewport) and hardly anyone uses the arrow keys in the dashboard.
It must be more clear when editing a 'child' block. Maybe an extra button can be integrated in the floating editor toolbar, like the block navigation block. I rather see the breadcrumb just above the toolbar, saves a click and creates direct awereness.
As for a resuable block, it must be certainly visible when a user starts to edit, cause these edits affect the whole site. Yes, even before the user "can" edit something. Like before 5.7. Click to edit; and then the auto-save function is okay as the user is brought aware of the edits in the reusable block.

Third:
as it is not clear when editing a reusable block. When the user saves a page, the right bar shows "some" options. Alhought i'm +15 years into webdesign, i too don't know what those options really mean. Okay, it's obvious when i check the boxes that the blocks and pages are saved. But what happens when i deselect the option...
What happens with the page, what happens with the blocks, and oh yes, i didn't even know there was a reusable block, so when i deselect it, is then a new block being made ...
My suggested workflow is: drop the checkbox for the resuable block, create the awereness BEFORE the user starts the editing process, not in the END of the process cause to be honest: is there a way back in that phase... a method that a regular user can understand? ... Right.
So in that start phase, a proper notification has to be given like:
You're starting to edit an existing reusable block which is being used in "2" other places. Would you like the changes also over there, then keep editing. If not, create a new reusable block or convert to regular blocks.


Fourth:
The resuable blocks don't have revisions. Never understood why, as it is created like a 'custom post type". So, in some cases, the user can lose or overwrite the existing reusable blocks. And grabbing a backup for such a thing can't be the solution. Revisions is the solution; this system is already installed in WordPress. And the reusable blocks must be quicker to access, not only via the tree dots.

There a lately a few tickets around reusable blocks, concerning blocks disapperead, multiple blocks with the same name.
In my opinion that is a result of this chosen workflow in 5.7.

I would not advice to upgrade to 5.7 when a site relies heavily on reusable blocks.


Change History (2)

#1 @sabernhardt
6 months ago

  • Component changed from General to Editor

#2 @talldanwp
6 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Thanks for reporting this @davelo. Sorry this has been a disruptive release for you.

I'll go through the points individually.

It starts with the naming of a newly made reusable block; which is totally out of the viewport of the user.

This has since been improved in the Gutenberg plugin, a dialog will now show when creating a reusable block where the user can name the block. (https://github.com/WordPress/gutenberg/pull/29040)

It must be more clear when editing a 'child' block. Maybe an extra button can be integrated in the floating editor toolbar, like the block navigation block.

There's a small improvement here in the plugin, there's now a parent block selector button on the toolbar. I'm not sure if this is what you're referring to. The only thing is that it won't display the reusable block icon if you're editing a deeply nested block, like one within a column within a reusable block.

The other way of telling is the breadcrumb at the bottom. But I know that's not always the apparent UI. There are some github issues with ideas for improving these things for reusable blocks:

When the user saves a page, the right bar shows "some" options.

The third point seems mostly about workflow and saving. There are some issues tracking this as well:

The resuable blocks don't have revisions.

This one is being tracked here - https://github.com/WordPress/gutenberg/issues/19149


To get an overview of reusable blocks there's an overview here:
https://github.com/WordPress/gutenberg/issues/27890

Finally, as you may have gathered, the block editor users github for an issue tracker, so I'd recommend searching, commenting and creating issues there if you have an account.

I think that covers everything—it seems there are generally github issues that cover your concerns, so I'll close this trac issue so as not to duplicate things.

Last edited 6 months ago by talldanwp (previous) (diff)
Note: See TracTickets for help on using tickets.