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.

Sign up for GitHub

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

Jump to bottom

Make it easier to select "Edit visually" when in "Edit as HTML" mode #30930

Closed
carolinan opened this issue Apr 17, 2021 · 4 comments
Closed

Make it easier to select "Edit visually" when in "Edit as HTML" mode #30930

carolinan opened this issue Apr 17, 2021 · 4 comments
Labels
[Feature] Blocks Overall functionality of blocks Needs Design Feedback Needs general design feedback. Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.

Comments

@carolinan
Copy link
Contributor

carolinan commented Apr 17, 2021 •
edited
Loading

What problem does this address?

After selecting the Edit as HTML option for a block, you have to open the 3 dot menu to find the Edit visually option, and this option does not have a keyboard shortcut.

The edit visually option is hidden under a menu

What is your proposed solution?

When in Edit as HTML mode, move the Edit visually option to the toolbar for easier and faster access.
This is not a design proposal, I just mocked it up in Photoshop quickly, but I mean something like this:

The edit visually option is placed in the block toolbar
@carolinan carolinan added the [Type] Enhancement A suggestion for improvement. label Apr 17, 2021
@carolinan
Copy link
Contributor Author

carolinan commented Apr 18, 2021 •
edited
Loading

It may also be a good idea to still show the information about which block your are editing.

@carolinan carolinan added [Feature] Blocks Overall functionality of blocks Needs Design Needs design efforts. labels Aug 8, 2021
@carolinan
Copy link
Contributor Author

carolinan commented Aug 8, 2021 •
edited
Loading

I wonder if this needs a designer? It would be good to have some UX opinions on this.

@carolinan carolinan changed the title Make it easier to select Edit visually when in Edit as HTML mode Make it easier to select "Edit visually" when in "Edit as HTML" mode Aug 8, 2021
@javierarce
Copy link
Contributor

This thing bugs me a lot too and fixing this issue would make switching between modes super easy, thanks for reporting it!

I agree with your solution, but I would put the "Edit visually" before the ellipsis button since that's the most common position.

@javierarce javierarce added Needs Design Feedback Needs general design feedback. Needs Dev Ready for, and needs developer efforts and removed Needs Design Needs design efforts. labels Jan 19, 2022
adambasa-dp added a commit to adambasa-dp/gutenberg that referenced this issue Jun 2, 2022
@adambasa-dp
WordPress#30930 - Make it easier to select "Edit visually" when in "E…
25b32d0 
…dit as HTML" mode
@adambasa-dp adambasa-dp mentioned this issue Jun 2, 2022
Merged
@adambasa-dp
Copy link
Contributor

@adamziel @carolinan Could you take a look at my PR, please?

adamziel added a commit that referenced this issue Jun 21, 2022
@adambasa-dp @adamziel @ZebulanStanphill
#30930 - Make it easier to select "Edit visually" when in "Edit as HT…
acf70c0 
…ML (#41516)

* #30930 -  Make it easier to select "Edit visually" when in "Edit as HTML" mode
* BlockVisuallyConvertButton name converted to BlockEditVisuallyButton
* title removed from the <ToolbarButton/> component
* code formatting fix
* Reversed buttons order
* divider between the button and the ellipsis
* Update packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js

Co-authored-by: Adam Zielinski <[email protected]>
Co-authored-by: Zebulan Stanphill <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] Blocks Overall functionality of blocks Needs Design Feedback Needs general design feedback. Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@javierarce @carolinan @adambasa-dp