この記事は下記の悩みや要望を持つ方にオススメです。
- WordPressで「このブロックには想定されていないか無効なコンテンツが含まれています」が表示される
- Cocoonで「ボタン」や「囲みボタン」でブロックが正しく機能しない
- 「ブロックのリカバリーを試行」を行っても良いのかどうか知りたい
先日からこのブログではCocoonに搭載されている「ボタン」と「囲みボタン」を使用しているのですが、いくつかのボタンで下画像のように「このブロックには想定されていないか無効なコンテンツが含まれています」と表示されるようになりました。

一応、上画像の状態になっても表示は下画像のように通常通りですが、何か問題が起きてから対処していると手遅れになることもあると思うので、いろいろ対処してみました。

そこで、この記事に備忘録代わりとして対処した方法を残しておきます。

ブログと動画投稿やってます。
お仕事依頼などはこちら!
「このブロックには想定〜います」の原因
運営者:個人(ブログ初心者)
使用サーバー:ConoHa WING
使用ブログ:WordPress
使用テーマ:Cocoon
PV数や使用ASPなどはこちら
おそらくCocoonのボタンに「このブロックには想定されていないか無効なコンテンツが含まれています」が表示される原因はアフィリエイトのコードだと考えられます。(下画像のリンクタグ・ショートコードが原因)

私がCocoonのボタンで使用してるASPはA8.netや
バリューコマース、楽天リンクシェアなどがあり、A8netで作成した
FRONTIERとバリューコマースによって作成した
マウスコンピューターのボタンはエディター画面でも通常通り表示されていました↓


一方で、楽天リンクシェアで作成したパソコン工房やAmazonアソシエイトのリンクを使ったボタンはブロックの表示が乱れていました↓


そのため、ASPによってはCocoonのボタンと相性が悪いケースもあるようです。
私が確認した限りではA8netとバリューコマースのリンクは表示が崩れないため、それらのASPをメインにすることで事前に対処できそうです。
「このブロックには想定〜います」の対処法
A8netとバリューコマースを利用することで対処は出来ましたが、どうしても他のASPを使用したい時があります。
ここからは「他のASPでも対処することが出来ないのか」色々試してみたので解説して行きます。
ブロックのリカバリーを試行
まず、「ブロックのリカバリーを試行」をクリックすると、下画像のように通常の囲みボタンへ戻りました。

↓通常通りになった

しかし、時間が経つと再び「このブロックには想定されていないか無効なコンテンツが含まれています」が表示され、同じ状態に戻ってしまいました。

しっかり記事を更新し、再度開いても同じ状態になるため「ブロックのリカバリーを試行」では解決は無理そうです…
「解決」をクリックしてみる
「ブロックのリカバリーを試行」の横にある「…」をクリックすると、下画像のように「解決」「HTMLに変換」「クラシックブロックに変換」が表示されます。

「解決」をクリックしてみると、下画像のように問題となっている部分へ濃いマーカーがひかれました。

HTMLに詳しい方ならどのような間違いがあるのか分かると思いますが、私は全く分からないので「HTMLに変換」と「ブロックへ変換」を行なったところ、下画像のようになりました。

どちらも保存してから再度エディターを開いても「ブロックのリカバリーを試行」が表示されなかったため、どうやら問題は解決できたみたいです。
ページ上でもちゃんと表示されており、問題は解決できたみたいです↓

実際にボタンを貼ってみたので確認してみて下さい↓
また、「…」をクリックした時に「解決」「HTMLに変換」「クラシックブロックに変換」が表示されていましたが、どうやら「HTMLに変換」と「クラシックブロックに変換」は「解決」で開いた「HTMLに変換」と「ブロックへ変換」と同じみたいです。
まとめ

Cocoonのボタン機能で「このブロックには想定されていないか無効なコンテンツが含まれています」と表示される原因はASPのリンクでした。
A8.netや
バリューコマースのアフィリエイトリンクは問題ありませんでしたが、楽天リンクシェアやAmazonアソシエイトのリンクはボタンへ影響が出ました。
もしボタンへ影響があるリンクを使用する場合は「HTMLに変換」と「クラシックブロックに変換」を行うことで対処が可能でした。

ブロックが正しい形で保存されていないと、表示が崩れたり、文章が消えたりする原因にもなるので同じ症状がある人は対処してみて下さい。
また、他にもWordPress関連で起きたトラブルを解決しているので参考にしてみて下さい。
特にCLS値を解決した記事はオススメです。