Anyone tried yet converting an Interaction blueprint component into a Pinegrow WP guttenberg block?

General
,
1

I was trying to do this with a blueprint interaction slider.
I followed Bob tutorial video n5 Agency and I was trying to replicate this vid but with a component, the Slider from the blueprint interaction library. Could not even correctly export the block. :frowning:
I included, in the theme setting, the slider.css and the control.css. No luck.

2

Hi @red-rosefields,
I can give it a try later today and see what problems I run into.
Cheers,
Bob

1 Like
3

that would be fantastic, Thanks !

4

Hi @red-rosefield,
So I didn’t fool around with it to give as much styling for each slide block like I did in the tutorial. Overall, it is mostly straight forward with two small exceptions. One of which I need to talk to Matjaz about to see if it may be a bug.

  1. I put the main block action on the Slider div
  2. Next I added a block action to the div.pgia-slide
  3. Make the h2 (and whatever else) editable with block attribute actions.
  4. Add the block inner content action to the div.pgia-slides, and limit it to the block name you used on the div.pgia-slide
  5. Combine the controls.css and slider.css files into one and attach to the main slider block on the front and back end.

Okay, here is the part that tripped me up and may be a partial bug. Within the main block there is a “Script” input. I originally put the ‘pgia.js’ into this input, but it didn’t bring it into the page. Bug? So, I opened my template page (not the page where I’m making my blocks). Drag the pgia.js to the head of the page. Next, I’m not sure how WP loads items, but the Interactions need to be reset on final load. so I made a small snippet of code.

document.addEventListener("DOMContentLoaded", function(){
    let el = document.body;
    pgia.elementAnimationsManager.refreshAnimations(el, true);
});

I saved it to a new file and added it to the footer of the template. Not this will work for Interactions, but not scroll scenes. Seems to be working just fine, but it needs some management on the backend to make the editing more manageable. The whole issue with showing all of the slides. This time it is a little different. Adding a toggleable class on the div.pgia-slides to add display: block would work. Likely also have to nuke display of the controls on the back side.
Let me know if this helps,
Bob

5

Thanks Bob! I will try this and will let you know. Thanks again man.