add-colors-and-gradients-to-gutenberg.php

/**
 * Block Editor Settings.
 * Add custom colors and gradients to the editor.
 */
function tabor_add_colors_and_gradients() {

	$colors = array(
		'primary'  => '#db1c7d',
		'secondary'  => '#a528f0',
		'tertiary' => '#90cbff',
	);

	// Block Editor Palette.
	$editor_color_palette = array(
		array(
			'name'  => __( 'Primary Color', 'tabor' ),
			'slug'  => 'primary',
			'color' => $colors[ 'primary' ],
		),
		array(
			'name'  => __( 'Secondary', 'tabor' ),
			'slug'  => 'secondary',
			'color' => $colors[ 'secondary' ],
		),
		array(
			'name'  => __( 'Tertiary', 'tabor' ),
			'slug'  => 'tertiary',
			'color' => $colors[ 'tertiary' ],
		),
	);

	add_theme_support( 'editor-color-palette', $editor_color_palette );

	add_theme_support(
		'editor-gradient-presets',
		array(
			array(
				'name'     => __( 'Primary to Secondary', 'tabor' ),
				'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'primary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'secondary' ] ) . ' 100%)',
				'slug'     => 'primary-to-secondary',
			),
			array(
				'name'     => __( 'Primary to Tertiary', 'tabor' ),
				'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'primary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'tertiary' ] ) . ' 100%)',
				'slug'     => 'primary-to-tertiary',
			),
			array(
				'name'     => __( 'Secondary to Tertiary', 'tabor' ),
				'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'secondary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'tertiary' ] ) . ' 100%)',
				'slug'     => 'secondary-to-tertiary',
			),
			array(
				'name'     => __( 'Tertiary to Primary', 'tabor' ),
				'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'tertiary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'primary' ] ) . ' 100%)',
				'slug'     => 'tertiary-to-primary',
			),
		)
	);

}
add_action( 'after_setup_theme', 'tabor_add_colors_and_gradients' );

basic-gradient-preset.php

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'     => __( 'Primary to Secondary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, rgba(255,0,0,.8) 0%, rgba(255,0,0,0) 100%)',
			'slug'     => 'primary-to-secondary',
		),
	)
);

colors-array.php

$colors = array(
		'primary'  => '#db1c7d',
		'secondary'  => '#a528f0',
		'tertiary' => '#90cbff',
	);

editor-color-palette.php

// Block Editor Palette.
$editor_color_palette = array(
  array(
		'name'  => __( 'Primary Color', 'tabor' ),
		'slug'  => 'primary',
		'color' => $colors[ 'primary' ],
),
	array(
		'name'  => __( 'Secondary', 'tabor' ),
		'slug'  => 'secondary',
		'color' => $colors[ 'secondary' ],
	),
	array(
		'name'  => __( 'Tertiary', 'tabor' ),
		'slug'  => 'tertiary',
		'color' => $colors[ 'tertiary' ],
	),
);

add_theme_support( 'editor-color-palette', $editor_color_palette );

editor-gradient-presets.php

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'     => __( 'Primary to Secondary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'primary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'secondary' ] ) . ' 100%)',
			'slug'     => 'primary-to-secondary',
		),
		array(
			'name'     => __( 'Primary to Tertiary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'primary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'tertiary' ] ) . ' 100%)',
			'slug'     => 'primary-to-tertiary',
		),
		array(
			'name'     => __( 'Secondary to Tertiary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'secondary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'tertiary' ] ) . ' 100%)',
			'slug'     => 'secondary-to-tertiary',
		),
		array(
			'name'     => __( 'Tertiary to Primary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'tertiary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'primary' ] ) . ' 100%)',
			'slug'     => 'tertiary-to-primary',
		),
	)
);

hex-to-rgba.php

/**
 * Convert a 3- or 6-digit hexadecimal color to an associative RGB array.
 *
 * @param string $color The color in hex format.
 * @param bool   $opacity Whether to return the RGB color is opaque.
 *
 * @return string
 */
function hex_to_rgb( $color, $opacity = false ) {

	if ( empty( $color ) ) {
		return false;
	}

	if ( '#' === $color[0] ) {
		$color = substr( $color, 1 );
	}

	if ( 6 === strlen( $color ) ) {
		$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
	} elseif ( 3 === strlen( $color ) ) {
		$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
	} else {
		$default                 = \Go\Core\get_default_color_scheme();
		$avaliable_color_schemes = get_available_color_schemes();
		if ( isset( $avaliable_color_schemes[ $default ] ) && isset( $avaliable_color_schemes[ $default ]['primary'] ) ) {
			$default = $avaliable_color_schemes[ $default ]['primary'];
		}
		return $default;
	}

	$rgb = array_map( 'hexdec', $hex );

	if ( $opacity ) {
		if ( abs( $opacity ) > 1 ) {
			$opacity = 1.0;
		}

		$output = 'rgba(' . implode( ',', $rgb ) . ',' . $opacity . ')';

	} else {

		$output = 'rgb(' . implode( ',', $rgb ) . ')';

	}

	return esc_attr( $output );

}