MevvBlocks Documentation

Installation

MevvBlocks benötigt WordPress 6.0 oder neuer und PHP 8.1 oder neuer. Es gibt keine weitere Abhängigkeit: keine externe Bibliothek, keine Schrift vom Server eines anderen, kein Build-Schritt.

Laden Sie das Plugin hoch und aktivieren Sie es.
Öffnen Sie eine Seite im Block-Editor und fügen Sie den Block Container hinzu.
Legen Sie die gewünschten Blöcke hinein. Sie finden sie in der Kategorie Design.
Den Rest verwalten Sie über das Menü MevvBlocks in der Adminleiste.

WooCommerce ist optional. Wird es installiert, kommen zwei Blöcke hinzu.
MevvBridge ist optional. Wenn Sie von Elementor kommen, ist MevvBlocks das, was jene Seiten wieder bearbeitbar macht.
MevvLegal ist optional. Ist es vorhanden, übergibt der Kartenblock seine Einbettung an MevvLegal, sodass die Karte nicht geladen wird, bevor der Besucher zustimmt.

Pro ist ein eigenständiges Plugin, das neben dem kostenlosen installiert wird, und es erklärt das kostenlose Plugin zur harten Voraussetzung. Ihren Lizenzschlüssel tragen Sie auf dem Bildschirm Lisans ein. Ohne Pro stellt MevvBlocks überhaupt keine Anfrage an unsere Server.

Stil je Bildschirmgröße — die Lücke, die das schließt

Kernblöcke nehmen einen Innenabstandswert, eine Mindesthöhe, eine Spaltenanzahl. Dieser Wert gilt auf jedem Bildschirm. Braucht ein Abschnitt auf dem Desktop 100 Pixel Innenabstand und mobil 40, kann der Kern das nicht ausdrücken — und genau diese eine Lücke ist der häufigste technische Grund, warum Leute einen Seitenbaukasten installieren.

MevvBlocks speichert drei Werte statt einem — Desktop, Tablet, Mobil. Die Schwellen sind fest:

Desktop: Keine Media Query — der Basiswert.
Tablet: Gilt ab 1024 Pixel und darunter.
Mobil: Gilt ab 767 Pixel und darunter.

Dieselben zwei Zahlen werden überall sonst im Plugin verwendet — die Hamburger-Schwelle des Menüs, die Spaltenzahlen des Rasters. Ein freies Pixelfeld wurde bewusst nicht angeboten: Wer 900 wählte, bekäme den Hamburger bei 900, während sein Innenabstand weiterhin bei 1024 wechselt, und zwei Breakpoint-Systeme bedeuten Layouts, die sich selbst widersprechen.

Die Werte liegen in den eigenen Attributen des Blocks, innerhalb von post_content — nicht in einer eigenen Tabelle und nicht im Post-Meta. Das CSS wird auf dem Server, zum Zeitpunkt der Anfrage, erzeugt und als kleiner Stilblock direkt neben dem Element ausgegeben, zu dem es gehört.

Warum das CSS nicht mit der Seite gespeichert wird? Weil gespeichertes HTML nur einen Breakpoint tragen kann. Das Rendern zum Zeitpunkt der Anfrage macht drei Werte überhaupt erst möglich — und deshalb kann eine ausgelaufene Lizenz nie eine veröffentlichte Seite verdunkeln: Auf diesem Weg gibt es keine einzige Lizenzprüfung.

Die Editor-Vorschau — was sie zeigt und was sie noch nicht kann

Auf dieser Seite stand früher, die Vorschau sei eine Annäherung. Für das Layout ist sie das nicht mehr. Die Arbeitsfläche fragt jetzt beim Server dasselbe CSS ab, das die Seite ausgeben wird, und wendet es auf dieselben Wrapper-Klassen an, die das Frontend nutzt.

Was in der Arbeitsfläche heute genau ist: Container-Layout (Richtung, Spalten, Abstand, Ausrichtung), Innenabstand, Außenabstand, Hintergrund, Rahmen, Radius, Schatten, Mindesthöhe, Typografie, Transformationen, Masken und Positionierung — wobei die Tablet- und Mobilwerte beim Ändern der Größe greifen, denn die Arbeitsfläche ist ein Iframe und Media Queries funktionieren darin.

Warum das CSS vom Server kommt, statt in JavaScript nachgebaut zu werden: Es gibt eine einzige Style-Engine, und eine zweite Kopie würde mit der ersten auseinanderlaufen. An dem Tag, an dem jemand eine Einstellung nur in einer der beiden ergänzt, wäre der Editor falsch, während er behauptet, exakt zu sein — schlimmer als die alte, ehrliche Annäherung.

Was noch nicht exakt ist: Regeln, die auf das Markup innerhalb eines Blocks zielen. In der Arbeitsfläche zeichnet ein Block seine eigenen Bearbeitungshilfen, ein Selektor, der auf die Frontend-Struktur geschrieben ist, findet dort also nichts. Diese Lücke zu schließen hieße, das Bearbeitungs-Markup für jeden der einhunderteins Blöcke identisch zum veröffentlichten Markup zu machen; das ist echte Arbeit und sie ist nicht getan.

Gemessen, nicht behauptet: Derselbe Abschnitt wurde zweimal unter demselben Stylesheet gerendert — einmal so, wie das Frontend ihn ausgibt, einmal so, wie die Arbeitsfläche ihn baut — und sechzehn Layout-Eigenschaften wurden an jedem Element verglichen. Die alte Arbeitsfläche wich in vierundzwanzig davon ab. Jetzt sind es null von vierundsechzig. Das Werkzeug, das das misst, liegt im Quellcode des Plugins (tools/onizleme-esitlik.js), und es wurde zuerst auf das alte Markup gerichtet, um zu belegen, dass es nicht blind ist.

Die Blöcke

Einhunderteins Blöcke, oder achtundsiebzig ohne WooCommerce. Alle sind in der kostenlosen Ausgabe enthalten; kein Block ist Pro-exklusiv. Sie leben in der Kategorie Design des Inserters.

Layout und Text: Container, Überschrift, Text, Schaltfläche, Trennlinie, Abstandshalter, Anker, Bild, Shortcode, Zitat, Checkliste, Tabelle, Code
Präsentation: Testimonial, Symbol, Symbolbox, Symbolliste, Bildbox, Social-Icons, Copyright, Teammitglied, Sternbewertung, Preistabelle, Preisliste, Badge, Banner, Logoleiste, Zahlenbox, Hinweis
Interaktion: Slider, Slides, Tabs, Akkordeon, Navigationsmenü, Suchformular, Formular, Anmeldeformular, Registrierungsformular, Inhaltsverzeichnis, Social Share, FAQ, Zeitleiste, Schritte
Konversion: Flip-Box, Handlungsaufforderung, Animierte Überschrift, Vorher / Nachher, Hotspot, Off-Canvas-Panel, Kontaktschaltflächen, Ankündigungsleiste, Vergleich, Datenbalken, Lesefortschritt, Lesedauer, Nach oben, Text auf einem Pfad
Medien: Video, Audio, Galerie
Daten und Zeit: Inhaltsraster, Countdown, Zähler, Fortschrittsbalken, Karte
Website- und Theme-Vorlagen: Website-Logo, Website-Titel, Website-Untertitel, Seitentitel, Brotkrümelnavigation, Beitragsinfo, Autorenbox, Kommentare, Vorheriger / Nächster, Archivtitel, Archivbeschreibung, Sitemap
WooCommerce (20): Produkte, Produktkategorien, Produktgalerie, Produkttitel, Produktpreis, Produktbewertung, Kurzbeschreibung, Produktbeschreibung, Produkt-Meta, Zusätzliche Informationen, Produktreiter, In den Warenkorb, Lagerstatus, Ähnliche Produkte, Upsells, Cross-Sells, Mini-Warenkorb, Warenkorb, Kasse, Mein Konto, Sendungsverfolgung, Produktsortierung, Ergebnisanzahl — nur hinzugefügt, wenn WooCommerce aktiv ist

Bewegungseffekte sind kein Block: Jedem MevvBlocks-Block wird ein Panel Bewegung hinzugefügt.

Hier wird nichts versteckt, wenn JavaScript nicht lädt. Tabs zeigen jedes Panel, das Akkordeon ist ein natives details-Element, der Slider scrollt, und die Pfeile werden verborgen ausgegeben, bis das Skript sie steuern kann — eine Schaltfläche zu zeigen, die nichts tut, heißt, eine kaputte Oberfläche zu zeigen. Versteckter Inhalt ist unzugänglicher Inhalt.

Inhaltsraster und Loop-Builder

Der Block Inhaltsraster fragt Beiträge, Seiten oder Produkte ab und ordnet sie an. Die Seitennummerierung besteht aus einfachen Links und funktioniert daher auch mit abgeschaltetem JavaScript.

Die Sortierung ist eine feste Liste — Datum, Änderungsdatum, Titel, Menüreihenfolge, zufällig —, weil der Wert bis in die Datenbank reicht.
Kartenüberschriften reichen von h2 bis h6. h1 wird nicht angeboten: Ein Kartenraster auf einer Seite, die bereits ein h1 hat, würde die Überschriftenreihenfolge zerbrechen.
Ein Link je Karte. Bild, Titel und „Weiterlesen“ alle zu verlinken bedeutet, dass ein Screenreader dasselbe Ziel dreimal ansagt.
Das Raster speichert die gefundenen Beitrags-IDs zwischen, nie das gerenderte HTML, und der Cache wird bei jedem gespeicherten Beitrag verworfen — „Ich habe einen Beitrag veröffentlicht und er erscheint nicht“ kann also nicht passieren.

