# Best Practices? Exporting PGIA-Enabled WordPress Blocks as part of a Plugin

**URL:** https://forum.pinegrow.com/t/best-practices-exporting-pgia-enabled-wordpress-blocks-as-part-of-a-plugin/8395
**Category:** WordPress
**Tags:** interactions, wordpress
**Created:** [September 26, 2023, 4:40pm UTC](https://forum.pinegrow.com/t/best-practices-exporting-pgia-enabled-wordpress-blocks-as-part-of-a-plugin/8395 "2023-09-26T16:40:55Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![iamrobbie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/iamrobbie/32/4694_2.png) [@iamrobbie](https://forum.pinegrow.com/u/iamrobbie)
#### Post date: [September 26, 2023, 4:40pm UTC](https://forum.pinegrow.com/t/best-practices-exporting-pgia-enabled-wordpress-blocks-as-part-of-a-plugin/8395/1 "2023-09-26T16:40:55Z")

</div>

Hello, Pinegrow Peeps 🌲

I’m wondering if someone in the community here might be able to point me in the right direction re: how to successfully include Pinegrow Interactions (PGIA) in WordPress Blocks _exported as part of a WP plugin_…

From what I can tell (as a novice), there seems to be three “chunks” of code that are relevant for PGIA.

Within the `<head>` portion, PG generates the following:

```auto
 <script>/* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='@media ' + pgia_small_mq + '{ html:not(.pg-ia-no-preview) [data-pg-ia-hide="mobile"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="mobile"] {opacity:1;visibility:visible;display:block;}}';pgcss+='@media ' + pgia_large_mq + '{html:not(.pg-ia-no-preview) [data-pg-ia-hide="desktop"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="desktop"] {opacity:1;visibility:visible;display:block;}}';style.innerHTML=pgcss;document.querySelector('head').appendChild(style);}}catch(e){console&&console.log(e);}})()</script>

```

When PGIA(s) are added to an HTML element, PG adds an attribute called `data-pg-ia`. For example:

```auto
<div data-pg-name="Market Location Card" class="market_card" data-pg-ia='{"l":[{"name":"Market Card Hover - IN","trg":"mouseenter","t":".market_card-icon","a":"fadeIn"},{"name":"Market Card Hover - OUT","trg":"mouseleave","t":".market_card-icon","a":"fadeOut"}]}' data-pg-collapsed data-pg-ia-apply="$div.market_card">
    <div data-pg-name="Market First Side" class="market_card_first">
        <img src="img/shop-svgrepo-com.svg" class="market_card-icon" data-pg-ia-hide data-pg-ia-apply="$img.market_card_icon">
        <img src="img/a_photograph_of_a_candy_and_snacks_booth_at_a_local.png" class="cover">
        <div data-empty-placeholder class="overlay"></div>
    </div>
    <div data-pg-name="Market Second Side" class="market_card_second">
        <div data-pg-name="Market Card Header" class="market_card-header">
            <h3 class="market_title">City Farmers Market</h3>
            <h4 class="market_subtitle">Atlanta, GA</h4>
        </div>
        <div data-pg-name="Market Card Content" class="market_card-content_wrapper">
            <p>A big and lively market. Come see us there - we&apos;ll be set up by the Western Union!</p>
            <a href="#" class="market_card_details_button">View Details</a>
        </div>
    </div>
</div>

```

Then, right before the `</body>` tag, PG provides the script source for the pgia.js file:

```auto
 <script src="pgia/lib/pgia.js"></script>

```

When exported as a theme, this works perfectly fine because the scripts are enqueued on-page.

When exporting as a WP plugin, however, I have had no luck in properly enqueueing the requisite JS.

Would any of you happen to know some “best practices” for enqueuing the needed scripts for each WP Block?

Thanks in advance for any and all help!!

---

<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: [October 3, 2023, 8:25am UTC](https://forum.pinegrow.com/t/best-practices-exporting-pgia-enabled-wordpress-blocks-as-part-of-a-plugin/8395/2 "2023-10-03T08:25:40Z")

</div>

Hi @iamrobbie, I added a docs page about using Interactions in themes and plugins. Let me know if any other info is needed and I’ll update the guide:

> **[Using Interactions | Pinegrow Web Editor](https://pinegrow.com/docs/wordpress/using-interactions/)**
>
> Pinegrow Interactions can be used in WordPress themes and plugins.

---

<div class="post-metadata">

### Author: ![iamrobbie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/iamrobbie/32/4694_2.png) [@iamrobbie](https://forum.pinegrow.com/u/iamrobbie)
#### Post date: [October 4, 2023, 1:33pm UTC](https://forum.pinegrow.com/t/best-practices-exporting-pgia-enabled-wordpress-blocks-as-part-of-a-plugin/8395/3 "2023-10-04T13:33:01Z")

</div>

Hi, @matjaz -

Thanks for this. When I enqueue scripts / styles in the `<head>`, I get the following message:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/546ec5eadcdc8b924e53e6c5df57a705bb9c1966.png)

---

<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: [October 4, 2023, 3:41pm UTC](https://forum.pinegrow.com/t/best-practices-exporting-pgia-enabled-wordpress-blocks-as-part-of-a-plugin/8395/4 "2023-10-04T15:41:21Z")

</div>

@iamrobbie this should be done on the master page (usually index.html).

More info about including styles and scripts:

> **[Including Scripts and Styles | Pinegrow Web Editor](https://pinegrow.com/docs/wordpress/enqueue-scripts-and-styles/)**
>
> Controlling how script and style resources are included into exported WordPress theme.
