Skip to content

Instantly share code, notes, and snippets.

@richtabor
Last active September 5, 2023 12:23
Show Gist options
  • Save richtabor/f4ed19679d3d3c1734d94df790e9c42a to your computer and use it in GitHub Desktop.
Save richtabor/f4ed19679d3d3c1734d94df790e9c42a to your computer and use it in GitHub Desktop.
/**
* 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' );
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(
'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',
),
)
);
/**
* 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 );
}
@Klemart3D
Copy link

Thanks for samples but warning in your blog post you're talking about add_theme_support( 'editor-gradient-preset' ) when the functional parameter name is editor-gradient-presets (with final "s"). See: https://developer.wordpress.org/reference/functions/add_theme_support/#parameters

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment