Color Picker Missing From WordPress 3.9

[hardeepasrani]

I just tested the WordPress 3.9 Beta 1 release, and found that Color Picker is missing from the TinyMCE 4.018 editor. You can check the below image:

[SergeyBiryukov]

Related: #23353

Looks like "More colors" button was removed in [26876]. Moving for review.

[iseulde]

This has been removed from TinyMCE. Might be possible to add with a plugin, but not sure if we should do that if we want to discourage the use of colours.

Related: #27159.

[iseulde]

Doesn't look like there is an official plugin for it, so we would have to build our own...

[hardeepasrani]

I really never used the color picker in my entire WordPress experience, but an average person loves color picker stuff. If these is an option to select color, there should be also one to pick a custom color.

[nacin]

It's possible we could shoehorn Iris into this, but I'm not terribly concerned about this for 3.9.

[samuelsidler]

While this is a regression from 3.8, we're not sure if we want to fix it at all. Either way, it's too late in the cycle to get into 3.9. If someone's interested in writing a TinyMCE plugin for this, we might consider it later, but still need to talk it through.

[hardeepasrani]

Yea, that's alright if you can't do this in time for the 3.9 release. But, there should be a color picker on a future release. I saw ​Iris & it looked freakin' awesome & I'd love to see it on the TinyMCE editor.

[jeremyfelt]

This may be a good candidate to turn into an enhancement once 3.9 ships.

[hardeepasrani]

This style of Iris color picker would look awesome with the TinyMCE & WordPress UI.

[ocean90]

#27692 was marked as a duplicate.

[azaozz]

If we end up doing this, best would be to use the OS native color picker: <input type="color" ...>. Works in Firefox, Chrome, Opera and Android, not yet in IE and Safari.

[ocean90]

#27862 was marked as a duplicate.

[SergeyBiryukov]

#27900 was marked as a duplicate.

[funkiplanet]

I'm an average WP user and not having the color picker is intensely disappointing.

[Shane73]

Why was the "more color" picker removed?

Is it coming back soon? Please say yes.

Having to code it in the text tab is time consuming and really taking a step back in the wrong direction.

[funkiplanet]

Replying to Shane73:

Why was the "more color" picker removed?

Is it coming back soon? Please say yes.

Having to code it in the text tab is time consuming and really taking a step back in the wrong direction.

Hear hear Shane73!!!

Please give us our color picker back WP.

[helen]

As noted in comments above, this was removed by TinyMCE (what we use for the visual editor), which is a separate project and community from WordPress. If somebody wants to take up the mantle and add back a color picker using the Iris library that we use in core elsewhere for UI and UX consistency, we can evaluate it from there.

[iseulde]

While I think the colour buttons should be removed from core (or hidden by default, but maintained), people who used this should be able to continue to do so.

I've put something together on GitHub using Iris, ready to be installed as a plugin, but I'm sure it's far from perfect and can be improved in a lot of ways. For example, I don't understand how this can be useful without being able to save custom colours.

I don't use this myself, so I'd be great if people who actually use this give feedback and contribute.

​https://github.com/avryl/tinymce-colorpicker/archive/master.zip

[hardeepasrani]

In my opinion, it's better than the previous one. Apart from color picker, there should be few more colors to pick from.

[azaozz]

Replying to avryl:

I don't understand how this can be useful without being able to save custom colours.

That's one of the reasons I think it is better to use the OS color picker with <input type="color">. It would also integrate better with the default TinyMCE picker.

On the other hand the plugin is quite good, you should definitely add it to the plugin repository.

Few notes:

• It's a bit unclear what happens after the user has selected a color by dragging the "handle". Would be good to have "OK" or "Apply" button.
• The tiny "color bar" under the icon in the button is intended to keep the last selected color value and apply it on clicking the button. It shouldn't change according to the current node's color.
• Thinking the "live preview" inside the editor while selecting a color/dragging the handle is not needed. The text where the color is being applied is usually selected at this time (blue background/white text). That makes the "live preview" invisible. It also seems to make dragging of the handle to lag. If you decide to keep it, it will need to be wrapped in editor.undoManager.transact() so it doesn't add new undo level on every color change.
• The CSS selectors need to be more specific so they don't override other instances of Iris.

[hardeepasrani]

Replying to azaozz:

I'm using Windows 7 with Firefox & <input type="color"> will just render a simple text field in my browser, so it won't work for all.

[azaozz]

Firefox will support that in the next version (29.0) coming out in about a week. And yes, this won't work in IE and Safari, but is "the best" way as it uses an UI the users are familiar with and gives many options for power users.

At some point all custom color pickers in WordPress will be replaced with that.

[hardeepasrani]

Replying to azaozz:

