[Cocoon] ブログカードを編集するとURLだけが表示されるようになった？（Cocoon 2.6.3.2）

• 最近、過去に入れていたリンクがCocoonのブログカードになっていないことがあります。
  ブログカード内を編集したタイミングで、ブロックのHTMLの整合性が崩れるようです。
• いったん、「書式を削除」して、行頭の余分な空白を消し、改行しなおすと元に戻せます。
• ブロック内の改行の扱いが<p>から<br>に変更になっているようです。
• WordPress 6.3にアップデート後の仕様変更によるもので、Cocoonの最新版（Cocoon 2.6.3.3）では、対応されました（追記：2023年8月1日）¹。
• やはり、微妙に行頭に半角スペースが付け加えられているようです（追記：2023年8月3日）。

1. ブログカードが表示されない

過去の記事で表示されていたブログカードにリンクを追加すると、表示されなくなってしまうのです。

Cocoonのバージョンは、「2.6.3.2」です。

2. ブロックのHTMLを確認した

過去に投稿した記事のブログカードのHTMLを確認してみると、編集前は改行が <p>タグになっています。

ところが、これを編集してリンクを追加すると、すべてブログカードで表示されなくなりました。

HTMLをみると、全体的に書き換えられています。
空行が空白にかわっていますし、新しいリンクは<p>タグで閉じていません。

ブログカードのURLは行頭にある必要があるはずです。
空白が混入したことでブログカードになっていないようです。

3. 書式のクリア

ブログカード内の<p>タグは、「書式」として認識されていました。
選択するとグレーになります。

「書式のクリア」で解除できたのですが、これだと改行もなくなってしまいます。

そこで、書式をクリアしてから、行頭の空白を削除し改行を追加しました。
すると、再びブログカードになりました。

過去のブログカードに追記するたびに、このような修正が必要なので大変です。

4. 「ブログカード」に関する不具合修正があった

最近の更新で、「ブログカード」に関する不具合修正があったばかりなので、それが関連しているのかもしれません。

Cocoon 2.6.3.2のダッシュボード更新をできるようにしておきました。

・ブログカードブロックでURLを入力する際、aタグリンクURLで入力しているとブロックエラーが出る不具合修正 https://t.co/0qqhUytlm7

— わいひら@寝ログ (@MrYhira) July 26, 2023

5. 最新版で直っている？

• 最新版（Cocoon 2.6.3.3）では、対応されたそうです（追記：2023年8月1日）¹。
• ところが、「バージョン: 2.6.3.4」の状態でも、まだ不具合がありました。（追記：2023年8月3日）

ブログカードをHTML表示すると、<p>ではなく<br>になってはいます。
しかし、既存のブログカードのURLの行頭に不要な空白ができてしまっています。

<br>の次の URL の前に、微妙に空白文字が入っているのがわかりますか？

この空白を削除すると、ブログカードとして認識されます。

ブログカードは、URLが行頭にある場合に認識されるのですが、空白が挿入されてしまうことで、URLがそのまま表示されてしまうのです。

ブログカードにURLを追加したときには、HTML表示で確認したほうがよさそうです。

こちらもどうぞ。

[WordPress] カテゴリーが更新されない？

WordPressで記事のカテゴリーを増やしたら、投稿パネルの「カテゴリー」が更新されない、というケースがありました。 カテゴリーを増やした別のPCからログインして、記事を編集しようとすると、記事編集画面のカテゴリーが以前のままなのです。カテゴリーの追加が反映されていません。 設定から「カテゴリー」を表示すると、正しく表示されるのですが……どうもブラウザ（Chrome）にキャッシュが残っているようです。 記事編集画面を更新しても戻りません。 そこで、Chromeの設定から「C...

chiilabo.com

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。 「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。 こちらがスタイルシートです。不要な項目を非表示（display: non...

chiilabo.com

[PHP] タグ一覧に件数を追加する（Cocoon）

ショートコードで表示している、ブログの記事のタグ一覧に、「件数」を追加しました。 「タグリンク」をタップしても表示される記事が少ないと、別のタグを探し直さないといけないからです。 前回はこちら。 「クリック率向上のために！WordPressで「タグ一覧」に「記事数」を追加する方法」のコードを元に、ショートコード用関数にするために echo の部分を return にして、文字列を返すようにします。 // the_tags_with_count() の末尾 echo $befo...

chiilabo.com

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）

PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。 主な原因は、トップページで表示しているカルーセルです。 CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。 カルーセルがCLSに悪影響している CLS（画面ズレ）が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、...

chiilabo.com

1. ブログカードが編集画面で添付のようになる | 不具合報告 | Cocoon フォーラム

QRコードを読み込むと、関連記事を確認できます。