updated color picker js by stalukder03 · Pull Request #1542 · CMB2/CMB2

stalukder03 · 2025-07-30T10:08:34Z

Updated wp-color-picker-alpha.js from v2.1.3 to v3.0.4

gemini-code-assist

Summary of Changes

Hello @stalukder03, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly upgrades the wp-color-picker-alpha.js library from version 2.1.3 to 3.0.4. This update involves a comprehensive refactor of the JavaScript code to enhance alpha channel support within the WordPress color picker, introducing a more modern and maintainable architecture for color handling.

Highlights

Major Library Version Bump: The wp-color-picker-alpha.js library has been updated to version 3.0.4, incorporating substantial changes and improvements from the upstream project.
Alpha Channel Implementation Overhaul: The core logic for managing alpha transparency in the color picker has been completely rewritten, shifting to a more robust and modular design that integrates alphaOptions directly into the Iris and wpColorPicker widgets.
Enhanced Color Parsing and Output: New utility methods (Color.fn.to_s, Color.fn.fromHex) have been added to provide more precise control over color string conversions, including support for octo-hex formats and improved handling of alpha values.
Refactored Widget Architecture: Both the $.a8c.iris and $.wp.wpColorPicker jQuery UI widgets have undergone extensive internal refactoring to better support the new alpha functionality, including updated control initialization, dimension calculations, and event listeners.
License Update: The project's license information has been updated to GPLv2 license or later.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request updates the wp-color-picker-alpha.js library from version 2.1.3 to 3.0.4. The changes include fixes for compatibility with older browsers, correction of how default options are set, prevention of memory leaks due to repeated event handler bindings, avoidance of implicit global variables, and prevention of re-initialization of the iris widget.

gemini-code-assist · 2025-07-30T10:10:42Z

+			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 );


The variable newColor is assigned a value without being declared with var, let, or const. This creates an implicit global variable, which can lead to unexpected behavior and conflicts with other scripts. Declare it with var, let, or const to scope it to the function.

Suggested change

newColor = new Color( value ).setHSpace( self.options.mode );

var newColor = new Color( value ).setHSpace( self.options.mode );

gemini-code-assist · 2025-07-30T10:10:42Z

+			$.extend( {}, this.alphaOptions, {
+				alphaEnabled: false,
+				alphaCustomWidth: 130,
+				alphaReset: false,
+				alphaColorType: 'hex',
+				alphaColorWithSpace: false,
+				alphaSkipDebounce: false,
+				alphaDebounceTimeout: 100,
+			} );


The $.extend() call here is not modifying this.alphaOptions. It merges this.alphaOptions and the default options into a new object, which is then discarded. To properly set default values for this.alphaOptions, assign the result of $.extend() back to it, with the defaults as the first argument.

Suggested change

$.extend( {}, this.alphaOptions, {

alphaEnabled: false,

alphaCustomWidth: 130,

alphaReset: false,

alphaColorType: 'hex',

alphaColorWithSpace: false,

alphaSkipDebounce: false,

alphaDebounceTimeout: 100,

} );

this.alphaOptions = $.extend( {

alphaEnabled: false,

alphaCustomWidth: 130,

alphaReset: false,

alphaColorType: 'hex',

alphaColorWithSpace: false,

alphaSkipDebounce: false,

alphaDebounceTimeout: 100

}, this.alphaOptions );

gemini-code-assist · 2025-07-30T10:10:42Z

+				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 );
+				} );


The click.palette event handler is being bound inside the _change function. Since _change can be called multiple times, this attaches the same event handler repeatedly, leading to a memory leak and potential bugs. Bind this event handler only once, for instance, in the _initControls or _create method.

