AddOn


BlockPeek 🥽

Beschreibung

Tauscht im REDAXO Backend den Slice-Output durch eine Vorschau des jeweiligen Inhalts aus dem Frontend aus.

BlockPeek 🥽 für REDAXO 5

Tauscht im REDAXO Backend den Slice-Output durch eine Vorschau des jeweiligen Inhalts aus dem Frontend aus.
Damit das Ganze funktioniert, wird ein HTML-Template benötigt, das in den Addon-Einstellungen hinterlegt werden kann.
Ausserdem sollte der Slice-Output modular aufgebaut sein, damit die Vorschau auch wirklich den Inhalt des jeweiligen Slices darstellt.

Features

  • Vorschau des Slice-Inhalts im REDAXO Backend
  • Verhindert Interaktion im Vorschau-Inhalt (keine Links, Formulare etc. anklickbar)
  • Konfigurierbares HTML-Template fĂĽr die Vorschau
  • Iframe-basierte Darstellung der Vorschau
  • Anpassbare Iframe-Größe und Zoom-Faktor
  • Caching der generierten Vorschauen zur Performance-Optimierung
  • Extension Point BLOCK_PEEK_OUTPUT zur weiteren Anpassung der Ausgabe

Installation

Einfach das Addon ĂĽber den REDAXO Installer installieren und in den BlockPeek-Einstellungen konfigurieren.

Konfiguration

In den Einstellungen des Addons kann ein HTML-Template hinterlegt werden, das fĂĽr die Vorschau der Slices verwendet wird. Dabei steht der Platzhalter {{block_peek_content}} zur VerfĂĽgung, der durch den jeweiligen Slice-Inhalt ersetzt wird.

Im Template sollten die CSS-Dateien und ggf. JavaScript-Dateien eingebunden werden, die fĂĽr die korrekte Darstellung des Inhalts notwendig sind.

Das Template kann wie ein normales Redaxo-Template genutzt werden, inklusive aller REDAXO-Variablen und -Funktionen (inkl. PHP Code).

