ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更

  • BlockEditor
  • ブロックエディターでは、テキスト色背景色デフォルト12色カラーパレットの中から選ぶことが出来ます。今回は、ブロックエディターテキスト色背景色カラーパレット独自スタイルに変更する方法を紹介します。

    コード

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

    /* スタイルシート */
    
    add_action( 'after_setup_theme', function(){
      add_theme_support( 'editor-styles' );
      add_editor_style('assets/css/editor-styles.css'); 
    });
    
    /* ブロックエディター */
    
    add_action( 'after_setup_theme', function() {
        add_theme_support( 'editor-color-palette', array(
            array(
                'name' => '赤色',
                'slug' => 'vivid-red',
                'color' => '#C3201C',
            ),
            array(
                'name' => '紺色',
                'slug' => 'dark-blue',
                'color' => '#0D357C',
            ),
            array(
                'name' => '灰色',
                'slug' => 'medium-gray',
                'color' => '#59595A',
            ),
            array(
                'name' => '深緑',
                'slug' => 'dark-green',
                'color' => '#005F30',
            ),
        ) );
    } );

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

    /* 文字色 */
    
    .has-vivid-red-color {
    	color: #C3201C;
    }
    .has-dark-blue-color {
    	color: #0D357C;
    }
    .has-medium-gray-color {
    	color: #59595A;
    }
    .has-dark-green-color {
    	color: #005F30;
    }
    
    /* 背景色 */
    
    .has-vivid-red-background-color {
    	background-color: #C3201C;
    }
    .has-dark-blue-background-color {
    	background-color: #0D357C;
    }
    .has-medium-gray-background-color {
    	background-color: #59595A;
    }
    .has-dark-green-background-color {
    	background-color: #005F30;
    }

    ブロックエディター

    実際ブロックスタイルブロックエディターで反映されているか確認します。

    カバーブロックの背景色を確認し、赤色に設定します。見出しテキスト色を確認し、深緑に設定します。下に3カラムを作成し、すべてのテキスト色背景色を設定します。

    プレビューを表示し、ブロックエディターの設定が反映されているか確認します。

    カバーブロック背景色を確認

    見出しテキスト色を確認

    すべてのテキスト色背景色を設定

    プレビューを表示し、ブロックエディターの設定が反映されているか確認

    以上で今回の説明は終了です。サイトのデザインに合わせて使用する色を設定しておくと便利です。その他、テキストサイズなども設定することが出来ます。