Lazy Blocksの使い方 vol.3

2021.03.20

PHP/WordPress/プラグイン

Lazy Block　応用編（2022年2月追記）

Lazy Blockの使い方の3回目です。今回は応用編ということですが、ちょっとしたtipsです。参考になればいいなと思います。

特に最後の勝手に出力されるdivをまとめて消せるコードは結構有用だと思いますよ笑

Lazy Blocksのカテゴリをオリジナルカテゴリにする。 Lazy Blocksで内容が入力されていれば表示する。 Lazy Blocksで勝手に出力されるdivを消す。 Lazy Blocksで勝手に出力されるdivをまとめて消す。

Lazy Blocksのカテゴリをオリジナルカテゴリにする。

Lazy blocksで新しくカスタムブロックを作ったとき、カテゴリを選択できます。

が、カスタムブロックの数がたくさん増えた時に、例えば全てLazy Blocksカテゴリに入れるのも、視認性が悪くて嫌ですね。

個人的には、使われる投稿タイプやら、種類などでカテゴリ分けしたいなと思う訳です。

そこでブロックのカテゴリ要素を増やします。

ちなみにこのカテゴリを増やすこと自体は、Lazy Blocks関係なく、ご自身でカスタムブロックを作成した時にも使えます。

functions.php

function add_block_categories( $categories, $post ) {
  return array_merge(
    $categories,
    array(
      array(
        'slug' => 'sample-cat',
        'title' => 'サンプルカテゴリ',
      ),
    )
  );
}
add_filter( 'block_categories_all', 'add_block_categories', 10, 2 );

追記（2021年8月）：今までフック名は「block_categories」でしたが、WordPress5.8から非推奨になり現在は「block_categories_all」となっています。

これで自分専用のカテゴリを作ることができました。

ちなみに、'icon' => 'WordPressのDashicon名'を入力すれば、カテゴリ自体のアイコンを設定できます。
さらにJavaScriptを使用することで、独自のアイコンも設定できるらしいです。

Lazy Blocksで内容が入力されていれば表示する。

たまに、必要な時のみ入力して、入力されたときは出力したい場合があります。
これは簡単に実装できます。

たとえば、テキストブロックで入力がされたときのみに出力する場合

<?php if ( isset( $attributes['変数名'] ) ) : ?>
　<?php echo $attributes['変数名'];?>
<?php endif; ?>

issetを使用することで、そのブロックが存在するかどうかを証明できるため、入力された時にのみ、表示させるという挙動が可能になります。

Lazy Blocksで勝手に出力されるdivを消す。

Lazy Blocksはその仕様上、カスタムブロックを出力する際、勝手に独自のdivを出力してブロックを囲みます。

この勝手に出力されるdivを出力させないようにする方法は公式からやり方が提示されています。

functions.php

add_filter( 'lazyblock/スラッグ名/frontend_allow_wrapper', '__return_false' );

ブロックごとにこのフィルターをつけることで、勝手に出力されるdivを制御できます。

また、複数のブロックの出力を制御するためにはブロックを作るごとにこのフィルターを増やす必要があります。

公式ドキュメントでの紹介ページ

Lazy Blocksで勝手に出力されるdivをまとめて消す。

追記(2022年2月)下記のコードにて、最新のやり方が見つかりました。最新のコードはこちら（Lazy Blocksで勝手に出力されるdivをまとめて消す（改））をご覧ください。
これ以下は古いやり方になります。ご了承ください。

さきほど勝手に出力されるdivを制御するコードを紹介しました。

しかし、ブロックごとにフィルターをつけるのは効率的ではないと思います。

そこで、自動で全てのブロックのdivを制御できるコードを作りました。

※自作のコードなので、もしかしたらもっと効率がいい方法があるかもしれません。

functions.php

if(!is_admin()) {
  function remove_lazyblocks_div(){
    $args = array(
      'posts_per_page' => -1,
      'post_status' => 'publish',
      'post_type' => 'post' //ここを各自変更します。複数やpage属性設定可
    );
    $all_posts = get_posts($args);
    foreach( $all_posts as $single_page ) {
      if (has_blocks( $single_page->post_content )){
        $single_page = parse_blocks( $single_page->post_content );
        $block_arr = array_unique($single_page,SORT_REGULAR);
        foreach($block_arr as $content){
          add_filter( $content['blockName'] . '/frontend_allow_wrapper', '__return_false' );
        }
      }
    }
  }
  add_action('wp','remove_lazyblocks_div');
}

'post_type'を変更することでカスタム投稿や、固定ページでも制御できます。

ブロックを使用しているpost_typeを指定し、全て取得します。

$args = array(
  'posts_per_page' => -1,
  'post_status' => 'publish',
  'post_type' => 'post' //ここを各自変更します。複数やpage属性設定可
);
$all_posts = get_posts($args);

取得した各々がもしブロックを持っていたら

foreach( $all_posts as $single_page ) {
  if (has_blocks( $single_page->post_content )){

ブロックを解析し配列に、

$single_page = parse_blocks( $single_page->post_content );

ページに表示されている同じ配列名をもつブロックをまとめ、

$block_arr = array_unique($single_page,SORT_REGULAR);

解析したブロックに一つづつ、div制御のフィルターをかける。

foreach($block_arr as $content){
  add_filter( $content['blockName'] . '/frontend_allow_wrapper', '__return_false' );
}

最後に

今回は、Lazy Blocksの応用編というかtipsを紹介しました。

Lazy Blocksの解説は一応これで終わります。

みんなもカスタムブロックを簡単に作れるLazy Blocksを使ってみよう！

追記：最後のLazy Blocksで出力されるdivについて色々試してみました('ω')→Lazy Blocksで勝手に出力されるdivを制御する（消す）方法について、色々試してみた

名刺を新しくしました。

Lazy Blocksの使い方 vol.2

B! LINE