Gutenberg ブロックエディタに設定した内容をカスタムフィールドを含め他のページで表示する｜ Mana Design Lab.

他のページで設定したブロックの内容を表示したかった時の覚書。

汎用性からショートコードにまとめる。

function example_extract_block_type_from_page( $post_id, $block_name ) {

    $post_content = get_post( $post_id )->post_content;

    $blocks = array_filter( parse_blocks( $post_content ), function( $block ) use( $block_name ) {
        return $block_name === $block['blockName'];
    });

    $block_content = '';
    foreach( $blocks as $block ) {
        $block_content .= render_block( $block );
    }

    return $block_content;
}
function example_extract_block_type_from_page_shortcode( $atts=[] ) {
    $defaults = [
        'post_id' => 0,
        'block_name' => ''
    ];
    $atts = shortcode_atts( $defaults, $atts );

    return example_extract_block_type_from_page( $atts['post_id'], $atts['block_name'] );
}
add_shortcode( 'example_extract_block_type_from_page', 'example_extract_block_type_from_page_shortcode' );

function example_extract_block_type_from_page( $post_id, $block_name ) {

$post_content = get_post( $post_id )->post_content;

$blocks = array_filter( parse_blocks( $post_content ), function( $block ) use( $block_name ) {

return $block_name === $block['blockName'];

});

$block_content = '';

foreach( $blocks as $block ) {

$block_content .= render_block( $block );

}

return $block_content;

}

function example_extract_block_type_from_page_shortcode( $atts=[] ) {

$defaults = [

'post_id' => 0,

'block_name' => ''

];

$atts = shortcode_atts( $defaults, $atts );

return example_extract_block_type_from_page( $atts['post_id'], $atts['block_name'] );

}

add_shortcode( 'example_extract_block_type_from_page', 'example_extract_block_type_from_page_shortcode' );

実際のショートコード

[example_extract_block_type_from_page post_id="123" block_name="myblock"]

1	[example_extract_block_type_from_page post_id="123" block_name="myblock"]

ブロック名はブロックテンプレートで「$block」をvar_dumptして確認。

Advanced Custom Fieldsでカスタムブロックを作成している場合はブロック名が「acf/xxxxx」のようになる。

[example_extract_block_type_from_page post_id="123" block_name="acf/myblock"]

1	[example_extract_block_type_from_page post_id="123" block_name="acf/myblock"]

関連記事