使用Wordpress简码功能呈现古腾堡块,将属性作为参数发送

时间:2018-08-21 09:53:11

标签: wordpress wordpress-gutenberg gutenberg-blocks

在给定画廊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' );

现在,我制作了一个古腾堡(Gutenberg)块,可以在编辑器中完美地工作。您可以选择一个画廊,它将保存。但是,我不想重复代码,并且在save属性和php代码中都包含html。

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

我已经看到您可以使用register_block_type并将render_callback设置为rb_scroll_gallery_shortcode,但是我需要在块中选择的ID才能将其发送到{{ 1}}数组

$atts

2 个答案:

答案 0 :(得分:0)

您可以尝试将简码转换为古腾堡块,并在将其用于主题之后,

在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.

请参阅链接以获得更多信息,https://pantheon.io/blog/how-convert-shortcode-gutenberg-block

答案 1 :(得分:0)

我发现弄乱了我的代码的小东西。问题不是不是render_callback()没有得到任何属性(尽管不是),而是编辑器没有保存它们,因为我忘记从属性{{ 1}}

registerBlockType中:

galleryID方法应返回save()

该属性不应包含选择器数据,因为该属性用于在null返回的标记返回值上查找值,在这种情况下,返回save()。我忘了删除这些数据,这就是为什么未保存属性的原因。

null