[wp-trac] [WordPress Trac] #27159: Removing TinyMCE buttons to improve user experience

[WordPress Trac]

#27159: Removing TinyMCE buttons to improve user experience
-------------------------------------------------+-------------------------
 Reporter:  hugobaeta                            |       Owner:
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  4.7
Component:  TinyMCE                              |     Version:  3.8
 Severity:  normal                               |  Resolution:
 Keywords:  needs-patch needs-screenshots        |     Focuses:  ui,
  needs-research needs-user-testing              |  administration
-------------------------------------------------+-------------------------

Comment (by mrwweb):

 Let's keep up the momentum here! I want to propose a conservative
 agreement milestone to serve as the new baseline and then offer a few more
 ambitious changes that I think we should strongly consider.


 ----



 '''Changeset 1: Apparent Consensus at the Moment'''

 - It seems that everyone agrees to move `formatselect` to first position
 and remove Heading 1.
 - Nearly everyone seems to agree that removing `alignjustify` makes sense
 since it looks bad, has uneven browser implementation, messes with themes,
 and is bad for readability.
 - Alignment buttons likely have high-enough usage that they need to stay
 in editor.

 Using those assumptions and then taking a few cues from the WordPress.com
 editor (which we're certainly hoping has some testing behind it and
 there's an argument for consistency), I got to this:

 [[Image(https://mrwweb.com/files/wp-trac/mrw-mce.png)]]

 The plugin file is also attached (`mrw-wp-test-tinymce-toolbars.php`).
 This isn't as drastic as I'd like, but it does start to make positive
 changes and I think we can all agree on it.


 ----


 '''Changeset 2: Additional Possible Changes with a lot of Support'''

 If not too many people disagree, I would propose we also make the
 following changes to the pictured editor:

 - Remove `underline`
 - Remove `forecolor` (font color)
 - Replace `formatselect` with `styleselect`. `styleselect` is way more
 powerful and provides a CSS-driven way for theme authors to easily
 register Custom CSS classes for content that can be styled with `editor-
 styles.css`. I think adding `styleselect` while removing `forecolor` could
 honestly be described as a replacement and improvement. Rather than people
 making text red, a theme can now offer a "Warning" style. You can see
 [https://wordpress.org/plugins/mrw-web-design-simple-tinymce/screenshots/
 screenshots of `styleselect` in use] from a plugin I maintain. This may be
 worth discussing with the theme team, as they could use it to allow people
 to style the pull quote design in Twenty Seventeen. Lots of themes come
 with custom classes (e.g., for link buttons) that could immediately
 benefit from this addition.


 ----


 '''Let's Go For It!

 We had initially talked about doing this in two phases, but it seems clear
 now that changing the editor multiple times will cause more confusion
 rather than less. I also think it's become clear we need to be
 conservative as there are lots of valid edge-cases with some of theme
 buttons (alignment and indenting in particular). That said, the point of
 this is to encourage better (semantic) formatting and reduce the use of
 problematic formatting (unsemantic, poor readability, poor usability, or
 bad theme-switching). I don't want to be reckless, but I still want to
 push for those second set of changes to push formatting forward in
 WordPress.

 (For responses, please make sure you at least address changeset one so we
 can quickly establish if that can serve as the baseline for remaining
 work.)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27159#comment:63>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform