Site Overlay

Lazy Blocksのテキストエリアを改行つきで表示させる


WordPressのカスタムブロックが簡単につくれるプラグイン「Lazy Blocks」で、テキストエリアの改行を入力した通りに反映・出力させる方法です。

出力コード

HTML + Handlebarsの場合

functions.php
function my_custom_lazyblock_handlebars_helper ( $handlebars ) {
	$handlebars->registerHelper( 'nl2br', function( $val ) {
		return nl2br($val);
	});
}
add_action( 'lzb/handlebars/object', 'my_custom_lazyblock_handlebars_helper' );
Lazy BlocksのCode入力欄
{{{nl2br control_name}}}

まず、functions.phpにHandlebarsのCustom Helperを書いておきます。Handlebarsで「nl2br」と書いたら、PHPでnl2brされて返ってくる、という指定です。

そして、該当のブロックの出力コードをnl2br control_nameとします。この時、波カッコが2つだと、<>がエスケープされ、改行が<br />という文字で表示されてしまいます。Handlebarsでは、波カッコを3つにするとエスケープが回避されますので、ここは3つにします。

PHPの場合

Lazy BlocksのCode入力欄
<?php echo nl2br($attributes['control_name']); ?>

PHPの場合は、デフォルトの$attributesをnl2brで囲めばOK。

Theme Templateの場合

block.php
<?php echo nl2br($attributes['control_name']); ?>

テーマテンプレートは、PHPの場合と同じ書き方を、該当のblock.phpに書けばいいだけです。


Lazy Blocksを使い始めたときは、Handlebars?は?何それ??という感じだったので、ここまで辿りつくのにもけっこう苦労しました。そもそも、HandlebarsとはJavaScriptのテンプレートエンジンである、というところからのスタートでした。

Lazy Blocks以外でHandlebarsを使うことはあまりなさそうだけど、備忘録として残しておきます。