Make WordPress Core

Opened 8 years ago

Closed 5 years ago

#38050 closed enhancement (wontfix)

Replace formatselect with styleselect in TinyMCE

Reported by: mrwweb's profile mrwweb Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: Cc:


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.

Attachments (1) (3.4 KB) - added by mrwweb 8 years ago.
Plugin to demo/test the styleselect

Download all attachments as: .zip

Change History (6)

#1 @mrwweb
8 years ago

  • Summary changed from Replace formatselect with styleselect to Replace formatselect with styleselect in TinyMCE

This ticket was mentioned in Slack in #core-editor by mrwweb. View the logs.

8 years ago

8 years ago

Plugin to demo/test the styleselect

#3 @mrwweb
8 years ago

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

This ticket was mentioned in Slack in #design by hugobaeta. View the logs.

8 years ago

#5 @desrosj
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.