オリジナルテーマにGutenbergを対応させよう！

WordPress 5.0以降、デフォルトのブロックエディタに昇格したグーテンベルクですが、オリジナルテーマを作る際、対応させることが増えたので備忘録として記載しておきます。

まずは管理画面にCSSを適応

まずはfunctions.phpに

function my_guten() {
  wp_enqueue_style( 
    'my-guten', 
    get_template_directory_uri() . '/css/editor-style.css'
  );
}
add_action( 'enqueue_block_editor_assets', 'my_guten' );
add_action( 'wp_head', 'my_guten' );

と記載し、管理画面とフロント画面にCSSを適応しましょう。
アクションフックってやつですね。enqueue_block_editor_asset、wp_headするときにwp_enqueue_styleしてねって書いてます。

CSSを書いていきましょ

あとは、先ほど指定した/css/editor-style.cssにて装飾するだけです。

.editor-styles-wrapper h2 {
  font-size: 4rem;
}
.editor-styles-wrapper h3 {
  font-size: 3rem;
}
.editor-styles-wrapper h4 {
  font-size: 2rem;
}
.editor-styles-wrapper h5 {
  font-size: 1.5rem;
}
.editor-styles-wrapper h6 {
  font-size: 1.2rem;
}

.editor-styles-wrapperは管理画面のブロックエディタに付与されているCSSです。このクラス名がないと管理画面全体に影響が出てしまいます（管理画面サイドのオプション部分など）。

そして、フロント画面の出力箇所は

<section class="editor-styles-wrapper"><?php the_content(); ?></section>

みたいな感じで、.editor-styles-wrapperが親要素にくるようにしてやればOKです。
使うブロックが決まっているなら、そのブロックだけスタイルを当ててやってもいいと思いますし、Block Unit Test for Gutenbergといったプラグインもあるので、こちらを導入してスタイルを当ててやってもいいと思います。

使えるブロックを設定したりだとかもできるのですが、今回のテーマはスタイルの反映ってことで、、、
グーテンベルクのカスタムについてはまたやりますね。