This plugin adds a custom ACF field type that allows users to click on an image and capture X/Y coordinates. Perfect for creating interactive image maps, product hotspots, or any feature requiring precise coordinate-based positioning.

This is a fork of the original ACF Image Hotspots Field by Andrew Rockwell, enhanced with full support for ACF blocks in the Gutenberg editor.

Key Features

Click on an image to capture precise X/Y coordinates
Supports both pixel-based and percentage-based coordinates
Links to existing ACF image fields
Visual marker shows the selected position
Works in regular ACF field groups AND ACF blocks
NEW: Full Gutenberg block editor compatibility
Compatible with ACF 5.8+

What’s New in This Fork

This fork adds critical improvements for modern WordPress development:

Gutenberg Block Support: Works seamlessly in ACF blocks within the Gutenberg editor
Event Capture Fix: Solves the issue where Gutenberg intercepts click events
Improved DOM Search: Enhanced field discovery in complex block structures
Enhanced Visibility: Fixed z-index and marker visibility in block contexts
Auto-Refresh: Automatically updates block previews when coordinates change

Original Plugin

Original plugin by Andrew Rockwell – Thank you for creating this excellent field type!

This fork maintains 100% backwards compatibility with the original while adding modern editor support.

How to Use

Install and activate the plugin
Create a custom ACF field of type “Image Mapping”
In field settings, enter the name of an existing ACF image field to link to
Add an image to the linked field
Click on the image in the hotspot field to capture coordinates
Coordinates are stored as comma-separated strings (e.g., “150px,200px” or “45.5%,60.2%”)

Works in both ACF field groups and ACF blocks!

Compatibility

This ACF field type is compatible with:

ACF 5.8+
WordPress 5.8+
Gutenberg block editor
Classic editor
PHP 7.2+

Credits

Original Plugin: Andrew Rockwell (rockwell15, eridesign)
Gutenberg Fork: Levels Branding and Development

Thank you to Andrew Rockwell for creating the original plugin!

Support

For issues specific to this plugin:
* GitLab: https://gitlab.com/levels-dev/plugins/advanced-custom-fields-image-hotspots-field-fork

For general ACF questions:
* ACF Documentation: https://www.advancedcustomfields.com/resources/

Other Plugins by Levels

Check out our other WordPress plugins:

Ready-Made Oxygen Integration – Seamless integration for Oxygen Builder with pre-built components and utilities

Visit levels.dev/plugins for more tools and resources.

Technical Details

This fork includes a sophisticated event capture system that intercepts mouse events before Gutenberg’s React event system can prevent them. The plugin uses native JavaScript addEventListener with capture phase to ensure reliable coordinate capture in all contexts.

For detailed technical information, see the GUTENBERG_FIX.md file in the plugin directory.

Image Hotspots Field for ACF