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.

[@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 :)

[@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 🙏

[@uuu6882]

Hello

[@elliottrichmondwp]

Hello 👋