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_OUTPUTzur 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
Credits
- FriendsOfREDAXO
- Project Lead: Yves Torres
github.com/FriendsOfREDAXO/block_peek
Umsetzung
Versionen
1.4.1
Thanks to @skerbis (#17) for the groundwork on these fixes.
- fix:
force_feno 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
updatedateis 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_CONTENTplaceholder instead of silently breaking all previews - ux: backend assets (JS/CSS) are only loaded on
content/editinstead of every backend page - chore: removed unused
moduleId/ctypeIdfrom theGeneratorconstructor; typed constructor parameters - chore: bumped dev dependencies (fast-uri 3.1.5, js-yaml 4.3.1 — security patches)
1.4.0
- fix: previews are now fully non-interactive — the preview iframe gets the
inertattribute pluspointer-events: none, so content CSS inside the iframe can no longer re-enable clicks or keyboard focus (previously onlypointer-eventson 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
- feat: resolve sprog wildcards (
{{ … }}) in slice previews when thesprogaddon 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
28.05.2026 Version 1.2.1
**
- fix: mixed named parameters and positional parameters
- chore: fix formatting
1.2.0
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 inrex_config['template']gespeichert.- ermöglicht Tailwind-4
@source-Discovery ĂĽber den Filesystem-Mirror desdeveloper-Addons - nutzt jetzt REDAXOs native Rendering-Pipeline;
Generator::generateTemplateundGenerator::replaceVarsentfallen (~60 Zeilen weniger Code) - bestehende, individualisierte Templates werden beim Install automatisch migriert — kein User-Eingriff nötig
- ermöglicht Tailwind-4
- feat: Settings-Felder
assets_head/assets_bodyentfernt — 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 feuertTEMPLATE_UPDATED, damit Listener (z. B.developer-Addon) reagieren können - feat:
block_peek_internal-Template wird in der Templates-Ăśbersicht via Backend-OUTPUT_FILTERausgeblendet - 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 setztclangjetzt 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
FormDataggĂĽ. der PHP-seitigen Erwartung beseitigt - fix: geleakten
message-Event-Listener entfernt, der sich bei jedemrex:readyakkumuliert 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 === undefinedin Save/Apply - chore:
popstate-Handling, manuelleshistory.pushState, manuelleCKEditor.updateSourceElement()-Aufrufe und derrestoreExistingSlice-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 Dependencieschokidar-cli,concurrentlyundbaseline-browser-mappingentfernt
Upgrade
Drop-in. Bestehende Templates werden beim Install automatisch migriert. Keine manuellen Konfigurations- oder DB-Schritte nötig.
1.1.2
1.1.1
1.1.0
1.0.3
Release version 🎉
Full Changelog: https://github.com/FriendsOfREDAXO/block_peek/compare/1.0.3-beta...1.0.3
1.0.3-beta
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
1.0.1-beta
1.0.0-beta
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