使用 Wordpress 短代码函数呈现古腾堡块，将属性作为参数发送

Question

我有一个生成画廊的短代码，给定画廊 ID。

function rb_scroll_gallery_shortcode( $atts, $content ) {
    $a = shortcode_atts( array(
        'id' => -1,
    ), $atts );
    $gallery_ID = $a['id'];

    $output = '';
    if($gallery_ID != -1){
        ob_start();
        $gallery = new RB_Scroll_Gallery($gallery_ID);
        $gallery->render();
        $output = ob_get_clean();
    }
    return $output;
}
add_shortcode( 'rb_scroll_gallery', 'rb_scroll_gallery_shortcode' );

现在，我制作了一个在编辑器中完美运行的古腾堡块。您可以 select 画廊，它会保存。但是，我不想重复代码并在保存属性和 php 代码中包含 html。

所以我想知道是否有办法使用相同的 rb_scroll_gallery_shortcode 函数在前端渲染块。

我看到你可以使用 register_block_type 并将 render_callback 设置为 rb_scroll_gallery_shortcode，但我需要块中的 ID selected 才能发送到 $atts 数组

中的函数

//This uses the shortcode funtion, but doesn't gives the gallery ID
register_block_type( 'cgb/block-rb-scroll-gallery-block', array(
    'render_callback' => 'rb_scroll_gallery_shortcode',
) );

Answer 1

您可以尝试将短代码转换为古腾堡块，并在您的主题中使用后，

在PHP

中注册动态块回调

/**
 * Register the GitHub Gist shortcode
 */
function gggb_init() {
        add_shortcode( 'github-gist', 'gggb_render_shortcode' );
        register_block_type( 'github-gist-gutenberg-block/github-gist', array(
                'render_callback' => 'gggb_render_shortcode',
        ) );
}
add_action( 'init', 'gggb_init' );

When your block is rendered on the frontend, it will be processed by your render callback:

function gggb_render_shortcode( $atts ) {
        if ( empty( $atts['url'] )
                || 'gist.github.com' !== parse_url( $atts['url'], PHP_URL_HOST ) ) {
                return '';
        }
        return sprintf(
                '<script src="%s"></script>',
                esc_url( rtrim( $atts['url'], '/' ) . '.js' )
        );
}

**Note:** this render callback is intentionally different than the Gutenberg block’s edit callback. Our preference is to use GitHub’s provided JavaScript embed code because this lets GitHub change the embed’s behavior at a future date without requiring a developer to make changes.

参考link获取更多信息，https://pantheon.io/blog/how-convert-shortcode-gutenberg-block

Answer 2

我发现了弄乱我的代码的小问题。问题不在于 render_callback() 没有获得任何属性（尽管它没有），而是编辑器没有保存它们，因为我忘记从属性 [= 中删除一些测试数据12=]

在registerBlockType:

save()方法应该returnnull.

该属性不应有选择器数据，因为它被 save() 用于在标记 return 上查找值，在本例中为 returns null。我忘记删除这些数据，这就是为什么没有保存该属性的原因。

attributes: {
    galleryID: {
        type: 'string',
        //This data should only be set if the value can be found in the markup return by save().
        //Since save() returns null, we let it out
        /*source: 'attribute',
        /*attribute: 'data-gallery-id',
        /*selector: '.rb-scroll-gallery-holder',*/
    },
}

使用 Wordpress 短代码函数呈现古腾堡块，将属性作为参数发送

Use Wordpress shortcode function to render Gutenberg block, sending the attributes as parameters

wordpress

wordpress-gutenberg

gutenberg-blocks