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

Pinegrow WP WordPress
,
1

Hello, Pinegrow Peeps :evergreen_tree:

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:

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

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

 <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!!

2

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:

2 Likes
3

Hi, @matjaz -

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

image
image912×265 36.1 KB

4

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

More info about including styles and scripts: