# Render shortcode inside block

**URL:** <https://forum.pinegrow.com/t/render-shortcode-inside-block/8370>\
**Category:** Pinegrow WordPress Plugin\
**Created:** [September 18, 2023, 3:56pm UTC](https://forum.pinegrow.com/t/render-shortcode-inside-block/8370 "2023-09-18T15:56:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonathanj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jonathanj/32/5898_2.png) [@jonathanj](https://forum.pinegrow.com/u/jonathanj)\
**Post date:** [September 18, 2023, 3:56pm UTC](https://forum.pinegrow.com/t/render-shortcode-inside-block/8370/1 "2023-09-18T15:56:43Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [September 18, 2023, 4:42pm UTC](https://forum.pinegrow.com/t/render-shortcode-inside-block/8370/2 "2023-09-18T16:42:18Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [September 19, 2023, 12:19pm UTC](https://forum.pinegrow.com/t/render-shortcode-inside-block/8370/3 "2023-09-19T12:19:24Z")

</div>

@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):

```auto
<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:

[![](https://img.youtube.com/vi/ivhiks8fAnY/maxresdefault.jpg "Wrap WordPress shortcodes in custom blocks") ](https://www.youtube.com/watch?v=ivhiks8fAnY)

> [@adamslowe](#):
>
> 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!

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?

---

<div class="post-metadata">

**Author:** ![jonathanj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jonathanj/32/5898_2.png) [@jonathanj](https://forum.pinegrow.com/u/jonathanj)\
**Post date:** [September 19, 2023, 1:42pm UTC](https://forum.pinegrow.com/t/render-shortcode-inside-block/8370/4 "2023-09-19T13:42:03Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [September 20, 2023, 5:28am UTC](https://forum.pinegrow.com/t/render-shortcode-inside-block/8370/5 "2023-09-20T05:28:26Z")

</div>

> [@jonathanj](#):
>
> 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.

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