diff --git a/js/wp-color-picker-alpha.js b/js/wp-color-picker-alpha.js
new file mode 100644
index 000000000..986009a4b
--- /dev/null
+++ b/js/wp-color-picker-alpha.js
@@ -0,0 +1 @@
+!function(o){var t={};function a(r){if(t[r])return t[r].exports;var e=t[r]={i:r,l:!1,exports:{}};return o[r].call(e.exports,e,e.exports,a),e.l=!0,e.exports}a.m=o,a.c=t,a.d=function(o,t,r){a.o(o,t)||Object.defineProperty(o,t,{enumerable:!0,get:r})},a.r=function(o){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},a.t=function(o,t){if(1&t&&(o=a(o)),8&t)return o;if(4&t&&"object"==typeof o&&o&&o.__esModule)return o;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:o}),2&t&&"string"!=typeof o)for(var e in o)a.d(r,e,function(t){return o[t]}.bind(null,e));return r},a.n=function(o){var t=o&&o.__esModule?function(){return o.default}:function(){return o};return a.d(t,"a",t),t},a.o=function(o,t){return Object.prototype.hasOwnProperty.call(o,t)},a.p="",a(a.s=13)}({13:function(o,t){!function(o,t){var a={version:300};if("wpColorPickerAlpha"in window&&"version"in window.wpColorPickerAlpha){var r=parseInt(window.wpColorPickerAlpha.version,10);if(!isNaN(r)&&r>=a.version)return}if(!Color.fn.hasOwnProperty("to_s")){Color.fn.to_s=function(o){"hex"===(o=o||"hex")&&this._alpha<1&&(o="rgba");var t="";return"hex"===o?t=this.toString():this.error||(t=this.toCSS(o).replace(/\(\s+/,"(").replace(/\s+\)/,")")),t},window.wpColorPickerAlpha=a;var e="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==";o.widget("a8c.iris",o.a8c.iris,{alphaOptions:{alphaEnabled:!1},_getColor:function(o){return o===t&&(o=this._color),this.alphaOptions.alphaEnabled?(o=o.to_s(this.alphaOptions.alphaColorType),this.alphaOptions.alphaColorWithSpace||(o=o.replace(/\s+/g,"")),o):o.toString()},_create:function(){try{this.alphaOptions=this.element.wpColorPicker("instance").alphaOptions}catch(o){}o.extend({},this.alphaOptions,{alphaEnabled:!1,alphaCustomWidth:130,alphaReset:!1,alphaColorType:"hex",alphaColorWithSpace:!1}),this._super()},_addInputListeners:function(o){var t=this,a=function(a){var r=o.val(),e=new Color(r),i=(r=r.replace(/^(#|(rgb|hsl)a?)/,""),t.alphaOptions.alphaColorType);o.removeClass("iris-error"),e.error?""!==r&&o.addClass("iris-error"):"hex"===i&&"keyup"===a.type&&r.match(/^[0-9a-fA-F]{3}$/)||e.toIEOctoHex()!==t._color.toIEOctoHex()&&t._setOption("color",t._getColor(e))};o.on("change",a).on("keyup",t._debounce(a,100)),t.options.hide&&o.one("focus",(function(){t.show()}))},_initControls:function(){if(this._super(),this.alphaOptions.alphaEnabled){var t=this,a=t.controls.strip.clone(!1,!1),r=a.find(".iris-slider-offset"),e={stripAlpha:a,stripAlphaSlider:r};a.addClass("iris-strip-alpha"),r.addClass("iris-slider-offset-alpha"),a.appendTo(t.picker.find(".iris-picker-inner")),o.each(e,(function(o,a){t.controls[o]=a})),t.controls.stripAlphaSlider.slider({orientation:"vertical",min:0,max:100,step:1,value:parseInt(100*t._color._alpha),slide:function(o,a){t.active="strip",t._color._alpha=parseFloat(a.value/100),t._change.apply(t,arguments)}})}},_dimensions:function(o){if(this._super(o),this.alphaOptions.alphaEnabled){var t,a,r,e,i,l=this,n=l.options,s=l.controls.square,p=l.picker.find(".iris-strip");for(t=Math.round(l.picker.outerWidth(!0)-(n.border?22:0)),a=Math.round(s.outerWidth()),r=Math.round((t-a)/2),e=Math.round(r/2),i=Math.round(a+2*r+2*e);i>t;)r=Math.round(r-2),e=Math.round(e-1),i=Math.round(a+2*r+2*e);s.css("margin","0"),p.width(r).css("margin-left",e+"px")}},_change:function(){var t=this,a=t.active;if(t._super(),t.alphaOptions.alphaEnabled){var r=t.controls,i=parseInt(100*t._color._alpha),l=t._color.toRgb(),n=["rgb("+l.r+","+l.g+","+l.b+") 0%","rgba("+l.r+","+l.g+","+l.b+", 0) 100%"];t.picker.closest(".wp-picker-container").find(".wp-color-result");t.options.color=t._getColor(),r.stripAlpha.css({background:"linear-gradient(to bottom, "+n.join(", ")+"), url("+e+")"}),a&&r.stripAlphaSlider.slider("value",i),t._color.error||t.element.removeClass("iris-error").val(t.options.color),t.picker.find(".iris-palette-container").on("click.palette",".iris-palette",(function(){var a=o(this).data("color");t.alphaOptions.alphaReset&&(t._color._alpha=1,a=t._getColor()),t._setOption("color",a)}))}},_paintDimension:function(o,t){var a=this,r=!1;a.alphaOptions.alphaEnabled&&"strip"===t&&(r=a._color,a._color=new Color(r.toString()),a.hue=a._color.h()),a._super(o,t),r&&(a._color=r)},_setOption:function(o,t){var a=this;if("color"!==o||!a.alphaOptions.alphaEnabled)return a._super(o,t);t=""+t,newColor=new Color(t).setHSpace(a.options.mode),newColor.error||a._getColor(newColor)===a._getColor()||(a._color=newColor,a.options.color=a._getColor(),a.active="external",a._change())},color:function(o){return!0===o?this._color.clone():o===t?this._getColor():void this.option("color",o)}}),o.widget("wp.wpColorPicker",o.wp.wpColorPicker,{alphaOptions:{alphaEnabled:!1},_getAlphaOptions:function(){var t=this.element,a=t.data("type")||this.options.type,r=t.data("defaultColor")||t.val(),e={alphaEnabled:t.data("alphaEnabled")||!1,alphaCustomWidth:130,alphaReset:!1,alphaColorType:"rgb",alphaColorWithSpace:!1};return e.alphaEnabled&&(e.alphaEnabled=t.is("input")&&"full"===a),e.alphaEnabled?(e.alphaColorWithSpace=r&&r.match(/\s/),o.each(e,(function(o,a){var i=t.data(o)||a;switch(o){case"alphaCustomWidth":i=i?parseInt(i,10):0,i=isNaN(i)?a:i;break;case"alphaColorType":i.match(/^(hex|(rgb|hsl)a?)$/)||(i=r&&r.match(/^#/)?"hex":r&&r.match(/^hsla?/)?"hsl":a);break;default:i=!!i}e[o]=i})),e):e},_create:function(){o.support.iris&&(this.alphaOptions=this._getAlphaOptions(),this._super())},_addListeners:function(){if(!this.alphaOptions.alphaEnabled)return this._super();var t=this,a=t.element,r=t.toggler.is("a");this.alphaOptions.defaultWidth=a.width(),this.alphaOptions.alphaCustomWidth&&a.width(parseInt(this.alphaOptions.defaultWidth+this.alphaOptions.alphaCustomWidth,10)),t.toggler.css({position:"relative","background-image":"url("+e+")"}),r?t.toggler.html(''):t.toggler.append(''),t.colorAlpha=t.toggler.find("span.color-alpha").css({width:"30px",height:"100%",position:"absolute",top:0,"background-color":a.val()}),"ltr"===t.colorAlpha.css("direction")?t.colorAlpha.css({"border-bottom-left-radius":"2px","border-top-left-radius":"2px",left:0}):t.colorAlpha.css({"border-bottom-right-radius":"2px","border-top-right-radius":"2px",right:0}),a.iris({change:function(a,r){t.colorAlpha.css({"background-color":r.color.to_s(t.alphaOptions.alphaColorType)}),o.isFunction(t.options.change)&&t.options.change.call(this,a,r)}}),t.wrap.on("click.wpcolorpicker",(function(o){o.stopPropagation()})),t.toggler.click((function(){t.toggler.hasClass("wp-picker-open")?t.close():t.open()})),a.change((function(e){var i=o(this).val();(a.hasClass("iris-error")||""===i||i.match(/^(#|(rgb|hsl)a?)$/))&&(r&&t.toggler.removeAttr("style"),t.colorAlpha.css("background-color",""),o.isFunction(t.options.clear)&&t.options.clear.call(this,e))})),t.button.click((function(e){o(this).hasClass("wp-picker-default")?a.val(t.options.defaultColor).change():o(this).hasClass("wp-picker-clear")&&(a.val(""),r&&t.toggler.removeAttr("style"),t.colorAlpha.css("background-color",""),o.isFunction(t.options.clear)&&t.options.clear.call(this,e),a.trigger("change"))}))}})}}(jQuery)}});
\ No newline at end of file
diff --git a/src/js/wp-color-picker-alpha.js b/src/js/wp-color-picker-alpha.js
new file mode 100644
index 000000000..bd407429b
--- /dev/null
+++ b/src/js/wp-color-picker-alpha.js
@@ -0,0 +1,635 @@
+/**!
+ * wp-color-picker-alpha
+ *
+ * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
+ * Only run in input and is defined data alpha in true
+ *
+ * Version: 3.0.0
+ * https://github.com/kallookoo/wp-color-picker-alpha
+ * Licensed under the GPLv2 license or later.
+ */
+
+( function( $, undef ) {
+
+ var wpColorPickerAlpha = {
+ 'version' : 300
+ };
+
+ // Always try to use the last version of this script.
+ if ( 'wpColorPickerAlpha' in window && 'version' in window.wpColorPickerAlpha ) {
+ var version = parseInt( window.wpColorPickerAlpha.version, 10 );
+ if ( ! isNaN( version ) && version >= wpColorPickerAlpha.version ) {
+ return;
+ }
+ }
+
+ // Prevent multiple initiations
+ if ( Color.fn.hasOwnProperty( 'to_s' ) ) {
+ return;
+ }
+
+ // Create new method to replace the `Color.toString()` inside the scripts.
+ Color.fn.to_s = function( type ) {
+ type = ( type || 'hex' );
+ // Change hex to rgba to return the correct color.
+ if ( 'hex' === type && this._alpha < 1 ) {
+ type = 'rgba';
+ }
+
+ var color = '';
+ if ( 'hex' === type ) {
+ color = this.toString();
+ } else if ( ! this.error ) {
+ color = this.toCSS( type ).replace( /\(\s+/, '(' ).replace( /\s+\)/, ')' );
+ }
+ return color;
+ }
+
+ // Register the global variable.
+ window.wpColorPickerAlpha = wpColorPickerAlpha;
+
+ // Background image encoded
+ var backgroundImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==';
+
+ /**
+ * Iris
+ */
+ $.widget( 'a8c.iris', $.a8c.iris, {
+ /**
+ * Alpha options
+ *
+ * @since 3.0.0
+ *
+ * @type {Object}
+ */
+ alphaOptions: {
+ alphaEnabled: false,
+ },
+ /**
+ * Get the current color or the new color.
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @param {Object|*} The color instance if not defined return the cuurent color.
+ *
+ * @return {string} The element's color.
+ */
+ _getColor: function( color ) {
+ if ( color === undef ) {
+ color = this._color;
+ }
+
+ if ( this.alphaOptions.alphaEnabled ) {
+ color = color.to_s( this.alphaOptions.alphaColorType );
+ if ( ! this.alphaOptions.alphaColorWithSpace ) {
+ color = color.replace( /\s+/g, '' );
+ }
+ return color;
+ }
+ return color.toString();
+ },
+ /**
+ * Create widget
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {void}
+ */
+ _create: function() {
+ try {
+ // Try to get the wpColorPicker alpha options.
+ this.alphaOptions = this.element.wpColorPicker( 'instance' ).alphaOptions;
+ } catch( e ) {}
+
+ // We make sure there are all options
+ $.extend( {}, this.alphaOptions, {
+ alphaEnabled: false,
+ alphaCustomWidth: 130,
+ alphaReset: false,
+ alphaColorType: 'hex',
+ alphaColorWithSpace: false,
+ } );
+
+ this._super();
+ },
+ /**
+ * Binds event listeners to the Iris.
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {void}
+ */
+ _addInputListeners: function( input ) {
+ var self = this,
+ debounceTimeout = 100,
+ callback = function( event ){
+ var val = input.val(),
+ color = new Color( val ),
+ val = val.replace( /^(#|(rgb|hsl)a?)/, '' ),
+ type = self.alphaOptions.alphaColorType;
+
+ input.removeClass( 'iris-error' );
+
+ if ( ! color.error ) {
+ // let's not do this on keyup for hex shortcodes
+ if ( 'hex' !== type || ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) ) {
+ // Compare color ( #AARRGGBB )
+ if ( color.toIEOctoHex() !== self._color.toIEOctoHex() ) {
+ self._setOption( 'color', self._getColor( color ) );
+ }
+ }
+ } else if ( val !== '' ) {
+ input.addClass( 'iris-error' );
+ }
+ };
+
+ input.on( 'change', callback ).on( 'keyup', self._debounce( callback, debounceTimeout ) );
+
+ // If we initialized hidden, show on first focus. The rest is up to you.
+ if ( self.options.hide ) {
+ input.one( 'focus', function() {
+ self.show();
+ });
+ }
+ },
+ /**
+ * Init Controls
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {void}
+ */
+ _initControls: function() {
+ this._super();
+
+ if ( this.alphaOptions.alphaEnabled ) {
+ // Create Alpha controls
+ var self = this,
+ stripAlpha = self.controls.strip.clone(false, false),
+ stripAlphaSlider = stripAlpha.find( '.iris-slider-offset' ),
+ controls = {
+ stripAlpha : stripAlpha,
+ stripAlphaSlider : stripAlphaSlider
+ };
+
+ stripAlpha.addClass( 'iris-strip-alpha' );
+ stripAlphaSlider.addClass( 'iris-slider-offset-alpha' );
+ stripAlpha.appendTo( self.picker.find( '.iris-picker-inner' ) );
+
+ // Push new controls
+ $.each( controls, function( k, v ) {
+ self.controls[k] = v;
+ } );
+
+ // Create slider
+ self.controls.stripAlphaSlider.slider( {
+ orientation : 'vertical',
+ min : 0,
+ max : 100,
+ step : 1,
+ value : parseInt( self._color._alpha * 100 ),
+ slide : function( event, ui ) {
+ self.active = 'strip';
+ // Update alpha value
+ self._color._alpha = parseFloat( ui.value / 100 );
+ self._change.apply( self, arguments );
+ }
+ } );
+ }
+ },
+ /**
+ * Create the controls sizes
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @param {bool} reset Set to True for recreate the controls sizes.
+ *
+ * @return {void}
+ */
+ _dimensions: function( reset ) {
+ this._super( reset );
+
+ if ( this.alphaOptions.alphaEnabled ) {
+ var self = this,
+ opts = self.options,
+ controls = self.controls,
+ square = controls.square,
+ strip = self.picker.find( '.iris-strip' ),
+ innerWidth, squareWidth, stripWidth, stripMargin, totalWidth;
+
+ /**
+ * I use Math.round() to avoid possible size errors,
+ * this function returns the value of a number rounded
+ * to the nearest integer.
+ *
+ * The width to append all widgets,
+ * if border is enabled, 22 is subtracted.
+ * 20 for css left and right property
+ * 2 for css border
+ */
+ innerWidth = Math.round( self.picker.outerWidth( true ) - ( opts.border ? 22 : 0 ) );
+ // The width of the draggable, aka square.
+ squareWidth = Math.round( square.outerWidth() );
+ // The width for the sliders
+ stripWidth = Math.round( ( innerWidth - squareWidth ) / 2 );
+ // The margin for the sliders
+ stripMargin = Math.round( stripWidth / 2 );
+ // The total width of the elements.
+ totalWidth = Math.round( squareWidth + ( stripWidth * 2 ) + ( stripMargin * 2 ) );
+
+ // Check and change if necessary.
+ while ( totalWidth > innerWidth ) {
+ stripWidth = Math.round( stripWidth - 2 );
+ stripMargin = Math.round( stripMargin - 1 );
+ totalWidth = Math.round( squareWidth + ( stripWidth * 2 ) + ( stripMargin * 2 ) );
+ }
+
+
+ square.css( 'margin', '0' );
+ strip.width( stripWidth ).css( 'margin-left', stripMargin + 'px' );
+ }
+ },
+ /**
+ * Callback to update the controls and the current color.
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {void}
+ */
+ _change: function() {
+ var self = this,
+ active = self.active;
+
+ self._super();
+
+ if ( self.alphaOptions.alphaEnabled ) {
+ var controls = self.controls,
+ alpha = parseInt( self._color._alpha * 100 ),
+ color = self._color.toRgb(),
+ gradient = [
+ 'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%',
+ 'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%'
+ ],
+ target = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' );
+
+ self.options.color = self._getColor();
+ // Generate background slider alpha, only for CSS3.
+ controls.stripAlpha.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + backgroundImage + ')' } );
+ // Update alpha value
+ if ( active ) {
+ controls.stripAlphaSlider.slider( 'value', alpha );
+ }
+
+ if ( ! self._color.error ) {
+ self.element.removeClass( 'iris-error' ).val( self.options.color );
+ }
+
+ self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() {
+ var color = $( this ).data( 'color' );
+ if ( self.alphaOptions.alphaReset ) {
+ self._color._alpha = 1;
+ color = self._getColor();
+ }
+ self._setOption( 'color', color );
+ } );
+ }
+ },
+ /**
+ * Paint dimensions.
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @param {string} origin Origin (position).
+ * @param {string} control Type of the control,
+ *
+ * @return {void}
+ */
+ _paintDimension: function( origin, control ) {
+ var self = this,
+ color = false;
+
+ // Fix for slider hue opacity.
+ if ( self.alphaOptions.alphaEnabled && 'strip' === control ) {
+ color = self._color;
+ self._color = new Color( color.toString() );
+ self.hue = self._color.h();
+ }
+
+ self._super( origin, control );
+
+ // Restore the color after paint.
+ if ( color ) {
+ self._color = color;
+ }
+ },
+ /**
+ * To update the options, see original source to view the available options.
+ *
+ * @since 3.0.0
+ *
+ * @param {string} key The Option name.
+ * @param {mixed} value The Option value to update.
+ *
+ * @return {void}
+ */
+ _setOption: function( key, value ) {
+ var self = this;
+ if ( 'color' === key && self.alphaOptions.alphaEnabled ) {
+ // cast to string in case we have a number
+ value = '' + value;
+ newColor = new Color( value ).setHSpace( self.options.mode );
+ // Check if error && Check the color to prevent callbacks with the same color.
+ if ( ! newColor.error && self._getColor( newColor ) !== self._getColor() ) {
+ self._color = newColor;
+ self.options.color = self._getColor();
+ self.active = 'external';
+ self._change();
+ }
+ } else {
+ return self._super( key, value );
+ }
+ },
+ /**
+ * Returns the iris object if no new color is provided. If a new color is provided, it sets the new color.
+ *
+ * @param newColor {string|*} The new color to use. Can be undefined.
+ *
+ * @since 3.0.0
+ *
+ * @return {string} The element's color.
+ */
+ color: function( newColor ) {
+ if ( newColor === true ) {
+ return this._color.clone();
+ }
+ if ( newColor === undef ) {
+ return this._getColor();
+ }
+ this.option( 'color', newColor );
+ },
+ } );
+
+ /**
+ * wpColorPicker
+ */
+ $.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, {
+ /**
+ * Alpha options
+ *
+ * @since 3.0.0
+ *
+ * @type {Object}
+ */
+ alphaOptions: {
+ alphaEnabled: false,
+ },
+ /**
+ * Get the alpha options.
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {object} The current alpha options.
+ */
+ _getAlphaOptions: function() {
+ var el = this.element,
+ type = ( el.data( 'type' ) || this.options.type ),
+ color = ( el.data( 'defaultColor' ) || el.val() ),
+ options = {
+ alphaEnabled: ( el.data( 'alphaEnabled' ) || false ),
+ alphaCustomWidth: 130,
+ alphaReset: false,
+ alphaColorType: 'rgb',
+ alphaColorWithSpace: false,
+ };
+
+ if ( options.alphaEnabled ) {
+ options.alphaEnabled = ( el.is( 'input' ) && 'full' === type );
+ }
+
+ if ( ! options.alphaEnabled ) {
+ return options;
+ }
+
+ options.alphaColorWithSpace = ( color && color.match( /\s/ ) );
+
+ $.each( options, function( name, defaultValue ) {
+ var value = ( el.data( name ) || defaultValue );
+ switch ( name ) {
+ case 'alphaCustomWidth':
+ value = ( value ? parseInt( value, 10 ) : 0 );
+ value = ( isNaN( value ) ? defaultValue : value );
+ break;
+ case 'alphaColorType':
+ if ( ! value.match( /^(hex|(rgb|hsl)a?)$/ ) ) {
+ if ( color && color.match( /^#/ ) ) {
+ value = 'hex';
+ } else if ( color && color.match( /^hsla?/ ) ) {
+ value = 'hsl';
+ } else {
+ value = defaultValue;
+ }
+ }
+ break;
+ default:
+ value = !!value;
+ break;
+ }
+ options[name] = value;
+ } );
+
+ return options;
+ },
+ /**
+ * Create widget
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {void}
+ */
+ _create: function() {
+ // Return early if Iris support is missing.
+ if ( ! $.support.iris ) {
+ return;
+ }
+
+ // Set the alpha options for the current instance.
+ this.alphaOptions = this._getAlphaOptions();
+
+ // Create widget.
+ this._super();
+ },
+ /**
+ * Binds event listeners to the color picker and create options, etc...
+ *
+ * @since 3.0.0
+ * @access private
+ *
+ * @return {void}
+ */
+ _addListeners: function() {
+ if ( ! this.alphaOptions.alphaEnabled ) {
+ return this._super();
+ }
+
+ var self = this,
+ el = self.element,
+ isDeprecated = self.toggler.is( 'a' );
+
+ this.alphaOptions.defaultWidth = el.width();
+ if ( this.alphaOptions.alphaCustomWidth ) {
+ el.width( parseInt( this.alphaOptions.defaultWidth + this.alphaOptions.alphaCustomWidth, 10 ) );
+ }
+
+ self.toggler.css( {
+ 'position': 'relative',
+ 'background-image' : 'url(' + backgroundImage + ')'
+ } );
+
+ if ( isDeprecated ) {
+ self.toggler.html( '' );
+ } else {
+ self.toggler.append( '' );
+ }
+
+ self.colorAlpha = self.toggler.find( 'span.color-alpha' ).css( {
+ 'width' : '30px',
+ 'height' : '100%',
+ 'position' : 'absolute',
+ 'top' : 0,
+ 'background-color' : el.val(),
+ } );
+
+ // Define the correct position for ltr or rtl direction.
+ if ( 'ltr' === self.colorAlpha.css( 'direction' ) ) {
+ self.colorAlpha.css( {
+ 'border-bottom-left-radius' : '2px',
+ 'border-top-left-radius' : '2px',
+ 'left' : 0
+ } );
+ } else {
+ self.colorAlpha.css( {
+ 'border-bottom-right-radius' : '2px',
+ 'border-top-right-radius' : '2px',
+ 'right' : 0
+ } );
+ }
+
+
+ el.iris( {
+ /**
+ * @summary Handles the onChange event if one has been defined in the options.
+ *
+ * Handles the onChange event if one has been defined in the options and additionally
+ * sets the background color for the toggler element.
+ *
+ * @since 3.0.0
+ *
+ * @param {Event} event The event that's being called.
+ * @param {HTMLElement} ui The HTMLElement containing the color picker.
+ *
+ * @returns {void}
+ */
+ change: function( event, ui ) {
+ self.colorAlpha.css( { 'background-color': ui.color.to_s( self.alphaOptions.alphaColorType ) } );
+
+ // fire change callback if we have one
+ if ( $.isFunction( self.options.change ) ) {
+ self.options.change.call( this, event, ui );
+ }
+ }
+ } );
+
+
+ /**
+ * Prevent any clicks inside this widget from leaking to the top and closing it.
+ *
+ * @since 3.0.0
+ *
+ * @param {Event} event The event that's being called.
+ *
+ * @return {void}
+ */
+ self.wrap.on( 'click.wpcolorpicker', function( event ) {
+ event.stopPropagation();
+ });
+
+ /**
+ * Open or close the color picker depending on the class.
+ *
+ * @since 3.0.0
+ */
+ self.toggler.click( function() {
+ if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
+ self.close();
+ } else {
+ self.open();
+ }
+ });
+
+ /**
+ * Checks if value is empty when changing the color in the color picker.
+ * If so, the background color is cleared.
+ *
+ * @since 3.0.0
+ *
+ * @param {Event} event The event that's being called.
+ *
+ * @return {void}
+ */
+ el.change( function( event ) {
+ var val = $( this ).val();
+
+ if ( el.hasClass( 'iris-error' ) || val === '' || val.match( /^(#|(rgb|hsl)a?)$/ ) ) {
+ if ( isDeprecated ) {
+ self.toggler.removeAttr( 'style' );
+ }
+
+ self.colorAlpha.css( 'background-color', '' );
+
+ // fire clear callback if we have one
+ if ( $.isFunction( self.options.clear ) ) {
+ self.options.clear.call( this, event );
+ }
+ }
+ } );
+
+ /**
+ * Enables the user to either clear the color in the color picker or revert back to the default color.
+ *
+ * @since 3.0.0
+ *
+ * @param {Event} event The event that's being called.
+ *
+ * @return {void}
+ */
+ self.button.click( function( event ) {
+ if ( $( this ).hasClass( 'wp-picker-default' ) ) {
+ el.val( self.options.defaultColor ).change();
+ } else if ( $( this ).hasClass( 'wp-picker-clear' ) ) {
+ el.val( '' );
+ if ( isDeprecated ) {
+ self.toggler.removeAttr( 'style' );
+ }
+
+ self.colorAlpha.css( 'background-color', '' );
+
+ // fire clear callback if we have one
+ if ( $.isFunction( self.options.clear ) ) {
+ self.options.clear.call( this, event );
+ }
+
+ el.trigger( 'change' );
+ }
+ } );
+ },
+ } );
+} ( jQuery ) );
diff --git a/webpack.config.js b/webpack.config.js
index 2eb4b34ce..674c87aee 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -75,6 +75,7 @@ const cldCore = {
entry: {
cloudinary: './src/js/main.js',
video: './src/css/video.scss',
+ 'wp-color-picker-alpha': './src/js/wp-color-picker-alpha.js',
},
module: {
rules: [