Mit MBlock ist es möglich, innerhalb eines Moduls beliebig viele Unerblöcke zu erzeugen. Diese können dann einfach per But# Online/Offline Check foreach ($data as $item) { if (MBlock::isOnline($item)) { // Item ist online echo rex_escape($item['title']); } }r Drag & Drop sortiert werden. Die erweiterte Version bietet Copy & Paste Funktionalität und einen Offline/Online Toggle für einzelne Blöcke.
English: MBlock lets you create an unlimited number of data blocks within a single module. These data blocks can be sorted per click or drag & drop. The enhanced version provides copy & paste functionality and an offline/online toggle for individual blocks.
Please note: The examples are valid for MForm version 8 and higher. MBlock now requires the bloecks addon (^5.2.0) for modern drag & drop functionality.
Copy & Paste funktioniert leider nicht!
Es sollte in den betreffenden Modulen deaktiviert werden.
Beispiel
echo MBlock::show(1, $form, [
'min' => 1, // Minimale Anzahl Items
'max' => 10, // Maximale Anzahl Items
'template' => 'modern', // Template-Name
'copy_paste' => false, // Copy & Paste aktivieren
'online_offline' => true // Online/Offline Toggle , hidden field muss angelegt sein.
]);
- Beliebig viele Datenblöcke pro Modul erstellen
- Drag & Drop Sortierung mit bloecks addon (^5.2.0)
- Minimale/Maximale Anzahl von Blöcken definierbar
- MForm Integration für professionelle Formulare
- Template System mit Prioritätsladung
- Mehrsprachigkeit (DE/EN)
- Online/Offline Toggle - Blöcke aktivieren/deaktivieren ohne löschen
- Copy & Paste - Komfortable Duplizierung von Inhalten
- Frontend API Methoden -
filterByField(),sortByField(),groupByField() - Schema.org Support - SEO-optimierte JSON-LD Generierung
- Erweiterte Datenabfrage - Online/Offline/All Modi
- Template-Priorität - Custom templates überschreiben defaults
- Media-ID Konflikt-Schutz - Bessere Warnung bei ID-Überschneidungen
MBlock führt Namespaces ein! Für neue Projekte wird die Verwendung des Namespace empfohlen:
<?php
// Empfohlen: Neue Namespace-Syntax
use FriendsOfRedaxo\MBlock\MBlock;
$items = MBlock::getDataArray("REX_VALUE[1]");
echo MBlock::show(1, $mform->show());Vollständig rückwärtskompatibel! Bestehende Module funktionieren weiterhin ohne Änderungen:
<?php
// Weiterhin unterstützt: Legacy-Syntax (für Bestandscode)
$items = MBlock::getDataArray("REX_VALUE[1]");
echo MBlock::show(1, $mform->show());- Neue Module: Verwenden die
use FriendsOfRedaxo\MBlock\MBlock;Syntax - Bestehende Module: Funktionieren ohne Änderungen weiter
- Deprecated-Warnung: Alte Syntax wird in Version 5.0 entfernt
MBlock erfordert:
# Via REDAXO Installer
# 1. Gehe zu System > Installer
# 2. Suche nach "mblock"
# 3. Installiere mblock zusammen mit bloecksMit Namespace (empfohlen für neue Projekte):
<?php
use FriendsOfRedaxo\MBlock\MBlock;
// Alle MBlock-Daten abrufen
$allItems = MBlock::getDataArray("REX_VALUE[1]");
// Nur Online-Blöcke (für Frontend) - EMPFOHLEN
$onlineItems = MBlock::getDataArray("REX_VALUE[1]", 'online');
// Nur Offline-Blöcke (für Backend-Previews)
$offlineItems = MBlock::getDataArray("REX_VALUE[1]", 'offline');
// Convenience-Methoden
$onlineItems = MBlock::getOnlineDataArray("REX_VALUE[1]");
$offlineItems = MBlock::getOfflineDataArray("REX_VALUE[1]");Legacy-Syntax (weiterhin unterstützt):
<?php
// Alle MBlock-Daten abrufen
$allItems = MBlock::getDataArray("REX_VALUE[1]");
// Nur Online-Blöcke (für Frontend) - EMPFOHLEN
$onlineItems = MBlock::getDataArray("REX_VALUE[1]", 'online');
// Nur Offline-Blöcke (für Backend-Previews)
$offlineItems = MBlock::getDataArray("REX_VALUE[1]", 'offline');
// Convenience-Methoden
$onlineItems = MBlock::getOnlineDataArray("REX_VALUE[1]");
$offlineItems = MBlock::getOfflineDataArray("REX_VALUE[1]");Mit Namespace (empfohlen):
<?php
use FriendsOfRedaxo\MBlock\MBlock;
$items = MBlock::getOnlineDataArray("REX_VALUE[1]");
// Nach Feld filtern
$newsItems = MBlock::filterByField($items, 'category', 'news');
$activeItems = MBlock::filterByField($items, 'status', 'active');
// Nach Feld sortieren
$sortedByName = MBlock::sortByField($items, 'name', 'ASC');
$sortedByDate = MBlock::sortByField($items, 'date', 'DESC', 'date');
$sortedByPrice = MBlock::sortByField($items, 'price', 'DESC', 'numeric');
// Nach Feld gruppieren
$grouped = MBlock::groupByField($items, 'category');
foreach ($grouped as $category => $categoryItems) {
echo "<h2>" . rex_escape($category) . "</h2>";
foreach ($categoryItems as $item) {
echo "<p>" . rex_escape($item['title']) . "</p>";
}
}
// Anzahl begrenzen (Pagination)
$topItems = MBlock::limitItems($items, 5);
$nextItems = MBlock::limitItems($items, 5, 5);
// SEO Schema.org JSON-LD generieren
$schema = MBlock::generateSchema($items, 'Person', [
'name' => 'name',
'jobTitle' => 'position',
'image' => 'photo',
'email' => 'email'
]);
echo '<script type="application/ld+json">' . json_encode($schema) . '</script>';$data = rex_var::toArray("REX_VALUE[1]");
// Online/Offline Check (MBlock 4.0)
foreach ($data as $item) {
if (MBlock::isOnline($item)) {
// Item ist online
echo rex_escape($item['title']);
}
}
// Legacy-Methoden (deprecated, bitte getDataArray() verwenden)
$onlineItems = MBlock::getOnlineItems($data);
$offlineItems = MBlock::getOfflineItems($data);MBlock bietet ein modernes Template-System mit grafischer Auswahl über ein Dropdown-Menü in den AddOn-Einstellungen. Das System kopiert automatisch die CSS-Dateien in den assets/ Ordner und sorgt für optimale Performance.
Die Template-Auswahl erfolgt über die MBlock-Einstellungen:
- Gehe zu
Addons > MBlock > Einstellungen - Wähle ein Template aus der Dropdown-Liste
- Klicke "Speichern" - Das CSS wird automatisch kopiert
- Das Template ist sofort aktiv
Die mitgelieferten Templates unterstützen Dark Mode:
- REDAXO Theme Detection (
body.rex-theme-dark) - Browser Preference (
@media (prefers-color-scheme: dark)) - Bootstrap 5 Dark Mode (
[data-bs-theme="dark"])
Eigene Templates können im data/ Ordner erstellt werden:
redaxo/data/addons/mblock/templates/
├── my_custom_theme/
│ ├── template.ini # Template-Konfiguration
│ ├── mblock_wrapper.ini # HTML-Wrapper für alle Items
│ ├── mblock_element.ini # HTML-Template für einzelne Items
│ └── my_custom_theme.css # Template-Styling (gleicher Name wie Ordner!)Wichtig: Die CSS-Datei muss den gleichen Namen wie der Template-Ordner haben!
MBlock enthält einige Modulbeispiele. Diese finden sich auf der MBlock-Seite im REDAXO-Backend. An dieser Stelle werden nur zwei Beispiele aufgelistet — mit Unterstützung durch MForm und ohne —, um zu zeigen, wie MBlock funktioniert.
English: MBlock contains several module examples. You’ll find them on the MBlock page within the REDAXO backend. At this point, we want to show two examples only — one with MForm support and another one without — to demonstrate how MBlock works.
Example 1: team members (requires MForm addon)
Input:
<?php
// Modernisiertes Beispiel mit MForm
use FriendsOfRedaxo\MForm;
// base ID
$id = 1;
// init mform mit moderner MForm Syntax
$mform = MForm::factory();
// fieldset
$mform->addFieldsetArea('Team member');
// textinput
$mform->addTextField("$id.0.name", array('label'=>'Name'));
// media button
$mform->addMediaField(1, array('label'=>'Avatar'));
// Online/Offline Status (hidden field für Toggle-Funktion)
$mform->addHiddenField("$id.0.mblock_offline", '0');
// MBlock anzeigen (Copy & Paste ist automatisch aktiv)
echo MBlock::show($id, $mform->show(), array(
'min' => 2,
'max' => 4
));Output:
<?php
use FriendsOfRedaxo\MBlock\MBlock;
// Verbesserte Ausgabe
$items = MBlock::getOnlineDataArray("REX_VALUE[1]"); // Nur Online-Items
foreach ($items as $item) {
$name = rex_escape($item['name'] ?? '');
$mediaId = $item['REX_MEDIA_1'] ?? '';
echo '<div class="team-member">';
if ($name) {
echo '<h3>' . $name . '</h3>';
}
if ($mediaId) {
$media = rex_media::get($mediaId);
if ($media) {
echo '<img src="' . rex_media_manager::getUrl('rex_media_medium', $media->getFileName()) . '"
alt="' . rex_escape($media->getTitle()) . '" class="img-responsive" />';
}
}
echo '</div>';
}
// Debug (nur während Entwicklung)
// echo '<pre>';
// dump(MBlock::getDataArray("REX_VALUE[1]")); // Alle Items inkl. Offline
// echo '</pre>';Example 2: team members (without MForm)
Input:
<?php
use FriendsOfRedaxo\MBlock\MBlock;
// base ID
$id = 1;
// html form
$form = <<<EOT
<fieldset class="form-horizontal ">
<legend>Team member</legend>
<div class="form-group">
<div class="col-sm-2 control-label"><label for="rv2_1_0_name">Name</label></div>
<div class="col-sm-10"><input id="rv2_1_0_name" type="text" name="REX_INPUT_VALUE[$id][0][name]" value="" class="form-control "></div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label"><label>Avatar</label></div>
<div class="col-sm-10">
REX_MEDIA[id="1" widget="1"]
</div>
</div>
</fieldset>
EOT;
// MBlock mit Features
echo MBlock::show($id, $form, array(
'online_offline' => true,
'copy_paste' => true
));Output:
<?php
use FriendsOfRedaxo\MBlock\MBlock;
// Sicher und modern
$items = MBlock::getOnlineDataArray("REX_VALUE[1]");
foreach ($items as $item) {
$name = rex_escape($item['name'] ?? '');
$mediaId = $item['REX_MEDIA_1'] ?? '';
echo '<div class="team-member">';
echo '<h3>' . $name . '</h3>';
if ($mediaId && ($media = rex_media::get($mediaId))) {
echo '<img src="' . rex_media_manager::getUrl('rex_media_small', $media->getFileName()) . '"
alt="' . rex_escape($media->getTitle()) . '" />';
}
echo '</div>';
}MBlock verwendet eine modulare JavaScript-Architektur, die den Code in drei logische Module aufteilt:
mblock-core.js- Base utilities, Validierung, Übersetzungen (384 Zeilen)mblock-management.js- DOM-Manipulation, Sortable-Handling (1008 Zeilen)mblock-features.js- Copy/Paste, Online/Offline Toggle, REDAXO Widgets (815 Zeilen)
Dies verbessert die Wartbarkeit, reduziert Code-Redundanz und ermöglicht besseres Debugging.
Das Build-System kombiniert automatisch die modularen Dateien und erstellt optimierte Versionen:
- Node.js (Version 14 oder höher)
- npm (wird normalerweise mit Node.js installiert)
-
Terminal öffnen und in das Build-Verzeichnis wechseln:
cd redaxo/src/addons/mblock/build -
Build-Script ausführen:
./build.sh
-
Automatischer Prozess:
- Kombiniert die 3 modularen Dateien zu einer einzigen Datei
- Erstellt
mblock-combined.js(Zwischenergebnis) - Aktualisiert
mblock.js(Development-Version) - Erstellt
mblock.min.js(Production-Version mit Terser-Minifizierung) - Generiert Source Map für Debugging
� MBlock Build Process gestartet
═══════════════════════════════════
✅ Node.js gefunden: v23.9.0
✅ Dependencies bereits vorhanden
� Quelldatei gefunden: ../assets/mblock.js
🔗 Erstelle kombinierte Datei aus modularen Komponenten...
✅ Kombinierte Datei erstellt: mblock-combined.js
🔗 Aktualisiere mblock.js für Entwicklungsmodus...
✅ mblock.js aktualisiert
⚙️ Starte Minification der kombinierten Datei...
� Minification Statistiken:
────────────────────────────────────────
📏 Originalgröße: 105.23 KB
🗜️ Minified Größe: 36.37 KB
💾 Ersparnis: 68.85 KB (65.43%)
⏱️ Verarbeitungszeit: 238ms
────────────────────────────────────────
✅ MBlock JavaScript erfolgreich minified!
🎉 MBlock Build Process abgeschlossen!
Das System unterstützt verschiedene Asset-Loading Modi (konfigurierbar in boot.php):
$assetMode = 'auto'; // Options: 'auto', 'modular', 'combined', 'prod'-
auto(Standard) - Automatische Erkennung basierend auf Debug-Modus- Development:
mblock.js(kombinierte Datei) - Production:
mblock.min.js(minifiziert)
- Development:
-
modular- Lädt 3 separate Dateien (erweiterte Debugging-Möglichkeiten)mblock-core.js→mblock-management.js→mblock-features.js
-
combined- Immer kombinierte Datei (mblock.js) -
prod- Immer minifizierte Datei (mblock.min.js)
Die modulare Architektur bringt folgende Verbesserungen:
✅ Code-Reduktion: ~200 Zeilen Redundanz eliminiert
✅ Reusable Functions: MBlockUtils, MBlockClipboard, MBlockOnlineToggle
✅ Unified Event Handling: Zentralisierte Event-Konfiguration
✅ Better Error Handling: Konsistente Fehlerbehandlung
✅ Memory Management: Automatisches Event-Cleanup
✅ Performance: Cached Selectors und optimierte Algorithmen
Das neue System bietet verbesserte REDAXO Widget-Unterstützung:
- ✅ REX_LINK Copy/Paste - Artikel-IDs und Namen werden korrekt kopiert
- ✅ REX_MEDIA Copy/Paste - Media-Dateien mit Metadaten
- ✅ Widget-Reinitialization - Onclick-Handler werden automatisch aktualisiert
- ✅ Auto Name Fetching - Artikel-Namen werden automatisch per AJAX geholt
- 🔗 Smart Combining - Intelligente Kombination der modularen Dateien
- ⚙️ Advanced Minification - Terser mit optimierten Settings (2 Compression-Passes)
- 🗺️ Source Maps - Für einfaches Debugging der minifizierten Datei
- 📊 Performance Stats - Detaillierte Größen- und Kompressions-Statistiken
- 🔧 Error Handling - Robuste Fehlerbehandlung und Validierung
- ♻️ Auto-Update - Synchronisation zwischen Development- und Production-Dateien
Falls Probleme auftreten:
-
Node.js Version prüfen:
node --version # sollte >= 14.0.0 sein -
Dependencies neu installieren:
cd redaxo/src/addons/mblock/build rm -rf node_modules npm install -
Modulare Dateien prüfen:
ls -la ../assets/mblock-*.js # Sollte alle 3 modularen Dateien anzeigen
-
Manuelle Terser Installation:
npm install terser
Für MBlock-Entwicklung:
-
Bearbeite die modularen Dateien:
assets/mblock-core.jsassets/mblock-management.jsassets/mblock-features.js
-
Build ausführen nach Änderungen:
cd build && ./build.sh
-
Testen in REDAXO (Debug-Modus nutzt automatisch die Development-Version)
-
Production-Deploy: Die minifizierte Version wird automatisch generiert
Friends Of REDAXO
Project Leads