[wp-trac] [WordPress Trac] #21206: Replace Farbtastic color picker with ???...

WordPress Trac wp-trac at lists.automattic.com
Fri Aug 17 15:11:00 UTC 2012


#21206: Replace Farbtastic color picker with ???...
-----------------------------------+------------------------------
 Reporter:  lessbloat              |       Owner:
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  Awaiting Review
Component:  General                |     Version:
 Severity:  normal                 |  Resolution:
 Keywords:  has-patch ux-feedback  |
-----------------------------------+------------------------------

Comment (by mattwiebe):

 Just uploaded a patch for adding [http://automattic.github.com/Iris/ Iris]
 in a nice and unified style. Patch only addresses the Custom Background
 screen for now, but should be pretty easy to port to anywhere else that
 uses a color picker, as it now is a single JS widget. This also addresses
 #19616 while we're at it.

 Notes:

 * Introduces a `wpColorPicker` jQuery method that will contruct a standard
 widget on top of any `input` field
 * This will allow us to seamlessly swap out Iris for another color picker
 in the future should that be desirable
 * Takes a progressive enhancement approach - unsupported browsers (IE < 8)
 will still have a perfectly usable text input
 * Does not remove Farbtastic to maintain back compat for other
 plugins/themes that use it.

 `wpColorPicker` supports two callbacks, which are used like this on the
 Custom Backgrounds page:

 {{{
 $('#background-color').wpColorPicker({
         change: function( event, ui ) {
                 $("#custom-background-image").css('background-color',
 ui.color.toString());
         },
         clear: function() {
                 $("#custom-background-image").css('background-color', '');
         }
 });
 }}}

 Closed state (default):

 [[Image(http://cl.ly/image/2r3x0H1g0K30/content)]]

 Open state:

 [[Image(http://cl.ly/image/0B00283G0d3o/content)]]

 UI notes:

 * This is follows pretty closely on the Customizer's color picker UI
 * the "Clear" button will change to a "Default" button when there's a
 default color
 * A default color can be passed directly on the `wpColorPicker` method, or
 picked up directly from a `data-default-color` attribute on the `input`
 element

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21206#comment:12>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software


More information about the wp-trac mailing list