WordPressのCocoonテーマで空の段落がエラーを引き起こす問題（RichText is not defined）

by

はじめに

WordPressでブログを運営していると、時々不思議なエラーに遭遇することがあります。最近、Cocoonテーマを使用した記事を編集しようとしたところ、突然エラー画面が表示されて編集できなくなりました。原因を探った結果、ブログカードブロック内の「空の段落」が犯人だったことがわかりました。この記事では、その経験と解決方法を共有します。

発生したエラーの内容

エラーメッセージは次のようなものでした。

ReferenceError: RichText is not defined
    at save (blocks.build.js?ver=89b3c442e96664f0bcdd&fver=20250402082656:1:102616)
Code language: JavaScript (javascript)

さらに、コンソールには以下のような警告も表示されていました。

Format "core/underline" is already registered to handle bare tag name "span".
Code language: JavaScript (javascript)

このエラーが発生すると、投稿編集画面が表示できなくなり、記事の更新ができなくなってしまいます。

原因を探る過程

まず、テーマを変更してみると問題なく編集できることがわかりました。これによって、Cocoonテーマ自体に何らかの問題があると推測できました。

次に、同じテーマの他の記事は問題なく編集できることから、この特定の記事の内容に問題があるのではないかと考えました。そこで、投稿内容を少しずつ削除しながらテストしていきました。すると、記事の内容をすべて削除すると問題が解消されることがわかりました。

さらに調査を進め、問題の箇所を特定するために部分的に内容を戻していったところ、次のHTML部分を追加したときにエラーが発生しました。

<!-- wp:cocoon-blocks/blogcard -->
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
<p>最後までお読みいただいて、ありがとうございました。</p>
<p>　</p>
<p>こちらもどうぞ。</p>
<p>https://chiilabo.com/2020-10/degital-bank-book-error-connection/</p>
<p>https://chiilabo.com/2020-07/internet-search-basio-address/</p>
<p>他にも参考になるサイト</p>
</div>
<!-- /wp:cocoon-blocks/blogcard -->
Code language: HTML, XML (xml)

驚きの発見：犯人は空の段落

さらに詳しく調べていくと、この中の <p>　</p> という部分（全角スペースのみを含む段落）が問題の原因だとわかりました。この部分を削除するだけで、編集画面が正常に表示されるようになったのです。

一見何の問題もなさそうな空の段落が、なぜエラーを引き起こすのでしょうか。これはWordPressのブロックエディター（通称Gutenberg）とCocoonテーマの相互作用によるものと考えられます。

技術的な解説

WordPressのブロックエディターでは、「RichText」というコンポーネント（部品）を使って文章を編集可能にしています。これは車のエンジンのような重要な部品で、テキスト編集の機能を担っています。

Cocoonテーマのブログカードブロックは、通常はURLを入れるだけの単純な使い方を想定しています。しかし、今回のケースでは次のような想定外の使い方をしていました：

  1. 複数の段落を含めている
  2. URLだけでなく普通のテキストも含めている
  3. 全角スペースのみの空の段落を含めている

特に3つ目の「空の段落」が問題で、想定外の動作を引き起こしてしまったのです。

解決方法

この問題を解決するには、以下のいずれかの方法があります：

  1. ブログカードブロック内の空の段落を削除する
  2. ブログカードは本来の使い方（URLのみを入力）で使用する
  3. 複数のURLを使いたい場合は、それぞれ別のブログカードブロックに入れる

今回は1の方法で解決しました。空の段落を削除するだけで、エラーなく編集できるようになりました。

ブログカードブロックの正しい使い方

Cocoonテーマのブログカードブロックは、URLを入力すると自動的にそのWebページのタイトルやサムネイル画像を取得して、きれいなカード形式で表示してくれる便利な機能です。しかし、その使い方には制限があります。

正しい使い方の例：

<!-- wp:cocoon-blocks/blogcard -->
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
<p>https://example.com/some-page/</p>
</div>
<!-- /wp:cocoon-blocks/blogcard -->
Code language: HTML, XML (xml)

まとめ

WordPressのCocoonテーマで編集画面が表示できなくなるエラーは、ブログカードブロック内の空の段落が原因でした。この問題は、ブログカードブロックを本来の使い方とは異なる方法で使用した場合に発生します。解決方法は空の段落を削除するか、ブログカードを正しく使用することです。

このような一見小さな問題が大きなエラーを引き起こすことがあるのは、コンピュータの世界ならではの現象です。プログラムは指示通りに忠実に動くため、想定外の使い方をすると問題が発生することがあります。この経験が、WordPressでブログを運営している方の参考になれば幸いです。