gemini-code-assist · 2025-07-30T10:10:43Z

 			el.iris( {
-				target: self.pickerContainer,
-				hide: self.options.hide,
-				width: self.options.width,
-				mode: self.options.mode,
-				palettes: self.options.palettes,
 				/**
 				 * @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.5.0
+				 * @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 ) {
-					if ( self.options.alpha ) {
-						self.toggler.css( { 'background-image' : 'url(' + image + ')' } );
-						if ( _deprecated ) {
-							self.toggler.html( '<span class="color-alpha" />' );
-						} else {
-							self.toggler.css( {
-								'position' : 'relative'
-							} );
-							if ( self.toggler.find('span.color-alpha').length == 0 ) {
-								self.toggler.append('<span class="color-alpha" />');
-							}
-						}
-
-						self.toggler.find( 'span.color-alpha' ).css( {
-							'width'                     : '30px',
-							'position'                  : 'absolute',
-							'top'                       : 0,
-							'bottom'                    : 0,
-							'left'                      : 0,
-							'border-top-left-radius'    : '2px',
-							'border-bottom-left-radius' : '2px',
-							'background'                : ui.color.toString()
-						} );
-					} else {
-						self.toggler.css( { backgroundColor : ui.color.toString() } );
-					}
+				change: function ( event, ui ) {
+					self.colorAlpha.css( { 'background-color': ui.color.to_s( self.alphaOptions.alphaColorType ) } );

-					if ( $.isFunction( self.options.change ) ) {
+					// fire change callback if we have one
+					if ( typeof self.options.change === 'function' ) {
 						self.options.change.call( this, event, ui );
 					}
 				}
 			} );


The iris widget is being re-initialized here within _addListeners. The wpColorPicker widget's _create method already initializes iris. Re-initializing it here will destroy the previous instance and can lead to lost settings and unexpected behavior. Update the change callback on the existing iris instance instead of re-initializing it, for example, by using el.iris('option', 'change', function(...) {}).

gemini-code-assist · 2025-07-30T10:10:43Z

+			color = this.toString();
+			var alpha = parseInt( 255 * this._alpha, 10 ).toString( 16 );
+			if ( alpha.length === 1 ) {
+				alpha = `0${alpha}`;


The use of an ES6 template literal (`0${alpha}`) may cause compatibility issues with older browsers that do not support this syntax. It's safer to stick to ES5 syntax for wider browser support, unless a transpilation step is involved.

Suggested change

alpha = `0${alpha}`;

alpha = '0' + alpha;

gemini-code-assist · 2025-07-30T10:10:43Z

+				callback = function ( event ) {
+					var val = input.val(),
+						color = new Color( val ),
+						val = val.replace( /^(#|(rgb|hsl)a?)/, '' ),


This line has a trailing comma. While valid in modern JavaScript, it can cause errors in older browsers like Internet Explorer. It's best to remove it for better compatibility.

Suggested change

val = val.replace( /^(#|(rgb|hsl)a?)/, '' ),

val = val.replace( /^(#|(rgb|hsl)a?)/, '' )

gemini-code-assist · 2025-07-30T10:10:43Z

+					alphaReset: false,
+					alphaColorType: 'rgb',
+					alphaColorWithSpace: false,
+					alphaSkipDebounce: ( !!el.data( 'alphaSkipDebounce' ) || false ),


This line has a trailing comma. While valid in modern JavaScript, it can cause errors in older browsers like Internet Explorer. It's best to remove it for better compatibility.

Suggested change

alphaSkipDebounce: ( !!el.data( 'alphaSkipDebounce' ) || false ),

alphaSkipDebounce: ( !!el.data( 'alphaSkipDebounce' ) || false )

jtsternberg

PR Review: Updated wp-color-picker-alpha v2.1.3 → v3.0.4

Verdict: REQUEST CHANGES

The library update itself looks good (cleaner architecture, RTL support, jQuery 4.0 compatibility), but the v3 API is not backward-compatible with v2 and this PR is missing the required companion PHP changes. As-is, this will silently break alpha color picker functionality for all CMB2 users who have 'alpha' => true on their colorpicker fields.

See inline comments for specifics.

Additional issue not in this diff

includes/CMB2_JS.php:151 still registers the script with version '2.1.3':

$func( 'wp-color-picker-alpha', ..., array( 'wp-color-picker' ), '2.1.3' );

This needs to be updated to '3.0.4' for proper cache-busting.

Summary of required companion changes

In includes/types/CMB2_Type_Colorpicker.php, the alpha block (line ~60-63) needs to change from:

$args['data-alpha'] = 'true';

to:

$args['data-alpha-enabled'] = 'true';
$args['data-type']          = 'full';

And in includes/CMB2_JS.php:151, update '2.1.3' → '3.0.4'.

This review was conducted with AI assistance and human oversight.

jtsternberg · 2026-02-28T03:37:26Z

+				type = ( el.data( 'type' ) || this.options.type ),
+				color = ( el.data( 'defaultColor' ) || el.val() ),
+				options = {
+					alphaEnabled: ( el.data( 'alphaEnabled' ) || false ),


[HIGH] Breaking change: data-alpha attribute no longer recognized

The old v2.1.3 library read alpha support from this.element.data('alpha'), which matched the data-alpha="true" attribute that CMB2 sets in CMB2_Type_Colorpicker.php:62.

This new v3 reads el.data('alphaEnabled') instead (i.e. data-alpha-enabled in HTML). Since CMB2 still sets data-alpha, this will be silently ignored and alpha color picking will stop working.

Fix needed in includes/types/CMB2_Type_Colorpicker.php:
Change $args['data-alpha'] = 'true'; to $args['data-alpha-enabled'] = 'true';

jtsternberg · 2026-02-28T03:37:26Z

+				};
+
+			if ( options.alphaEnabled ) {
+				options.alphaEnabled = ( el.is( 'input' ) && 'full' === type );


[HIGH] Additional gate: requires data-type="full" to enable alpha

Even after fixing data-alpha-enabled, alpha will still be disabled because of this second check. The type variable comes from el.data('type') (line 451), and CMB2 never sets data-type on colorpicker inputs.

Since type will be undefined, the 'full' === type check will fail and alphaEnabled gets forced to false.

Fix needed in includes/types/CMB2_Type_Colorpicker.php:
Add $args['data-type'] = 'full'; alongside the data-alpha-enabled attribute.

rubengc · 2026-10-07T10:16:23Z

@jtsternberg have you this ready to merge? the data attributes fixed the issues caused from updating to 3.0.4?

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01NGjnpxwLDvnWkrtbqDMSAc Co-Authored-By: jtsternberg-bot <[email protected]>

codecov · 2026-10-07T17:28:48Z

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 71.02%. Comparing base (0656047) to head (7740a9a).

Files with missing lines	Patch %	Lines
includes/CMB2_JS.php	0.00%	1 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop    #1542      +/-   ##
=============================================
+ Coverage      70.98%   71.02%   +0.04%     
  Complexity      1850     1850              
=============================================
  Files             53       53              
  Lines           4943     4943              
=============================================
+ Hits            3509     3511       +2     
+ Misses          1434     1432       -2

Flag	Coverage Δ
phpunit	`71.02% <50.00%> (+0.04%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

updated color picker js

0dc2e24

gemini-code-assist Bot reviewed Jul 30, 2025

View reviewed changes

UVLabs mentioned this pull request Sep 25, 2025

wp-color-picker-alpha.js outdated #1534

Open

jtsternberg requested changes Feb 28, 2026

View reviewed changes

jtsternberg force-pushed the develop branch 2 times, most recently from 7702df0 to b021c2c Compare April 30, 2026 03:57

jtsternberg force-pushed the develop branch 4 times, most recently from d7bf482 to 4e05b2b Compare September 29, 2026 21:15

jtsternberg and others added 5 commits October 7, 2026 12:33

Test the v3 alpha attribute on colorpicker fields

b0c3fb7

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01NGjnpxwLDvnWkrtbqDMSAc Co-Authored-By: jtsternberg-bot <[email protected]>

Merge develop into update-colorpicker-js

b6889bd

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01NGjnpxwLDvnWkrtbqDMSAc Co-Authored-By: jtsternberg-bot <[email protected]>

Match the single-quoted attribute output in the alpha test

e1973a7

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01NGjnpxwLDvnWkrtbqDMSAc Co-Authored-By: jtsternberg-bot <[email protected]>

Use the v3 alpha attribute for colorpicker fields

6eaed8a

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01NGjnpxwLDvnWkrtbqDMSAc Co-Authored-By: jtsternberg-bot <[email protected]>

Restore script dependencies after the alpha colorpicker test

7740a9a

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01NGjnpxwLDvnWkrtbqDMSAc Co-Authored-By: jtsternberg-bot <[email protected]>

jtsternberg approved these changes Oct 7, 2026

View reviewed changes

jtsternberg merged commit 321b736 into CMB2:develop Oct 7, 2026
17 of 18 checks passed

	newColor = new Color( value ).setHSpace( self.options.mode );
	var newColor = new Color( value ).setHSpace( self.options.mode );

	val = val.replace( /^(#\|(rgb\|hsl)a?)/, '' ),
	val = val.replace( /^(#\|(rgb\|hsl)a?)/, '' )

	alphaSkipDebounce: ( !!el.data( 'alphaSkipDebounce' ) \|\| false ),
	alphaSkipDebounce: ( !!el.data( 'alphaSkipDebounce' ) \|\| false )

Conversation

stalukder03 commented Jul 30, 2025

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

jtsternberg left a comment

Choose a reason for hiding this comment

PR Review: Updated wp-color-picker-alpha v2.1.3 → v3.0.4

Verdict: REQUEST CHANGES

Additional issue not in this diff

Summary of required companion changes

Uh oh!

jtsternberg Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

jtsternberg Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

rubengc commented Oct 7, 2026

Uh oh!

codecov Bot commented Oct 7, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants