使用 Wordpress 简码函数呈现 Gutenberg 块，将属性作为参数发送

Posted 2023-02-19

【中文标题】使用 Wordpress 简码函数呈现 Gutenberg 块，将属性作为参数发送

【英文标题】：Use Wordpress shortcode function to render Gutenberg block, sending the attributes as parameters

【发布时间】：2019-01-27 11:41:13

【问题描述】：

给定画廊 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 块。您可以选择一个画廊，它将保存。但是，我不想重复代码并将 html 放在 save 属性和 php 代码中。

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

我看到你可以使用register_block_type并将render_callback设置为rb_scroll_gallery_shortcode，但我需要在块中选择的ID将其发送到$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',
) );

【参考方案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.

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

【讨论】：

谢谢！我看过那篇文章，我已经尝试过了。该块使用该函数在前端呈现，但我找不到将 ID 发送到该函数的方法。 $atts 参数最终是一个空数组。

尝试查看此链接，wordpress.org/gutenberg/handbook/blocks/creating-dynamic-blocks

我也看过那篇文章，没有太大帮助。不过，我刚刚找到了一种让它工作的方法，稍后将编辑该帖子

【参考方案2】：

我发现了弄乱我的代码的小东西。问题不在于render_callback() 没有获得任何属性（尽管没有），而是编辑器没有保存它们，因为我忘记从属性galleryID

在registerBlockType：

save() 方法应该返回 null。

该属性不应具有选择器数据，因为它用于查找由save() 返回的标记上的值，在这种情况下返回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',*/
    ,