Replace formatselect with styleselect in TinyMCE

[mrwweb]

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: ​TinyMCE Custom Styles.

An example of a custom class (in an optional submenu) can be seen from ​this plugin:

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.
2. ​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.

[mrwweb]

Plugin to demo/test the styleselect

[mrwweb]

I just uploaded a plugin to demo the `styleselect`. This plugin is intended for use alongside the ​Sequential theme.

Once installed, the first item in the TinyMCE toolbar is the "Style Select" instead of the "Format Select" which is used currently in WordPress. With the styleselect, you can turn [existing] links into Buttons (using classes that ship with Sequential) or add a custom "Warning Paragraph" style that comes with the plugin!

I've "patched" Sequential to have an editor style, but in theory the theme would ship with one and add the classes to the styleselect all by itself. However, this plugin also shows how a plugin could add to the list of styles available in the editor.

The modded editor also makes a couple other technically-unrelated tweaks that you can ignore or comment on in the appropriate ticket:

• Tweaks the editor buttons as proposed in #27159
• Tweaks headings as proposed in #38049

[desrosj]

Thanks for your work on this, @mrwweb!

If this is something you would still like to see, a PR on the ​Gutenberg GitHub repository is now the best place to discuss.

Since the Classic Editor is going to be preserved as is, I am going to close this out.