Mit dem Loop-Builder zeichnen Sie die Karte selbst, statt die eingebaute zu verwenden. Sie legen ein Template vom Typ Loop-Karte an, bauen es aus gewöhnlichen Blöcken mit dynamischen Bindungen und wählen es in den Einstellungen des Rasters aus.

Während Sie eine Kartenvorlage bearbeiten, gibt es keinen Beitragskontext, dynamische Bindungen zeigen also ihre statischen Ersatzwerte. Und ist die Vorlage leer, gelöscht, als Entwurf belassen oder verweist sie auf sich selbst, fällt das Raster auf die eingebaute Karte zurück, statt nichts auszugeben. Die Verschachtelung von Schleifen ist auf zwei Ebenen begrenzt.

Die Formular-Engine

Sechzehn Feldtypen, mit Validierung auf dem Server. Das Formular ist der eine Teil einer Seite, der wirklich etwas tut, deshalb funktioniert es ohne JavaScript: Eine einfache POST-Einsendung erhält dieselbe Validierung und dieselben Meldungen wie eine skriptgesteuerte.

Feldtypen: Text, E-Mail, Telefon, Adresse (URL), Zahl, Datum, Zeit, Verborgen, Langer Text, Dropdown, Mehrfachauswahlliste, Einfachauswahl, Mehrere Checkboxen, Checkbox, Einwilligungstext (KVKK) und Unterüberschrift. Pro ergänzt ein Feld für den Datei-Upload.
Wohin die Einsendungen gehen: Sowohl in eine eigene Tabelle als auch per E-Mail. Der Datensatz wird zuerst geschrieben und die Mail danach gesendet, denn die Zustellung von Mail scheitert weit häufiger als ein Datenbankschreibvorgang.
Sie lesen: MevvBlocks → Formular-Einsendungen. Pro ergänzt dort einen CSV-Export.
Benachrichtigungs-E-Mail: Absender ist Ihre Website, nie der Besucher. Die Adresse des Besuchers als Absender zu verwenden ist der mit Abstand häufigste Grund, warum Formular-Mails nie ankommen — SPF und DMARC weisen sie zurück. Seine Adresse wird stattdessen zum Reply-To.

Spam wird von drei Ebenen abgefangen, ganz ohne CAPTCHA: einer Signatur, die nicht von einer Sitzung abhängt, einer Mindestausfüllzeit und einem Honeypot-Feld. Eine Einsendung, die den Honeypot ausfüllt, wird stillschweigend angenommen und verworfen — eine Fehlermeldung würde dem Bot verraten, dass er erwischt wurde, und der nächste Versuch würde dieses Feld auslassen.

Warum eine Signatur statt eines WordPress-Nonce? Ein Nonce ist an eine Sitzung und ein Zwölf-Stunden-Fenster gebunden. Auf einer gecachten Website wird dasselbe HTML stunden- oder tagelang ausgeliefert, der Nonce darin ist längst abgelaufen, und das Formular hört stillschweigend auf zu funktionieren. Das ist der häufigste Feldausfall von Formular-Plugins. Die Signatur hier gilt sieben Tage und hängt nicht davon ab, wer gerade surft.

Die IP-Adresse einer Einsendung wird nie in lesbarer Form gespeichert — nur ein Hashwert, gesalzen mit dem Schlüssel Ihrer eigenen Website, sodass Datensätze zweier verschiedener Websites nicht miteinander abgeglichen werden können.

Die Speicherung der Einsendungen ist nicht an die Lizenz gebunden. Wäre sie es, wäre der Tag einer ausbleibenden Zahlung der Tag, an dem der Kunde beginnt, Daten zu verlieren.

Theme-Vorlagen

Sieben Template-Typen, gebaut in dem WordPress-Editor, den Sie ohnehin nutzen — Header, Footer, Einzelinhalt, Archiv, Suchergebnisse, Nicht gefunden (404) und Loop-Karte. Ein zweiter Editor wäre eine weitere Sache, die man mit dem WordPress-Core Schritt halten lassen müsste.

Der Typ und die Bedingungen liegen in einer schlichten Seitenleisten-Box, nicht in einem React-Panel — eine klassische Box speichert auch mit abgeschaltetem JavaScript und zerbricht nicht, wenn sich die Editor-API ändert.

Bedingungen: Ganze Website, Startseite, Beitragstyp, Kategorie oder ein einzelner Inhalt. Leer lassen für die ganze Website.
Wenn mehrere passen: Die engste Bedingung gewinnt.
Fehlerhafte Bedingungen: Werden beim Speichern verworfen und leer gespeichert, statt als ungültiger Text erhalten zu bleiben, der die Vorlage stillschweigend nie erscheinen ließe.

