特定のブロックを動的に非表示にする


フッタにはサイト共通の情報を表示させていますが、情報の一部を非表示にしたいページもあります。例えば「タグ一覧」ページのフッタに「タグ」ウィジェットが表示されているのは冗長。かといって、「タグ一覧」ページ用に「タグ」ウィジェットだけを消したフッタを用意するのも面倒。

なので、ページを描画する際にフッタのブロックを選択的に表示させない仕組みを検討しました。

  • 表示/非表示をコントロールしたいブロックに固有のCSSクラスを設定する
  • 非表示にしたいブロックがある場合には、ページを生成する前に ‘pre_render_block’ フィルターフックのコールバックに非表示用の関数を登録しておく

という手順。非表示用の関数は次のようなものです。ブロックにあらかじめ設定したCSSクラス名が含まれていれば、そのブロックを表示しません。

class LF_SiteWide_Setting {

    /**
     * 指定したクラスのブロックを非表示にする
     * 
     * 'pre_render_block' フィルターフックのコールバックから呼ばれるように設定する
     * 
     * @param string|null $pre_render   'pre_render_block' のコールバックの第1引数
     * @param array       $parsed_block 'pre_render_block' のコールバックの第2引数
     * @param string      $class        非表示とするクラス(ブロックエディタで設定)

     *
     * @return string|null 'pre_render_block' のコールバックが返す文字列
     */
    public static function skip_block( $pre_render, $parsed_block, $class ){

        // classNameには 'class1 class2' のように複数クラスが入り得る
        // ので配列化してから存在チェックする
        if ( isset( $parsed_block['attrs']['className'] ) &&
            in_array( $class, explode( ' ', $parsed_block['attrs']['className'] ), true ) ) {
                $pre_render = '';
        }
        return $pre_render;
    }
}

この関数を、たとえばタグ一覧ページから呼び出すようにセットします。

class LF_Page_Tags {

    public static function wp() {

        if ( 'tags' !== get_query_var( 'pagename' ) ) {
            return;
        }

        // lf-footer-tags CSSクラスのブロックを表示しない
        $class = 'lf-footer-tags';
        add_filter( 'pre_render_block', function( $pre_render, $parsed_block, $parent_block ) use( $class ) {
            return LF_SiteWide_Setting::skip_block( $pre_render, $parsed_block, $class );
        }, 10, 3 );
    }
}

add_action( 'wp', 'LF_Page_Tags::wp' );

Posted by

on

in category