ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更

2024.07.04

ブロックエディターでは、テキスト色や背景色をデフォルトの12色のカラーパレットの中から選ぶことが出来ます。今回は、ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更する方法を紹介します。

コード

functions.phpに、下記コードを入力します。

/* スタイルシート */

add_action( 'after_setup_theme', function(){
  add_theme_support( 'editor-styles' );
  add_editor_style('assets/css/editor-styles.css'); 
});

/* ブロックエディター */

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => '赤色',
            'slug' => 'vivid-red',
            'color' => '#C3201C',
        ),
        array(
            'name' => '紺色',
            'slug' => 'dark-blue',
            'color' => '#0D357C',
        ),
        array(
            'name' => '灰色',
            'slug' => 'medium-gray',
            'color' => '#59595A',
        ),
        array(
            'name' => '深緑',
            'slug' => 'dark-green',
            'color' => '#005F30',
        ),
    ) );
} );

editor-styles.cssに下記コードを入力します。

/* 文字色 */

.has-vivid-red-color {
	color: #C3201C;
}
.has-dark-blue-color {
	color: #0D357C;
}
.has-medium-gray-color {
	color: #59595A;
}
.has-dark-green-color {
	color: #005F30;
}

/* 背景色 */

.has-vivid-red-background-color {
	background-color: #C3201C;
}
.has-dark-blue-background-color {
	background-color: #0D357C;
}
.has-medium-gray-background-color {
	background-color: #59595A;
}
.has-dark-green-background-color {
	background-color: #005F30;
}