Tutorial to make a gutenberg block for a slider?

Is there a Pinegrow tutorial specific so that you can use the built-in slider examples in the interaction library with PG blocks for WP? For example, a tutorial like this but for teh built-in slider examples.

https://pinegrow.com/docs/wordpress/courses-tutorials/creating-the-agency-wordpress-theme/creating-specialized-blocks/

I have added it to a block but it doe snot work when WordPress tries to render it.

I am guessing there is something that needs to be done to make it work much like the bootstrap testimonial slider.

-sg

sg

I see this but it would be nice if there was an easier solution.

https://forum.pinegrow.com/t/anyone-tried-yet-converting-an-interaction-blueprint-component-into-a-pinegrow-wp-guttenberg-block/6515

1 Like

@smgitner I was going to record one tomorrow on making an accessible accordion, expanding on Custom Accordion with Pinegrow , and modifying it slightly to fit the WAI patterns.

If it can wait a few days, I might be able to be convinced to do it on sliders instead.

6 Likes

It can wait. I am in no rush but I was real excited to use the caption function too where it pulls the image iptc caption into a slider to make a gallery with the alt tag. That would really be a game changer especially if it was essentially just a slider that was in the library - i could do without all these plugins for sliders etc. i want to put a caption on bottom of the image. Thx!!

2 Likes

Hi there, don’t have watched it yet, but on the Flex DynamicWeb Site tutorial, there was a 50 min part with the slider - does that help?
I also would love to build a fully dynamic slider, but at the moment I’m tryin to learn the procedures with a Static Site Generator utility called 11ty, that i hope to be able to integrate with Pinegrow as it is, so far - for me, the best tool to work with regarding creation of html structure and seeing it growing, helps me alot.

2 Likes

@smgitner @adamslowe @tytusie

Yes, HERE is the Best place to learn A LOT about how to build a cool theme containing beautiful and effective Gutenberg blocks with Pinegrow, including a slider.

And the part about the slider is HERE :wink:

2 Likes

Oh, I also wanted to point out that what I consider today as the MASTERCLASS to discover how to create WordPress themes from an HTML template (with Pinegrow) is our course about WooCommerce.

This course is literally PACKED with the most important information and tips for creating WordPress themes, Gutenberg blocks, tips for managing your specific CSS etc. etc. …

Sure, this course is long, but it’s a unique opportunity to discover an ideal workflow presented by the author of Pinegrow and this even if you have no interest in WooCommerce.

It’s HERE.

3 Likes

@Emmanuel i totally forgot about the flex project’s slider, thanks for reminding me!

And I second your assessment of the WooCommerce tutorial. It’s long, but well worth it.

3 Likes

And the Oscar goes to… Adam Lowe!!!

2 Likes

I planned to record the accordion video this week, but I have a few things I want to change so I’m going to release it next week instead.

2 Likes

@adamslowe was this tutorial on Accordions ever made? I had a search on your YouTube, but couldn’t find it.

I have watched the tutorial in the docs using interactions. But I am curious on your approach in making this an editable block in WP. And of course adding accessibility.

I ended using the accordion from Alpine Components since they already have the JS and accessibility factored in. I didn’t feel right about making a tutorial and sharing the code since it’s a licensed component. If you have access to the component library, it’s pretty much cut & paste into Pinegrow, then add the actions to turn it into a block.

The only semi-tricky thing is that it’s actually two blocks instead of one; one block for the outer accordion, then another for an accordion item. Then I just set the block properties so that the outer block could only hold accordion items blocks, and I set accordion items to only be available inside the main (outer) accordion block.

1 Like

Cool, thanks Adam. No I don’t have the library.

I might do some testing and see if I can come up with a good solution here.

Good idea.

Ever checked on this js? Looks greats. People at webflow use it quite often.

I have used swiper a number of times with javascript. It works well. I haven’t tried the swiper studio though.

1 Like