[wp-trac] [WordPress Trac] #38050: Replace formatselect with styleselect

[WordPress Trac]

#38050: Replace formatselect with styleselect
-------------------------+-----------------------------
 Reporter:  mrwweb       |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Editor       |    Version:
 Severity:  normal       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 Forking a proposal from #27159 where semantic formatting and text color
 are deeply at odds... In that ticket, `formatselect` will move to the
 first position in the top row of the editor '''to encourage semantic
 formatting'''.

 '''I propose the `styleselect` menu replace `formatselect` since it is
 much more flexible and can implement custom CSS-class-driven styles.'''
 `styleselect` in WordPress doesn't seem very well known, but is documented
 in the Codex: [https://codex.wordpress.org/TinyMCE_Custom_Styles TinyMCE
 Custom Styles].

 An example of a custom class (in an optional submenu) can be seen from
 [https://wordpress.org/plugins/mrw-web-design-simple-tinymce/ this
 plugin]:

 [[Image(https://ps.w.org/mrw-web-design-simple-
 tinymce/assets/screenshot-2.png?rev=1116096)]]

 By using `styleselect`, theme and plugin authors could then implement
 custom classes that are applied via the editor. This would work great for
 basic content formatting CSS classes like pull quotes, intro text,
 disclaimers, warnings, and '''''link buttons''''' !!!!!!

 WordPress 4.7 feels like a great time to do this for two reasons:

 1. If #27159 can have enough momentum to remove font color from the
 editor, creating custom classes with `styleselect` can be the official New
 and Improved way for styling text.
 1. [https://make.wordpress.org/core/2016/09/09/say-hello-to-twenty-
 seventeen-%F0%9F%91%8B%F0%9F%8F%BD/ Twenty Seventeen] is planned to have a
 pull quote style that could show off this feature. I'd love to see a
 button style added as well to show this off even more. (cc: @melchoyce
 @laurelfulford @davidakennedy).

 In the future, I could even see the Theme Review Team adopting a set of
 recommending classes to handle those common ''semantic'' text styles given
 as examples above.

 Finally, using `styleselect` really forces theme authors to also implement
 `editor-style.css` which is a seriously underutilized file that
 drastically improves the WordPress writing experience.

 cc: @hugobaeta

 ''I'm hoping to have a quick concept plugin up in a day or two for people
 to try this out themselves.''

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38050>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform