WordPress 5.4にて、editor-gradient-presetsというサポートが追加されました。
まだどんなブロックにも追加できるというわけではない（現時点ではカバーやボタンのみのようです）ですが、特にボタンにグラデーションを使いたいな、というときには非常に便利です。
カバーにグラデーション
Theme HandbookにもBlock Gradient Presetsという項目が追加されました。
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',
),
)
);デフォルトで用意されているグラデーションはキレイで使い勝手がよさそうですが、もちろん自分で準備することも可能です。グラデーションパレットを用意したときは、カラーパレットを使用したときと同様、has-(slug)-background というクラス名が追加されます。
※ デフォルトでグラデーションが使用できるのはカバーとボタンのみですが、「高度な設定」からクラスを追加すればグラデーションを使用することは可能です。
例えばこんなふうに・・・。
逆に、グラデーションを使いたくない、使ってほしくないときは無効化することもできます。
add_theme_support( 'disable-custom-gradients' );サイトに合わせてうまく使用すれば、よりリッチなサイトが作れそうですね。