Zusätzlich können folgende Konfigurationsoptionen angepasst werden:

  • Iframe Mindesthöhe: Die minimale Höhe des Iframes in Pixeln (Standard: 300).
  • Iframe Zoom-Faktor: Der Zoom-Faktor des Iframes (Standard: 0.5).
  • Cache Modus: Legt fest, ob die generierten Vorschauen zwischengespeichert werden sollen (automatisch, aktiviert, deaktiviert).
  • Cache TTL: Die Zeit in Sekunden, wie lange eine Vorschau im Cache gespeichert bleibt (Standard: 3600

Extension Points

Das Addon stellt den Extension Point BLOCK_PEEK_OUTPUT zur VerfĂĽgung, mit dem die Ausgabe der Vorschau weiter angepasst werden kann.

Zum Beispiel in der project Addon boot.php folgendes einfĂĽgen:

rex_extension::register('PACKAGES_INCLUDED', function (rex_extension_point $ep) {
    rex_extension::register('BLOCK_PEEK_OUTPUT', function (rex_extension_point $ep) {
        $html = $ep->getSubject();
        $sliceId = $ep->getParam('slice_id', 0);
        // Beispiel: FĂĽge eine benutzerdefinierte Nachricht am Ende der Vorschau hinzu
        $html .= '<div style="position: fixed; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; padding: 5px; border-radius: 3px;">Slice ID: ' . $sliceId . '</div>';
        $ep->setSubject($html);
    });
});

Tipps und Tricks

  • Achte darauf, dass das HTML-Template korrekt aufgebaut ist und alle notwendigen Ressourcen (CSS, JS) eingebunden sind.
  • Nutze den Extension Point BLOCK_PEEK_OUTPUT, um spezielle Anpassungen an der Vorschau vorzunehmen.
  • in der Modul-Ausgabe kann man mit rex::isBackend() zum Beispiel CSS-Klassen nur im Backend zuweisen. So kann man die Modul-Ausgabe fĂĽr die Vorschau optimieren.

Schreibt auftretende Fehler, Notices und WĂĽnsche als Issue auf Github


Das Changelog: CHANGELOG.md


Lizenz

The MIT License (MIT)

Credits


github.com/FriendsOfREDAXO/block_peek

Umsetzung

Versionen

1.4.1

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
11.08.2026
Require / PHP
>=8.2

Thanks to @skerbis (#17) for the groundwork on these fixes.

  • fix: force_fe no longer leaks the frontend context — rex::setProperty('redaxo', …) is restored after each preview render, so subsequent backend code in the same request no longer runs as "frontend"
  • fix: no more fatal error when a slice can't be found in either revision (the default REDAXO preview is kept instead)
  • fix: slice updatedate is now converted to a real timestamp for the preview cache key (previously it degraded to just the year, so edits within the same year could serve stale cached previews)
  • fix: saving the BlockPeek template now rejects content without the required BLOCK_PEEK_CONTENT placeholder instead of silently breaking all previews
  • ux: backend assets (JS/CSS) are only loaded on content/edit instead of every backend page
  • chore: removed unused moduleId/ctypeId from the Generator constructor; typed constructor parameters
  • chore: bumped dev dependencies (fast-uri 3.1.5, js-yaml 4.3.1 — security patches)

1.4.0

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
09.08.2026
Require / PHP
>=8.2
  • fix: previews are now fully non-interactive — the preview iframe gets the inert attribute plus pointer-events: none, so content CSS inside the iframe can no longer re-enable clicks or keyboard focus (previously only pointer-events on the iframe body was disabled, which content CSS could override)
  • refactor: removed the <div class="block-peek-content"> wrapper around the slice output; the class now sits on the <body> of the default template instead. Existing installs keep their already-seeded template — if you styled against .block-peek-content, add the class to your BlockPeek template's <body> yourself

1.3.0

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
04.06.2026
Require / PHP
>=8.2
  • feat: resolve sprog wildcards ({{ … }}) in slice previews when the sprog addon is installed — parsed in the preview's clang before the iframe is built, so backend previews match the translated frontend output.

Also ships the previously-unreleased 1.2.2 change:

  • chore: bump deps

1.2.1

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
28.05.2026
Require / PHP
>=8.2

28.05.2026 Version 1.2.1
**

  • fix: mixed named parameters and positional parameters
  • chore: fix formatting

1.2.0

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
08.05.2026
Require / PHP
>=8.2

Highlights

Native REDAXO-Template-Speicherung und schlankerer Slice-Edit-Workflow. Das Preview-Template wird nun als versteckter rex_template-Datensatz gefĂĽhrt (Voraussetzung u. a. fĂĽr
Tailwind-4 @source-Discovery via developer-Addon), und der Edit/Save/Apply-Pfad nutzt ein natives Form-Submit statt der bisherigen async fetch-and-swap-Pipeline.

Template-Storage als rex_template

  • feat: Preview-Template wird als versteckter rex_template-Datensatz (Key: block_peek_internal) statt in rex_config['template'] gespeichert.
    • ermöglicht Tailwind-4 @source-Discovery ĂĽber den Filesystem-Mirror des developer-Addons
    • nutzt jetzt REDAXOs native Rendering-Pipeline; Generator::generateTemplate und Generator::replaceVars entfallen (~60 Zeilen weniger Code)
    • bestehende, individualisierte Templates werden beim Install automatisch migriert — kein User-Eingriff nötig
  • feat: Settings-Felder assets_head / assets_body entfernt — ihr Inhalt wird beim Install ins Template gemerged (eine zentrale Stelle zum Bearbeiten)
  • feat: Template-Editor auf der Settings-Seite schreibt direkt in den rex_template-Datensatz und feuert TEMPLATE_UPDATED, damit Listener (z. B. developer-Addon) reagieren können
  • feat: block_peek_internal-Template wird in der Templates-Ăśbersicht via Backend-OUTPUT_FILTER ausgeblendet
  • feat: Platzhalter umbenannt: {{block_peek_content}} → BLOCK_PEEK_CONTENT (wird bei der Migration automatisch umgeschrieben)
  • fix: Cache-Key enthält jetzt das Template-updatedate, sodass Template-Ă„nderungen veraltete Einträge invalidieren
  • fix: rex_article_content-Konstruktor setzt clang jetzt vor der Artikel-ID (latenter Ordering-Bug im vorherigen Generator)

Slice-Edit-Workflow (JS)

  • refactor(js): asynchrone Edit-/Save-/Apply-Pipeline durch natives Form-Submit ersetzt; nach dem Reload wird die Scroll-Position auf den bearbeiteten Slice wiederhergestellt, sobald
    die Iframe-Höhen ausgependelt sind (500 ms Settle-Window + 500 ms Late-Shift-Watch)
  • fix: fehlerhafte JSON-Payloads durch abweichende multipart-Kodierung von FormData ggĂĽ. der PHP-seitigen Erwartung beseitigt
  • fix: geleakten message-Event-Listener entfernt, der sich bei jedem rex:ready akkumuliert hat
  • fix: Apply-Erkennung korrigiert — REDAXO setzt den Submitter name="btn_update" (vorher fälschlich per /apply/i-Regex gematcht)
  • fix: Guard fĂĽr ckeditors === undefined in Save/Apply
  • chore: popstate-Handling, manuelles history.pushState, manuelle CKEditor.updateSourceElement()-Aufrufe und der restoreExistingSlice-Re-Fetch-Pfad entfallen
  • feat: bfcache- und Non-Reload-Navigation werden via pageshow-Listener behandelt; veraltete Scroll-Intent-Einträge laufen nach 30 s ab
  • chore: ungenutzte npm-Scripts (dev:sync, build:sync, clean:assets) sowie die Dependencies chokidar-cli, concurrently und baseline-browser-mapping entfernt

Upgrade

Drop-in. Bestehende Templates werden beim Install automatisch migriert. Keine manuellen Konfigurations- oder DB-Schritte nötig.

1.1.2

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
14.03.2026
Require / PHP
>=8.2

1.1.1

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
14.03.2026
Require / PHP
>=8.2

1.0.3

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
27.10.2025
Require / PHP
>=8.2

1.0.3-beta

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
23.10.2025
Require / PHP
>=8.2

fix: handle slice revision, fixes: https://github.com/FriendsOfREDAXO/block_peek/issues/1
fix: add option to force frontend context, fixes: https://github.com/FriendsOfREDAXO/block_peek/issues/2
feat: add english strings

Full Changelog: https://github.com/FriendsOfREDAXO/block_peek/compare/1.0.2-beta...1.0.3-beta

1.0.2-beta

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
23.10.2025
Require / PHP
>=8.2

1.0.1-beta

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
23.10.2025
Require / PHP
>=8.2

1.0.0-beta

FĂĽr REDAXO
^5.17.0
Veröffentlicht am
23.10.2025
Require / PHP
>=8.2

Initiales Beta-Release.
Ich nutze es bereits in Produktion, aber ja, auf eigene Gefahr ⚠️

Full Changelog: https://github.com/FriendsOfREDAXO/block_peek/commits/1.0.0-beta