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

Style Revisions: Remove the dropdown menu #55779

Closed
3 tasks
Tracked by #55776
apeatling opened this issue Nov 1, 2023 · 9 comments · Fixed by #56454
Closed
3 tasks
Tracked by #55776

Style Revisions: Remove the dropdown menu #55779

apeatling opened this issue Nov 1, 2023 · 9 comments · Fixed by #56454
Assignees
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@apeatling
Copy link
Contributor

apeatling commented Nov 1, 2023

We currently have a dropdown menu that contains two items, it feels unnecessary and redundant considering other buttons here have no dropdown:

Screenshot 2023-11-01 at 11 14 28 AM
We can move all of this information into the style revisions sidebar view.
  • Move the "Reset to defaults" action as a link under the intro text.
  • Move the revisions count from the menu to next to the title in the sidebar
  • Make sure the style revisions button is toggled on when it is selected

Here's my suggestion for how this could look:

Screenshot 2023-11-01 at 11 29 59 AM
@apeatling apeatling added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. labels Nov 1, 2023
@apeatling apeatling changed the title Move the reset out of the menu to the revisions view Style Revisions: Remove the dropdown menu Nov 1, 2023
@apeatling apeatling added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Nov 1, 2023
@richtabor
Copy link
Member

Move the "Reset to defaults" action as a link under the intro text.

We could put it in the styles vertical ellipsis menu, like we do for template resetting. And use the "Reset styles" copy, which matches what the command center uses (for styles and for templates).

CleanShot 2023-11-01 at 16 26 48

CleanShot 2023-11-01 at 16 28 41

@richtabor
Copy link
Member

Is there another way to get to style revisions? Wondering if we need that back arrow next to "Revisions", if the panel is toggled via the "clock" icon.

@apeatling
Copy link
Contributor Author

The back arrow is really awkward in its current state in trunk. It takes you back to the main global styles sidebar, but you don't get there with the reverse animation. I think we can remove it. I'm not aware of other ways to get here.

@apeatling
Copy link
Contributor Author

Should the last item "Default styles" in the revisions history also be called "Reset styles"? It's essentially the same action.

@richtabor
Copy link
Member

Should the last item "Default styles" in the revisions history also be called "Reset styles"? It's essentially the same action.

Good question. As everything else is a timeline event, it should probably be labeled as such too. It could be fine to have it be a time/date stamp with "{themeName} activated" even.

@richtabor
Copy link
Member

While we're at it (though a bit off topic), I don't think we need the "Apply" button and corresponding modal at the footer. It does the saving flow, but not the full deal, like you get when you hit "Save" in the header, or in the site editor sidebar.

If we do keep it, "Apply" should probably be "Save", and it should use the proper save modal. Though I think it'd be nice to remove the loose end, and rely on the existing save patterns (that are also stronger and less scary).

CleanShot 2023-11-01 at 17 02 39
CleanShot 2023-11-01 at 17 03 06

CleanShot 2023-11-01 at 17 03 46

@ramonjd
Copy link
Member

ramonjd commented Nov 5, 2023

While we're at it (though a bit off topic), I don't think we need the "Apply" button and corresponding modal at the footer. It does the saving flow, but not the full deal, like you get when you hit "Save" in the header, or in the site editor sidebar.

Clicking on a revision item provides a preview in the revisions window only.

The "Apply" button loads the revision into the current editor state and therefore the editor canvas, which is a separate entity and sits below the revisions window.

This separation is important as users can preview revisions before loading them into the editor, where the change counts as a document edit.

I'm hopeful there's an alternative UI or even different messaging that would improve the UX here. Perhaps there's a neat way to have two functions, that is, "apply without save" or "apply and save". 🤷🏻

I'm convinced that something will become obvious as we work through the ideas in #55776

If we do keep it, "Apply" should probably be "Save", and it should use the proper save modal. Though I think it'd be nice to remove the loose end, and rely on the existing save patterns (that are also stronger and less scary).

There was some testing around immediate saving in the initial PR.

The "Apply" button triggers a dirty state and therefore enables the Save button, and it also affords the user the opportunity to edit the revision changeset before committing it to save (and creating another revision entry).

The save flow contains other dirty entities as well, such as template edits. It's why the "Restore this revision" paradigm (load and save a single, historical state) of the WordPress code diff revisions.php page is tricky to migrate.

Another question we had in mind was, if the revisions panel did trigger a save flow, would we want the entire save flow, or limit the entities to global styles seeing as the revisions panel's explicit focus is global styles? Seems like that just complicates things. I'm not sure, but in my mind, the save flow belongs to the editor.

@ramonjd
Copy link
Member

ramonjd commented Nov 5, 2023

Just thinking more about this, maybe clicking "Apply" should close the revisions panel and take the user back to the editor (with the new changes applied)? Could that be an interim measure until we work out a better way?

Forget that, that's the way we already did it 🤦🏻 but it doesn't seem to do it all the time. I'll look into harmonizing it.

@apeatling
Copy link
Contributor Author

I'm working on this one 👍

@apeatling apeatling self-assigned this Nov 22, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Nov 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants