Allow clicking the site editor frame to enter edit mode #47676
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
[Type] Enhancement
youknowriad
commented
Feb 2, 2023
| @@ -158,3 +158,7 @@ | |||
| box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); | |||
| } | |||
| } | |||
|
|
|||
| .edit-site-visual-editor__editor-canvas.is-canvas-view { | |||
| cursor: pointer; | |||
There was a problem hiding this comment.
For some reason, I don't see the cursor changing, I'm not sure I understand the reason. @jasmussen any idea?
youknowriad
added
the
Backport to WP 6.7 Beta/RC
|
Nice, this is working well.
Eventually, but not for this PR as I think it needs a little design, I think we want a tooltip that says "Click to edit Home template", something like that. But we should use the |
jasmussen
approved these changes
Feb 2, 2023
|
Size Change: +50 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
Yeah, this is what I tried with my style above but it's not working, I'm not sure exactly why. |
|
Not a code review: I think this is an improvement. It feels intuitive to click on the canvas. |
|
Flaky tests detected in 447b311. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4074231550
|
|
Looks like the iframe element don't support "cursor". You need to apply the style within the iframe which is harder :). @carolinan After speaking with Joen, I think they have some design tweaks in the works that go into this direction. |
|
Yeah the feedback around the edit button has been sufficient enough that it might be worth reconsidering it. One idea is to show an edit button next to each template, which could make much more sense. I hope one from the group can share a mockup to that effect soon! |
|
Turns out adding the cursor is not an easy task here and have some big implications, I'm going to leave this separate for now. The current PR will do. |
That's fine — as noted, I believe we will want to add edit buttons in context of each page or template instead of having a singular edit button at the top. In that vein, clicking the big site preview is more of an added secondary affordance. |
|
We can figure it out alongside the cursor, but a hover effect might be nice. One other thought, now that the frame acts as one big button, does the scrollability seem a bit unexpected? |
I think it's valuable to have, and it could even be an argumet for keeping the default cursor. A snackbar-esque tooltip could inform of the ability to click or even double click. Main point being, scrolling it is useful for the preview aspect, and clicking to edit can hopefully become a secondary thing next to explicit edit buttons in context of pages and templates. |
youknowriad
force-pushed
the
add/click-to-edit
branch
from
b389d3e
to
447b311
Compare
Mamaduka
added
the
Backport to Gutenberg RC
Mamaduka
pushed a commit
that referenced
this pull request
Feb 3, 2023
|
I just cherry-picked this PR to the release/15.1 branch to get it included in the next release: 228c2de |
Mamaduka
removed
Backport to Gutenberg RC
|
Great! Thank you! This will be helpful! |
24 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to #36667
What?
This PR simplifies the flows in the site editor by allowing users to click the "frame" to enter edit mode.
Testing Instructions
1- Open the site editor.
2- you should be able to tab and click the frame or just click using the mouse to enter edit mode.