WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

• 昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。
• どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。
• Cocoon バージョン：2.7.2.5で修正されました。

1. ブログカードが妙に縦に伸びている

ブログカードに複数URLを挿入する運用をしています。

WordPress6.5にアップデート後に、ブロックエディタの編集画面をみていたら、ブログカードが妙に縦に伸びていました。

どうも、勝手に空行が追加されているようです。

空行を消してから記事を更新しても、エディタで再表示すると、また空行が追加されます。
ただし、エディタを再表示する度に空行が追加されるわけではありません。

2. サイト表示では問題ない

公開されている記事上の表示には問題はありませんでした。

特に、ブログカードの間に空行があったりはしません。

3. ブロックエディタの仕様変更が原因？

今回のWordPress 6.5へのアップデートでは、かなりブロックエディタの機能が更新されています。

どうも、ブロックエディタの改行の認識の仕様が変更になっているようです。

というのも、ブログカードのHTML表示をみると、改行と<br>それぞれを入れてあります。

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
こちらもどうぞ。
<br>
 https://chiilabo.com/2020-05/lets-start-programming-class/
<br>
 https://chiilabo.com/2023-04/vulnerability/
<br>
 https://chiilabo.com/2024-03/macos-update-sonoma-14-4-1/
<br>
 https://chiilabo.com/2024-02/chatgpt-bug-and-fix-update/
</div>

それが、両方とも改行として認識されているのかもしれません。
そのため、改行が2つ続くのです。

4. WordPress 6.3へのアップデート時に「逆の現象」

これは、以前 WordPress 6.3へのアップデート時に「逆の現象」がありました。
そのときは、改行が認識されず URLが連続してしまい、正しいブログカードが表示できないエラーでした。

以前にはこんなことがありました。

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

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

chiilabo.com

5. Cocoon 2.7.2.4での修正（blocks/src/block/blogcard/save.js）

Cocoon フォーラムに報告したところ、修正版を公開していただきました。

原因と思われる部分を修正してみました。

参照：https://wp-cocoon.com/community/postid/78355/

「blocks/src/block/blogcard/save.js」の保存時の
「.replace( /<br>/g, '\n<br>\n' )」という置換処理が削除されたようです。

「Code」の「Download ZIP」から最新版のテーマをダウンロードします。

既存のcocoon-masterのバックアップを取ってから、インストールします。

5-1. あれ？動作しない？

ところが、うまく動作していませんでした。
ブロックエディタ上は無駄な改行はなくなったのですが、今度はサイト表示したときにブログカードに変換されなくなってしまいました。

どうも、<br>で区切られていた複数のURLが、一つになってしまっているようでした。

ここで、HTML表示にして、<br>を消して、改行コードに変更すると、動作することがわかりました。

6. Cocoon 2.7.2.5での修正（blocks/src/block/blogcard/edit.js）

改めて、修正版を公開していただきました。

変更箇所を見てみると、「blocks/src/block/blogcard/edit.js」で、文字列置換処理が追加されていました。

今回は無事にブログカードで、複数の記事をカードにできるようになりました。

こちらもどうぞ。

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

Cocoonテーマの「ブログカード」を使ってYouTube動画を埋め込んでいるのですが、たまに外部ブログカードとして表示されてしまうことがあるんです。 原因を調べてみると、YouTubeで公開前処理が終わる前に埋め込み動画を設置したことや、URL貼付け時に「リンク」に自動変換されていることが関係しているようです。 埋め込み動画を設置するには、YouTube上で閲覧可能になるまで待って、URLに付いたリンクを削除する必要があります。 ブログカードで動画を埋め込んでいる ブログ内...

chiilabo.com

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

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

chiilabo.com

WordPress 6.5のブロックエディタの更新内容（ざっとまとめ）

WordPress 6.5にアップデートして、ブロックエディタの挙動がだいぶ変わっているので、ざっとメモしています。 リンク関係 URLをペーストすると自動的にリンクになる 挿入されたリンクをクリックするとポップアップから編集できる ボタンブロックのリンクに nofollow の指定ができる リストビュー関係 リストビューをドラッグして移動できる リストビューで右クリックするとオプションメニューが表示される リストビューやブロックツールバーから「名前の変更」ができる 余白・サ...

chiilabo.com

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

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

chiilabo.com

[Cocoon] 「SNSシェア」ボタンをショートコードで表示できるようにした

記事内で、以下のショートコードを入力することで、好きな位置にSNSシェアボタンを出せるようにしたいと思います。 [sns_share_buttons] できたコード（functions.php）はこちら。 /** CocoonのSNSシェアボタンを表示するショートコード 2024-02-18 */ add_shortcode( 'sns_share_buttons', 'wrap_get_template_sns_share' ); if ( ! function_exist...

chiilabo.com

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