Kopf- und Fußzeilenvorlagen werden nur bei Astra und GeneratePress platziert. Hat Ihr Theme kein Rezept, werden sie überhaupt nicht ausgegeben, und der Bildschirm sagt das — einem Theme, das wir nicht anheben können, eine Kopfzeile anzuhängen, bedeutet garantiert zwei Kopfzeilen. Vorlagen für Einzelansicht, Archiv, Suche und 404 funktionieren mit jedem Theme, denn sie ersetzen die Schleife und lassen Kopf- und Fußzeile des Themes an ihrem Platz.

Ein Loop-Karten-Template platziert sich nirgends von selbst. Ein Rasterblock wählt es aus.

Musterbibliothek und Block-Voreinstellungen

Zwanzig fertige Vorlagen: sechzehn Abschnitte und vier vollständige Seiten. Sie sind als gewöhnliche WordPress-Vorlagen registriert, Sie fügen sie also so ein, wie Sie es bereits kennen — die Schaltfläche +, der Reiter Vorlagen und dann die Kategorie MevvBlocks sections oder MevvBlocks pages.

Dafür wurde kein eigenes Modal geschrieben. Der Einfüger des Kerns liefert Vorschau, Suche, Tastaturnavigation und Übersetzung schon kostenlos mit, und was er einfügt, ist reines Block-Markup — nichts, worin man eingesperrt wäre.

Die Muster kommen ohne Bilder. Bilder von anderswo zu ziehen ist eine Urheberrechtsfrage, eine Datenschutzfrage, und es bindet das Aussehen Ihrer Seite daran, dass der Server eines anderen läuft. Die Bildblöcke sind vorhanden, mit ausgefülltem Alt-Text; wählen Sie Ihre eigenen.

Block-Voreinstellungen speichern die Aussehenseinstellungen eines Blocks unter einem Namen und wenden sie auf einen anderen Block desselben Typs an. Der Inhalt wird bewusst nicht gespeichert — Text, Links, Bilder und Listeneinträge werden entfernt, sodass das Anwenden einer Voreinstellung nie überschreibt, was Sie geschrieben haben.

Muster werden im Frontend überhaupt nicht registriert. Ihr Markup bei jedem Seitenaufruf zu erzeugen wurde mit 109 KB und 3,59 ms gemessen — bezahlt für nichts, denn niemand fügt beim Lesen ein Muster ein.

Pop-ups

Werden wie alles andere im Block-Editor gebaut; die Auslöser, Bedingungen und die Häufigkeit liegen in der Seitenleiste desselben Bildschirms. Verwaltet unter MevvBlocks → Popups.

Auslöser: Beim Laden der Seite mit Verzögerung, bei einem Scrollprozentsatz, bei Verlassensabsicht, bei einem Klick, der zu einem CSS-Selektor passt, oder nach einer Zeitspanne aktiver Nutzung. Der Aktivitätszähler stoppt, während der Tab im Hintergrund liegt.
Bedingungen: Ganze Website, Startseite, bestimmte Seiten, Beitragstyp oder Kategorie; angemeldet, abgemeldet oder alle; und je Gerät.
Häufigkeit: Jedes Mal, einmal pro Sitzung oder einmal alle N Tage.
Erscheinungsbild: Position, Breite, ob der Titel erscheint, ob ein Klick außerhalb schließt, und die Öffnungsanimation.

Der Zähler für „nicht mehr anzeigen“ liegt im Browser des Besuchers selbst, nicht auf dem Server. Ihn serverseitig zu zählen hieße, jedem Besucher eine dauerhafte Identität zu geben, nur um ihm eine Box nicht zweimal zu zeigen.

Die Geräteauswahl entscheidet der Browser, nicht das Ausschnüffeln des User-Agents. Ein User-Agent kann ein Tablet nicht zuverlässig von einem Telefon unterscheiden, und hinter einem Vollseiten-Cache würde er das Gerät des ersten Besuchers allen ausliefern. Ist kein Auslöser gewählt, fällt das Pop-up auf das Laden der Seite zurück; ist kein Gerät gewählt, auf alle drei — ein Pop-up, das stillschweigend nie erscheint, ist schlimmer als eines, das zu oft erscheint.

Die Palette der Website

Ein Bildschirm für Farben und Typografie, erreichbar sowohl über das MevvBlocks-Menü als auch über Design, denn dort suchen die Leute danach. Jeder Eintrag zeigt seinen eigenen Variablennamen, und Blöcke verweisen auf diese Namen statt auf konkrete Werte.

Genau das lässt eine Seite, die vor der Umstellung gebaut wurde, eine neue Palette übernehmen, statt ihre Bezüge zu verlieren — die Variablennamen bleiben dieselben, die Ihre Seiten bereits verwenden.

Es gibt kein Löschen. Ein Farb- oder Typografie-Set kann leer bleiben, aber es zu entfernen würde jeden Block, der darauf verwies, ins Leere zeigen lassen. Leeren ist umkehrbar; eine Referenz zu löschen nicht.

