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

[annezazu]

What problem does this address?

Similar to this https://github.com/WordPress/gutenberg/issues/47583 and this https://github.com/WordPress/gutenberg/issues/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 https://github.com/WordPress/gutenberg/discussions/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 https://github.com/WordPress/gutenberg/issues/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

[Mamaduka]

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

[ndiego]

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

[paaljoachim]

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]

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:

https://user-images.githubusercontent.com/846565/217841877-51b18035-40cf-42db-9e68-dc2bd5e48aac.mp4

[apeatling]

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]

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

[richtabor]

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]

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.

[glendaviesnz]

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.