WordPress Customizes the gradient colors of the Gutenberg Editor

In “WordPress 5.4 Added Editor Gradient Custom API”, we have already mentioned this new api mechanism and also given basic operating guidance. Today, we will continue to talk about this implementation method in detail.

WordPress Customizes the gradient colors of the Gutenberg Editor插图1

Since WordPress 5.4, the gradient tool in Gutenberg has been officially available, but the default gradient options that come with may not be suitable for our theme. By customizing the gradient options, it can be more convenient for users of the theme.

WordPress Customizes the gradient colors of the Gutenberg Editor

article directories

Set custom gradient colors

We can remove the default gradient and add our own gradient with the following code:

& lt;?php
/ * *
* theme_custom_gradients.
*
* Add custom gradients to the Gutenberg editor.
*
* @ see https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/
*
* @ uses add_theme_support () https://developer.wordpress.org/reference/functions/add_theme_support/
* @ uses _ () https://developer.wordpress.org/reference/functions/__/
* @ uses array () https://www.php.net/manual/en/function.array.php
, /
Function theme_custom_gradients ()
{
Add_theme_support ('editor-gradient-presets', array (
Array (
'name' = > _ _ ('Light blue to white',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mem101d155recover0.5) 0%, rgba (255pence255Power1) 100%)'
'slug' = >' light-blue-to-white'
),
Array (
'name' = > _ _ ('Blue to white',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mem101d155recovery1) 0%, rgba (255record255recovery1) 100%)'
'slug' = >' blue-to-white'
),
Array (
'name' = > _ _ ('Dark blue to white',' your-textdomain')
'gradient' = >' linear-gradient (180 degmeng rgba (299pr 53) 0% recorder rgba (255pr) 255pr) 100%)
'slug' = >' dark-blue-to-white'
),
Array (
'name' = > _ _ ('Blue to dark blue',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mem101, 155recover1) 0%, rgba (29pence39, 53recover1) 100%)'
'slug' = >' blue-to-dark-blue'
),
Array (
'name' = > _ _ ('Light blue to black',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mai 101, 155pm 0. 5) 0%, rgba (0, 0, 0, 0, 1) 100%)'
'slug' = >' light-blue-to-black'
),
Array (
'name' = > _ _ ('Blue to block',' your-textdomain')
'gradient' = >' linear-gradient (180deglegence rgba (0mem101magne 155gba) 0% recordingrgba (0memen0remiere 1) 100%)'
'slug' = >' blue-to-black'
),
))
}

/ * *
* Hook: after_setup_theme.
*
* @ uses add_action () https://developer.wordpress.org/reference/functions/add_action/
* @ uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/
, /
Add_action ('after_setup_theme',' theme_custom_gradients')
? >

With the code above, we add an operation to theafter_setup_themehook and register a file namedtheme_custom_gradientsCallback function of.

intheme_custom_gradientsInside the function, we useadd_theme_supportFunction to enable theme supporteditor-gradient-presets。Then, with the second argument, pass an array containing an array that defines the custom gradient colors.

Each subarray contains three key/value pairs. Namely:

  • $name: The name we want to display in the editor. Please note that we use__()Function to make these names translatable.
  • $gradient: The actual gradient. Check out Css Linear Gradient to learn more
  • $slug: A unique slug alias that we can use in CSS to set the actual gradient.

Add gradient styles to CSS

In order for gradients to really work in our theme, we must add a little CSS style code to each gradient, as follows:

// Light blue to white
.has-light-blue-to-white-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(255,255,255,1) 100%);
}

// Blue to white
.has-blue-to-white-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(255,255,255,1) 100%);
}

// Dark blue to white
.has-dark-blue-to-white-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(255,255,255,1) 100%);
}

// Blue to dark blue
.has-blue-to-dark-blue-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(29,39,53,1) 100%);
}

// Light blue to black
.has-light-blue-to-black-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(0,0,0,1) 100%);
}

// Blue to black
.has-blue-to-black-gradient-background {
    background: linear-gradient(180deg,rgba(0,101,155,1) 0%,rgba(0,0,0,1) 100%);
}

Disable Gutenberg gradients

In some cases, we may want to disable the gradient feature. At this time, we can use the following code fragment to achieve this:

<? php
/**
 * disable_editor_gradients.
 *
 * Disable gradient coors in the gutenberg editor.
 *
 * @see https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/
 *
 * @uses add_theme_support() https://developer.wordpress.org/reference/functions/add_theme_support/
 * @uses array() https://www.php.net/manual/en/function.array.php
 */
function disable_editor_gradients()
{
    add_theme_support('disable-custom-gradients');
    add_theme_support('editor-gradient-presets', array());
}

/**
 * Hook: after_setup_theme.
 *
 * @uses add_action() https://developer.wordpress.org/reference/functions/add_action/
 * @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/
 */
add_action('after_setup_theme', 'disable_editor_gradients');
?>

Using the code above, we add an operation to theafter_setup_themehook and register a file nameddisable_editor_gradientsCallback function of.

indisable_editor_gradientsInside the function, we useadd_theme_supportFunction add pairdisable-custom-gradientssupport。Then, we also workededitor-gradient-presetsTheme support sets an empty array to remove the default gradient.

Content reference: since1979.dev/snippet-011-custom-gutenberg-gradient-colors/

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注