CODEWITHSUNDEEP
wordpresswordpress-gutenberggutenberg-blocks
Raba
Raba

Reputation: 250

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

I have a shortcode that generates a gallery, given the gallery 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' );

Now, I've made a Gutenberg block that works perfectly in the editor. You can select a gallery and it will save. However, I dont want to repeat code and have the html in the save property and in the php code.

So I was wondering if there is a way to use that same rb_scroll_gallery_shortcode function to render the block in the front end.

I've seen that you can use register_block_type and set the render_callback to rb_scroll_gallery_shortcode, but I need the ID selected in the block to send it to the function in the $atts array

//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',
) );

Upvotes: 2

Views: 2857

Answers (2)

Raba
Raba

Reputation: 250

I've found out the little thing that messed up my code. The problem wasn't that the render_callback() wasn't getting any attributes (though it wasn't), but it was that the editor wasn't saving them because I forgot to remove some testing data from the attribute galleryID

In the registerBlockType:

The save() method should return null.

The attribute should not have a selector data, since it is used to find the value on the markup return by the save(), wich in this case returns null. I've forgot to remove this data, thats why the attribute wasn't being saved.

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',*/
    },
}

Upvotes: 0

Priyanka Modi
Priyanka Modi

Reputation: 1624

You can try to Convert a Shortcode to a Gutenberg Block and after use in your theme,

Registering the Dynamic Block Callback in 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.

Refer link for get more information, https://pantheon.io/blog/how-convert-shortcode-gutenberg-block

Upvotes: 1

Related Questions