WordPressのブロックエディターでは時々「このブロックには、想定されていないか無効なコンテンツが含まれています。」という表示が出ることがあるという記事を以前投稿しました。
このブロックには、想定されていないか無効なコンテンツが含まれています
WordPress5.5にバージョンが上がりこのあたりもだいぶ変わってきているようですので再度検証してみます。
HTML編集した後「このブロックには、想定されていないか無効なコンテンツが含まれています。」っていわれる
WordPress5.5になってブロック内の文字色も「よりリッチなテキスト制御」によりHTMLやCSSをいじることなく変更できるようになりました。ですからブロックエディターでHTMLを直接編集する機会はかなり減ったのではないかと思います。
それでも、部分的に文字サイズを大きくしたいという欲求にかられるかもしれません。そんな時便利なプラグインもありますが、HTMLやCSSを知っていれば…「直接HTMLに書いちゃえ！」ってなると思います。
例えばこんな感じ…
「よりリッチなテキスト制御」から文字色を部分的に緑色に変更しました。この緑色の文字の部分を大きな文字にしたいなあという場合「詳細設定」から「HTMLとして編集」をクリックしHTML編集画面にします。
<p>テスト投稿の本文<span style="color:#0ea22c" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>HTMLは上記のようになっていますがこれを以下のように編集します。
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>style="color:#0ea22c"
の部分をstyle="color:#0ea22c; font-size:2em;"
と変更しました。
これでビジュアル編集に戻ると以下のように表示されます。
あえて記述間違いをしてみる
段落の閉じるタグを間違えた
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文<p>段落のタグ
<p> ～ </p>
の閉じるタグを間違えて”/”を消してしまい
<p> ～ <p>
としてしまいました。
出ました…恐怖の
「このブロックには、想定されていないか無効なコンテンツが含まれています。」
「解決」をクリック
「解決」をクリックすると「HTMLに変換」と「ブロックへ変換」と表示されます。上のHTMLソースを見るとわかりますが、「HTMLに変換」をクリックすると誤った記述のまま「カスタムHTMLブロック」に変わります。
「ブロックに変換」をクリックすると正しいHTMLの記述に修正されて正常に表示されました。
「HTMLに変換」をクリック
こちらもやはり誤った記述のまま「カスタムHTMLブロック」に変わります。
「…」→「クラシックブロックに変換」をクリック
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文<p>クラシックエディターのブロックに変換されました。懐かしいクラシックエディターですね。HTMLソースは修正されていません。
「…」→「ブロックのリカバリーを試行」をクリック
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p><p></p>こちらもクラシックエディターになりました。何故か空の段落タグが増えています。おそらく「段落タグを閉じるタグが無い」と判断しているのでしょう。
ダブルクォーテーションマークを誤って消した
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>スタイルの記述
style="color:#0ea22c; font-size:2em;"
と記述しなくてはいけないところを
style="color:#0ea22c; font-size:2em;
と最後のダブルクォーテーションマークを誤って消してしまいました。
このブロックでエラーが発生したためプレビューできません。
は？
もう一回聞いていいですか？
このブロックでエラーが発生したためプレビューできません。
ひたすら戻りましょう！
そんなにっちもさっちもいかないエラー表示が出たらページ左上部の「元に戻す」アイコンをひたすらクリックしましょう。何度かクリックするとどこかのタイミングで表示される可能性があります。