Das Barrierefreiheits-Audit

MevvBlocks → Barrierefreiheit durchsucht Ihre veröffentlichten Seiten, Beiträge und Templates und meldet, was jeder Block ausgelassen hat: ein Bild ohne Alternativtext, eine leere Überschrift, eine Schaltfläche ohne Namen oder ohne Ziel, eine gebrochene Überschriftenreihenfolge, zu geringen Kontrast.

Dasselbe Audit steht als Seitenleisten-Panel zur Verfügung, während Sie noch bearbeiten — dort ist ein Befund am billigsten zu beheben.

Das ist bewusst kein Overlay. Schichten, die ein „Barrierefreiheitsmenü“ auf eine Seite schrauben, beheben nichts: Ein Bild ohne Alt-Text hat weiterhin keinen, und kontrastarmer Text bleibt unlesbar. Die Behauptung „diese Website ist barrierefrei“ zu führen, ohne dass sie stimmt, ist eine schlechtere Position, als gar nichts zu behaupten — Websites mit Overlays wurden genau deswegen verklagt. Dieses Werkzeug misst und sagt es Ihnen; das Beheben liegt bei Ihnen.

Der Kontrast wird nur gemeldet, wenn beide Farben tatsächlich bekannt sind. Eine geerbte Farbe zu erraten würde Warnungen erzeugen, mit denen Sie nichts anfangen können.

Geschwindigkeit — Element-Caching und Bilder

Zwei getrennte Dinge, beide in der kostenlosen Edition.

Element-Caching. Die Blockausgabe wird gespeichert, statt bei jeder Anfrage neu gebaut zu werden. Gemessen: Blockrenderzeit um 33–72 % gesunken. Es nutzt einen persistenten Objekt-Cache (Redis, Memcached), wenn einer vorhanden ist, und Transients, wenn nicht.

Ein Block, dessen Ausgabe je Besucher, je Abfrage oder je Moment variiert, wird nie gespeichert: Formulare, Anmeldung, Registrierung, Mini-Warenkorb, Produktraster, Suche, Warenkorb, Kasse, Mein Konto, Shortcode. Shortcode steht auf dieser Liste, weil wir nicht wissen, was darin steckt — wir haben auf einer echten Website einmal ein WPForms-Token eingefroren, und die Regel wird seither im Quellcode durchgesetzt.

Bildoptimierung. Neben jedem hochgeladenen Bild wird eine WebP- (optional AVIF-)Kopie geschrieben; das Original wird nie angetastet. Gemessen: 39–78 % kleiner. Eine Datei, die nicht schrumpft, wird nicht behalten — kleine, flächige PNGs werden als WebP meist größer.

Bilder werden in einem <picture>-Element ausgeliefert: Die Adresse jedes Formats steht im HTML, und der Browser wählt. Auf dem Server anhand des Accept-Headers zu entscheiden, wurde bewusst nicht genutzt — wenn dieselbe Adresse je Besucher variiert, kann jeder Cache auf dem Weg die falsche Datei an die falsche Person geben.

Wenn ein anderes Plugin diese Arbeit wirklich erledigt (LiteSpeed, ShortPixel, Imagify, Smush, EWWW, Optimole, Converter for Media), tritt MevvBlocks von selbst zurück und sagt warum. Die Frage ist nicht „ist es installiert“, sondern „kann es tatsächlich laufen“: LiteSpeed mit eingeschalteter Bildoptimierung, aber ohne Cloud-Schlüssel tut überhaupt nichts.

Core Web Vitals — bei Ihren Besuchern gemessen

Core Web Vitals sind per Definition Felddaten: gemessen in den Browsern echter Besucher, berichtet als 75. Perzentil über ein Fenster von 28 Tagen. Ein Lighthouse-Lauf ist etwas anderes — eine Maschine, ein Netzwerk, ein Zeitpunkt. Zu wissen, was was ist, klärt die Verwirrung „PageSpeed sagt 98, die Search Console sagt rot“.

Der Bildschirm Web Vitals zeigt drei Zahlen je Geräteklasse:

LCP: Wie lange der Hauptinhalt braucht, um zu erscheinen. Gut sind 2,5 Sekunden oder weniger.
CLS: Wie stark sich die Seite bewegt, während sie sich setzt. Gut sind 0,1 oder weniger.
INP: Wie lange die Seite braucht, um auf einen Tipp oder Klick zu reagieren. Gut sind 200 ms oder weniger.

Das Messskript ist etwa ein Kilobyte groß und lädt keine Bibliothek — die Arbeit erledigt der PerformanceObserver des Browsers selbst. Die Stichprobe liegt standardmäßig bei 10 % der Besuche, und der Browser entscheidet, nicht der Server: Entschiede der Server, ergäbe dieselbe URL zwei verschiedene HTML-Dokumente, und ein Vollseiten-Cache würde allen das ausliefern, was er zuerst gesehen hat.

