README

Sulu CMS bundle that enables click-to-edit in the preview iframe: hovering a block shows a focus button, clicking it scrolls to and expands the corresponding block in the admin form.

Features

Hover overlay with focus button on blocks in the preview iframe
Clicking the button scrolls to the block in the admin form and expands it
Supports nested blocks (sends parent IDs first, child last)
Twig function sulu_user_loggedin_and_preview to conditionally include the preview script

Requirements

PHP 8.2+
Sulu CMS 3.0+
Symfony 7.0+

Installation

composer require alengo/sulu-preview-block-focus-bundle

Alengo\SuluPreviewBlockFocusBundle\PreviewBlockFocusBundle::class => ['all' => true],

Admin JS

1. Add to assets/admin/package.json under dependencies:

"sulu-preview-block-focus-bundle": "file:../../vendor/alengo/sulu-preview-block-focus-bundle/assets/admin"

2. Install the dependency:

cd assets/admin && npm install

3. Import in assets/admin/app.js:

import 'sulu-preview-block-focus-bundle';

4. Rebuild the admin:

cd assets/admin && npm run build

Website JS (Webpack Encore)

Add an entry in webpack.config.js:

.addEntry('suluPreviewBlockFocus', './vendor/alengo/sulu-preview-block-focus-bundle/assets/website/index.js')

Include the script conditionally in your Twig layout (only in Sulu preview context):

{% if sulu_user_loggedin_and_preview(app.request) %}
    {{ encore_entry_script_tags('suluPreviewBlockFocus', null, 'baseConfig', attributes={
        'defer': false,
        'async': true
    }) }}
{% endif %}

Block markup

Add data-block-id conditionally — only when rendering in the Sulu preview context:

<div{{ (sulu_user_loggedin_and_preview(app.request) ? ' data-block-id="' ~ content._id|default ~ '"')|raw }}>

This ensures data-block-id is only rendered inside the preview iframe and never exposed on the public website.

How it works

Website side (assets/website/index.js): Runs inside the Sulu preview iframe. On block hover, a focus button appears. On click, it posts a sulu-preview-block-click message with the block UUID to the parent window.

Admin side (assets/admin/index.js): Listens for sulu-preview-block-click messages. Uses React fiber introspection to find the matching block in the admin form, collapses other open blocks, expands the target block, and scrolls to it.

alengo / sulu-preview-block-focus-bundle

Maintainers

Package info

Statistics

Security