ブロックウィジェットで「ショートコードブロック」を使ったら表示が崩れた件

WordPressのウィジェット機能はWordPress5.8以降、ブロックウィジェットになり、これまでのウィジェットよりもとても便利になりました。ブロックエディタでできていたことのかなり多くのことがウィジェット内でもできるようになったので、活用されている方も多いことだと思います。

題記、ブロックウィジェットを使う中で(どうしてそんなことに…?)という意外な仕様によるつまづきがありましたのでご報告いたします。

目次

【起きた問題】ブロックウィジェットの「ショートコードブロック」に、ショートコード化した再利用ブロックを入れると前後にpタグが入る

環境
やろうとしたこと

ブロックウィジェット内で再利用ブロックを表示させたい

起きた問題

ブロックウィジェットのショートコードブロックに、ショートコード化した再利用ブロックを入れたところ、前後に謎のpタグが入ってしまい、レイアウトが壊れてしまった…

ブロックウィジェットでは再利用ブロックを呼び出せなかったので、Reusable Blocks Extendedで再利用ブロックをショートコード化し、ブロックウィジェット内でショートコードブロックを追加し、ショートコードで再利用ブロックを呼び出そうとしていました。

うまく動いてくれない「ショートコードブロック」くん…

「ショートコードブロック」で呼び出した場合、こんな感じのコードが出力されます。

<p>
<p>この行内がショートコード化した内容になります</p>
</p>

こうなると、pが入れ子になってしまいエラーが出てしまうことと、レンダリング上では空のpタグという認識ではなくなるので、CSSなどでp:empty{ display:none; }とかを追記しても当たってくれませんでした。

今回はReusable Blocks Extendedを使ってショートコード化した再利用ブロックを入れようとしてこうなりましたが、Reusable Blocks Extended以外の方法で再利用ブロックをショートコード化していたり(SWELLのブログパーツ機能など)、再利用ブロックではなくともHTMLタグが含まれた内容が返ってくるタイプのショートコードであれば同様の問題が起こります。

ショートコードを埋め込むと前後に謎のpタグが入る…というのはブロックウィジェット以前からあるようですが、クラシックウィジェットの頃はフィルターフックで回避ができていたようです。
以下、参考までにクラシックウィジェット利用時にフィルターフックで回避する際のコードです(今回の問題はこれでは解決できませんでしたが、クラシックウィジェット使う場合は有効ですので一応)

//ショートコード周りの自動整形を解除
function shortcode_p_fix($content) {
	$array = array (
		'<p>[' => '[',
		']</p>' => ']',
		']<br />' => ']'
	);
	$content = strtr($content, $array);
	return $content;
}
add_filter('widget_text', 'shortcode_p_fix');

【解決方法】「ショートコードブロック」ではなく、「カスタムHTMLブロック」を使う

解決方法としては、「ショートコードブロック」を使わずに別のショートコードが動くブロックを利用する、とすると謎のpタグが入るのを回避することができました。

ただし、「ショートコードブロック」でなければよい、というわけではなさそうです。「段落ブロック」(何もブロックを選ばない場合のデフォルトのブロック)にショートコードをコピペしてしまうと、「ショートコードブロック」に自動で置換えされてしまいました。どうやら明示的に別のブロックを選ぶ必要がありそうです。

確実に余計なタグが入らず表示できたのは「カスタムHTMLブロック」でした。「カスタムHTMLブロック」を選んでショートコードをコピペしたところ、自動置換えされず、謎のpタグが入ったりもせずショートコードが動いてくれました!

「カスタムHTMLブロック」なら余計なタグが入らない!

お気づきの方もいるかもしれませんが、そもそもReusable Blocks Extendedはウィジェットで呼び出せるようにしてくれているのですが、それだとどうしてもwrapper的なdivタグが入ってしまい、それはそれで困ってしまったので今回このような苦肉の策を講じることとなりました…。

ブロックウィジェットを利用するような方向での制作も増えていますので、参考になればさいわいです。

  • URLをコピーしました!
  • URLをコピーしました!
目次