Gutenberg: Implement toolbar buttons for text mode

Created on 28 Apr 2017  Â·  13Comments  Â·  Source: WordPress/gutenberg

About the editor text mode, currently (April 28th) the plugin displays a toolbar that visually mimics the "quicktags" buttons.

screen shot 2017-04-28 at 23 48 06

Given the presence of the "close tags" button, I'm guessing it's going to replicate also the quicktags functionalities.

None of the buttons works so far, that's perfectly understandable since the plugin is in a heavy development phase, so there's not so much to test. However, I'm wondering if replicating the current functionalities is a good idea in the first place.

Maybe worth considering removing most of them, also taking into consideration what emerged from the editor survey:

https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/

Do you use the markup buttons?
While a vast majority of respondents use the Text Editor, almost half never use the markup buttons.

47.2% No
34.9% Sometimes
17.9% Yes

Has this ever been discussed? Any plans I may have missed? Any new ideas of improvements planned?

Accessibility (a11y) Framework [Feature] Code Editor [Type] Question

Most helpful comment

We're creating a new programming language in a very real sense. Why not make the text view an IDE.

For basic editing it looks plain with a few small enhancements. Maybe we somehow indicate where the blocks are (poorly, for example, with colored backgrounds) and dim the block comments, etc… When someone accidentally mangles their blocks they will get an immediate visual response right there. We could even emphasize certain spans of text according to certain knowable properties of it from the parse.

For advanced editing we turn on syntax highlighting and error messages. This view would feel more at home to people with some coding skills and the error messages could provide a good environment for a developer/agency to go in and recover a messed up post.

All 13 comments

See also:
https://wordpress.slack.com/archives/core-editor/p1475103109000800

is it time to remove the Quicktags buttons from the Text editor?

Whether the Quicktags are going to stay or not, worth reminding any UI control should be properly labeled. Currently, just the content of the button is available to assistive technologies and in most of the cases, it doesn't help so much users as it's just i or b, etc.

For example, the plugin:
<button>ul</button>
vs. WP:
<input type="button" id="qt_content_ul" class="ed_button button button-small" aria-label="Bulleted list" value="ul">

No firm decision have been made yet.

Philosophically I'm leaning towards them staying. Back when we started on this adventure I did a little very anecdotal research on how people use the editor, and though not very many people used the HTML editor (did not ask specifically about quicktags), those that _did_ use it used it _all the time_ and were very, _very_ passionate about it.

Since we are doing such major changes to the editor, I feel like the text editor might serve as the one holdover from the old world, a 0,0,0 coordinate in a universe that's about to change a lot. And for that reason alone, I'm reluctant to rethink that too much.

those that _did_ use it used it _all the time_ and were _very, very_ passionate about it.

I'm one of those people. I agree that text mode mostly unchanged would be a stability point, but really, it's the only way I can see what's actually in the content and make it say exactly what I want. Don't remove features from the one tool I rely on.

I think no one wants to remove the text editor 🙂 it is also an a11y very important feature, since only a native textarea is really fully accessible. Just wondering about the buttons to insert opening/closing tags. They're hard to use, and very few uses them.

I was referring to the buttons, not the text editor. The very small sample of respondents to that survey had very few who used them. But as part of the stability thing, I think they should be left as is.

We're creating a new programming language in a very real sense. Why not make the text view an IDE.

For basic editing it looks plain with a few small enhancements. Maybe we somehow indicate where the blocks are (poorly, for example, with colored backgrounds) and dim the block comments, etc… When someone accidentally mangles their blocks they will get an immediate visual response right there. We could even emphasize certain spans of text according to certain knowable properties of it from the parse.

For advanced editing we turn on syntax highlighting and error messages. This view would feel more at home to people with some coding skills and the error messages could provide a good environment for a developer/agency to go in and recover a messed up post.

@jasmussen clearing from milestone as it'd be good to have only actionable tasks there that have been decided.

As of Gutenberg 2.0, it appears the Text Mode toolbar is still inoperable:

textmode

They've disappeared in the latest build I'm using a0e5933

Yes, we removed them because they were just dummies. That doesn't mean they can't still be built, just that it was misleading to have them when they didn't work.

Related: #4803

In the last versions, all the buttons were removed from the text mode. This issue can be closed. Worth opening a new one to consider to add a few buttons for the main functionalities related to authoring content (e.g. Insert Link and Add Media).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mhenrylucero picture mhenrylucero  Â·  3Comments

moorscode picture moorscode  Â·  3Comments

pfefferle picture pfefferle  Â·  3Comments

maddisondesigns picture maddisondesigns  Â·  3Comments

aduth picture aduth  Â·  3Comments