WordPressブロックエディタにスタイルを適用する２つの方法

WordPressのブロックエディタにスタイルを適用するための２つの主要な方法について解説します。

1. wp_enqueue_styleを利用する方法

この方法では、ブロックエディタにテーマのmain.cssを適用することができます。また、enqueue_block_editor_assetsアクションを使用することで、エディタ内で独自のタグやテンプレートを出力することも可能です。

add_action( 'enqueue_block_editor_assets', 'add_block_editor_style' );
function add_block_editor_style() {
  wp_enqueue_style( 'block-editor-style', get_theme_file_uri( 'main.css' ) );
  echo '<div>test</div>';
  get_template_part('content','svg-symbol');
}

2. add_editor_styleを利用する方法

add_editor_styleはブロックエディタ専用の方法で、この方法を使用すると.editor-styles-wrapperというクラスがエディタの内容に自動で追加されます。このため、エディタ内だけにスタイルが適用される特徴があります。ただし、この方法を使用する場合、エディタ用の別途CSSファイルを準備する必要があります。

function custom_editor_css() {
    add_theme_support('editor-styles');
    add_editor_style('main.css');
}

add_action('after_setup_theme', 'custom_editor_css');

これらの方法を適切に組み合わせて使用することで、ブロックエディタの見た目をカスタマイズすることができます。