Create a Dynamic Ken Burns Gallery in WordPress | How to code Custom Gutenberg Blocks

Learn how to create this dynamic gallery effect with a stunning Ken Burns slow fade and zoom. In this tutorial, I'll show you how to create a custom WordPress Gutenberg block that allows for multiple image uploads, adjustable aspect ratios, and flexible alignment options. Perfect for headers, hero sections, or content display, this gallery adapts to various formats and crops. Learn how to add JavaScript to enable smooth zoom effects and seamless transitions between images. Transform your WordPress site with this versatile and visually captivating gallery.

[@tylermagic]

Hey mate, loving the videos. WordPress was my bread and butter before React became popular so 'modern WP development' is really interesting to me and you do a fine job of explaining everything! Youve definitely inspired me to dip my toes back in. Also your workflow is very professional, nicely done 👌

[@elliottrichmondwp]

Thank you, I appreciate the feedback 🙏

[@timnashcouk]

Great tutorial, I would really have liked to see the WP CLI Scaffold block getting some love rather then deprecation, watching you a very experienced JS dev struggle to get the environment to just work out of the box shows how intimidating it must be for a lot of old PHP devs out there.
But once you get going, its easy to see why folks are enjoying block building.

[@elliottrichmondwp]

That's why NVM is so important with this method of working. The error encountered was intentional because I know this is a common pain point for many developers.
I even have legacy projects that are incompatible with Node.js 16 or higher, so I heavily rely on NVM not even related to WordPress :)

[@vojtechsebek0]

Great video, but I will have to learn a lot about WordPress block plugin development. If you consider another tutorial like this (I would really appreciate it), maybe you could try to create a block for uploading SVG icons. Thanks for this video and keep it up!!! :D

[@elliottrichmondwp]

Hmm interesting, in what context would you need to upload SVG? Would you like them uploaded to the Media Library? Because WordPress does not allow SVG uploads by default due to security concerns. SVG files can contain malicious code, which could be a potential security risk if not properly sanitised. You can add them to static render files but again you should be confident that the SVG is from a reputable source and sanitised correctly.

[@elliottrichmondwp]

Personally, I’d avoid adding them to the database as well 😬😇

[@vojtechsebek0]

@@elliottrichmondwp Ok, didn't know that, thanks for the tip 😀

[@HaiderAli-hw8sn]

This tutorial is not beginners friendly. I watched the full video and a lot of things were unclear. Please make some beginners friendly tutorials on WordPress block.
Thank you

[@elliottrichmondwp]

Did you have anything specific in mind?

[@uuu6882]

Hello

[@elliottrichmondwp]

Hello 👋