JINの右吹き出しが「無効なコンテンツ」に！balloon-rightだけ変えたのが原因だった
こんにちは！のっくです！
私はいつもブログをスマホで書きます。
JINの吹き出しはよく使いますが、右側にしたいだけなのに、HTMLからビジュアルエディターへ戻ると「このブロックには、想定されていないか無効なコンテンツが含まれています。」。右だけ壊れる。なぜ。
leftをrightにしただけなんだが。見た目は右になったのに、なんでエラーなの。
私の場合、原因はHTML側の balloon-left だけを balloon-right に変えていたこと。正常な右側吹き出しには、ブロック開始コメント側にも "layout":" balloon-right" が入っています。ほかにも直すところがあったようだ。見逃していた・・
しかも途中で、AI相棒イトと一緒に別の場所を犯人扱いして一回ハズした。この記事は、そこも含めた実機確認の記録です。
JINの右吹き出しだけ「無効なコンテンツ」になった
ブログでは、のっくを左、イトを右にして掛け合いを入れています。左側は普通に作れたものの、スマホの編集画面では右側へ変える設定を見つけられず、左の吹き出しを作ってからHTMLを直接触って直していました。
普段私は記事をイト（ChatGPT）にHTML形式で作ってもらってペタっとコピペして、ビジュアルエディターに直して微調整して公開しています。でも、吹き出し右だけなんか壊れる。
そこでやったことはシンプル。HTMLの balloon-left を balloon-right へ変更。それだけです。
見た目はちゃんと右へ移動。ところがビジュアルエディターへ戻ると、その吹き出しだけ無効ブロック判定。HTMLは表示できるのに、JINブロックとしては怒られる。ややこしい。
WordPressのブロックエディターは、ブロックが持っている情報と実際のHTMLが合っているかを見ています。今回のコードは、見た目は右、名札は左のままという状態だった。
最初はwp:paragraphを疑った。でも違った
最初に疑ったのは、JINの chat-block の中に入っていた wp:paragraph です。カスタムブロックの中へ段落ブロックが入っているから壊れるのでは、とイトも判断。
そこで一度、段落ブロックのコメントを外してみる。
<!-- wp:paragraph -->
<p>本文</p>
<!-- /wp:paragraph -->
これを消せば直ると思った。直らん。
その後、WordPress上でJINの吹き出しを新しく作り、正常なコードを確認。すると、JIN自身が作った吹き出しにも wp:paragraph は普通に入っています。
wp:paragraph氏、まさかの冤罪。疑ってごめん。
ここ、地味に大事。AIが最初に出した原因候補も、実際のJINが生成するコードと見比べないと確定できません。
原因はballoon-rightだけ変えていたことだった
改めて、JINが生成した左と右の保存形式を比べる。違いはHTMLの left と right だけではありません。
左側の開始コメント
<!-- wp:jin-gb-block/chat-block {"mediaID":2400} -->
HTML側には balloon-left が入ります。
右側の開始コメント
<!-- wp:jin-gb-block/chat-block {"mediaID":2400,"layout":" balloon-right"} -->
HTML側は balloon-right。つまり右側では、開始コメントのlayoutとHTMLのballoon-rightがセットになっている。
私が作っていたのは、開始コメントに右配置の情報がないまま、HTMLだけ右にしたコード。Gutenbergから見ると、ブロックの設定と中身が一致していなかったわけです。犯人そこかーい。
実機で確認できたイト右側の正常コード
<!-- wp:jin-gb-block/chat-block {"mediaID":2400,"layout":" balloon-right"} -->
<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-right clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img src="https://android-nok.com/wp-content/uploads/ito_kihon.png"/></div><span class="icon-name">イト</span><div class="balloon-serif"><div class="balloon-content"><!-- wp:paragraph -->
<p>イトだよ右</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:jin-gb-block/chat-block -->
これは、私のJIN環境で新しく作って確認した保存形式。
PC版には右側設定があった。スマホでは見つけられなかった
さらにPC版のWordPress編集画面を確認すると、JIN吹き出しのブロック設定に「キャラクターの配置」があり、左右を選べる。JIN公式マニュアルでも、右上の歯車からブロック設定を開き、キャラクターの配置を左右どちらかに指定できるます。
スマホで吹き出し作ると左にしかならなくて、PC普段見ないので気づかなかったー
PC版には右設定あったんかーい。
スマホ版では、私はその設定項目を見つけられなかった。ここは「スマホ版には右設定がない」のかは不明。私のスマホ環境では見つけられなかったデス。スマホでもできないかなあ。
スマホで設定場所が見つからないときは、いきなりHTMLを left → right と書き換える前に、PC版のブロック設定も確認するのが安全。HTMLを直接触るなら、クラス名だけでなくブロック開始コメント側もセットで見ます。
「HTMLに変換」なら表示できた。でもJINブロック修復とは別
無効なコンテンツになった吹き出しで「HTMLに変換」を選ぶと、私の環境では見た目を表示できた。これは生のHTMLとして保持する方向へ変わったためで、元のJIN chat-block の整合性が直ったわけではありません。
WordPress公式のブロックエラー説明でも、期待されるマークアップと実際のHTMLが合わない場合にエラーが起こり得ること、解決方法の一つとしてHTMLへ変換する選択肢が案内されています。
すでにCustom HTMLとして安定表示している過去記事まで、全部慌てて戻すことはしません。とりあえず表示されてるので・・・。新しく吹き出しを作るなら、PCでJIN自身が生成した正常な保存形式HTMLをイトに渡して作ってもらう基準にする。今後はこれでいきます！
JINの吹き出しを右側にするには？
まずはJINのブロック設定にある「キャラクターの配置」を確認します。HTMLを直接編集する場合、私の環境では balloon-right に加えて、開始コメントにも "layout":" balloon-right" が入った保存形式だった。
balloon-leftをballoon-rightへ変えるだけではダメ？
私の環境ではダメだった。HTMLだけ右へ変えると、ブロック属性と実際のHTMLが食い違い、無効なコンテンツになる。
wp:paragraphを消せば直る？
今回の実機確認では直りません。JINが新しく生成した正常な吹き出しにも wp:paragraph は入っている。
無効なコンテンツは全部layout不足が原因？
わかりません！今回分かったのは、私のJIN右吹き出しで起きた1ケースです。構文の崩れやテーマ・プラグインとの組み合わせなど、別の原因もあり得ます。
まとめると、右側へ変えるときは「見た目のright」だけではなく「ブロック側のright」もそろえる。 そして設定画面から変更できるなら、まずそちらを使う。AIが作ったHTMLも、最後は実サイトで答え合わせ。これが今回の結論です。
右吹き出しの記事で、右吹き出しを壊すわけにはいかぬ。layoutとballoon-right、両方そろえて出荷🐥
このブログは、のっくの実体験をもとに、AI相棒のイトとねえねえこのネタ需要ある？など相談しながら作っています。
それではのっくでした～いっと！
