WordPress.org

Make WordPress Core

Opened 16 months ago

Closed 11 months ago

Last modified 11 months ago

#27359 closed enhancement (fixed)

Color Picker Missing From WordPress 3.9

Reported by: hardeepasrani Owned by: azaozz
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9
Component: TinyMCE Keywords:
Focuses: Cc:

Description

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:

Attachments (5)

color.png (14.7 KB) - added by hardeepasrani 16 months ago.
Iris.png (43.0 KB) - added by hardeepasrani 15 months ago.
This style of Iris color picker would look awesome with the TinyMCE & WordPress UI.
Iris.2.png (96.6 KB) - added by hardeepasrani 15 months ago.
In my opinion, it's better than the previous one. Apart from color picker, there should be few more colors to pick from.
cp1.png (13.3 KB) - added by iseulde 14 months ago.
cp2.png (27.5 KB) - added by iseulde 14 months ago.

Download all attachments as: .zip

Change History (46)

@hardeepasrani16 months ago

comment:1 @SergeyBiryukov16 months ago

  • Component changed from Editor to TinyMCE
  • Focuses accessibility removed
  • Milestone changed from Awaiting Review to 3.9

Related: #23353

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

comment:2 @iseulde16 months ago

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.

comment:3 @iseulde16 months ago

  • Keywords close added

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

comment:4 @hardeepasrani16 months ago

  • Summary changed from Color Picker Missing From WordPress 3.9 to lor Picker Missing From WordPress 3.9

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.

comment:5 @SergeyBiryukov16 months ago

  • Summary changed from lor Picker Missing From WordPress 3.9 to Color Picker Missing From WordPress 3.9

comment:6 @nacin16 months ago

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

comment:7 @samuelsidler15 months ago

  • Milestone changed from 3.9 to Awaiting Review

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.

comment:8 @hardeepasrani15 months ago

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.

comment:9 @jeremyfelt15 months ago

  • Keywords needs-patch added; close removed
  • Milestone changed from Awaiting Review to Future Release

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

@hardeepasrani15 months ago

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

comment:10 @ocean9015 months ago

#27692 was marked as a duplicate.

comment:11 @azaozz15 months ago

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.

Last edited 15 months ago by azaozz (previous) (diff)

comment:12 @ocean9015 months ago

#27862 was marked as a duplicate.

comment:13 @SergeyBiryukov15 months ago

#27900 was marked as a duplicate.

comment:14 @funkiplanet15 months ago

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

comment:15 follow-up: @Shane7315 months ago

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.

comment:16 in reply to: ↑ 15 @funkiplanet15 months ago

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.

comment:17 @helen15 months ago

  • Type changed from defect (bug) to enhancement

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.

comment:18 follow-up: @iseulde15 months ago

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

@hardeepasrani15 months ago

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

comment:19 in reply to: ↑ 18 ; follow-up: @azaozz15 months ago

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.
Last edited 15 months ago by azaozz (previous) (diff)

comment:20 in reply to: ↑ 19 @hardeepasrani15 months ago

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.

comment:21 follow-up: @azaozz15 months ago

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.

Last edited 15 months ago by azaozz (previous) (diff)

comment:22 in reply to: ↑ 21 @hardeepasrani15 months ago

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.

comment:23 @iseulde15 months ago

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. :)

comment:24 @iseulde15 months ago

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?

comment:25 @azaozz15 months ago

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

comment:26 @mikeoghia15 months ago

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!

comment:27 @iseulde15 months ago

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.

comment:28 @Shane7315 months ago

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

comment:29 @Musicalman14 months ago

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

@iseulde14 months ago

@iseulde14 months ago

comment:30 follow-up: @iseulde14 months ago

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. :)

comment:31 in reply to: ↑ 30 @hardeepasrani14 months ago

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. :)

comment:32 @catiakitahara14 months ago

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!

comment:35 @azaozz12 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 29214:

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

comment:36 @hardeepasrani12 months ago

  • Keywords needs-patch removed

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

comment:37 @SergeyBiryukov12 months ago

  • Milestone changed from Future Release to 4.0

comment:38 follow-up: @iseulde12 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:39 in reply to: ↑ 38 @helen11 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

comment:40 follow-up: @sleenmg11 months ago

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.

comment:41 in reply to: ↑ 40 @hardeepasrani11 months ago

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 :)

Note: See TracTickets for help on using tickets.