Render shortcode inside block

I have a plugin that uses a shortcode and I’d like to add that shortcode to my custom block so that it renders in the Block Editor. Is this possible and if so, how?

Additionally, the shortcode accepts a series of attributes:
[piecal type=“cpt-slug” taxonomy=“category”]

Can I add block attributes to control the shortcode dynamically?

Thanks in advance!

I’d also love to see this. I’ve been using a function action to render shortcodes (and oembeds). Having real Pinegrow smart actions with configurable attributes would be awesome!

@jonathanj welcome, and thanks for bringing up the shortcodes - it is an interesting topic!

I did some tinkering around that and recorded a simple tutorial on wrapping [piecal] shortcode into a custom block and controlling shortcode options with editable block attributes.

Will post this as a proper tutorial, but for now the source HTML block code is (paste the code into
a page in a Pinegrow project):

<section cms-block="piecal" cms-block-title="Pie Cal" cms-block-type="native-dynamic" cms-block-field="type" cms-block-field-type="none" cms-block-field-title="Type" cms-block-field-values="post
page
concert
lecture" cms-block-field-2="theme" cms-block-field-title-2="Theme" cms-block-field-type-2="none" cms-block-field-control-2="select" cms-block-field-values-2="adaptive
dark" cms-block-field-control="select">
    <?php 
    //Start with the base shortcode
    $shortcode = "[piecal ";

    //Add only those parameters that are set
    if(PG_Blocks::getAttribute( $args, 'type' )) {
        $shortcode .= 'type="' . PG_Blocks::getAttribute( $args, 'type' ) . '" ';
    }
    if(PG_Blocks::getAttribute( $args, 'theme' )) {
        $shortcode .= 'theme="' . PG_Blocks::getAttribute( $args, 'theme' ) . '" ';
    }
    //Add the closing ]
    $shortcode .= ']';

    //Display the shortcode
    echo do_shortcode($shortcode); 
    ?>
</section>

And the video is here:

Could be done, just not sure how much use this would get, and if it makes sense to do it with actions as opposed with the code like the one above?

2 Likes

Wow, thank you so much for this!

I did not know this approach wouldn’t work unless it’s set to dynamic PHP block. (3:55 in the video.)

This seems very easy to do now thanks to your help, @matjaz. We will figure out why Pie Calendar doesn’t render in the builder, because that would make this solution you showed perfectly usable in the editor.

Thanks so much!

3 Likes

This would provide a very cool editing experience, way beyond what the built-in Shortcode WP block offers.