Make it easier to insert a Reusable block as a standalone block (using the Reusable block as a template)

[ZebulanStanphill]

The issue

Reusable blocks are good for things like footers or headers. Or at least, they will be once Gutenberg gets to the template building stage.

But sometimes you do not want to have a globally-updating block reused in multiple places. Often, you just want a pre-made template that you can quickly insert and then modify for the post/page you are using it in.

Examples include a Container block with nested Paragraph and Button blocks used as a call-to-action template. You would not want all CTAs to be exactly the same, but you would want a quick template you could insert.

Now, you can technically already use Reusable blocks like this:

However, while this is nice, it is not very discoverable, and is kind of clunky. In order to use a Reusable block as a template, you have to convert it to a standalone block after you have already inserted. This feels a bit awkward, particularly in comparison to existing page builder plugins.

Proposed solution

I suggest that, upon clicking a Reusable block in the inserter, a pop-up/dropdown appears that allows you to choose whether to insert it as a global instance or as a standalone regular block.

Here is what this looks like for Reusable Parts in Oxygen:

[slimmilkduds]

This would really be great, I’m introducing more and more people to our inhouse Gutenberg project and this is one request that comes up very frequently (the other one being ”why can’t I make a template with a reusable block that uses columns without it breaking when I convert”)

[chrisvanpatten]

I have some ideas for this that I'd like to explore… leaving this as a note to remind myself to do this :)

[cecoates]

I found myself naturally trying to use blocks in this way.

What if it was a toggle switch instead, though. That way if you're the type of person who needs to add a lot of template type blocks, you don't have those extra clicks each time.

Global toggle on:

Blocks are inserted that when edited, update the reusable block.

Global toggle off:

Blocks are inserted into posts, editable, and the changes aren't saved back to the reusable block.

[JiveDig]

Coming from the discussion on a Section block, this makes so much sense and would be an amazing part of Gutenberg core.

[noisysocks]

This touches on some of the themes that we'll be exploring as part of Phase 2.

[Orlandster]

I like the idea of global and local reusable block instances. Any update on this particular feature?

[starxedsteph]

I found myself naturally trying to use blocks in this way.

I had the same expectation initially.

Reusable template blocks would be a huge time saver for my team when writing complicated posts that have one of a few set templates each time.

[Orlandster]

@noisysocks Some update on this one would be great! It's not in the Phase 2 project so far.

[noisysocks]

This isn't a priority for Phase 2 or the current WordPress roadmap.

[noisysocks]

However, while this is nice, it is not very discoverable, and is kind of clunky. In order to use a Reusable block as a template, you have to convert it to a standalone block after you have already inserted. This feels a bit awkward, particularly in comparison to existing page builder plugins.

Perhaps a simpler change we could make here is to improve this flow by making Convert to Regular Block a more primary action in the interface? For example, we could move it to the toolbar as a new Detach button:

Some attached / not attached iconography on this button might aid with understanding.

What do you think, @mapk?

[slimmilkduds]

@noisysocks I think what you are suggesting would be a improvement for sure! I would prefer an option when you import the block but this would certainly be better than nothing.

[mapk]

@michelleweber and @obi2020 It appears "Detach" is the way to go. Do you think we need the extra language of "Detach from reusable block" or "Detach block"? Or can we simply use the one word, "Detach"?

Would love your thoughts here!

[michelleweber]

I think this is a new enough action that the additional detail is useful. I'd opt for the longer, more descriptive option here.

[mapk]

@noisysocks let's try using "Detach block" and see if that's clear enough. If we just had a cool name for reusable blocks, like "symbols" or something, than we can use that one word. Oh well.

[colinduwe]

I'll echo the feedback of others that I expected reusable blocks to be reusable templates of pre-configured sets of blocks. Maybe the change needs to happen when the user creates the re-usable block.
Click "Add to Reusable Blocks"
Enter a name
Set a radio: Reusable Template / Global Block

That seems easier for a less-trained content writer because they can use the "Foobar" reusable block just like a paragraph block.

[talldan]

Thinking aloud, I was wondering if there might be a printing analogy:

• "Stamp Blocks"
• "Imprint Blocks"
• "Paint Blocks"

Not sure though, might be a bit crazy and I still don't think it accurately describes the process, but thought I'd share just in case it leads to other ideas.

[ZebulanStanphill]

@talldan I really doubt the printing analogy would be easily explainable to the average user.

I recently had an idea: perhaps a toolbar button to detach a block from the reusable instance would make things easier? It would make the action more visible compared to hiding it in the More options menu.

[phpbits]

@ZebulanStanphill You can use EditorsKit plugin which is free on the plugin directory. I've recently added a toolbar option to easily convert reusable block to regular blocks.

[mapk]

When I see it in play, I'm liking "convert" as a word to use. "Detach" does feel a lot more messy.

[talldan]

I closed #18814 as a duplicate, but that issue also had the suggestion of duplicating reusable blocks in addition to detaching them as something that would be quite useful. The use case was creating variations of existing reusable blocks.

[noisysocks]

It's worth noting that a Reusable Block which, when selected, inserts a copy of Reusable Block and not a core/block is exactly what a Block Pattern is. There may be an opportunity to fuse these two concepts (see #21080 (comment)).

For now, moving Convert to Regular Block from the More options menu to the Reusable Block toolbar as per #8403 (comment) is a good first step and is sufficient for closing this issue.

[youknowriad]

It seems like this issue means: "making reusable blocks behave as patterns". While there's value in that, the confusion with block patterns will become more important. It can also be understood as "Add a way to persist custom patterns" (and there are already plugins for that).

[ZebulanStanphill]

When I created this issue, block patterns didn't exist yet.

The difference between a reusable block and a block pattern is simply that one is shared-instance, and the other is just a template that is cloned upon use. But other than that, they're really not that different at all.

However, one thing that is notably missing from block patterns is the ability for the user to create their own. Right now, users have to use reusable blocks as a stand-in for block patterns since they can create reusable blocks but not block patterns.

Is there an open issue about allowing users to create their own patterns?

[skorasaurus]

@ZebulanStanphill not sure if there is an issue, but in the absence of a UX; I've been using https://github.com/justintadlock/block-pattern-builder to make them.

[ZebulanStanphill]

I've begun work on implementing this change. My first step is a refactor + code quality PR for one of the involved components so that the PR that implements the desired change can be smaller in size/scope: #24015.

[ZebulanStanphill]

The PR mentioned in my previous comment has now been merged, so I've created #24066 to close this issue. 😄