RGBA Color Picker

Pick a rgba() color.

$options = [
	'demo_rgba_color_picker' => [
		'label' => __( 'RGBA Color Picker', 'unysonplus' ),  // or false to hide the label column
		'type' => 'rgba-color-picker',
		'value' => 'rgba(255, 0, 0, .5)',
		'desc' => __( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
			'unysonplus' ),
		'help' => sprintf( "%s \n\n'\"<br/><br/>\n\n <b>%s</b>",
			__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
				'unysonplus' ),
			__( 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium',
				'unysonplus' )
		),
		// — Optional attributes you can add —
		// 'attr' => [ 'class' => 'my-class', 'data-foo' => 'bar' ],  // extra HTML attributes
		// 'palettes' => false,  // hide the preset colour palettes
	],
];

Reading the value

rgba-color-picker returns a string — output it directly.

In a shortcode

The shortcode framework passes the option values into view.php as $atts:

echo esc_attr( $atts['demo_rgba_color_picker'] );

In a page template — a per-page option

Options defined on a post/page (a metabox) are read with fw_get_db_post_option():

$value = fw_get_db_post_option( get_the_ID(), 'demo_rgba_color_picker' );
echo esc_attr( $value );

When the field is one of several inside a box/group, read the whole group once and pick fields by key — the common CPT pattern (e.g. a review or book box):

$book = fw_get_db_post_option( get_the_ID(), 'book' );
echo esc_attr( $book['demo_rgba_color_picker'] );

In Theme Settings — a global option

Global options are read with fw_get_db_settings_option():

$value = fw_get_db_settings_option( 'demo_rgba_color_picker' );
echo esc_attr( $value );

Saved value

fw_print( fw_get_db_settings_option( 'demo_rgba_color_picker' ) ) outputs — the shape of this option type's stored value:

rgba(229,50,45,0.85)

In Gutenberg blocks (the React control)

rgba-color-picker is one of the option types that also has a React version, so it can appear inside a Gutenberg block's sidebar.

Everything above is rendered by PHP. A block's settings sidebar is a React app and will not accept ready-made HTML from PHP, so the option type gets a second renderer. Both read the same schema and both produce the same saved value. See text for the full explanation.

What the rgba-color-picker control does

A colour button with a chequerboard behind the swatch — so a transparent colour reads as transparent rather than as white — and a Clear button.

note

Looser than color-picker, on purpose

This validator accepts hex of 3, 4, 6 or 8 digits or rgb()/rgba(). color-picker accepts hex only and silently substitutes the default for anything else, which is why its React control normalises to hex.

Doing the same here would be a quiet downgrade: this type exists precisely where alpha is the point — an overlay tint over a hero image — so the string the picker produces is stored as given.

The empty string is a real value

It means "no colour", not "unset", which is why the control offers an explicit Clear rather than leaving you to delete characters.