WordPressのGutenbergエディターで「脚注」がツールバーに表示されない原因と対処法

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

WordPressのGutenbergエディターで、文章の一部を選択しても、ツールバーの中に「脚注」が表示されない現象が発生しました。

調べた結果、原因はテーマやプラグインではなく、WordPressに保存されていたユーザー設定でした。

この記事では、脚注が表示されなくなった原因と、元に戻す方法を紹介します。

現象

Gutenbergエディター

ブロックエディターで段落内の文字を選択すると、通常はツールバーから「脚注」を追加できます(図1参照)。
ところが、今回の環境では「脚注」が表示されませんでした。

WordPress 6.9と7.0の脚注ブロックの違い

今回の現象を調べるうえで、WordPressのバージョンによる脚注ブロックの扱いも確認しました。

WordPress公式には、WordPress 6.4から脚注ブロックがブロックインサーター(ブロック一覧)に表示されるようになったことが記載されています。

一方、現在のブロックエディター公式リファレンスでは、脚注ブロックの設定に inserter: false と記載されています。

これは、脚注ブロック自体は存在するものの、ブロック一覧には表示しない設定です。

実際に、WordPress 6.9ではブロック一覧から脚注ブロックを追加できましたが、7.0ではブロック一覧に表示されず、文章を選択してツールバーから追加する使い方になっています。

ただし、公式ドキュメントには、この変更がWordPress 7.0で行われたという経緯までは明記されていません。

今回の問題は、ブロック一覧から脚注が消えたこと自体ではなく、ツールバーからも脚注を追加できなくなったことです。

原因

非表示設定がツールバーにも影響する仕組み

設定

Gutenbergエディターでは、非表示に設定されたブロックを使用可能なブロックの一覧から除外できます。

今回の環境では、ユーザー設定の hiddenBlockTypes に次の値が保存されていました。

['core/footnotes']

hiddenBlockTypes は、ブロックエディターで非表示にするブロックの名前を保存する設定項目で、core/footnotes は脚注ブロックを表します。

この設定によって脚注ブロックが使用可能なブロックから除外されていたため、文字を選択してもツールバーに脚注が表示されなくなっていました。

非表示設定が残った経緯

今回の環境では、WordPress 6.9のときに脚注ブロックを非表示に設定し、その設定がWordPress 7.0以降も引き継がれた可能性があります。

当時の操作や設定変更の履歴を確認できているわけではありませんが、次のような経緯が考えられます。

  • ラベル
    WordPress 6.9

    ブロック一覧に脚注ブロックが表示されている

  • ラベル
    脚注ブロックを非表示に設定

    ユーザー設定 hiddenBlockTypes に core/footnotes が保存される

  • ラベル
    WordPress 7.0以降

    脚注ブロックがブロック一覧に表示されない仕様に変更

  • ラベル
    以前の非表示設定が残る

    core/footnotes が非表示リストに残ったままになる

  • ラベル
    今回発生した症状

    ツールバーにも脚注が表示されない

このうち、WordPress 6.9で非表示に設定したことや、その設定が7.0以降に引き継がれたことは、私の記憶と今回の調査結果から考えられる推測であり、公式の変更履歴で確認したものではありません。

原因を確認した環境では、脚注ブロック自体や脚注の書式設定は登録されていましたが、hiddenBlockTypes に core/footnotes が含まれていました。
そのため、脚注ブロックの非表示設定がツールバーに表示されない原因になっていたと判断できます。

対策

脚注ブロックの非表示設定を解除すれば、再びツールバーから脚注を追加できるようになります。

今回は、デベロッパーツールのコンソールを使って、脚注だけを非表示リストから取り除きます。

  • ラベル
    非表示設定を確認
    デベロッパーツール
    1. 投稿の編集画面を開き、キーボードのF12キーを押して開発者ツールを表示します(図2参照)。
    2. 「コンソール」タブを開き、左上の実行コンテキストが topになっていることを確認してください。
    3. 次のコードを実行します。
      結果に core/footnotes が含まれていれば、脚注ブロックが非表示に設定されています。

    wp.data.select('core/preferences').get('core', 'hiddenBlockTypes')
  • ラベル
    脚注だけを非表示リストから削除

    次のコードをコンソールに貼り付けて実行します。
    このコードでは、現在の非表示ブロック一覧を取得し、core/footnotes だけを取り除いています。

    const p = wp.data.select('core/preferences').get('core', 'hiddenBlockTypes') || [];
    wp.data.dispatch('core/preferences').set('core', 'hiddenBlockTypes', p.filter(n => n !== 'core/footnotes'));
  • ラベル
    脚注が表示されるか確認
    1. コードを実行したら、投稿の編集画面を再読み込みします。
    2. 段落内の文字を選択し、ツールバーを開いてください。
    3. 脚注が表示されていれば修正完了です。

さいごに

今回紹介した方法を使えば、非表示ブロックの設定が原因で脚注がツールバーに表示されない問題を解決できます。
今回の原因は、ユーザー設定 hiddenBlockTypes に core/footnotes が残っていたことでした。
デベロッパーツールのコンソールから脚注だけを非表示リストから取り除くことで、再び脚注を利用できるようになりました。
同じように脚注が表示されなくなった場合は、今回紹介した方法を試してみてください。

タイトルとURLをコピーしました