Adds a guided tour, group filters, emoji and custom-image markers, on-canvas tooltip editing, and copy\/paste pin style \u2014 plus a tidier sidebar and a tooltip scrollbar fix.<\/p>","1.0.0":"
Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3633687,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3633687,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3633687,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3633687,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3633687,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"pinspot\/image-hotspots":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"pinspot\/image-hotspots","version":"1.1.0","title":"PinSpot - Image Hotspots","category":"media","icon":"location","description":"Place clickable hotspot pins on any image, each opening a rich, accessible tooltip with text, media, and links.","keywords":["hotspot","image map","pin","tooltip","interactive"],"textdomain":"pinspot","attributes":{"imageId":{"type":"number"},"imageUrl":{"type":"string","default":""},"imageAlt":{"type":"string","default":""},"imageWidth":{"type":"number"},"imageHeight":{"type":"number"},"aspectRatio":{"type":"string","default":"auto"},"enableZoom":{"type":"boolean","default":false},"maxZoom":{"type":"number","default":3},"globalTheme":{"type":"string","default":"light"},"globalTrigger":{"type":"string","default":"click"},"reduceMotion":{"type":"boolean","default":true},"tooltipWidth":{"type":"number","default":280},"showList":{"type":"boolean","default":false},"enableFilters":{"type":"boolean","default":false},"filterColor":{"type":"string","default":""},"enableTour":{"type":"boolean","default":false},"tourAutoplay":{"type":"boolean","default":false},"tourInterval":{"type":"number","default":4},"tourShowCount":{"type":"boolean","default":true},"tourColor":{"type":"string","default":""},"tourPosition":{"type":"string","default":"below"},"tourButtonSize":{"type":"string","default":"medium"},"tourButtonShape":{"type":"string","default":"round"},"hotspots":{"type":"array","default":[],"items":{"type":"object"}}},"supports":{"align":["wide","full"],"html":false,"spacing":{"margin":true,"padding":true},"color":{"text":true,"background":true},"typography":{"fontSize":true,"lineHeight":true},"__experimentalBorder":{"radius":true}},"example":{"attributes":{"imageUrl":""}},"editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScriptModule":"file:.\/view.js","render":"file:.\/render.php"}},"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3633687,"resolution":"1","location":"assets","locale":"","width":1680,"height":860},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3633687,"resolution":"2","location":"assets","locale":"","width":1680,"height":860},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3634667,"resolution":"3","location":"assets","locale":"","width":1680,"height":860},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3634667,"resolution":"4","location":"assets","locale":"","width":1680,"height":860},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3634667,"resolution":"5","location":"assets","locale":"","width":1680,"height":860},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3634667,"resolution":"6","location":"assets","locale":"","width":1680,"height":860},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3634667,"resolution":"7","location":"assets","locale":"","width":1680,"height":860},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3634667,"resolution":"8","location":"assets","locale":"","width":1680,"height":860},"screenshot-9.png":{"filename":"screenshot-9.png","revision":3634667,"resolution":"9","location":"assets","locale":"","width":1680,"height":860}},"screenshots":{"1":"A rich, accessible tooltip on the front end \u2014 title, description, and a call-to-action button, with an animated marker.","2":"A tooltip playing an embedded YouTube video, loaded only after the visitor clicks play.","3":"Mix and match marker styles \u2014 numbered, dots, emoji, or your own custom image.","4":"Guided tour mode \u2014 Previous \/ Next controls (with optional autoplay) walk visitors through every hotspot in order.","5":"Group filter chips above the image let visitors show or hide pins by category \u2014 ideal for maps and floor plans.","6":"Zoom and pan into a large image; markers stay crisp and perfectly anchored.","7":"The optional accessible list beneath the image \u2014 a full text alternative for screen readers and SEO.","8":"Edit right on the image \u2014 type a pin\u2019s title and description in the on-canvas tooltip editor.","9":"The block editor: place pins, reorder them, and configure content, marker, and behavior in the sidebar."}},"plugin_section":[],"plugin_tags":[146663,3538,127148,274394,274395],"plugin_category":[],"plugin_contributors":[263109],"plugin_business_model":[],"class_list":["post-346492","plugin","type-plugin","status-publish","hentry","plugin_tags-image-hotspot","plugin_tags-image-map","plugin_tags-interactive-image","plugin_tags-lightbox-tooltip","plugin_tags-visual-pins","plugin_contributors-rayetun","plugin_committers-rayetun"],"banners":{"banner":"https:\/\/ps.w.org\/pinspot\/assets\/banner-772x250.png?rev=3633687","banner_2x":"https:\/\/ps.w.org\/pinspot\/assets\/banner-1544x500.png?rev=3633687","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/pinspot\/assets\/icon.svg?rev=3633687","icon":"https:\/\/ps.w.org\/pinspot\/assets\/icon.svg?rev=3633687","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-1.png?rev=3633687","caption":"A rich, accessible tooltip on the front end \u2014 title, description, and a call-to-action button, with an animated marker."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-2.png?rev=3633687","caption":"A tooltip playing an embedded YouTube video, loaded only after the visitor clicks play."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-3.png?rev=3634667","caption":"Mix and match marker styles \u2014 numbered, dots, emoji, or your own custom image."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-4.png?rev=3634667","caption":"Guided tour mode \u2014 Previous \/ Next controls (with optional autoplay) walk visitors through every hotspot in order."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-5.png?rev=3634667","caption":"Group filter chips above the image let visitors show or hide pins by category \u2014 ideal for maps and floor plans."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-6.png?rev=3634667","caption":"Zoom and pan into a large image; markers stay crisp and perfectly anchored."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-7.png?rev=3634667","caption":"The optional accessible list beneath the image \u2014 a full text alternative for screen readers and SEO."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-8.png?rev=3634667","caption":"Edit right on the image \u2014 type a pin\u2019s title and description in the on-canvas tooltip editor."},{"src":"https:\/\/ps.w.org\/pinspot\/assets\/screenshot-9.png?rev=3634667","caption":"The block editor: place pins, reorder them, and configure content, marker, and behavior in the sidebar."}],"raw_content":"\n
\ud83d\udccc PinSpot<\/strong> turns a flat image into something people explore. Drop pins anywhere on a photo, map, diagram, or product shot \u2014 each pin opens a polished, accessible tooltip with a title, description, image or video, and a call-to-action button.<\/p>\n\n It is a single native block built the modern WordPress way \u2014 on the Interactivity API, the same technology that powers WordPress core blocks. No jQuery, no shortcodes, no page builder required. The frontend script is under 4 KB and only loads on pages that actually use a hotspot, so it never slows the rest of your site down.<\/p>\n\n Every pin can carry a title, a description (with line breaks and basic bold<\/strong>, italic<\/em>, and links), and one piece of media: an image from your library, a self-hosted video, or a YouTube \/ Vimeo embed. Add an optional call-to-action button that links anywhere. Choose light or dark tooltips, decide where they open (top, bottom, left, right, or automatic), and pick a marker style \u2014 numbered, dot, plus, info, question, any emoji, or your own custom image \u2014 in any size and color, with an optional pulse or bounce animation.<\/p>\n\n Turn on tour mode to add Previous and Next controls that walk visitors through every hotspot in order \u2014 perfect for a step-by-step story, a product walkthrough, or a self-running kiosk display. Optionally let the tour advance on its own at an interval you choose; visitors always get a pause button, and autoplay stays off automatically for anyone who prefers reduced motion. Each stop is announced to screen readers as it opens. Style the bar to match your design: place it below the image or overlaid on it, show or hide the position counter, and set the button color, size, and shape.<\/p>\n\n Assign each hotspot to a named group \u2014 \u201cExits\u201d, \u201cRestrooms\u201d, \u201cFood\u201d, whatever fits \u2014 and PinSpot adds a row of filter chips above the image. Visitors tap a chip to show or hide that group, so a busy map or floor plan stays readable and people can focus on just what they need. An \u201cAll\u201d chip brings everything back. The chips are real toggle buttons with proper pressed states for keyboard and screen-reader users, each item in the optional list is tagged with its group, and you can set the chip color to match your brand.<\/p>\n\n PinSpot is designed to work for everyone, not just mouse users. Accessibility is built into how it works:<\/p>\n\n New to hotspots? PinSpot ships three ready-made layouts you can insert and edit in seconds. In the editor, open the block inserter (the +<\/strong> button in the top-left), switch to the Patterns<\/strong> tab, and choose the PinSpot<\/strong> category. You will find:<\/p>\n\n Each pattern drops in with a demo illustration and sample pins already in place. Just replace the demo image with your own and edit the text \u2014 it is the fastest way to see everything PinSpot can do and to learn how the pieces fit together.<\/p>\n\n PinSpot deliberately has no separate admin dashboard. You configure everything right where you see it, using the standard WordPress block controls:<\/p>\n\n If you have ever placed a WordPress block, you already know how to use PinSpot.<\/p>\n\n PinSpot makes no external requests on its own. YouTube and Vimeo tooltips show a lightweight preview image and only load the real player after the visitor clicks play \u2014 nothing is sent to Google or Vimeo until then. Your hotspot data is stored inside the block in your post content: no custom database tables, no tracking, no phoning home, and a completely clean uninstall.<\/p>\n\n PinSpot embeds no external service by default. Only when you choose YouTube or Vimeo as a tooltip\u2019s media type, the following apply on the public page:<\/p>\n\n YouTube (Google LLC) \u2014 video embeds and thumbnails<\/strong>\nPurpose: show the video preview thumbnail and, after the visitor clicks play, the embedded player.\nData sent: the visitor\u2019s IP address and standard browser headers are sent to i.ytimg.com when the tooltip preview image loads, and to www.youtube-nocookie.com (the privacy-enhanced embed domain) only after the visitor clicks play.\nSent when: only on pages where you added a YouTube tooltip; the player itself loads only on click.\nService: https:\/\/www.youtube.com\nTerms of Service: https:\/\/www.youtube.com\/t\/terms\nPrivacy Policy: https:\/\/policies.google.com\/privacy<\/p>\n\n Vimeo (Vimeo.com, Inc.) \u2014 video embeds<\/strong>\nPurpose: show the embedded Vimeo player after the visitor clicks play.\nData sent: the visitor\u2019s IP address and standard browser headers are sent to player.vimeo.com only after the visitor clicks play.\nSent when: only on pages where you added a Vimeo tooltip, and only on click.\nService: https:\/\/vimeo.com\nTerms of Service: https:\/\/vimeo.com\/terms\nPrivacy Policy: https:\/\/vimeo.com\/privacy<\/p>\n\n\n No \u2014 and you will not need one. Everything is configured on the block itself: the toolbar for adding pins and replacing the image, and the block sidebar for each pin\u2019s content, style, and behavior. This keeps your admin uncluttered and your settings right next to the thing they change.<\/p><\/dd>\n Yes. PinSpot is a standard WordPress block with its own self-contained styles, so it works with block themes and classic themes alike. It also respects your theme\u2019s width settings, including wide and full alignment.<\/p><\/dd>\n As many as you like, on as many images as you like. There is no limit and no \u201cpro\u201d gate.<\/p><\/dd>\n Yes. Each pin\u2019s position is stored as a percentage of the image, so it stays anchored to the right spot at every screen size, from phones to widescreen displays.<\/p><\/dd>\n Yes. You can set the whole block \u2014 or an individual pin \u2014 to open on hover instead of click. On touch devices, hover pins still open on tap, so mobile visitors are never left out.<\/p><\/dd>\n Yes. Pins are keyboard-operable buttons with proper ARIA state, Escape closes a tooltip and restores focus to its marker, animations respect the \u201creduce motion\u201d setting, and an optional list below the image gives screen-reader users and search engines a full text version of your hotspots. See \u201cAccessibility built in\u201d in the description for the details.<\/p><\/dd>\n No. The frontend runtime is under 4 KB and only loads on pages that contain a hotspot block. There is no jQuery and nothing render-blocking.<\/p><\/dd>\n No. Video tooltips show a preview thumbnail with a play button; the actual player only loads after the visitor clicks it. See the External Services section for exactly what is sent, and when.<\/p><\/dd>\n Right inside the block in your post content. There are no extra database tables and no leftover options, so removing the plugin leaves your site clean.<\/p><\/dd>\n Yes. Use Import \/ Export<\/strong> in the block sidebar to download a layout as a JSON file and load it into another post \u2014 even on a different website.<\/p><\/dd>\n Yes. The complete, un-minified source (JavaScript and SCSS) is included in the plugin\u2019s \u2728 Highlights<\/h4>\n\n
\n
\ud83c\udfaf What you can build<\/h4>\n\n
\n
\ud83d\udcac Rich, flexible tooltips<\/h4>\n\n
\ud83e\udded Guided tour<\/h4>\n\n
\ud83c\udff7\ufe0f Group filters<\/h4>\n\n
\u267f Accessibility built in<\/h4>\n\n
\n
aria-expanded<\/code> and aria-controls<\/code> state plus a descriptive label, so assistive technology understands what every pin does and whether its tooltip is currently open.<\/li>\n\ud83e\udde9 Start fast with block patterns<\/h4>\n\n
\n
\ud83c\udf9b\ufe0f Everything lives on the block \u2014 there is no settings page to hunt for<\/h4>\n\n
\n
\ud83d\udd12 Privacy-first by design<\/h4>\n\n
External Services<\/h3>\n\n
From your dashboard<\/h4>\n\n
\n
Manual upload<\/h4>\n\n
\n
Add your first hotspot image<\/h4>\n\n
\n
\n
\u2699\ufe0f Is there a settings or options page?<\/h3><\/dt>\n
\ud83c\udfa8 Does it work with my theme?<\/h3><\/dt>\n
\ud83d\udd22 How many hotspots can I add?<\/h3><\/dt>\n
\ud83d\udcf1 Are the pins responsive?<\/h3><\/dt>\n
\ud83d\uddb1\ufe0f Can visitors open tooltips by hovering?<\/h3><\/dt>\n
\u267f Is PinSpot accessible?<\/h3><\/dt>\n
\u26a1 Will it slow down my site?<\/h3><\/dt>\n
\ud83c\udfac Does it load anything from YouTube or Vimeo automatically?<\/h3><\/dt>\n
\ud83d\udcbe Where is my hotspot data stored?<\/h3><\/dt>\n
\ud83d\udd04 Can I reuse a hotspot layout on another page or site?<\/h3><\/dt>\n
\ud83d\udc69\u200d\ud83d\udcbb Is the source code available?<\/h3><\/dt>\n
\/src<\/code> directory alongside the compiled files in \/build<\/code>. The plugin is built with the standard WordPress tooling \u2014 run npm install<\/code> and then npm run build<\/code> to recompile it from source.<\/p><\/dd>\n\n<\/dl>\n\n\n1.1.0<\/h4>\n\n
\n
1.0.0<\/h4>\n\n
\n