Es werden keine personenbezogenen Daten erhoben: keine IP, kein Cookie, keine Kennung. Drei Werte, eine Geräteklasse und der Seitenpfad, gespeichert auf Ihrem eigenen Server als gebündelte Zählwerte. Es wird nichts irgendwohin gesendet.

Unter hundert Messwerten zeigt der Bildschirm überhaupt keine Zahl — er sagt stattdessen, wie viele er hat. Ein Perzentil aus einem Dutzend Messungen ist Rauschen, und eine falsche Zahl ist schlimmer als keine, weil jemand danach handeln wird. Das Perzentil wird aus einem Histogramm gelesen, ist also auf die Klassenbreite genau, und der Bildschirm sagt das.

Transformationen und Masken

Jeder Block kann verschoben, skaliert, gedreht (Z sowie 3D X/Y), geschert und gespiegelt werden — jeweils mit eigenen Werten für Desktop, Tablet und Mobil. Eine eigene Hover-Transformation und eine Übergangsdauer lassen sich festlegen.

Masken können ein Kreis, ein Dreieck, ein Sechseck, ein Blob, eine Blume, eine freihändige Form oder Ihr eigenes Bild sein, mit Steuerungen für Größe, Position und Wiederholung.

Die Formen sind im CSS eingebettet und werden nicht als eigene SVG-Dateien ausgeliefert. Ein falscher Dateipfad lässt eine Maske stillschweigend verschwinden, und niemand sieht den 404; hinter einem CDN kann sich außerdem die Adresse des Plugin-Ordners ändern.

Eigener Code für die ganze Website

HTML, CSS und JavaScript können im Head, am Anfang des Body oder am Ende platziert werden: Verifizierungs-Tags, Mess-Snippets, kleine Stilkorrekturen. Position, Priorität und eine Sitzungsbedingung sind konfigurierbar.

Es führt kein PHP aus. Einen PHP-Ausführer in einen Seitenbaukasten zu legen, würde die Berechtigung eines Designers in die Berechtigung verwandeln, Code auf dem Server auszuführen.

Die erforderliche Berechtigung ist unfiltered_html: Wer kein rohes Skript in einen Beitrag setzen darf, darf auch keines websiteweit setzen. Ist MevvLegal installiert, werden hier platzierte Tracking-Skripte ebenfalls zurückgehalten, bis die Cookie-Einwilligung erteilt ist.

WooCommerce-Blöcke

Zwanzig Blöcke: Produkttitel, Bilder, Preis, In den Warenkorb, Bewertung, Bestand, Meta, Kurzbeschreibung, Beschreibung, Datenreiter, Zusätzliche Informationen, Ähnliche Produkte, Upsells, Cross-Sells, Warenkorb, Kasse, Mein Konto, Sendungsverfolgung, Sortierung und Ergebnisanzahl.

Keiner davon zeichnet WooCommerce neu. Alle rufen dessen eigene Template-Funktionen und Shortcodes auf. Ihr Theme verändert diese Templates, und Ihre Plugins klinken sich darin ein — Versand, Ratenzahlung, Bestandsbenachrichtigungen, Größentabellen. Eigenes Markup zu zeichnen würde all das stillschweigend fallen lassen.

Warenkorb, Kasse, Mein Konto und Sendungsverfolgung sind besucherspezifisch: Das Vollseiten-Caching wird abgeschaltet und sie werden nie element-gecacht. Ist WooCommerce nicht aktiv, werden diese Blöcke weder auf dem Server noch im Editor registriert.

Editor-Notizen

Sie können an jeden Block eine Notiz heften: wer sie geschrieben hat, wann, und ob sie erledigt ist.

Notizen werden NIE auf der Seite ausgegeben. In dieser Datei gibt es keinen einzigen Frontend-Hook, und ein Test setzt das durch. Notizen sind interne Kommunikation; ein Besucher, der sie sähe, wäre schlimmer als ein kaputtes Layout.

Eine Notiz ist an die Identität des Blocks gebunden. Wird ein Block dupliziert, erhält die Kopie eine NEUE Identität und erbt die Notiz daher nicht — und als Nebeneffekt bekommt sie ihren eigenen CSS-Geltungsbereich.

Notizen liegen in den eigenen Daten des Beitrags: Löschen Sie den Beitrag, verschwinden die Notizen mit ihm und hinterlassen keine verwaisten Zeilen.

KI im Editor — mit Ihrem eigenen Schlüssel

Schreiben, umschreiben, kürzen, Alt-Texte für Bilder erzeugen und übersetzen. Anthropic und OpenAI werden unterstützt.

Sie tragen IHREN EIGENEN API-Schlüssel ein, und die Anfrage geht von Ihrer Website DIREKT an den Anbieter. Ihr Text erreicht uns nie; Kontingent und Rechnung bleiben bei Ihnen. Wir haben keinen eigenen Cloud-Dienst gebaut: Ihr Text liefe dann über unsere Server, und die Datenverantwortung wäre unsere.

Der Schlüssel erreicht den Browser nie — die Anfrage wird vom Server gestellt. Er wird auch von keinem Endpunkt zurückgegeben; selbst das Einstellungsformular gibt den Wert nicht wieder aus.

Wir verschlüsseln den Schlüssel NICHT, und wir sagen das offen: In WordPress muss der Verschlüsselungsschlüssel auf demselben Server liegen, ein Angreifer mit Datenbankzugriff bekommt also beides. Ihn „verschlüsselt“ zu nennen, würde einen Schutz versprechen, den es nicht gibt.

Das Ergebnis wird nicht direkt in den Block geschrieben; es kommt als Vorschlag an, und Sie übernehmen es. Das ist unsere echte Verteidigung dagegen, dass ein in Ihrem Inhalt vergrabener Satz als Anweisung gelesen wird — ein Mensch gibt es frei.

Free und Pro

Die kostenlose Edition ist das ganze Produkt: alle einhunderteins Blöcke, Theme-Vorlagen, das Raster und der Loop-Builder, die Formular-Engine mit ihrem Einsendungsspeicher, das Menü, die Suche, Pop-ups, die Musterbibliothek, Block-Voreinstellungen, die globale Palette, die Bildoptimierung, das Block-Caching, eigener Code für die ganze Website, Editor-Notizen, der Core-Web-Vitals-Bildschirm und das Barrierefreiheits-Audit.

Pro ergänzt Bearbeitungsfähigkeiten, keine Ausgabe:

Breakpoints — die Reiter Desktop / Tablet / Mobil, mit Mindesthöhe, Inhaltsbreite, Breite und den vier Innenabstandswerten je Breakpoint.
Eigenes CSS je Block, wobei das Token selector für diesen Block selbst steht.
Formular-Extras — bedingte Felder, eine automatische Antwort an den Absender, ein Webhook und ein Datei-Upload-Feld.
CSV-Export der Formular-Einsendungen.

Die Panels für Breakpoints und eigenes CSS erscheinen heute bei den Kernblöcken — Container, Titel, Text, Schaltfläche, Trennzeichen, Bild, Kundenstimme, Icon, Icon-Box, Icon-Liste, Shortcode, Formular, Produkte und Produktkategorien. Mehrere Steuerungen je Breakpoint sind überall dort kostenlos, wo es sie gibt: die Spaltenzahl des Rasters für Tablet und Mobil, die Hamburger-Schwelle des Menüs, die mobile Position der Bildbox und die Geräteauswahl der klebenden Position.

Wenn eine Lizenz abläuft oder fehlt:

Ihre Website sieht exakt gleich aus. Jeder gespeicherte Tablet- und Mobilwert wird weiterhin ausgegeben, und jede eigene CSS-Regel je Block ebenso. Das ist kein Versprechen, sondern eine Architekturregel: Keine Datei auf dem Renderpfad fragt nach der Lizenz, und ein Test prüft das bei jeder Veröffentlichung.
Formulare senden weiter, speichern weiter und verschicken weiter Mails.
Bestehende Pop-ups erscheinen weiter.
Was Sie verlieren, sind die Pro-Panels im Editor — und nur die.

Sind unsere Server nicht erreichbar, funktioniert eine aktive Lizenz sieben Tage weiter. Eine Installation, die sich nie erfolgreich verifiziert hat, bekommt überhaupt keine Kulanz: Unsere Adresse zu blockieren ist kein Weg, Pro zu bekommen.

Wenn etwas nicht funktioniert

„Die Formularsitzung ist abgelaufen.“: Die gecachte Kopie dieser Seite ist älter als sieben Tage, oder die Sicherheitsschlüssel Ihrer Website wurden gewechselt. Leeren Sie den Seitencache.
Das Formular verschickt keine Mail: Prüfen Sie zuerst die Liste der Einsendungen — der Datensatz wird vor der Mail geschrieben; steht er dort, hat das Formular funktioniert und die Zustellung nicht. Prüfen Sie dann die Empfängeradresse und die Mail-Einrichtung Ihrer Website.
Die Seite sieht im Editor richtig aus und im Frontend falsch: Die Editor-Vorschau ist von Haus aus eine Annäherung; siehe oben. Das Frontend ist die Wahrheit. Trägt ein Block Tablet- oder Mobilwerte, gibt der Editor einen entsprechenden Hinweis aus.
Ein Block sagt, er sei ungültig, wenn ich ihn bearbeiten will: Historisch passierte das Blöcken, die auf dem Server registriert waren, im Editor-Skript aber fehlten — sie wurden perfekt ausgegeben und scheiterten erst beim Öffnen zur Bearbeitung. Ein Test schützt jetzt davor; sehen Sie es dennoch, melden Sie den Blocknamen.
Der Countdown zeigt die falsche Zeit: Das Markup trägt einen absoluten Zielzeitpunkt, nie „noch X Sekunden“, sodass eine gecachte Seite ihn nicht einfrieren kann. Der Block korrigiert sich anhand der Serveruhr; wird diese Anfrage blockiert, fällt er auf die Uhr des Besuchers zurück, statt zu scheitern.
Die Kopf- oder Fußzeilenvorlage erscheint nicht: Ihr Theme hat kein Rezept. Nur Astra und GeneratePress lassen sich anheben; der Bildschirm warnt Sie. Die anderen Vorlagentypen funktionieren mit jedem Theme.
Es sind zwei Kopfzeilen erschienen: Sowohl MevvBlocks als auch MevvBridge erzeugen eine. MevvBlocks nimmt den Platz absichtlich zuerst ein — überlassen Sie die Kopfzeile einem von beiden.
Container sind breiter oder schmaler als eingestellt: Eine Theme-Regel gewinnt über die Spezifität. Besonders Astra formatiert seine Nachfahren stark. Für die gemessenen Fälle wurde das behoben, indem die Spezifität erhöht wurde, statt !important zu verwenden; stoßen Sie auf einen neuen, sagen Sie, welches Theme.
Ein veröffentlichter Beitrag erscheint nicht in einem Raster: Sollte er aber. Das Raster speichert nur die Beitrags-IDs, und jeder gespeicherte Beitrag verwirft den Cache. Bleibt es dabei, prüfen Sie, ob Beitragstyp und Sortierung so sind, wie Sie es erwarten.

Grenzen

Die Editor-Vorschau ist eine Annäherung. Struktur und Inhalt werden gezeigt; das genaue Aussehen ist das Frontend.
Kopf- und Fußzeilenvorlagen funktionieren nur bei Astra und GeneratePress. Jedes andere Theme bekommt nichts, dazu eine Warnung — Schweigen wären zwei Kopfzeilen.
Die Karte ist eine OpenStreetMap-Einbettung. Ein Marker, kein eigenes Markerbild, kein Kartenstil, keine Routenführung. Kein API-Schlüssel, kein Abrechnungskonto und kein Schlüssel, der im Quelltext Ihrer Seite steht.
Kein Barrierefreiheits-Overlay. Nur messen und melden.
Kein CAPTCHA.
Keine Live-Suche. Eine Anfrage je Tastenanschlag ist eine Abhängigkeit und eine Angriffsfläche für Ratenbegrenzungen.
Der Countdown nutzt die Zeitzone der Website, nicht die des Besuchers. Eine Kampagne endet weltweit in einem Moment.
Das Menü bietet zwei Breakpoints, keinen freien Pixelwert, und hat keinen Fly-out- oder Off-Canvas-Modus — ein schiebendes Panel mit Fokusverwaltung ist genau das, wofür der Pop-up-Block da ist.
Rasterkarten können kein h1 sein, und die Verschachtelung von Schleifen endet bei zwei Ebenen.
Dynamische Inhalte kommen aus einer festen Liste von Quellen. Es gibt kein Feld „führe diesen Ausdruck aus“: Das würde jedem, der eine Seite bearbeiten darf, Codeausführung in die Hand geben.
Globale Farb- und Typografie-Sets lassen sich nicht löschen, nur leeren.
Produktkarten zeichnet WooCommerce, nicht wir, sodass Ihr Theme und alle Hooks von Drittanbietern weiter funktionieren.
Die Oberfläche wird in elf Sprachen ausgeliefert. Türkisch, Englisch, Spanisch, Deutsch, Französisch, Portugiesisch, Italienisch, Niederländisch, Japanisch, Russisch und Polnisch, dazu Ländervarianten wie es_MX und pt_PT. Jede andere Sprache fällt auf Englisch zurück.
Das Web-Vitals-Fenster wird alle 28 Tage zurückgesetzt; es gleitet nicht. Ein gleitendes Fenster bräuchte Tages-Buckets und die achtundzwanzigfache Speichermenge. Der Bildschirm zeigt, wann das aktuelle Fenster begann.
Beim Deinstallieren werden weder die Einsendungstabelle noch die Einstellungen entfernt. Ihr Blockinhalt bleibt so oder so lesbar — es ist standardmäßiges Markup in post_content.

Es wird nirgends eine JavaScript- oder CSS-Bibliothek eines Dritten geladen. Nicht für den Slider, nicht für das Akkordeon, nicht für Bewegung, nicht für die Karte. Jede davon hätte auf jeder Seite, die sie nutzt, zwischen vierzig und hundert Kilobyte gekostet.

Hundert Pixel auf dem Desktop, vierzig auf dem Mobilgerät — im Blockeditor.