Visual Block Highlighting in Live Preview

[dalir-bajelani]

Summary

When editing pages with blocks in the Payload CMS admin panel, it would be extremely helpful to have visual feedback showing which block is currently being edited in the live preview window.

User Problem

Currently, when working with pages that contain multiple blocks, it's difficult to understand which block in the live preview corresponds to the block being edited in the admin panel. This creates confusion and slows down the editing workflow, especially on pages with many similar-looking blocks.

Proposed Solution

When the live preview window is open alongside the admin panel:

1. Visual Highlighting: When hovering over a block in the admin panel, the corresponding content in the live preview should be highlighted with a visual indicator (like a colored border)
2. Auto-Scroll: The preview window should automatically scroll to show the highlighted block, ensuring it's visible even on long pages
3. Clear Identification: The highlighted area should clearly show the boundaries of the block being edited

User Benefits

• Faster Editing: Editors can quickly identify which part of the page they're modifying
• Reduced Errors: Less chance of accidentally editing the wrong block
• Better User Experience: More intuitive and visual editing workflow
• Improved Productivity: Less time spent figuring out block relationships between admin and preview

Use Cases

• Content editors working on landing pages with multiple sections
• Developers testing block layouts and content
• Clients reviewing and editing page content
• Team members collaborating on page structure

This feature would make the live preview functionality much more powerful and user-friendly, providing the visual connection between the admin interface and the actual page content that editors need.

[shahla-m-aziz]

Yeah, I totally feel this! When I'm editing a block, especially on a page that's got a ton of them, it'd be super helpful if the preview could just zip right to what I'm working on and highlight it for me.