change: preview-block-id to data-preview-block-id

Author: nicholashamilton

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 4.0.0 - 2024-11-13
+### Breaking Changes
+- Changed the attribute name for tracking preview blocks from `preview-block-id` to `data-preview-block-id`. Update your template code accordingly.
+- `craft.previewMate.previewBlock` twig variable now returns the HTML attribute with `data-` prefixed to match the new `data-preview-block-id` attribute.
+
 ## 3.0.2 - 2024-11-13
 ### Updated
 - `craft.previewMate.previewBlock` twig variable now uses `Craft::$app->request->isPreview` internally to check if the current request is a preview request.

README.md

@@ -1,4 +1,4 @@
-# PreviewMate v3
+# PreviewMate v4
 
 Find live preview matrix blocks with ease.
 
@@ -20,9 +20,9 @@ To install the plugin, follow these instructions.
 
 ## How to use
 
-![PreviewMate v3 Demo](./resources/img/PreviewMate_v3_Demo.gif)
+![PreviewMate v4 Demo](./resources/img/PreviewMate_v4_Demo.gif)
 
-Preview blocks will be tracked in live preview when adding the `preview-block-id` attribute to the entry's HTML element.
+Preview blocks will be tracked in live preview by adding `data-preview-block-id` attribute to the entry's HTML element.
 
 ```twig
 {# option 1 (recommended) - only rendered in live preview #}
@@ -31,10 +31,10 @@ Preview blocks will be tracked in live preview when adding the `preview-block-id
 or
 ```twig
 {# option 2 - manually set the preview block id #}
-preview-block-id="{{ entry.id }}"
+data-preview-block-id="{{ entry.id }}"
 ```
 
-That element will now be tracked in the live preview. Clicking on it in the preview will scroll you to the element in the editor. Hovering over it will highlight both the editor and preview elements.
+Clicking a preview block will now scroll to and highlight the editor block.
 
 ## Usage example 
 
@@ -50,14 +50,14 @@ That element will now be tracked in the live preview. Clicking on it in the prev
 {% endfor %}
 ```
 
-It's recommended to add styles for preview blocks using `preview-block-id`.
-The hovering style will only be toggled during live preview.
+It's recommended to add styles for preview blocks using `data-preview-block-id`.
+Adding the following styles will highlight the preview block on hover.
 
 ```css
-[preview-block-id] {
+[data-preview-block-id] {
     position: relative;
 }
-[preview-block-id]::after {
+[data-preview-block-id]::after {
     content: '';
     position: absolute;
     top: 0;
@@ -69,7 +69,7 @@ The hovering style will only be toggled during live preview.
     opacity: 0;
     transition: opacity 300ms ease;
 }
-[preview-block-id].preview-block-hover::after {
+[data-preview-block-id].preview-block-hover::after {
     opacity: 1;
 }
 ```

example/templates/_page-builder/index.twig

@@ -8,10 +8,10 @@
 
 {# css to highlight the preview block in live preview when hovering #}
 {% css %}
-    [preview-block-id] {
+    [data-preview-block-id] {
         position: relative;
     }
-    [preview-block-id]::after {
+    [data-preview-block-id]::after {
         content: '';
         position: absolute;
         top: 0;
@@ -23,7 +23,7 @@
         opacity: 0;
         transition: opacity 300ms ease;
     }
-    [preview-block-id].preview-block-hover::after {
+    [data-preview-block-id].preview-block-hover::after {
         opacity: 1;
     }
 {% endcss %}

resources/img/PreviewMate_v4_Demo.gif

@@ -81,11 +81,11 @@
         },
 
         attatchPreviewBlockEventListeners(iframe) {
-            const previewBlocks = iframe.contentWindow.document.body.querySelectorAll('[preview-block-id]');
+            const previewBlocks = iframe.contentWindow.document.body.querySelectorAll('[data-preview-block-id]');
 
             previewBlocks.forEach(function (previewBlock) {
 
-                const editorBlock = Craft.PreviewMate.lpEditorContainer.querySelector(`[data-id="${previewBlock.getAttribute('preview-block-id')}"]`);
+                const editorBlock = Craft.PreviewMate.lpEditorContainer.querySelector(`[data-id="${previewBlock.dataset.previewBlockId}"]`);
                 if (!editorBlock) return;
 
                 previewBlock.addEventListener('click', function () {

src/assetbundles/previewmate/dist/js/index.js

@@ -15,6 +15,6 @@ public function previewBlock(Entry $entry) {
             $isPreview = Craft::$app->request->isPreview ?? false;
         }
 
-        return $isPreview ? Template::raw("preview-block-id=\"" . $entry->id . "\"") : '';
+        return $isPreview ? Template::raw("data-preview-block-id=\"" . $entry->id . "\"") : '';
     }
 }