ブロックエディター カラーパレットの関数

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

ブロックエディターのカラーパレットに独自の設定をする関数とスタイルシートのサンプル。

function xxxx_theme_setup() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => esc_attr__( 'black'),
            'slug'  => 'black',
            'color' => '#333',
        ),
        array(
            'name'  => esc_attr__( 'white', 'themeLangDomain' ),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
        array(
            'name'  => esc_attr__( 'red', 'themeLangDomain' ),
            'slug'  => 'red',
            'color' => '#dc143c',
        ),
        array(
            'name'  => esc_attr__( 'deeppink', 'themeLangDomain' ),
            'slug'  => 'deeppink',
            'color' => '#ff1493',
        ),
        array(
            'name'  => esc_attr__( 'pink', 'themeLangDomain' ),
            'slug'  => 'pink',
            'color' => '#f6d1e1',
        ),
        array(
            'name'  => esc_attr__( 'green', 'themeLangDomain' ),
            'slug'  => 'green',
            'color' => '#008000',
        ),
        array(
            'name'  => esc_attr__( 'mediumblue', 'themeLangDomain' ),
            'slug'  => 'mediumblue',
            'color' => '#0000cd',
        ),
        array(
            'name'  => esc_attr__( 'blue', 'themeLangDomain' ),
            'slug'  => 'blue',
            'color' => '#5ac3e0',
        ),
        array(
            'name'  => esc_attr__( 'orange', 'themeLangDomain' ),
            'slug'  => 'orange',
            'color' => '#ffa500',
        ),
        array(
            'name'  => esc_attr__( 'yellow', 'themeLangDomain' ),
            'slug'  => 'yellow',
            'color' => '#ffff00',
        ),
    ) );
}
add_action( 'after_setup_theme', 'xxxx_theme_setup'); 

//color palette
//black
.has-black-background-color {
  background-color: #333;
}
.has-black-color {
  color: #333;
}

//white
.has-white-background-color {
  background-color: #fff;
}
.has-white-color {
  color: #fff;
}

//red
.has-red-background-color {
  background-color: #dc143c;
}
.has-red-color {
  color: #dc143c;
}

//deeppink
.has-deeppink-background-color {
  background-color: #ff1493;
}
.has-deeppink-color {
  color: #ff1493;
}

//pink
.has-pink-background-color {
  background-color: #f6d1e1;
}
.has-pink-color {
  color: #f6d1e1;
}

//mediumblue
.has-mediumblue-background-color {
  background-color: #0000cd;
}
.has-mediumblue-color {
  color: #0000cd;
}

//blue
.has-blue-background-color {
  background-color: #5ac3e0;
}
.has-blue-color {
  color: #5ac3e0;
}
//green
.has-green-background-color {
  background-color: #008000;
}
.has-green-color {
  color: #008000;
}

//orange
.has-orange-background-color {
  background-color: #ffa500;
}
.has-orange-color {
  color: #ffa500;
}

//yellow
.has-ywllow-background-color {
  background-color: #ffff00;
}
.has-ywllow-color {
  color: #ffff00;
}