ブロックエディターのデフォルトのグラデーションカラーを変更

2024.07.09

以前のBLOGで、ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更する方法を紹介しました。今回は、ブロックエディターのデフォルトのグラデーションカラーを変更する方法を紹介します。

今回のDEMOは、グラデーションカバーです。

GRADATION PALETTE

GRADATION

白黒のグラデーション、黒透明のグラデーション、黒透明のツートンの3種のグラデーションカバーです。透明部分に画像を挿入しています。

コード

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

add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'     => '白黒90',
            'gradient' => 'linear-gradient(90deg,rgb(255,255,255) 0%,rgb(0,0,0) 100%)',
            'slug'     => 'white-black-90'
        ),
		array(
            'name'     => '透明黒180',
            'gradient' => 'linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 100%)',
            'slug'     => 'black-transparent-180'
        ),
		array(
            'name'     => '透明黒ツートン90',
            'gradient' => 'linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%)',
            'slug'     => 'black-twotone-90'
        ),
        
    )
);

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

.has-white-black-90-gradient-background {
    background: linear-gradient(
        90deg,
        rgb( 255, 255, 255 ) 0%,
        rgb( 0, 0, 0 ) 100%
    );
}

.has-black-transparent-180-gradient-background {
    background: linear-gradient(
        180deg,
        rgba( 0, 0, 0, 0 ) 0%,
		rgba( 0, 0, 0, 1 ) 80%,
        rgba( 0, 0, 0, 1 ) 100%
    );
}

.has-black-twotone-90-gradient-background {
    background: linear-gradient(
        90deg,
        rgba( 0, 0, 0, 0 ) 0%,
		rgba( 0, 0, 0, 0 ) 50%,
		rgba( 0, 0, 0, 1 ) 50%,
        rgba( 0, 0, 0, 1 ) 100%
    );
}