PHPackages                             alengo/sulu-preview-block-focus-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. alengo/sulu-preview-block-focus-bundle

ActiveSymfony-bundle[Admin Panels](/categories/admin)

alengo/sulu-preview-block-focus-bundle
======================================

Sulu CMS admin enhancement: clicking a block in the preview iframe scrolls to and expands the corresponding block in the admin form.

3.0.0(4mo ago)166↓87.5%MITJavaScriptPHP ^8.2

Since Apr 8Pushed 4mo agoCompare

[ Source](https://github.com/alengodev/SuluPreviewBlockFocusBundle)[ Packagist](https://packagist.org/packages/alengo/sulu-preview-block-focus-bundle)[ Docs](https://github.com/alengodev/SuluPreviewBlockFocusBundle)[ RSS](/packages/alengo-sulu-preview-block-focus-bundle/feed)WikiDiscussions 3.x Synced 3w ago

READMEChangelog (2)Dependencies (2)Versions (4)Used By (0)

SuluPreviewBlockFocusBundle
===========================

[](#sulupreviewblockfocusbundle)

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
--------

[](#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
------------

[](#requirements)

- PHP 8.2+
- Sulu CMS 3.0+
- Symfony 7.0+

Installation
------------

[](#installation)

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

Register the bundle in `config/bundles.php`:

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

### Admin JS

[](#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)

[](#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

[](#block-markup)

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

```

```

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

How it works
------------

[](#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.

###  Health Score

39

—

LowBetter than 84% of packages

Maintenance77

Regular maintenance activity

Popularity13

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

4

Last Release

124d ago

PHP version history (2 changes)3.0.0PHP ^8.2

2.0.0PHP ^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/4a3bea97975bdeddcfa5b76c222740e703e4ff5f9bbf5f6d5d75e8827e0a48ac?d=identicon)[alengodev](/maintainers/alengodev)

---

Top Contributors

[![hual7](https://avatars.githubusercontent.com/u/89628357?v=4)](https://github.com/hual7 "hual7 (5 commits)")

---

Tags

cmsadminfocuspreviewblocksulu

### Embed Badge

![Health badge](/badges/alengo-sulu-preview-block-focus-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/alengo-sulu-preview-block-focus-bundle/health.svg)](https://phpackages.com/packages/alengo-sulu-preview-block-focus-bundle)
```

###  Alternatives

[easycorp/easyadmin-bundle

Admin generator for Symfony applications

4.3k18.3M417](/packages/easycorp-easyadmin-bundle)[sulu/skeleton

Project template for starting your new project based on the Sulu content management system

29736.0k](/packages/sulu-skeleton)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.4M230](/packages/sulu-sulu)[2lenet/crudit-bundle

The easy like Crud'it Bundle.

1617.3k16](/packages/2lenet-crudit-bundle)[rcsofttech/audit-trail-bundle

Enterprise-grade, high-performance Symfony audit trail bundle. Automatically track Doctrine entity changes with split-phase architecture, multiple transports (HTTP, Queue, Doctrine), and sensitive data masking.

12017.1k](/packages/rcsofttech-audit-trail-bundle)[kunstmaan/admin-bundle

The Kunstmaan Admin bundle supplies your project with a basic, elegant backend interface you can modify and extend so you can make your perfect admin module. The clean interface makes it straightforward for you and the people working with it to change settings and modify content.

60152.3k35](/packages/kunstmaan-admin-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)