Try: Swap pencil icon for drawer icon in template details panel #54190
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
jameskoster
added
Needs Design Feedback
|
Warning: Type of PR label error To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. |
|
Size Change: +215 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in e37d455. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6085638309
|
|
I see the intent, but I don't know that "Close sidebar & edit" is going to be better than simply "Edit", which would also be inclusive of mobile where this wouldn't be a sidebar that closes. |
Agree. What about a "Edit" button? 
|
Just chiming in that I've seen this feedback as well with the FSE Outreach Program. I'd like to see this iterated upon and am glad to see this PR. |
|
I think we can find a better edit icon, but I would avoid the "Edit" button label, we had that in earlier mockups and it does not scale to the detail pages that feature both ellipses, edit icons, and .. what was the third? |
|
I can see that the Pencil icon can be misunderstood, but I also feel the Sidebar icon is even more confusing if the action is 'edit this template'. As it's the most important task for the template imo using the text button 'Edit' feels appropriate as it is not 100% clear that and how a template can be edited. I have seen that customized Templates do have the Actions icon, so could it also be possible to use that and create a list of possible tasks like edit, clear customizations etc. and have an icon in front of each one. Similar to the screenshot below from Notion? 
|
That might be worth a try. |
|
I updated the PR to move the edit action to the ellipsis as suggested. edit.mp4I'm not sure how I feel about the reduced prominence in practise, and there's another drawback – theme templates only have a single action which makes the dropdown feel superfluous: 
|
|
Appreciate the effort. I personally think it's too early still to remove the edit button, or to put it in the menu. |
|
Yeah, we're running out of options... Overall I think I prefer the text button. The scalability issues can potentially be reduced by using the |
|
What about the smaller edit icon? Without the __ under the pencil, perhaps it's less "Edit title". |
|
Smaller text button: 
The alignment is a bit strange due to the funky metrics within this panel. I don't love it.
I suspect that will produce the same vibe but please feel free to try/commit. Though I noticed that small pencil isn't published, so we'll need to add it. It seems |
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.
What?
In the template details panel there is an icon button (
pencil) which invokes the full-screen editor on click. This PR replacespencilwithdrawerLeft/drawerRight(according tois_RTL()).Why?
I've seen feedback that the pencil icon looks like a 'rename' affordance for the title.
Testing Instructions
Before
After
I'm not sure how successful this is so I've only updated the template details panel for now. Perhaps there are other solutions we might consider. What do y'all think?