Improve UX of synced pattern block toolbar

[richtabor]

An exploration into improving synced pattern block toolbars (and perhaps template parts).

We should move the name to the right of the .block-editor-block-toolbar__block-controls area, to be consistent with most block toolbars, where there's an icon, drag indicators, and movers, followed by a block's specific controls. By rendering the name as in trunk today, the block toolbar is unfamiliar when selecting a synced pattern.

I propose the pattern's name is the control to engage the synced pattern controls, in their own popover. It becomes much clearer what pattern I am going to edit, or reset, if I'm clearly selecting it.

Those controls within the popover would be:

• "Reset all changes" (when overrides are engaged).
• "Detach instance"
• "Edit main pattern"

I proposed them in this order as it represents the hierarchy of operations as follows:

• When you reset all changes, the overrides that have been modified on the selected pattern are reset back to the main pattern's values.
• Detaching a pattern is almost destructive, as it disconnects this instance of the pattern from the main pattern—but it still considers the currently selected pattern, in its current form.
• Editing the main pattern takes you away from this pattern, back to the main pattern this is derived from. It no longer deals with the selected pattern hierarchy-wise. I like "Edit main pattern" as the context helps you understand what this is.

Note that all of these controls exist today; I'm just proposing we consolidate them into one synced patterns controls area.

Proposed

Current

[jasmussen]

I could go either way on this one. The way things are today, this issue makes sense. At the same time, there's something strong in showing the block name next to the synced icon. Add to that, the transforms menu keeps being a menu that's underpolished and not living up to its potential. I wonder, is it that useful to be able to transform a synced block into a group (and detach in the process)? Couldn't the entire transforms menu be absorbed by the menu you're proposing here? It would require you to detach before you can transform, which seems to make sense.

[richtabor]

I wonder, is it that useful to be able to transform a synced block into a group (and detach in the process)?

I don't think so. I wouldn't think it'd be common to transform a synced pattern to another synced pattern, or group block. I'd even suggest we remove these here:

[annezazu]

I wonder, is it that useful to be able to transform a synced block into a group (and detach in the process)? Couldn't the entire transforms menu be absorbed by the menu you're proposing here?

I agree with Rich here. I think it's conflating ideas and not something wise to push. In my mind, transforms = block level & shuffle = pattern level. I think we could also remove transforms here for patterns. I can't imagine how it might work without content loss either (transform a pattern with a lot of content > columns).

My minor comment on the design itself is the copy for "main pattern". I'd stick to "Edit original pattern"/the original language in general. It's not my favorite but "main" carries some connotation with website building (ex: main content area).

[draganescu]

I wonder if the pattern name is required in the block toolbar?

I am in the boat with the suggestion to consolidate reset / detach / edit main in one dropdown but I dislike that unlike anywhere else i have to click the block name to see this.

Since we have other labeled actions (e.g. Replace) can't we find an action and relegate the name of the pattern to the inspector sidebar?

[richtabor]

How would you label the dropdown control?

[draganescu]

Good question 😄 - "Actions" or "Pattern" ... maybe?