Comparing old and new Reusable block UX methods.

[paaljoachim]

What problem does this address?

Comparing the old and new methods for handling reusable blocks

Old process.

I have selected three blocks and saved them into a reusable block.
WP 5.6.1. Gutenberg plugin not activated.

The whole reusable block is selected. The only way to edit the contents of the block is by clicking the Edit button.
Clicking Edit one can adjust the contents and then click the Save button.

The reusable block becomes a block that makes it harder to accidentally make a change to the block contents inside.
Edit and save is handled directly in the block toolbar.

New process.

I have selected three blocks and save them into a reusable block.
WP 5.7 beta 3. Gutenberg plugin not activated.

One can directly click into the contents of the Reusable block. Making changes easy to accomplish. When a change has been made a dot is seen in the Publish button.

To save the Reusable block one needs to click the Publish button. If the checkbox next to the reusable block is not selected one can not move on in the Publish process.

Improving the save feature:
#28931

I do think there also should be some kind of lock (earlier we had the edit button) so one can not easily select the contents inside a reusable block. As one might want to only adjust the location and alignment of the reusable block on each page one uses it in, and not so often adjust the contents inside of it.

Improvements to Reusable block tracking issue:
#27890

[ranthonysteele]

Part of the usefulness of the reusable blocks was the ability to explode said blocks back down into base elements, such as code blocks and text strings and whatever. The ability to take pieces out of the reusable block has changed along with the editability of the blocks, and the dot next to the publish button stays present even if I completely remove the reusable block from the document being edited, because I have to change the block in question in order to be able to remove it. (comment continues on my blog https://ranthonyings.com/2021/02/gutenberg-editor-bug/ I've already written it all out there.)

[paaljoachim]

Hey @ranthonysteele Anthony

Can you create a new bug issue for this?
"...dot next to the publish button stays present even if I completely remove the reusable block from the document being edited, because I have to change the block in question in order to be able to remove it."

Thanks!

[paaljoachim]

Hi @ranthonysteele

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

[ranthonysteele]

Thank you. I've barely been able to pay attention lately. I almost didn't bother to document the problem for myself and the blog. When I looked at the process for starting a bug report of my own and discovered the one cited, I was definitely not in the right frame of mind to be starting new bug reports. I appreciate your getting that done and letting me know. <https://about.me/ranthony?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=edit_panel&utm_content=thumb> RAnthony Steele about.me/ranthony <https://about.me/ranthony?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=edit_panel&utm_content=thumb> *"No facts are to me sacred; none are profane; I simply experiment, an endless seeker with no past at my back."* - Ralph Waldo Emerson

…

On Tue, Feb 23, 2021 at 2:12 PM Paal Joachim Romdahl < ***@***.***> wrote: Hi @ranthonysteele <https://github.com/ranthonysteele> I have made a few new issues for reusable blocks. GB29269 <#29269> GB29268 <#29268>, and GB29267 <#29267>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29178 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALASPUPVVX35LMRT5SI3EYDTAQD2JANCNFSM4X55RUUQ> .

[paaljoachim]

Just give it a breather and wait a few more days. Then fill in information such as.
WordPress and Gutenberg plugin version and test with a default theme such as Twenty Twenty One.
Write down the steps. Then ignore the rest. The important part is that I understand each step you did. Then I can test and fill out more information where it is needed. If you'd like you can just add the steps here in this issue.
(I will close the issue in a few days anyway.)

[kristarella]

+1 for keeping some kind of lock on reusable blocks

[hrkhal]

I do think there also should be some kind of lock (earlier we had the edit button) so one can not easily select the contents inside a reusable block. As one might want to only adjust the location and alignment of the reusable block on each page one uses it in, and not so often adjust the contents inside of it.

@paaljoachim I agree. Accidental edits are far too easy with the changes surfaced in 5.7. Users work on auto pilot and even though there is a checkbox for relating to the reusable block they will sometimes steam ahead and save everything.

This inevitably leads to mistakes, confusion and uncertainty in enterprise/team settings.

[paaljoachim]

A couple of issues surrounding the new Reusable block feature.

1. An easier save method. Being able to discard a save. Explorations here:
   FSE: Create more robust autosaving including UI #29577 (comment)

2. A click through method. When clicking a reusable block it selects the parent container (Reusable block) and not one of the inner blocks. Explorations here: Reusable blocks and Template parts – try a click-through-to-edit-children UX pattern #29337

[Julianoe]

Is there an open issue about the icon choice. How can one understand that this icon is doing this action without hovering it to read the tooltip? Show this to non-technical users or not very familiar with the editor and they will either think it's a copy/duplicate button or not even know what it does. I've had several calls about this from end-users.

[ranthonysteele]

Yes. I thought it meant duplicate myself. Perhaps a box with rays coming out instead? (Explode) explode is what you call reducing CAD blocks to their simple constructs. In Autocad the blocks are drawings in themselves, just as the reusable blocks are documents in themselves. Which reminds me. Reusable blocks should be an editing choice from the side menu, so that you can easily find them to add or edit them. R. Anthony Steele (sent from my mobile device)

…

On Sun, Mar 28, 2021, 2:41 PM Julien G. ***@***.***> wrote: Is there an open issue about the icon choice. How can one understand that this icon is doing this action without hovering it to read the tooltip? Show this to non-technical users or not very familiar with the editor and they will either think it's a copy/duplicate button or not even know what it does. I've had several calls about this from end-users. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29178 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALASPULUHQHUWPRCN7ECBA3TF6IAPANCNFSM4X55RUUQ> .

[gizmo2501]

Reusable blocks have definitely become more difficult to use, not easier.

It’s now incredibly hard to select a reusable block and move it around a page as one unit. When you insert a reusable block with 5.7, you can now select individual elements of it without clicking “edit reusable block” like before 5.7. But it is so hard to select the whole block because of this. The “select parent” icon hardly ever shows (sidenote: I don’t know why WordPress insist on having these icons as ones that pop-up instead of consistently being on the top toolbar, because they often do not appear).

On top of this, the new way reusable blocks save when you save a page is prone to errors, as well as not being as useful. With the old setup, you chose if you wanted to edit a block and then save over the reusable block it came from (thus changing all other uses in all other pages) or create a new one (thus not affecting other uses in other pages). Now, unless you remember to UNTICK the save option, it will overwrite all previous instances of that reusable block. That is absolutely NOT useful. You often make changes to a reusable block for that specific page, and don’t want to overwrite other instances of it that are on other pages. The default should be unticked, or, ideally, go back to the old way of handling reusable blocks.

Before 5.7, the great use of reusable blocks really came from two things: 1. being able to insert common elements and then choose "convert to regular blocks" and edit them just for that page, and 2., being able to insert common elements and, if desired, edit one instance and change all other instances of them on all other pages that feature it. I feel like number 1. has been completely forgotten about, and number 2. is pretty much the default because of choosing to save reusable blocks when you save a page, which isn't always desired

In any case, the new way of doing things is VERY unintuitive and is unclear what you are doing when editing a block or saving one - am I just changing this page's use or all of them? Who knows?

I really hope this can be reverted back to the pre-5.7 way of handling reusable blocks.

[truetonegroup]

Regarding @gizmo2501 ...

Before 5.7, the great use of reusable blocks really came from two things: 1. being able to insert common elements and then choose "convert to regular blocks" and edit them just for that page ... I feel like number 1. has been completely forgotten about

The "convert to regular blocks" option is a crucial feature for how I have organized my entire site and would love to have to back.

Furthermore, 5.7 won't let me publish a page if I edit the reusable block unless I also save it - even when that is absolutely not what I want to do. I edited on this post it for the sole reason that I don't want it to be the revised reusable block for the whole site. Now I can't continue without going out of my way to make the site management more difficult.

[gizmo2501]

Regarding @gizmo2501 ...

Before 5.7, the great use of reusable blocks really came from two things: 1. being able to insert common elements and then choose "convert to regular blocks" and edit them just for that page ... I feel like number 1. has been completely forgotten about

The "convert to regular blocks" option is a crucial feature for how I have organized my entire site and would love to have to back.

Furthermore, 5.7 won't let me publish a page if I edit the reusable block unless I also save it - even when that is absolutely not what I want to do. I edited on this post it for the sole reason that I don't want it to be the revised reusable block for the whole site. Now I can't continue without going out of my way to make the site management more difficult.

Yes, this is a massive problem. I really hope we can get the old way back - "convert to regular blocks" if you want to change it just for that page. Otherwise, any changes you make to it will apply to everywhere it has been used without being converted. It makes a lot more sense than the new way.

Also, we really need a better way of getting to the reusable blocks page, rather than having to start a new post, insert blocks, then go to "manage reusable blocks".

[NewYorkerLaura]

HI All,

Adding to the discussion here. This is a MASSVIE UX issue. It essentially renders the block as non-functional.

See attached video explaining. Literally rolling back sites to 5.6.3 to avoid this nightmare.

https://trainingvideoslaura.s3.amazonaws.com/reusable+block+not+working+on+PELC.mp4

[paaljoachim]

Hello everyone.
An update. Selecting some comments from above:

"It’s now incredibly hard to select a reusable block and move it around a page as one unit. When you insert a reusable block with 5.7, you can now select individual elements of it without clicking “edit reusable block” like before 5.7......"

"On top of this, the new way reusable blocks save when you save a page is prone to errors, as well as not being as useful."

"5.7 won't let me publish a page if I edit the reusable block unless I also save it - even when that is absolutely not what I want to do."

---

As I began this issue. I know the pains of accidentally selecting the inside of a Reusable block when I meant to select the main Reusable block. I also know the pains of not wanting to save a change but being forced to because of the new save method.

1. As mentioned the PR for click-through approach for Reusable blocks. Click the Reusable blocks and have the parent container (Reusable block) selected. Try clickthrough to edit template part children. #30156

2. Regarding easier save method for Reusable blocks. That is being explored. Show save button in the Reusable Block toolbar if there are changes #29871 (comment)

I am using WordPress 5.7.1. Twenty Twenty One theme. Gutenberg plugin 10.4.1.

Having selected 3 blocks. Clicking the 3 dots menu. Then "Add to Reusable blocks". This brings up the "Create Reusable block" modal.

Deactivating Gutenberg.
Creating a Reusable block automatically gives it the name "Untitled Reusable Block". Go to the sidebar and notice the Name field. Rename the "Untitled Reusable Block" to something else then click Publish/Update button. Then Save and the Reusable block now has another name.

1- Renaming the Reusable block through the sidebar Reusable block settings.

Hello Laura. I followed your procedure. (I usually do not place blocks in a group before adding these to a Reusable block though.)

Creating-Reusable-block-then-renaming.mp4

Converting Reusable block to regular blocks:

---

[NewYorkerLaura]

Oh boy, seeing this now. I'm primarily a content creator and YUCK, SUPER YUCK....HAVE I MENTIONED YUCK!?!?!?!

Who wants to got to the sidebar for what is basic functionality. To me the sidebar is gravy, cool extra features, but the basics that you want every time are on the toolbar right above. In other words in a paragraph, header block you can bold, italic, change color these are common basics. The items folks are going to want at their fingertips.

I can't say this strongly enough, THERE IS NO UNIVERSE IN WHICH I WANT AN UNTITLED REUSABLE BLOCK>. It's not helpful on any level. It totally breaks workflow. This is horrendous UX. I need at my fingertips that ability to name, edit it, break it from the block. Forcing me to the sidebar to rename is not great UX and instantly breaks workflow and concentration.

[NewYorkerLaura]

Also as to why to throw in a group, it's a way to guarantee you have it all. I find if you don't do to that way it's really easy to accidentally leave images behind and not realize it. You know right away if you've got it all if it's in a group.

[paaljoachim]

Hello everyone.

Another update: I have made a new Reusable block revision issue. I have added videos and a prototype made in Figma.
Do give feedback.
#31163

[Julianoe]

@paaljoachim thx for the work, I think this proposition you made solves multiple issues that were present in the Reusable block UX, including breaking up the Reusable block, renaming, etc.

[paaljoachim]

Thanks @Julianoe Julian.
It is a big change I suggested. In general it is easier for a project to go with incremental changes which I am also looking at.
The point is atleast to make Reusable blocks easier to use for everyone.

[paaljoachim]

I went ahead and recreated this issue:
(To make it easier to figure out one of two methods in how to convert a Reusable block back to regular blocks.)

Reusable block: Add "Convert to regular blocks" in the ellipsis drop down.
#32217

[cpsyctc]

I have been advised by gizmo2501 to put my comments that are in https://wordpress.org/support/topic/5-7-reusable-blocks-are-a-backwards-step-2/#post-14552579 here ... so I am.

"I am deeply frustrated by reusable blocks. The idea is clearly excellent but my experience, in both 5.7.1 and 5.7.2 is that, at least for what I want to do, that they are fundamentally broken and I suspect that is because the design is fundamentally misconceived. I have a pages that are for chapters of a book and it seemed a brilliant option to create a “navigation block” at the bottom of each that would be table of three columns: previous | book overview | next with small font and different background colour from the rest of the page. I would insert that into the bottom of each page, convert it from reusable to ordinary, add the correct links to “previous” and “next” so that they would jump to the preceding chapter and next chapter. Seemed perfect use for reusable blocks and would save me an hour or two that it would take me to build the table for each page.

What I get is a total mess: generally WP isn’t offering the option to convert to ordinary block, if you want to manage reusable blocks you lose changes in your page. I suspect some of the problems may be corner cases of using a table in a reusable block but surely we need blocks as a full heading on the dashboard menu so we can edit reusable blocks and manage them quite separately from the pages and the saving of pages and of their reusable blocks needs to be rewritten so that it correctly separates the two quite distinct saves. Surely at that point it would be wise to prompt “If you save this block it will update all other uses of it: maybe you want to convert it to an ordinary block?” and offer a Y/N option there. That would have saved me hours of mess."

[paaljoachim]

Please check out these Pull Requests:

Add Reusable block save button, snackbar on save and Welcome Guide
#32464

Add lock feature for Reusable Blocks to protect inner blocks
#32710

[gizmo2501]

Please check out these Pull Requests:

Add Reusable block save button, snackbar on save and Welcome Guide
#32464

Add lock feature for Reusable Blocks to protect inner blocks
#32710

Those look great, thanks for that.

One thing I am not clear on - is there/will there still be an option to convert a reusable block to regular blocks, so that any changes made do not overwrite other instances of the reusable block, and, likewise, any changes to what was that reusable block would not affect it (as it would have been converted to regular blocks)?

Essentially so we can use reusable blocks like a quick template that can then be edited on an individual basis (which was easy to do before 5.7).

[paaljoachim]

In WP 5.7 without the Gutenberg plugin activated:
The icon seen in the toolbar that looks like a duplicate icon is actually the Convert to regular blocks icon.

Not obvious at all. That is why I got this PR merged:
Add Convert to regular Blocks button to ellipsis Dropdown.
#32310

and also have this issue:
I have also added this issue to switch the current icon to a more obvious symbolic meaning icon or to instead use a text button:
Reusable block: Replace "Convert to regular blocks" icon
#32586

Btw I collected a lot of PR's and issues here:
https://core.trac.wordpress.org/ticket/52779#comment:33

I would suggest visiting the various PR's/issues and adding comments directly to these.

[arnemulder]

I noticed this change in the WP core. It's possible to edit blocks inside a reusable content block without even knowing they are part of a reusable content block. This should definitively be a lot harder / impossible to do in page. With multiple users on a website the current way of handling the reusable content block is a nightmare.

[paaljoachim]

Hi Arne @arnemulder

One mini protection has been merged. A click through approach. This means that the first click of the Reusable block selects the parent container (Reusable block) and not the inner content. Check the video here in the comment I made: #31109 (comment)
One can also test out the approach in the latest Gutenberg plugin 10.9.1.

There is also an issue for adding a lock to the Reusable block toolbar in creating a stronger protection of the inner content. Where the user needs to deliberately click the lock to unlock the the inner content to be able to edit it.
#32461

I suggest that you leave a response in the above issue or Pull Request attached to it.

[paaljoachim]

An update.
I will suggest that people check out the video of a Save button in the Reusable block toolbar and give feedback. The PR is almost ready to be merged, so now is the time to give feedback for any last minute adjustments.
#32464 (comment)

[thesunshade]

I noticed this change in the WP core. It's possible to edit blocks inside a reusable content block without even knowing they are part of a reusable content block. This should definitively be a lot harder / impossible to do in page. With multiple users on a website the current way of handling the reusable content block is a nightmare.

This is exactly what I came here to say. Even in 5.8 it is still far to easy to edit the contents of a reusable block unintentionally.

[paaljoachim]

An update.

George @Mamaduka is working on a lock mechanism for Reusable blocks in this PR:
#39950

Check it out!

[jordesign]

It's been a little over 2 years since the main discussion on this issue. In that time we've switched to Synced Patterns - and many of the issues surfaced and discussed here have either been resolved, or the current state is different enough that it would benefit from fresh discussion.

Accordingly I'm going to close this issue - and a new one can be opened for future discussion/issues.