More intuitive "Kitchen Sink" for TinyMCE

[kungtiger]

I am administrating three WordPress pages.
Every time I deployed it to the client, they told me, that they are missing, in their view, essential formatting options while authoring a post or a page.
After closer inspection it turned out that the button for showing/hiding more options is not intuitive.

I would suggest a small bar underneath the main toolbar which on click toggles more formatting options:

What do you think?

[melchoyce]

I agree that the icon isn't very intuitive. I've attached two additional ideas that might help clarify how to access additional formatting tools: tinymce-more.png​ and tinymce-more-2.png​.

[ahansson89]

I think this is would be a great improvement!

[kungtiger]

@melchoyce modifications would not involve a too big a change in terms of HTML.
Yet I do not reckon it enough since its still a button like all the others.
There is no clear and intuitive distinction between a button involving formatting and one for UX.
Preferably: the button toggling fullscreen is clearly set apart and placed under those tabs switching from WYSIWYG to HTML.
It's simply a matter of replacing the icon and adding a float to left or right.

[iseulde]

Totally agree that the icon is not intuitive. I like the dots. I don't really like making the toolbar bigger for this.
I'd also try to find a different description. "Toolbar toggle" doesn't tell me much. Does it make the toolbar disappear? "Toggling" is also such a typical computer term. I'm not actually suggesting this exact description, but "More buttons!" would tell me much... more.

[SergeyBiryukov]

"More" has a strong association with the <!--more--> tag in my head :)

I like the second one (with the dots).

[melchoyce]

Replying to kungtiger:

@melchoyce modifications would not involve a too big a change in terms of HTML.
Yet I do not reckon it enough since its still a button like all the others.
There is no clear and intuitive distinction between a button involving formatting and one for UX.
Preferably: the button toggling fullscreen is clearly set apart and placed under those tabs switching from WYSIWYG to HTML.
It's simply a matter of replacing the icon and adding a float to left or right.

That's a very good point. Having an icon to open up a second row of tools right next to formatting is likely another reason people struggle to discover the kitchen sink toggle.

I like the simplicity version, but I'm worried it might still be unclear. I think it might be worth getting some user feedback. I'll try hacking together a short a/b survey.

Replying to iseulde:

I'd also try to find a different description. "Toolbar toggle" doesn't tell me much. Does it make the toolbar disappear? "Toggling" is also such a typical computer term. I'm not actually suggesting this exact description, but "More buttons!" would tell me much... more.

Agreed. "More Options" might not be a bad description.

Replying to SergeyBiryukov:

"More" has a strong association with the <!--more--> tag in my head :)

I didn't even think of that. Definitely not "More," then. :)

tinymce-more-3.png​ takes the ••• version and aligns it to the right, next to the DFW toggle.

[toscho]

I don’t think that three dots are very intuitive. It looks like you can insert an ellipsis.

The typical "expand" symbol are either small plus sign that changes to minus in expanded status, or a triangle/arrow (▸) pointing to the right in closed status and down (▾) in open status.

Both are placed on the very left position in RTL contexts. Could this work?

[kungtiger]

Replying to toscho:

The typical "expand" symbol are either small plus sign that changes to minus in expanded status, or a triangle/arrow (▸) pointing to the right in closed status and down (▾) in open status.

I would not choose a plus/minus symbol as there is already a "Horizontal Line" option.

[MikeHansenMe]

I am a fan of the arrow next to dfw icon. I think the biggest issue is the placement and not the icon itself. Even the original icon on the right would be a huge improvement.

[valendesigns]

+1 for moving the original icon to the right.

[Stagger Lee]

"More" is not so good, reminds of excerpts functions and can confuse beginners.
There is no better icon in Dashicons. Maybe to check Font Awesome icons and use one of theirs as new one in Dashicons.

Maybe "plus", "minus" (inside grey circle) as standard accordion type are good choice. Icon as it is now me personally allways reminded on text formatting, dont know why.

[iseulde]

If we go for the dots, I think the button should stay where it is. The location tells you of what stuff you will get more. The dots should be next to the buttons that are relevant. I personally prefer the dots above any other solution so far.

@melchoyce, what are the results of the survey?

[melchoyce]

Survey results here: ​https://docs.google.com/spreadsheets/d/1jPNAvPKwM5Ut0dPVfHvbteWiBy66NQ-xVfo1ZTWn7OA/edit?usp=sharing

Haven't had a chance to really look at them yet, but I'll do that today.

[melchoyce]

And for reference, the images used for each option: ​https://cloudup.com/ciDqfU4xbeH

[folletto]

From the survey, with a rough counting, I see:

• Arrow: 14 understand - 3 misled (82%)
• Current: 9 understand - 16 misled (36%)
• Dots: 25 understand - 4 misled (86%)

Which tells me that either Dots or Arrow would be a definite improvement on the current icon. I feel this would be a simple and notable improvement that we could do. And of course, if then we come up with even better solutions, that's great, but I'd still do this icon change right now. ;)

[afercia]

Replying to iseulde:

If we go for the dots, I think the button should stay where it is.

+1 for this :)

[chriscct7]

With Gutenberg now in core as of 5.0, large scale changes to the now "old" classic editor are not really in scope anymore. Closing as wontfix.