WordPress 「Gutenberg(グーテンベルク)」エディタを使った案件を担当して困ったこと・対処法

こんにちは。武井です。
久しぶりに重い腰というか手?を動かしてTips記事を書きます。
WordPressの「Gutenberg(グーテンベルク)」エディタを使用して、カスタム投稿タイプやカスタムフィールドなどでカスタマイズする案件を初めて担当したので、今までのエディタとの違いで困ったことや対処した方法を紹介します。

「Gutenberg(グーテンベルク)」とは

「Gutenberg(グーテンベルク)」とはWodPress5.0から導入されたWordPressの新エディタです。
従来のエディタ「Classic Editor」は、2021年末にサポート終了するとのことで、今後は「Gutenberg(グーテンベルク)」が主流になっていくかと思われます。
【2019年最新版】Gutenbergの使い方!WordPress初心者でもわかる図解あり|wp.geek

「Gutenberg(グーテンベルク)」の所感

2018年にリリースされたにも関わらず、2020年現在「Gutenberg(グーテンベルク)」はあまり普及していないよう、私の周りでもディレクターやエンジニアでもその存在を知らない人が多いと感じてます。

というのも、入力画面がエディタだけでなく、サイドメニューも含めて大幅に変更されており、使用感が圧倒的に変わるので、見慣れない人は敬遠しがちなのかと思います。
しかし、慣れればブロックエディタという積み上げ方式の入力は、記事系のページなどでは大変使い勝手がよいです。
その一方で、カスタムフィールド中心でエディタを使用しないようなページではあまりそのメリットがないようにも思えます。

ところが、「Block Lab」というプラグインを使って「カスタムブロック」という機能を利用するとかなりカスタマイズの幅が広がります。
こちらはまだ案件実践していないので、またの機会に記事にしたいと思います。

困ったこと・対処法など

パーマリンクどこ?

記事毎にURLを設定する場合に必要なパーマリンクの設定欄ですが、見つけづらい上に、一度保存した後でしか表示されません。
タイトルにカーソルをあわせると上に表示されます。
もしくは右メニューの「文書」タブから「パーマリンク」のメニューを開きます。本文編集中は「ブロック」のタブになっているため、見つかりづらいです。

エディタを消せない

カスタムフィールドを作成する際に、よくACFのプラグインを使用するのですが、その中で「非表示」にする項目を選べるメニューがあります。
カスタムフィールドを駆使した入力画面では、デフォルトのコンテンツエディタが必要ないことがままあるため、今まではACFの画面からコンテンツ非表示にしていました。
しかし、Gutenbergエディタはこちらの機能で非表示に設定しても消えてくれません(※執筆現在)

解決方法1:「Classic Editor」を使用

「Classic Editor」プラグインを使用すると、コンテンツエディタを従来のエディタに戻すことができます。
従来のエディタに戻った状態だと、コンテンツ非表示の設定が反映されます。
一部の投稿画面ではブロックエディタを使いたい、という場合には「ユーザーがエディタを選択」できるようにするか、function.phpの設定で特定の投稿タイプのみにエディタを変えることもできます。

解決方法2:「Custom Post Type UI」で「REST API で表示」をfalseに

カスタム投稿タイプを管理する「Custom Post Type UI」プラグインに、「REST API で表示」という項目があります。
Gutenbergエディタは、REST APIを使っているので「REST API で表示」の項目を”false”にすることで従来のエディタに切り替わり、コンテンツ非表示の設定も反映されるようになります。

エディタの上にカスタムフィールドを設置できない

これもACFプラグインを使用してて困ったのですが、カスタムフィールドの設定画面で位置を選べる項目があり、従来は「高 (タイトルの後)」とするとコンテンツエディタより上に設置することができました。
しかし、Gutenbergではこの設定にしてもコンテンツエディタより下にしか表示されません。これは解決できませんでした。
仕方なく、前述の「Classic Editor」プラグインを使用するか、位置を諦めるしかないと思われます。

カテゴリをラジオボタンにできない

カテゴリやカスタムタクソノミーをラジオボタンにしたいという要件は毎度のように発生します。
従来のエディタではfunction.phpにJavaScriptを記述することでチェックボックスのHTMLを書き換えてラジオボタンにしてましたが、Gutenbergではその方法が使えなくなりました。
しかし便利なプラグイン「Radio Buttons for Taxonomies」を使えば一発解決でした。

PHPのバージョンが古いと使用できない

Gutenbergの話ではないですが、WordPress5.2からPHP最低必須バージョンが変更になりました。PHP 5.6.20 以降が必須となり、それ以前のバージョンでは動作しません。更に推奨環境としては7.4以上となっています。
「そんな古いPHP使ってないだろ」って思うかもしれないのですが、案外リニューアル案件で既存サーバそのまま使うって話になると、PHPのバージョンなど全然アップデートしていない環境も多いので要注意です。

おわり

以上、つらつらとGutenbergの愚痴のようなものを書きましたが、ブロック積み上げの機能自体は私は凄く好きなので、普及率が上がってプラグインも完全に互換性があるようになればいいなと思ってます。
ぜひ、カスタムブロックを駆使していい感じのモジュール入力画面を作ってみたいです。