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(1mo ago)133↓50%MITJavaScriptPHP ^8.2

Since Apr 8Pushed 1mo 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 yesterday

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

42

—

FairBetter than 90% of packages

Maintenance93

Actively maintained with recent releases

Popularity12

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity48

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

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

[sulu/skeleton

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

29733.3k](/packages/sulu-skeleton)[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.

58149.5k20](/packages/kunstmaan-admin-bundle)[fsi/admin-bundle

FSi Admin Bundle. Admin generator for Symfony.

5849.2k7](/packages/fsi-admin-bundle)[arbory/arbory

Administration interface for Laravel

4752.8k3](/packages/arbory-arbory)[bpocallaghan/titan

Core framework for laravel projects (Laravel Admin Starter).

5811.2k1](/packages/bpocallaghan-titan)

PHPackages © 2026

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