Firefox will support that in the next version (29.0) coming out in about a week.

Okay, it makes sense to me now. But then we would have to enter a message that they should use the latest version, right? Otherwise, most of the guys won't even know about it.

[iseulde]

Thinking the "live preview" inside the editor while selecting a color/dragging the handle is not needed. The text where the color is going to be applied is usually selected at this tile. That makes the "live preview" invisible. It also seems to make dragging of the handle to lag. If you decide to keep it, it will need to be wrapped in editor.undoManager.transact() so it doesn't add new undo level on every color change.

Good point, completely forgot about the undoManager. Together with your first point, it would make sense to remove the "preview" and apply the colour after selecting one.

The tiny "color bar" under the icon in the button is intended to keep the last selected color value and apply it on clicking the button. It shouldn't change according to the current node's color.

I've always found that confusing. When you put your cursor in a coloured node, I expect the colour to change. Right now putting your cursor in a coloured node updates the "saved colour", which you can then apply to uncoloured text. That way you can actually quickly switch between already used colours.

The CSS selectors need to be more specific so they don't override other instances of Iris.

Okay. :)

[iseulde]

That's one of the reasons I think it is better to use the OS color picker with <input type="color">. It would also integrate better with the default TinyMCE picker.

I wonder on which level saving custom colours would make sense: browser, user or blog?

[azaozz]

IMHO saving the custom colors in the OS (computer) covers all cases and makes it interchangeable with other applications.

[mikeoghia]

Avryl!! Your Plugin works wonderfully! It is exactly what I need to get my color (#) on my site. I also like how the more "basic" colors are easily available under the palette. Thank you! The only thing that is missing now is that it doesn't "auto-complete" it, so that I have to type it in or paste it each time. But, hey, that's a very minor inconvenience compared to having to do it in the code itself!

[iseulde]

I've submitted a WordPress.org plugin request so people can easily install this and get updates. I'll continue to improve this plugin on GitHub, add more colours, and add the ability to add custom colours per user. Please don't hesitate to send pull requests or report issues.

[Shane73]

Hi avryl,

You are an absolute champion.

Thanks so much for putting this together.

Works great.

If we ever happen to cross paths I owe you a beer, or two, or three...

Cheers,

Shane

[Musicalman]

Hi avryl,
Thank you for this plugin, custom colors are needed to match my branding and logos etc
Your a star!

[iseulde]

The plugin can now be found here: ​http://wordpress.org/plugins/tinymce-colorpicker/
and screenshots above.

I added a lot more default colours (inspired by Google Docs) and you can now choose custom colours with iris and save them per blog.

I could replace it partly with <input type="color" ... > for browsers that support it. Next version maybe. Lots of room for improvement. :)

[hardeepasrani]

DAMN! That's a hell of a plugin. I'm not a "color picker" guy at all, but that background color button still looks awesome to me :)

And speaking of <input type="color" ...>, I think Iris is better than the native color picker.

Replying to avryl:

The plugin can now be found here: ​http://wordpress.org/plugins/tinymce-colorpicker/
and screenshots above.

I added a lot more default colours (inspired by Google Docs) and you can now choose custom colours with iris and save them per blog.

I could replace it partly with <input type="color" ... > for browsers that support it. Next version maybe. Lots of room for improvement. :)

[catiakitahara]

Hi guys,

Now that avryl has done this awesome plugin (thank you very much), is there any new about if it's being integrated into core for the next release?
Thanks!

[iseulde]

Related: #28576

[SergeyBiryukov]

Related: #28939

[azaozz]

In 29214:

TinyMCE: add the 'colorpicker' and 'lists' plugins, fixes #28939, #27359.

[hardeepasrani]

Why the option to change milestone to 4.0 has been disabled for this ticket?

[iseulde]

When I add a custom colour, it's gone when I leave the page. It should probably save based on the user or blog.
I assume the previous colour picker didn't save the colours either, but that behaviour is really unexpected for me. If we keep the colour picker in core, we should at least save those colours.

[helen]

Replying to avryl:

I assume the previous colour picker didn't save the colours either, but that behaviour is really unexpected for me. If we keep the colour picker in core, we should at least save those colours.

Can you open a new ticket for that instead? I don't think we can realistically tackle that in 4.0.

[sleenmg]

Miss this and sure hope it is added back in. Sure I can change the code myself, but the original was so much faster. Will try the plugin but hate to keep adding plugins.

[hardeepasrani]

Replying to sleenmg:

Miss this and sure hope it is added back in. Sure I can change the code myself, but the original was so much faster. Will try the plugin but hate to keep adding plugins.

4.0 will come with TinyMCE 4.1 which has added the color picker back to the core :)