Twenty Nineteen-7、カラーパレットを追加

【2020年3月更新】

カラーパレットというのは、Gutenbergエディタの記述ブロックに背景をつけるためのパレットです。

Twenty Nineteenでは、親テーマでカスタムカラーパレットがその他のテーマサポートと抱き合わさった状態で「after_setup_theme」で実行されています。

そこで親テーマの設定を削除して、新たに入れ替えることにしました。

外観 → テーマエディタ → 子テーマを選択 → functions.phpに以下のコードをコピペ

<?php
add_action( 'after_setup_theme', 'replace_parent_palette', 11 );
function replace_parent_palette() {
remove_theme_support( 'editor-color-palette' );
add_theme_support( 'editor-color-palette',
array(
	array(
		'name'  => __( 'Reference', 'generic' ),
		'slug'  => 'reference',
		'color' => '#ffffe0',
	),
	array(
		'name'  => __( 'Translation', 'generic' ),
		'slug'  => 'translation',
		'color' => '#efe0ff',
	),
	array(
		'name'  => __( 'tips', 'generic' ),
		'slug'  => 'tips',
		'color' => '#e5fff2',
	),
	array(
		'name'  => __( 'Important', 'generic' ),
		'slug'  => 'important',
		'color' => '#ffe5e5',
		),
	array(
		'name'  => __( 'Notes', 'generic' ),
		'slug'  => 'notes',
		'color' => '#d6ffff',
	)
)
);
}
?>

これで、デフォルトの5色が新たな5色に置き換わりました。

	array(
		'name'  => __( 'Notes', 'generic' ),
		'slug'  => 'notes',
		'color' => '#d6ffff',
	)

↑1つのパレットで、この単位で増やせます。色や名前を変えたい場合は関連記事の「パレットの微調整」をご覧ください。

参考資料：Block Editor Handbook「Block Color Palettes」、「remove_theme_support()」

次に上で設定した色が実際に書き出されるようにCSSを追記します。

外観 → カスタマイズ → 追加CSS

.has-reference-background-color {
    background-color: #ccccff;
}
.has-reference-color {
    color: #ccccff;
}

.has-translation-background-color {
    background-color: #ffccff;
}
.has-translation-color {
    color: #efe0ff;
}

.has-tips-background-color {
    background-color: #e5fff2;
}
.has-tips-color {
    color: #e5fff2;
}

.has-important-background-color {
    background-color: #ffccff;
}
.has-important-color {
    color: #ffccff;
}

.has-notes-background-color {
    background-color: #d6ffff;
}
.has-notes-color {
    color: #d6ffff;
}

余談：

最初の図のようにTwenty Nineteenのオリジナルのパレットを残したい場合のコードは↓

<?php
add_action( 'after_setup_theme', 'replace_parent_palette', 11 );
function replace_parent_palette() {
    remove_theme_support( 'editor-color-palette' );
	add_theme_support( 'editor-color-palette',
array(
	array(
		'name'  => __( 'Reference', 'generic' ),
		'slug'  => 'reference',
		'color' => '#ffffe0',
	),
	array(
		'name'  => __( 'Translation', 'generic' ),
		'slug'  => 'translation',
		'color' => '#efe0ff',
	),
	array(
		'name'  => __( 'tips', 'generic' ),
		'slug'  => 'tips',
		'color' => '#e5fff2',
	),
	array(
		'name'  => __( 'Important', 'generic' ),
		'slug'  => 'important',
		'color' => '#ffe5e5',
		),
	array(
		'name'  => __( 'Notes', 'generic' ),
		'slug'  => 'notes',
		'color' => '#d6ffff',
	),
	array(
		'name'  => __( 'Primary', 'twentynineteen' ),
		'slug'  => 'primary',
		'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? 199 : get_theme_mod( 'primary_color_hue', 199 ), 100, 33 ),
	),
	array(
		'name'  => __( 'Secondary', 'twentynineteen' ),
		'slug'  => 'secondary',
		'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? 199 : get_theme_mod( 'primary_color_hue', 199 ), 100, 23 ),
	),
	array(
		'name'  => __( 'Dark Gray', 'twentynineteen' ),
		'slug'  => 'dark-gray',
		'color' => '#111',
	),
	array(
		'name'  => __( 'Light Gray', 'twentynineteen' ),
		'slug'  => 'light-gray',
		'color' => '#767676',
	),
	array(
		'name'  => __( 'White', 'twentynineteen' ),
		'slug'  => 'white',
		'color' => '#FFF',
	)
)
);
}
?>

最後までお読みいただきありがとうございました。