Clickable areas on images in Gutenberg Editor

A client wanted to have some interactive clickable areas on an image.

To address this, rather than solely relying on the <area> html tag, I decided to create an interface for managing these areas and associated contents.

Within a custom Gutenberg block that functions as a wrapper for an image, editors can upload an SVG image where the areas are defined. The block then parses the SVG as a string, identifies the clickable areas, and assigns numbers to them. Further the block allows to connect a WordPress post to each of the numbered areas, which will be displayed when a user clicks on it in the frontend.

This might become a plugin in the future. But since the overlaying SVG needs a certain markup and structure its not yet ready for less tech-savy WordPress users.