WordPress:Gutenbergでグラデーション設定部分をカスタマイズする方法

WordPress:Gutenbergでグラデーション設定部分をカスタマイズする方法

Gutenbergでカバーブロックとボタンブロックの背景指定にグラデーションカラーを適用できるようになりましたが、その設定部分をカスタマイズする備忘録です。

カラーを追加する

現時点で12種類のグラデーションカラーがデフォルトとして用意されており、そこへ任意のカラーを追加したい場合はfunctions.phpへ下記のように記述します。

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'     => __( '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',
  ),
  array(
    'name'     => __( 'Very light gray to cyan bluish gray', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
    'slug'     => 'very-light-gray-to-cyan-bluish-gray',
  ),
  array(
    'name'     => __( 'Cool to warm spectrum', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
    'slug'     => 'cool-to-warm-spectrum',
  ),
  array(
    'name'     => __( 'Blush light purple', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
    'slug'     => 'blush-light-purple',
  ),
  array(
    'name'     => __( 'Blush bordeaux', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
    'slug'     => 'blush-bordeaux',
  ),
  array(
    'name'     => __( 'Luminous dusk', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
    'slug'     => 'luminous-dusk',
  ),
  array(
    'name'     => __( 'Pale ocean', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
    'slug'     => 'pale-ocean',
  ),
  array(
    'name'     => __( 'Electric grass', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
    'slug'     => 'electric-grass',
  ),
  array(
    'name'     => __( 'Midnight', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
    'slug'     => 'midnight',
  ),

  // Add gradient #1
  array(
    'name'     => __( 'example01', 'themeLangDomain' ),
    'gradient' => 'linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%)',
    'slug'     => 'example01',
  ),

  // Add gradient #2
  array(
    'name'     => __( 'example02', 'themeLangDomain' ),
    'gradient' => 'radial-gradient(circle at 79% 30%, rgba(230, 230, 230, .04) 0%, rgba(230, 230, 230, .04) 50%,rgba(12, 12, 12, .04) 50%, rgba(12, 12, 12, .04) 100%), radial-gradient(circle at 53% 89%, rgba(210, 210, 210, .04) 0%, rgba(210, 210, 210, .04) 50%,rgba(24, 24, 24, .04) 50%, rgba(24, 24, 24, .04) 100%), radial-gradient(circle at 92% 89%, rgba(17, 17, 17, .04) 0%, rgba(17, 17, 17, .04) 50%,rgba(205, 205, 205, .04) 50%, rgba(205, 205, 205, .04) 100%), radial-gradient(circle at 21% 13%, rgba(124, 124, 124, .04) 0%, rgba(124, 124, 124, .04) 50%,rgba(243, 243, 243, .04) 50%, rgba(243, 243, 243, .04) 100%), radial-gradient(circle at 77% 0%, rgba(16, 16, 16, .04) 0%, rgba(16, 16, 16, .04) 50%,rgba(130, 130, 130, .04) 50%, rgba(130, 130, 130, .04) 100%), linear-gradient(90deg, rgb(247, 101, 31), rgb(249, 105, 208))',
    'slug'     => 'example02',
  ),
) );

上記はデフォルトのグラデーションに加えてさらに2種類のグラデーションを追加したものになり、エディタ上で柔軟に編集できるのには対応していませんが、example02のようにちょっと特殊なタイプも追加できます。
また、デフォルトの中で不要なグラデーションがある場合は、上記を記述しつつ不要なグラデーション部分の記述を削除すればエディタ上から消すことができます。

グラデーション設定部分

グラデーション設定の記述時は、'name'にはホバーした際にツールチップで表示される名前、'gradient'にはカラー指定、'slug'はカラー適用時に付与されるclassの一部に適用させたいものをそれぞれ指定します。
classは.has-{slug}-gradient-backgroundのようになり、例えば'slug'example01にしていた場合はグラデーション指定した要素に.has-example01-gradient-backgroundのように付与されるので、フロントで使用しているCSSにもそのclassを用いてスタイル指定を記述します。

グラデーション設定を無効化する

グラデーションは使いたいけどユーザーが自由にカラー設定できるのを無効化したい場合は、下記を記述することでカラー指定やタイプ指定の部分を非表示にすることができます。

functions.php

add_action( 'after_setup_theme', 'disable_editor_custom_gradients' );
function disable_editor_custom_gradients() {
  add_theme_support( 'disable-custom-gradients' );
}

グラデーション自体を無効化する

グラデーション自体が不要であれば、下記を記述することで非表示にすることができます。

functions.php

add_action( 'after_setup_theme', 'disable_editor_gradients' );
function disable_editor_gradients() {
  add_theme_support( 'disable-custom-gradients' );
  add_theme_support( 'editor-gradient-presets' );
}

Close the search window,
please press close button or esc key.