Sulu Preview Block Focus Bundle Laravel Package

Product Decisions This Supports

• UX Improvements for Content Editors: Accelerates content editing workflows in Sulu CMS by reducing context-switching between preview and admin panels. Directly addresses pain points in headless CMS workflows where editors frequently toggle between preview and edit modes.
• Roadmap for "Click-to-Edit" Features: Justifies investment in a modular, low-code solution for enhancing editor productivity, aligning with broader trends in no-code/low-code CMS tooling.
• Build vs. Buy Decision: Avoids reinventing the wheel for a niche but critical UX feature. Leverages open-source to reduce dev effort while maintaining customization flexibility (e.g., styling, block ID handling).
• Use Cases:
  • Marketing Teams: Faster iteration on landing pages, promotional blocks, or nested layouts (e.g., hero sections with CTA buttons).
  • Multi-Language Sites: Streamlines editing for translators working in preview mode across language variants.
  • Component-Driven Design: Supports teams using Sulu’s block system for modular content (e.g., e-commerce product grids, blog layouts).

When to Consider This Package

• Adopt When:
  • Your team uses Sulu CMS 3.0+ with Symfony 7.0+ and PHP 8.2+ (no polyfill overhead).
  • Editors report frustration with manual scrolling between preview and admin panels, especially for complex/nested blocks.
  • You prioritize developer velocity over custom UI/UX (package handles core logic; styling can be overridden via CSS).
  • Your content structure relies on block-based editing (e.g., page builders, dynamic templates).
• Look Elsewhere If:
  • You need deep customization of the focus button (e.g., animations, accessibility tweaks)—the package provides minimal theming hooks.
  • Your team lacks JavaScript/React familiarity to debug admin-side message handling (uses React fiber introspection).
  • You require server-side rendering (SSR) support in preview iframes (package assumes client-side JS).
  • Your Sulu setup uses custom block types without _id fields (requires manual data-block-id attribute injection).
  • You’re evaluating alternative CMS platforms (e.g., Strapi, Contentful) with built-in click-to-edit features.

How to Pitch It (Stakeholders)

For Executives: "This open-source package solves a hidden productivity drain for our content teams. By letting editors click a block in the preview and instantly jump to its edit panel—without manual scrolling—we can cut content update time by 20–30% (based on similar tools like Storyblok’s visual editor). It’s a low-risk, high-impact fix: minimal dev lift (30 mins to integrate), no licensing costs, and it future-proofs our Sulu investment. Competitors like [X] CMS charge $Y/year for this—we’re building it for free."

For Engineering: *"This bundle handles the ‘click-to-edit’ use case for Sulu’s preview iframe with two key components:

1. Website-side: Adds a hover-triggered focus button to blocks in preview mode (uses data-block-id to identify targets).
2. Admin-side: Listens for clicks via postMessage and uses React’s fiber introspection to locate/expand the matching block in the admin panel. Pros:

• No backend changes: Pure frontend + Twig tweaks.
• Supports nested blocks: Sends parent-child IDs in order.
• Conditional loading: Only injects scripts in preview contexts (no public-site bloat). Cons:
• Requires React knowledge to debug admin-side block matching if custom block types break it.
• Limited theming: Focus button styling is basic (override via CSS). Recommendation: Pilot with the marketing team’s most complex page templates to validate ROI before rolling out globally."*

For Design/UX: "This addresses a cognitive load issue: editors constantly toggle between preview and admin panels, losing context. The package’s visual feedback (hover button) makes the workflow intuitive—similar to Figma’s component selection. Tradeoff: The default button is utilitarian (no custom icons/animations), but we can style it to match our design system post-integration."