0

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',
) );
Raba
  • 167
  • 12

2 Answers2

1

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

Priyanka Modi
  • 1,442
  • 1
  • 8
  • 13
  • Thanks! I've seen that article and I've tried that already. The block gets rendered in the front end with the function, but I can't find the way to send the ID to that function. The `$atts` parameter ends up being an empty array. – Raba Aug 21 '18 at 10:47
  • Try to check this link, https://wordpress.org/gutenberg/handbook/blocks/creating-dynamic-blocks/ – Priyanka Modi Aug 21 '18 at 11:03
  • I've seen that article too, it did not help to much. I've just find a way to make it work though, going to edit the post in a moment – Raba Aug 21 '18 at 11:55
0

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',*/
    },
}
Raba
  • 167
  • 12