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

Browse Mode: Consider adding animation to canvas on hover to highlight that it's editable by clicking #47656

Closed
annezazu opened this issue Feb 1, 2023 · 9 comments · Fixed by #48575
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@annezazu
Copy link
Contributor

annezazu commented Feb 1, 2023

What problem does this address?

Similar to this #47583 and this #47410, I am still hearing feedback from across the community that folks are confused by how to edit the templates and template parts. This was discussed at length in this prior discussion issue for design #45346

What is your proposed solution?

At this point, I think we need to consider one of the following for 6.2, depending on where #36667 lands:

  • A pointer highlighting the Edit button.
  • A double click to edit functionality when folks are clicking on the canvas.
  • A way to highlight or show the pointer after a certain number of clicks on the canvas (shake the edit button?! highlight it somehow?!).

Either way, the current experience remains a touch confusing and a shift in thinking that we should expect and plan for. @youknowriad and @WordPress/gutenberg-design

@annezazu annezazu added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Feb 1, 2023
@annezazu annezazu moved this to 🗣️ In discussion, needs decision in WordPress 6.2 Editor Tasks Feb 1, 2023
@Mamaduka
Copy link
Member

Mamaduka commented Feb 9, 2023

Clicking the canvas now will switch to the edit mode. See #47676.

@ndiego
Copy link
Member

ndiego commented Feb 9, 2023

@Mamaduka beat me to it. Yeah, clicking on the canvas allows you to edit the template now.

site-editor-editing-flow

@paaljoachim
Copy link
Contributor

In addition...
What about double clicking the currently selected template to have it open in Edit mode? Similar to double clicking a document on the Mac.

@jameskoster
Copy link
Contributor

Having the frame act as a big Edit button helps, but we need to add some kind of hover effect to indicate the interactivity. One idea would be to slightly scale the frame upwards which hints at the resultant behavior on click:

scale.mp4

@ndiego ndiego moved this from 🗣️ In discussion, needs decision to 📥 Todo in WordPress 6.2 Editor Tasks Feb 9, 2023
@apeatling
Copy link
Contributor

Since this is in todo now, is it agreed that the scale on hover that @jameskoster posted above is the way to go? It seems good to me.

@jameskoster
Copy link
Contributor

If we can make the animation smooth then I think it's a good place to start.

@richtabor
Copy link
Member

Having the frame act as a big Edit button helps

I don't think we need a pointer for "Edit" as it's the secondary entry point — now that you can click on the frame to open it.

@annezazu
Copy link
Contributor Author

Agreed. At the same time, is there a way to add some light animation to indicate as much as shown above? I'll retitle this issue for now.

@annezazu annezazu changed the title Browse Mode: Consider adding a pointer or a way to highlight the edit button Browse Mode: Consider adding animation to canvas to highlight that it's editable by clicking Feb 23, 2023
@annezazu annezazu changed the title Browse Mode: Consider adding animation to canvas to highlight that it's editable by clicking Browse Mode: Consider adding animation to canvas on hover to highlight that it's editable by clicking Feb 23, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 28, 2023
@glendaviesnz glendaviesnz moved this from 📥 Todo to 🏗️ In Progress in WordPress 6.2 Editor Tasks Feb 28, 2023
@glendaviesnz
Copy link
Contributor

Have started work on this here, but I haven't used framer motion before, so I may be a bit slow as I learn it in the process - so feel free to jump in with your own fix if you are more familiar with this lib.

@github-project-automation github-project-automation bot moved this from 🏗️ In Progress to ✅ Done in WordPress 6.2 Editor Tasks Mar 3, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

9 participants