Support alpha channel for color picker

classes/fields/color.php

@@ -43,6 +43,11 @@ public function options() {
 				'dependency'        => true,
 				'developer_mode'    => true,
 			),
+			static::$type . '_alpha' => array(
+				'label'   => __( 'Enable alpha channel', 'pods' ),
+				'default' => 0,
+				'type'    => 'boolean',
+			),
 		);
 
 		return $options;
@@ -120,14 +125,20 @@ public function validate( $value, $name = null, $options = null, $fields = null,
 		} else {
 			$color = str_replace( '#', '', $check );
 
+			if ( pods_v( self::$type . '_alpha', $options, false ) ) {
+				$regex = '/^([0-9A-F]{3,4}){1,2}$/i';
+			} else {
+				$regex = '/^([0-9A-F]{3}){1,2}$/i';
+			}
+
 			if ( 0 < strlen( $value ) && '' === $check ) {
 				if ( $this->is_required( $options ) ) {
 					$errors[] = __( 'This field is required.', 'pods' );
 				} else {
 					// @todo Ask for a specific format in error message
 					$errors[] = __( 'Invalid value provided for this field.', 'pods' );
 				}
-			} elseif ( ! empty( $color ) && ! in_array( strlen( $color ), array( 3, 6 ), true ) ) {
+			} elseif ( ! empty( $color ) && ! preg_match( $regex, $color ) ) {
 				$errors[] = __( 'Invalid Hex Color value provided for this field.', 'pods' );
 			}
 		}

ui/js/blocks/pods-blocks-api.min.asset.json

@@ -1 +1 @@
-{"dependencies":["wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"1ae572d3f990891697f42359d4789570"}
+{"dependencies":["wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"eee47e8051ea21b3ee6a152dd4851aad"}

ui/js/dfv/pods-dfv.min.asset.json

@@ -1 +1 @@
-{"dependencies":["moment","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"24a252ba15d83803f1b7826ab7b44b4c"}
+{"dependencies":["moment","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"74863ed2f5aa4b5a71a676e2a25a1f51"}

ui/js/dfv/src/config/prop-types.js

@@ -189,6 +189,7 @@ export const FIELD_PROP_TYPE = {
 
 	// Color fields
 	color_repeatable: BOOLEAN_ALL_TYPES,
+	color_alpha: BOOLEAN_ALL_TYPES,
 
 	// Currency fields
 	currency_decimal_handling: PropTypes.string,

ui/js/dfv/src/fields/color/index.js

@@ -12,6 +12,7 @@ const Color = ( {
 	fieldConfig,
 	setValue,
 	value,
+	enableAlpha,
 	setHasBlurred,
 } ) => {
 	const { name } = fieldConfig;
@@ -42,10 +43,10 @@ const Color = ( {
 				<ColorPicker
 					color={ value }
 					onChangeComplete={ ( newValue ) => {
-						setValue( newValue.hex );
+						setValue( ( 1 > newValue.color._a ) ? newValue.color.toHex8String() : newValue.color.toHexString() );
 						setHasBlurred();
 					} }
-					disableAlpha
+					enableAlpha={ enableAlpha }
 					className="pods-color-picker"
 				/>
 			) }
@@ -56,6 +57,7 @@ const Color = ( {
 Color.propTypes = {
 	...FIELD_COMPONENT_BASE_PROPS,
 	value: PropTypes.string,
+	enableAlpha: PropTypes.bool,
 };
 
 export default Color;