Gutenbergエディターのカラーパレットを変更する方法

はじめに

Gutenbergエディターに設定しているカラーパレットを変更します（図1参照）。

この記事では、この方法について説明します。

Cocoonのカラーパレット

表1にCocoonのデフォルトのカラーパレットを示します。
カラーパレットの色には、CSSクラスhas-{slug}-colorが適用されます。

Cocoon設定→全体→キーカラー「サイトキーカラー」を設定すると、設定したキーカラーは反映されます。

実装手順

カラーパレットを変更

以下のコードをfunctions.phpに追加します。

指定したカラーパレットのslugに対応するcolorを変更できます。

add_filter('block_editor_color_palette_colors', function ($colors) {
  $skin_colors = [
    'red'           => '#e60033',
    'pink'          => '#e95295',
    'purple'        => '#884898',
    'deep'          => '#55295b',
    'indigo'        => '#1e50a2',
    'blue'          => '#0095d9',
    'light-blue'    => '#2ca9e1',
    'cyan'          => '#00a3af',
    'teal'          => '#007b43',
    'green'         => '#3eb370',
    'light-green'   => '#8bc34a',
    'lime'          => '#c3d825',
    'yellow'        => '#ffd900',
    'amber'         => '#ffc107',
    'orange'        => '#f39800',
    'deep-orange'   => '#ea5506',
    'brown'         => '#954e2a',
    'grey'          => '#949495',
    'black'         => '#333333',
    'white'         => '#ffffff',
    'watery-blue'   => '#f3fafe',
    'watery-yellow' => '#fff7cc',
    'watery-red'    => '#fdf2f2',
    'watery-green'  => '#ebf8f4',
    'ex-a'          => '#fef4f4',
    'ex-b'          => '#f8f4e6',
    'ex-c'          => '#eaf4fc',
    'ex-d'          => '#eaedf7',
    'ex-e'          => '#e8ecef',
    'ex-f'          => '#f8fbf8',
  ];

  foreach ($colors as $key => $color_data) {
    $slug = $color_data['slug'] ?? '';

    // slugに一致した場合
    if (isset($skin_colors[$slug])) {
      $colors[$key]['color'] = $skin_colors[$slug];
    }
  }

  return $colors;
});

カラーパレットを追加

以下のコードをfunctions.phpに追加します。

カラー名nameに対応したslugとcolorを追加することで、新しいカラーパレットの色を追加できます。

add_filter('block_editor_color_palette_colors', function ($colors) {
  $add_colors = [
    ['name' => 'Amazon' , 'slug' => 'ex-amazon' , 'color' => '#f6a306'],
    ['name' => 'Rakuten', 'slug' => 'ex-rakuten', 'color' => '#cf4944'],
    ['name' => 'Yahoo'  , 'slug' => 'ex-yahoo'  , 'color' => '#51a7e8']
  ];
  $colors = array_merge($colors, $add_colors);

  return $colors;
});

さいごに

今回紹介した方法を使えば、Gutenbergエディターのカラーパレットに新しい色を追加したり、既存の色を変更することができます。
カラーパレットの色を自由にカスタマイズして、より一層サイトに合ったデザインを実現できます。