Block background color not appearing on site

admin管理员组

文章数量:1290950

I added custom colors to my functions.php file:

functions.php
add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => __( 'Blue'),
        'slug'  => 'blue',
        'color' => '#00548F',
    ),

viewing the source in editor:

"backgroundColor\":\"blue\"...
<div class=\"wp-block-columns alignfull event-block has-blue-background-color has-background\">

and finally in the page inspector:

<div class="wp-block-columns alignfull event-block has-blue-background-color has-background">

Not surprisingly, the Rules or Computed Values show zero background attributes.

I tried it in another of my themes (both are hand-rolled) and the same result. When I loaded up the twenty-nineteen theme, it worked.

Is there some function, callback, file that is needed to make this work that I might have errantly deletely?

Thanks.

I added custom colors to my functions.php file:

functions.php
add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => __( 'Blue'),
        'slug'  => 'blue',
        'color' => '#00548F',
    ),

viewing the source in editor:

"backgroundColor\":\"blue\"...
<div class=\"wp-block-columns alignfull event-block has-blue-background-color has-background\">

and finally in the page inspector:

<div class="wp-block-columns alignfull event-block has-blue-background-color has-background">

Not surprisingly, the Rules or Computed Values show zero background attributes.

I tried it in another of my themes (both are hand-rolled) and the same result. When I loaded up the twenty-nineteen theme, it worked.

Is there some function, callback, file that is needed to make this work that I might have errantly deletely?

Thanks.

• block-editor

Share Improve this question asked Jun 9, 2021 at 14:39 breadwildbreadwild 39155 silver badges2222 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

If you're adding theme support for editor-color-palette then you need to add styles for those colours to your stylesheet. As documented:

Themes are responsible for creating the classes that apply the colors in different contexts. Core blocks use “color” and “background-color” contexts. So to correctly apply “strong magenta” to all contexts of core blocks a theme should implement the following classes:

.has-strong-magenta-background-color {
    background-color: #313131;
}
 
.has-strong-magenta-color {
    color: #f78da7;
}

The class name is built appending ‘has-‘, followed by the class name using kebab case and ending with the context name.

本文标签： Block background color not appearing on site