A common requirement when building websites is to implement some sort of lightbox for viewing thumbnail images at a larger size. These image thumbnails are displaying throughout the content, as opposed to being displayed in a dedicated gallery layout. What I wanted was a simple way to enhance the core Image block to support a lightbox.
Choosing A Lightbox
When selecting a lightbox, there are many options. So many that it can be a bit overwhelming. I even considered just creating my own. It wouldn’t have been the first time. In the end, I settled on a library called Fancybox. I used the old jQuery version of Fancybox on a number of WordPress websites and found it worked well. I have built several plugins using the older version but I wanted to use the current version.
Using a Compiled Approach
WordPress supports two main approaches to writing editor JavaScript: using modern ES6 modules with a build process, or accessing editor APIs through the global wp object. The global method is fast and convenient—great for quick scripts or small enhancements—while the compiled approach allows for modular code, modern syntax, and better maintainability in larger projects. Both are valid, but for this plugin, I wanted to use a compiled workflow.
Using the Global wp Object (No Build Step)
In other projects, I’ve used the global wp object approach with good results. WordPress exposes many editor-related modules (like wp.blocks, wp.blockEditor, wp.components, etc.) as globals, which lets you write scripts that interact with the block editor without any build process. You simply enqueue a JavaScript file and access what you need through the wp namespace. This is ideal for small plugins, lightweight customizations, or environments where you want to avoid adding a Node-based toolchain.
Using Compiled ES6 Modules (With Build Step)
For this plugin, however, I opted for the modern ES6 module-based workflow using @wordpress/scripts. This lets you write clean, modular JavaScript using import/export syntax and modern language features. It does introduce a build step (npm run build), but the benefit is easier code organization, better tooling, and improved long-term maintainability. WordPress’s own block development tools are built around this approach, and using it brings your project closer to core standards.
Why It Made Sense for This Plugin
Although the global wp approach would have worked just fine for extending the Image block, I wanted the flexibility to split the logic into multiple files and use more expressive syntax.
Blog Post Thumbnails
The event that prompted me to pursue a lightbox solution in the first place was a blog post about dashboard widgets that had several detailed thumbnails.
There are obviously many lightbox solutions available. I wanted something that was unobtrusive, using as much of the core block functionality as possible. Adding that functionality to the image block itself was the simplest solution. I also used a custom attribute to group the galleries, if that feature is desired.
Conclusion
When building this plugin, I chose to use a compiled approach with modern ES6 modules instead of the classic method of accessing WordPress editor APIs through the global wp object. While the global approach is perfectly valid—and one I’ve used successfully on projects—the compiled method offers better structure, cleaner syntax, and improved scalability as the plugin grows.
Plugin Code
The plugin code is available on GitHub and the plugin is available to download from there as well.
GitHub repository: https://github.com/revnoah/wordpress-image-lightbox-gallery/