Php 定制古腾堡调色板-前端未显示一种颜色

在函数和样式文件中使用下面的代码，我在古腾堡设置了一个自定义调色板，但由于某些原因，我最后添加的灰色没有显示在前端。我看不出代码有什么问题，它快把我逼疯了！有人知道为什么前端没有显示灰色吗？需要注意的是，在古腾堡，调色板正确显示了所有颜色，当我选择自定义灰色时，它不会显示在现场（所有其他颜色都很好）

// Add support for custom colour pallette in Gutenberg.
add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'white', 'themeLangDomain' ),
        'slug' => 'white',
        'color' => '#ffffff',
    ),
    array(
        'name' => __( 'black', 'themeLangDomain' ),
        'slug' => 'black',
        'color' => '#000000',
    ),
    array(
        'name' => __( 'grey', 'themeLangDomain' ),
        'slug' => 'grey',
        'color' => '#F2F2F2',
    ),
    array(
        'name' => __( 'red', 'themeLangDomain' ),
        'slug' => 'red',
        'color' => '#FF0000',
    ),
    array(
        'name' => __( 'blue', 'themeLangDomain' ),
        'slug' => 'blue',
        'color' => '#1A17FD',
    ),
        array(
        'name' => __( 'green', 'themeLangDomain' ),
        'slug' => 'green',
        'color' => '#08EC0A',
    ),
    array(
        'name' => __( 'pink', 'themeLangDomain' ),
        'slug' => 'pink',
        'color' => '#D703FE',
    ),
) );

/** White colours **/
.has-white-background-color {
    background-color: #ffffff;
}
.has-white-color {
    color: #ffffff;
}


/** Black colours **/
.has-black-background-color {
    background-color: #000000;
}
.has-black-color {
    color: #000000;
}

/** Grey colours **/
.has-grey-background-color {
    background-color: #F2F2F2;
}
.has-grey-color {
    color: #F2F2F2;
}

/** Red colours **/
.has-red-background-color {
    background-color: #FF0000;
}
.has-red-color {
    color: #FF0000;
}

/** Blue colours **/
.has-blue-background-color {
    background-color: #1A17FD;
}
.has-blue-color {
    color: #1A17FD;
}

/** Green colours **/
.has-green-background-color {
    background-color: #08EC0A;
}
.has-green-color {
    color: #08EC0A;
}

/** Pink colours **/
.has-pink-background-color {
    background-color: #D703FE;
}
.has-pink-color {
    color: #D703FE;
}