WordPressのテーマでブロックエディタに対応するポイント

WordPressの新しいブロックエディタを使い始めた方も多いだろう。昨年末にリリースされたWordPress 5.0より採用になったブロックエディタ(開発時のGutenberg)である。
フロント側はあまり変更ないように見えながら、ダッシュボードの投稿画面はブロックエディタによって大きく変化した。正直とっつきづらい印象を持ちつつ、公式ディレクトリに登録しているテーマから対応してみた。

なお、以下に挙げる対応なしでもブロックエディタは使える。とはいえダッシュボードとフロントの見た目がかなり食い違ってしまうため、ユーザーが戸惑ってしまう心配がある。テーマを配布していたり、クライアント案件では対応をおすすめする。

ブロックエディタに対応する宣言

まずはテーマの アクション after_setup_theme で3点追加する。

  • ブロックエディタ用のcssを有効にする
  • ビジュアルエディタ用のcssを有効にする(旧エディタと同じ)
  • ビジュアルエディタ用のcssファイルを指定する

フロントとダッシュボードの見た目が同じになるように調整

次にフロント画面をみながら、ダッシュボードの投稿画面の表示が同等になるように editor-style.css にスタイルを追加していく。この作業は旧バージョンと同じくコツコツと。ブロックエディタではさらにブロック特有のクラスが付与される。
例えば、
.wp-block-gallery
.wp-block-preformatted
.wp-block-table
.wp-block-quote
.wp-block-button__link …など他にも多数。
このように wp-block- と付くクラスはWordPress 5.0以降に内包される theme.min.css にスタイルが定義されているので、そのまま利用すればいいかんじに表示される。テーマで上書きしてもよい。

フロントとダッシュボードの投稿画面で正しく同じように表示されるか?確認しながら追加する。

block-editor

動作確認には、プラグインの Block Unit Test for Gutenberg を使うと便利だ。
» Block Unit Test for Gutenberg – WordPress プラグイン | WordPress.org

フォントを調整

ブロックエディタはデフォルトでなぜか font-family が Noto Serif(明朝体) になっている。

block-font

テーマで使っていないフォントは無効にしないと、違和感がある。テーマと同じ font-family で上書きしたほうがいよいだろう。

editor-style.css で宣言したcssは、ダッシュボードの投稿画面では .editor-styles-wrapper に内包される。つまり、ここで body に書いたスタイルは、投稿画面の .editor-styles-wrapper body に適用される。

投稿タイトルだけはなにがなんでも Noto Serif になってしまうので、ピンポイントで font-family を上書きする。

テーマと同じフォントになった!

block-font-support

投稿画面でGoogle Fontsを使うには?

テーマでGoogleフォントを使っている場合は、ダッシュボードでもGoogleフォントを有効にしておこう。

‘W’が特徴的なGoogleフォント「Raleway」
block-google-font

旧エディタで文字化けする場合の対応

運用の途中からブロックエディタに切り替えた場合、新規投稿からブロックエディタが採用される。過去の投稿は旧エディタ(クラシックエディタ)で表示される。その際にアイコンが文字化けしまった。

block-classic

twentynineteen から該当箇所を探してコピペ。

アイコンの文字化けは解決!

block-classic-support

なお、プラグインの Classic Editor を利用する場合は問題ない。
旧エディタからブロックに変換した場合も問題ない。

テーマタグを追加する

テーマタグとは style.css のTags に書いてあるキーワードだ。ダッシュボードからテーマを検索する際のフィルターに使われる。one-column や custom-header、translation-readyなど、あらかじめ用意されたタグのなかから、テーマの特徴を選んでアピールする。

ブロックエディタに対応したら、block-styles を追加しておこう!

block-theme-tags

カスタム投稿タイプでブロックエディタを使うには?

カスタム投稿タイプでブロックエディタで使うには、register_post_type()に show_in_rest を追加する。これをやっておかないと、カスタム投稿タイプだけクラシックエディタになってしまうので、注意!

使ってみたら、ブロックエディタ意外に便利だった。
テーマではまだまだ新旧エディタに対応する必要があるので面倒くさい。早くブロックエディタのみになってほしいな~

今回、ブロックエディタに対応したテーマはこちら
» BirdFIELD – WordPress テーマ | WordPress.org

コメントを残す

メールアドレスが公開されることはありません。