WordPressのブロックエディタのグラデーションのセットをカスタマイズ

グラデーションブロック使いたいけど、カラーセットは使いづらい

WordPressのブロックエディタの初期カラーセット

かなり個性的なセットですね。

WordPress5.4ではadd_theme_supportのeditor-gradient-presetsでカラーセットが変更できるようになったみたいです。

functions.php

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'     => __('Vivid cyan blue to vivid purple', 'themeLangDomain'),
			'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
			'slug'     => 'vivid-cyan-blue-to-vivid-purple'
		),
		array(
			'name'     => __('Vivid green cyan to vivid cyan blue', 'themeLangDomain'),
			'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
			'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
		),
		array(
			'name'     => __('Light green cyan to vivid green cyan', 'themeLangDomain'),
			'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
			'slug'     => 'light-green-cyan-to-vivid-green-cyan',
		),
		array(
			'name'     => __('Luminous vivid amber to luminous vivid orange', 'themeLangDomain'),
			'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
			'slug'     => 'luminous-vivid-amber-to-luminous-vivid-orange',
		),
		array(
			'name'     => __('Luminous vivid orange to vivid red', 'themeLangDomain'),
			'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
			'slug'     => 'luminous-vivid-orange-to-vivid-red',
		),
	)
);

nameでホバーした時に注釈がでます。gradientはまんまCSSですね。slugは被らなければOK

変更後

グラデーションがボタンやカバーで使えるようになった。

最近はあまりグラデーションをかけないデザイン多めだったのですが、ブラウザ的にCSSブレンドモードも使えそうなので表現の幅が広がりそうですね。