Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve UX of synced pattern block toolbar #60303

Open
richtabor opened this issue Mar 29, 2024 · 4 comments
Open

Improve UX of synced pattern block toolbar #60303

richtabor opened this issue Mar 29, 2024 · 4 comments
Labels
[Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@richtabor
Copy link
Member

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

CleanShot 2024-03-29 at 11 36 37

Current

CleanShot 2024-03-29 at 11 43 05

@richtabor richtabor added [Type] Enhancement A suggestion for improvement. [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Design Feedback Needs general design feedback. labels Mar 29, 2024
@jasmussen
Copy link
Contributor

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
Copy link
Member Author

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:

CleanShot 2024-04-02 at 15 29 49

@annezazu
Copy link
Contributor

annezazu commented Apr 2, 2024

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
Copy link
Contributor

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants