自分で作ったテーマをGutenbergへ対応させていこうその2

こんにちは、みみです。

前回のその1（自分で作ったテーマをGutenbergへ対応させていこうその1）を書いた後にユニットテストのプラグインを知ったので、その2ではまずBlock Unit Test の使い方をメモしておこうと思います。公開した直後に気付く事が多いのは何故かって思うけど、つまりは調査不足です、すみません。

Block Unit Test for Gutenberg

メモるといっても、使い方は超簡単で、プラグインを普通にインストールして有効化すると、固定ページに下書きでテストページが吐き出されています。あとはそのページを見て表示チェックしていけば良いだけ。（投稿ページだと勘違いしてちょっと焦ったのはないしょ。）

このサイトのテストページを公開してみたので参考にどうぞ。

私的にはカラムのブロック違いのテストとか気になっているのだけど、まあ細かい所は置いといてこれでバーっとテストすれば大体の粗が見えて取っ付きやすいですね。記事は前後してしまったけれど、まずはこのテストをやってみるのが良いかもです。

このブログのテーマ（絶賛作りかけ）だと、テーブル表示に対応してなかったので対応しておきました。カラムのマージンも気になる（なんでそこだけpx？とかなんで600px？とかタブレット見てないんじゃ？とかとか…）ので調整。画像の左右寄せは、諸々あってちょっと保留します…。ほかにも気になる処があるのですが追々対応します…。

エディタ側のスタイルを合わせたり、使わない機能を非表示にしたりしよう

そんな感じで、個別のブロックの表示を調整できたら、エディタ側のスタイルもテーマに合わせてみましょうか。これ別にマストではないと個人的には思っているのだけど、合っている方が使い勝手は良いので対応できたら対応した方が良さそう。

手順はハンドブックに書いてあります

この辺りから、Gutenberg Handbookを開いてみましょう。ハンドブックは結構前から書かれていますが、リリース前にまたどーーーーーっと、翻訳する気が全く起こらないほどの加筆修正が入りました。が、とても重要なことばかり書いてあるので頑張って読みましょう。

文字のサイズ変更を非表示に

個人的に先ずやっておきたいのは、文字のサイズ変更をオフにすること。

add_theme_support('disable-custom-font-sizes');

とfunctions.phpに追記するだけで、プルダウンのほうではなくて数値での設定をオフにできます。

色設定をカスタム

微妙なカラーパレットを自分色に変えてしまいましょう。

add_theme_support( 'editor-color-palette', array(
  array(
    'name' =&gt; __('黒'),
    'slug' =&gt; 'black',
    'color' =&gt; '#000',
  ),array(
    'name' =&gt; __('白'),
    'slug' =&gt; 'white',
    'color' =&gt; '#fff',
  ),array(
      'name' =&gt; __('赤'),
      'slug' =&gt; 'red',
      'color' =&gt; '#CE2121',
  ),
  array(
      'name' =&gt; __('金'),
      'slug' =&gt; 'gold',
      'color' =&gt; '#988768',
  )
) );

とか設定すると、

こんな感じになります。完全に色を出したくなければ、

add_theme_support( 'disable-custom-colors' );

で非表示になります。

エディター側のスタイルをカスタムする

これも用意されています。

add_theme_support('editor-styles');
add_editor_style( 'YOUR-EDITOR-STYLES.css' );

として、YOUR-EDITOR-STYLES.css（お好きな名前でどうぞ）にカスタム内容を書けば反映されます。ハンドブックにある通り、bodyタグに指定したスタイルは.editor-styles-wrapperにリライトされるみたいなので、大体そのままコピペしても大丈夫かもしれませんが、個人的には確認しながら手動で移植することをオススメします。当ブログではまだfont-familyぐらいしか設定していません。

そんなに大変じゃないよ？

という訳で、もしも、これからWordPressとやり合う為には先ずりあくととやらに手を出さなければならぬのか…と思い悩んでいる人がいらっしゃるのであれば安心して欲しいのですが、カスタムブロック作ったりしないのならそんなに大変じゃないので取り敢えずやってみたら良いと思います。

まあでも対応し始めると、面白くなったり憤ったりして、ついついカスタムブロック作りたくなると思いますけどね…。