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

Confusing editor mode switching (Visual/Code Editor) #12374

Closed
webmandesign opened this issue Nov 27, 2018 · 9 comments
Closed

Confusing editor mode switching (Visual/Code Editor) #12374

webmandesign opened this issue Nov 27, 2018 · 9 comments
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback.
Milestone

Comments

@webmandesign
Copy link
Contributor

Description

Options to switch between "Visual Editor" and "Code Editor" mode are pretty confusing. They basically work like radio buttons, however, the checkmark icon sets expectation they would work the same way as, for example, the "Top Toolbar" option, which is basically a toggle button (a checkbox).

Expected behavior

Not sure whether "Visual Editor" option is even needed. Could there only be a "Code Editor" option that works like a toggle button?

Video

https://www.dropbox.com/s/aw2x03xjjwja1u3/gutenberg-editor-mode-switching.mp4

Additional context

@designsimply designsimply added General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback. labels Nov 27, 2018
@swissspidy
Copy link
Member

Not sure how well a toggle button would work accessibility-wise. Just so that it won‘t be forgotten.

@webmandesign
Copy link
Contributor Author

Yes, accessibility is also my concern.
But I'm coming from presumption that those already included toggle buttons ("Top Toolbar" option, for example) are accessible. So, implementing similar functionality for editor mode switcher shouldn't be a problem(?).

@karmatosed karmatosed added this to the Future: 5.1 milestone Nov 28, 2018
@mapk
Copy link
Contributor

mapk commented Apr 6, 2019

An additional benefit for keeping them as they are is it helps with terminology. If we eliminate the "Visual editor" choice, people begin to call it all sorts of things.

@Nobiuss
Copy link

Nobiuss commented Jun 20, 2019

Hi,

I understand the confusions about this because the look is the same and they don't act the same.
Maybe it is best if there would be some kind of a switch for the visual or code editor.
I will add a mockup for this, how it can look.

image (2)

Kind regards,
Kim

@afercia
Copy link
Contributor

afercia commented Jun 29, 2019

Worth reminding the "More" dropdown is an ARIA menu, and as such can contain exclusively items of type menuitem, menuitemcheckbox, menuitemradio.

@mapk
Copy link
Contributor

mapk commented Aug 13, 2019

I'm taking another look at how the Code Editor might work as a whole in this other issue:
#17017

Chances are, it will affect this issue too.

@youknowriad
Copy link
Contributor

Is this still an issue? As raised by @afercia The Menu is an aria menu that only contains menu items (with their keyboard interactions).

@webmandesign
Copy link
Contributor Author

Well, for me I can still see the issue simply from user experience perspective. But it's up to you guys what works best. I'd appreciate the toggle button or something similar, but if it's not implemented, I will deal with current state of the things :)

@youknowriad
Copy link
Contributor

I'm going to close this as works as intended. While I appreciate the opinion, we still need to make this good a11y wise and it seems that the dropdown being an aria menu is the way to go.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

No branches or pull requests

8 participants