MevvBlocks-Dokumentation

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

Der WordPress-Blockeditor hat keine Breakpoints für Stilwerte. MevvBlocks schließt zuerst diese Lücke und stellt darum herum, was eine Website braucht, um allein zu stehen: einhundertzehn Blöcke, acht Blockstile, Theme-Templates, ein Inhaltsraster und ein Loop-Builder, eine Formular-Engine, ein Newsletter-Formular, Pop-ups, ein einziger Bildschirm für die Farbpalette der Website, ein Barrierefreiheits-Audit, das die Wahrheit sagt, statt sie zu verdecken, und ein Core-Web-Vitals-Bildschirm, der von deinen eigenen Besuchern gespeist wird.

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.

  1. Laden Sie das Plugin hoch und aktivieren Sie es.
  2. Öffnen Sie eine Seite im Block-Editor und fügen Sie den Block Container hinzu.
  3. Legen Sie die gewünschten Blöcke hinein. Sie finden sie in der Kategorie Design.
  4. 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 weiterhin nicht exakt ist: Regeln, die auf das Markup innerhalb eines Blocks zielen. Auf der Arbeitsfläche zeichnet ein Block seine eigenen Bearbeitungselemente, deshalb findet ein Selektor, der gegen die Front-End-Struktur geschrieben ist, nichts zum Zuordnen. Das zu schließen hieße, das Bearbeitungs-Markup für jeden der hundertzehn 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

Einhundertzehn Blöcke, oder siebenundachtzig ohne WooCommerce. Alle sind in der kostenlosen Edition außer den drei unten mit Pro markierten; kein anderer Block ist Pro-exklusiv. Sie liegen in der Kategorie Design des Inserters, und die Einstellungsschlüssel, die jeder von ihnen speichert, sind in docs/BLOK-AYARLARI.md im Plugin aufgeführt — eine generierte Datei, sie kann also nicht vom Code abweichen.

Die Gruppen unten sind dieselben fünf, die das Plugin für seine eigenen Schauseiten verwendet.

Text und Aktion
Container, Überschrift, Text, Schaltfläche, Trennlinie, Abstandshalter, Anker, Bild, Shortcode, Zitat, Checkliste, Code, Handlungsaufruf, Icon, Icon-Box, Icon-Liste, Animierte Überschrift, Hinweis, Umschalter, Verschachtelte Tabs mit Tab-Panels, Tabs, Akkordeon, FAQ, Schritte
Daten und Preise
Zähler, Fortschrittsbalken, Datenbalken, Kreisdiagramm, Zahlenbox, Preistabelle, Preisliste, Kundenstimme, Sternebewertung, Kundenstimmen-Karussell, Teammitglied, Countdown, Abzeichen, Logo-Leiste, Inhaltsumschalter und Umschalter-Panel (Pro)
Portfolio und Karte
Zeitstrahl, Tabelle, Vergleich, Inhaltsverzeichnis, Karte, Inhaltsraster, Sitemap, Portfolio (Pro)
Medien und Formulare
Video, Audio, Wiedergabeliste, Galerie, Vorher / Nachher, Flip-Box, Banner, Hotspot, Tooltip, Social-Feed, Social-Icons, Social-Sharing, Slider, Slides, Text auf einem Pfad, Off-Canvas-Panel, Kontaktschaltflächen, Ankündigungsleiste, Lesefortschritt, Lesezeit, Nach oben, Formular, Anmeldeformular, Registrierungsformular, Newsletter, Suchformular, Navigationsmenü, Lottie (Pro)
Gestaltung und Bewegung
SVG-Animation, Bildbox, Copyright, und die acht unten beschriebenen Blockstile. Bewegung ist kein Block: Ein Panel für Einblendanimation, klebende Position und Parallaxe wird zu jedem MevvBlocks-Block hinzugefügt.
Website- und Theme-Vorlagen
Website-Logo, Website-Titel, Untertitel der Website, Seitentitel, Brotkrumen, Beitragsinfo, Autorenbox, Kommentare, Vorheriger / Nächster, Archivtitel, Archivbeschreibung
WooCommerce (23)
Produkte, Produktkategorien, Produktbilder, Produkttitel, Produktpreis, Produktbewertung, Kurzbeschreibung, Produktbeschreibung, Produkt-Meta, Zusätzliche Informationen, Produkt-Tabs, In den Warenkorb, Lagerstatus, Ähnliche Produkte, Upsells, Cross-Sells, Mini-Warenkorb, Warenkorb, Kasse, Mein Konto, Bestellverfolgung, Produktsortierung, Ergebnisanzahl — nur hinzugefügt, wenn WooCommerce aktiv ist

Eine Anmerkung zu den zuletzt hinzugekommenen, denn jeder trägt eine Entscheidung, die du auf der Seite sehen kannst:

Umschalter
Ein natives <details>, das beliebige Blöcke darin aufnimmt und in einem anderen Umschalter verschachtelt werden kann. Einstellungen: baslik (der Zusammenfassungstext) und acik (beim Laden geöffnet). Es wird keine id gebraucht, zwei Umschalter auf derselben Seite können also nicht kollidieren.
Verschachtelte Tabs und Tab-Panel
Eine Tab-Gruppe, deren Panels gewöhnliche innere Blöcke sind, ein Panel kann also alles aufnehmen — auch eine weitere Tab-Gruppe. Gruppeneinstellungen: yon (horizontal oder vertikal) und acik (der beim Laden geöffnete Tab); jedes Panel hat ein baslik. Die Tableiste trägt das ARIA-Tab-Muster mit Pfeiltasten, Pos1 und Ende, und die ids werden pro Gruppe eindeutig gemacht, damit Verschachteln sicher ist. Nur direkte Kind-Panels gehören zu einer Gruppe. Eine vertikale Leiste wird auf einem schmalen Bildschirm horizontal.
Kreisdiagramm
Kreis oder Ring (tur), Zeilen geschrieben als „Beschriftung | Wert | optionale Farbe“ in satirlar, dazu ein baslik. Der Kreis wird mit stroke-dasharray gezeichnet und trägt role="img"; dieselben Werte werden darunter als Textliste mit ihren Prozentsätzen ausgegeben, denn ein Diagramm, das niemand lesen kann, ist Dekoration. Es animiert nicht.
Wiedergabeliste
Audio oder Video (tur), mit einem baslik und einem Wiederholer für Titel: dosya, baslik, sure, poster und altyazi (eine WebVTT-Spur). Jeder Titel wird als gewöhnlicher Link ausgegeben, die Liste ist also nutzbar, bevor irgendein Skript läuft; mit dem Skript tauscht die Auswahl eines Titels die Quelle an Ort und Stelle aus.
Social-Feed
Beiträge, die du von Hand auswählst, angeordnet in sutun Spalten. Jeder Eintrag hat adres, metin, tarih und gorsel. Es gibt keinen API-Adapter, kein Token und keine Anfrage an irgendein Netzwerk — das ist eine Liste von Links, und das Plugin sagt es, statt einen Live-Feed anzudeuten.
Tooltip
metin ist das Wort in deinem Satz, ipucu die Erklärung, konum die Seite, zu der er öffnet. Es ist eine echte Schaltfläche mit role="tooltip" auf der Sprechblase: Hover und Fokus werden in CSS behandelt, Tippen im Skript, und Escape schließt ihn. Die Sprechblase wird mit visibility versteckt statt entfernt, damit die Beschreibungsbeziehung im Barrierefreiheitsbaum bleibt.
SVG-Animation
dosya ist das SVG, durgun ein Standbild, alt der Alternativtext und genislik die Breite. Die Datei wird bewusst in einem <img> gerendert: So kann Skript im SVG deine Seite nicht erreichen. Ein <picture> setzt das Standbild ein, wenn der Besucher reduzierte Bewegung verlangt hat.
Hinweis, Animierte Überschrift, Zeitstrahl, Tabelle, Flip-Box
Dem Hinweis kann eine Schließen-Schaltfläche gegeben werden (kapatilabilir), und er verschiebt den Fokus beim Schließen auf das nächste Element; Typ und Titel sind bearbeitbar. Die animierte Überschrift wählt ihr Tag (baslik_etiketi, h1–h6, p, div oder span) und kann ihre Wörter tippen (etki) — das erste Wort wird immer ausgegeben, und beide Effekte stoppen bei reduzierter Bewegung. Der Zeitstrahl nimmt ein horizontales Layout (yon) an, das auf einem schmalen Bildschirm zu vertikal zurückkehrt, ohne die Lesereihenfolge zu ändern. Kopfzellen der Tabelle tragen scope="col", und eine leere Zelle gibt einen Gedankenstrich mit einer Screenreader-Beschriftung aus. Die Flip-Box dreht sich bei Tippen, Enter und Leertaste, und Escape dreht sie zurück.
Inhaltsumschalter (Pro)
Eine Tableiste — typischerweise monatlich und jährlich — über Umschalter-Panels, die beliebige Blöcke enthalten. Einstellungen: etiket (der zugängliche Name der Leiste), rozet (ein Abzeichen, etwa eine Ersparnis) und acik; jedes Panel hat ein baslik.
Portfolio (Pro)
gonderi_turu, taksonomi, terimler, adet, sutun, suzgec (den Filter zeigen) und arsiv_bag (Link zum Archiv). Die Karten werden auf dem Server gerendert, und der Filter blendet sie im Browser nur aus und ein, es verlässt also keine Anfrage die Seite. Es gibt kein Modal und keine Seitennummerierung.
Lottie (Pro)
adres, alt, baslik, durgun (ein Standbild), onay und onay_metni. LottieFiles ist ein externer Dienst, der Block nimmt also denselben Einwilligungsweg wie die Karte und das Video: Er zeigt das Standbild, bis der Besucher zustimmt, und bei reduzierter Bewegung spielt er nie. Die Player-Bibliothek ist weiterhin nicht mitgeliefert.

Nichts hier ist verborgen, wenn JavaScript nicht lädt. Tabs zeigen jedes Panel, der Umschalter und das Akkordeon sind native details-Elemente, der Slider scrollt, die Wiedergabeliste ist eine Liste von Links, und die Pfeile werden versteckt ausgegeben, bis das Skript sie steuern kann — eine Schaltfläche zu zeigen, die nichts tut, heißt, eine kaputte Oberfläche zu zeigen. Verborgener Inhalt ist unzugänglicher Inhalt. Schaltflächen und Aktionslinks haben eine Mindestzielgröße von 44 Pixeln.

Blockstile

Acht Stile werden über WordPress' eigenes register_block_style registriert, sie erscheinen also im Panel Stile, das der Editor für einen ausgewählten Block ohnehin zeigt. Es gibt kein neues Bedienelement zu lernen, und die Wahl wird als Klasse is-style-… in deinem Markup gespeichert statt als Einstellung in einer Tabelle von uns.

Verlaufs-Overlay
Container, Bild, Bildbox, Banner, Slider
Graustufen, Farbe bei Hover
Bild, Bildbox, Teammitglied, Logo-Leiste, Galerie
Unschärfe bis zum Hover
Bild, Bildbox, Banner
Kreismaske / Abgerundete Maske
Bild, Bildbox, Teammitglied — und, für die abgerundete, Banner und Galerie
Anheben bei Hover
Container, Icon-Box, Bildbox, Preistabelle, Teammitglied, Kundenstimme, Handlungsaufruf, Banner
Bild bei Hover zoomen
Bild, Bildbox, Banner, Galerie
Neigung bei Hover
Icon-Box, Bildbox, Banner, Zahlenbox

Jede Hover-Transformation wird abgeschaltet, wenn das System des Besuchers reduzierte Bewegung verlangt. Damit ein Stil greift, muss der Wrapper des Blocks die Klasse tragen, weshalb die Render-Schicht das className-Attribut des Kerns nun aus dem inneren Markup entfernt und stattdessen auf dem Wrapper ausgibt; mit MevvBridge konvertierte Seiten trugen dieses Attribut nie, sie sind also nicht betroffen.

Der Newsletter-Block

Ein Adressfeld, ein optionales Namensfeld (ad_alani), ein Einwilligungs-Kontrollkästchen und eine Absende-Schaltfläche. Die Texte gehören dir: baslik, metin, dugme_metni, onay_metni und basari_metni.

  • Es ist ein einfaches POST, signiert mit einem HMAC, nicht mit einem Nonce. Ein Nonce ist an die Sitzung und an zwölf Stunden gebunden; hinter einem Full-Page-Cache tötet ein abgelaufener Nonce das Formular stillschweigend. Die Signatur ist dieselbe, die die Formular-Engine verwendet.
  • Ein Honeypot-Feld wird stillschweigend geschluckt. Einen Fehler zu zeigen würde dem nächsten Bot beibringen, die Falle zu umgehen.
  • Ein Ratenlimit gilt pro Adresse.
  • Die Einwilligungsregel wird aus dem eigenen Inhalt des Blocks gelesen, nie aus dem abgesendeten Formular — sie aus einem versteckten Feld zu lesen, würde die Einstellung in die Hand des Besuchers legen.
  • Adressen werden zusammen mit deinen übrigen Formularübermittlungen gespeichert, unter einem bulten:-Schlüssel. Es gibt keine Liste von uns und keine Anfrage an einen Dritten.

Um eine bestätigte Adresse an das zu übergeben, was du ohnehin nutzt, hänge dich in die Aktion ein:

add_action( 'mevvblocks_newsletter_subscribe', function ( $eposta, $ad, $blok_kimligi ) {
    // $eposta       : die bestätigte Adresse
    // $ad           : der Name, oder eine leere Zeichenkette, wenn das Feld aus ist
    // $blok_kimligi : aus welchem Newsletter-Block sie kam
}, 10, 3 );

Die Aktion feuert, nachdem die Adresse geprüft und gespeichert wurde, ein Fehler in deinem Handler kann die Anmeldung also nicht verlieren.

Dynamischer Text und benutzerdefinierte Felder

Die Blöcke Überschrift, Text, Schaltfläche und Bild können ihren Wert aus dem Beitrag nehmen statt aus dem, was du getippt hast. Das Panel heißt Dynamisch, und die Quellen sind eine feste Liste: Beitragstitel, Auszug, Autor, Datum, erste Kategorie, Schlagwörter, Kommentaranzahl, Archivtitel, Suchbegriff, Name und Untertitel der Website, das aktuelle Jahr, der WooCommerce-Preis, die Artikelnummer und der Lagerbestand — und ein benutzerdefiniertes Feld per Schlüssel.

  • Mit aktivem Advanced Custom Fields wird das Feld über get_field() gelesen, du bekommst also den formatierten Wert statt des rohen. Ohne ACF fällt es auf einfache Beitrags-Metadaten zurück, und in beiden Fällen bricht nichts.
  • Schlüssel, die mit einem Unterstrich beginnen, werden abgelehnt. Das sind die internen Felder von WordPress; sie auszugeben würde preisgeben, was die Seite nie zeigen wollte.
  • Es gibt kein Feld „führe diesen Ausdruck aus“. Das würde die Codeausführung jedem in die Hand geben, der eine Seite bearbeiten kann.

Während du ein Loop-Kartentemplate bearbeitest, gibt es keinen Beitragskontext, eine dynamische Bindung zeigt also ihren statischen Ersatzwert statt eines Werts. Das ist das Template, nicht die Seite.

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

Sechsundsiebzig fertige Muster: vierundsechzig Abschnitte und zwölf vollständige Seiten. Sie werden als gewöhnliche WordPress-Muster registriert, Sie fügen sie also so ein, wie Sie es kennen — die +-Schaltfläche, der Reiter Muster, dann die Kategorie MevvBlocks sections oder MevvBlocks pages. Die Abschnitte reichen über die Familien Hero, Feature, Testimonial, FAQ, Preise, Handlungsaufruf, Kontakt, Über uns, Vorfußzeilen-Band und Statistik; die Seiten ergänzen drei Startseiten-Varianten, eine FAQ-Seite, eine Kampagnenseite, eine Story-Seite und eine Dankeseite.

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.

Neun davon brauchen WooCommerce: acht Produkt- und Kategorieabschnitte und eine Shop-Landingpage. Sie liegen in einer eigenen Datei und werden nur registriert, solange WooCommerce aktiv ist, damit einer Website ohne Shop nie ein Muster angeboten wird, das einen nicht darstellbaren Block einfügen würde. Die Produkte darin stammen aus einer Abfrage — neu, hervorgehoben, im Angebot, meistverkauft — und nicht aus einer ins Muster geschriebenen Kategorie-ID, denn dieselbe ID trifft in einem anderen Shop eine leere oder schlicht falsche Kategorie.

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.

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

Dreiundzwanzig 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 Ergebniszahl — dazu Produkte, Produktkategorien und ein Mini-Warenkorb.

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.

Die theme.json des Themes lesen

Ein Block-Theme deklariert seine Palette und seine Typografie bereits in theme.json. MevvBlocks kann diese Datei lesen und damit die leeren Plätze in seiner eigenen Site-Palette füllen, sodass die Farben, die Sie in einem Block wählen, die Farben sind, die das Theme ohnehin benutzt, statt eines zweiten, konkurrierenden Satzes.

Die Brücke ist einseitig und bleibt es. Es wird nie etwas in theme.json zurückgeschrieben. Ein Plugin, das die eigene Datei des Themes bearbeitet, hinterlässt Ihnen eine Datei, die das Theme-Update überschreiben wird — und keine Möglichkeit zu sagen, welche der beiden richtig war. Außerdem füllt es nur Plätze, die Sie leer gelassen haben: Eine von Hand gesetzte Farbe wird nie ersetzt.

Es ist aus, bis Sie es einschalten, denn eine Site, die bereits eine Palette hat, will sie nicht stillschweigend auf die des Themes umgebogen bekommen.

Das Mega-Panel

Ein Untermenü kann sich als Panel über die volle Breite mit bis zu vier Spalten öffnen statt als schmales Aufklappmenü. Es ist kein neuer Block — es ist eine Einstellung am Navigationsblock, den Sie ohnehin benutzen, das Menü behält also sein Markup, sein Tastaturverhalten und sein mobiles Layout.

Schalten Sie das Panel für einen Menüeintrag ohne Untermenü ein, und die Barrierefreiheitsprüfung sagt das. Ein leeres Panel ist kein kleiner Schönheitsfehler: Es ist ein Bedienelement, das sich einem Screenreader ankündigt und dann nichts enthält.

Ein erster Entwurf einer Seite, aus einem Satz

Beschreiben Sie die Seite, die Sie wollen, und das Modell wählt Abschnitte aus der eigenen Muster-Bibliothek des Plugins. Es schreibt nie Markup: Es gibt eine Liste von Abschnittsschlüsseln zurück, und MevvBlocks rendert diese Abschnitte selbst. Was auf der Seite landet, sind daher gewöhnliche Blöcke, die Sie bearbeiten können, und kein generiertes HTML, das Sie aufräumen müssen.

  • Einen Abschnittsschlüssel, den das Modell erfindet, gibt es in der Bibliothek nicht, er wird also verworfen — und der Bildschirm sagt Ihnen, dass er verworfen wurde, statt stillschweigend eine kürzere Seite zu erzeugen.
  • Die Seite wird immer als Entwurf angelegt. Es gibt keinen Codepfad, der sie veröffentlicht.
  • Es benutzt denselben Schlüssel, den Sie für die KI-Werkzeuge des Editors eingetragen haben: Ihren eigenen Anthropic- oder OpenAI-Schlüssel, auf Ihrer Site gespeichert, und die Anfrage geht direkt von Ihrem Server zum Anbieter.

Free und Pro

Die kostenlose Edition ist das ganze Produkt: einhundertsieben der einhundertzehn Blöcke, die acht Blockstile, Theme-Templates, das Raster und der Loop-Builder, die Formular-Engine mit ihrem Übermittlungsspeicher, das Newsletter-Formular, dynamischer Text einschließlich ACF-Feldern, das Menü, die Suche, die Pop-ups, die Vorlagenbibliothek, Block-Voreinstellungen, die globale Farbpalette, Bildoptimierung, Block-Caching, seitenweiter eigener Code, 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.
  • Drei Blöcke — der Inhaltsumschalter mit seinen Panels, das Portfolio mit Taxonomie-Filter, und die Lottie-Einbettung. Auch ihr Rendering prüft nie die Lizenz: Eine Seite, die sie bereits trägt, gibt sie weiter aus.

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.

Updates

Updates kommen über WordPress selbst. Das Plugin fragt unseren Store, ob eine neuere Version existiert, und übergibt die Antwort dem eigenen Update-Ablauf von WordPress, sodass eine neue Version auf der Plugin-Seite mit einem gewöhnlichen Aktualisieren-Button erscheint, statt darauf zu warten, dass jemand von Hand ein ZIP herunterlädt. In der kostenlosen Edition trägt diese Anfrage nur den Paketnamen und die installierte Version — keine Website-Adresse, keine E-Mail-Adresse, keinen Lizenzschlüssel und kein Plugin-Inventar. Da nichts darin Sie identifiziert, ruht das Vertrauen auf der Signatur: Die Antwort ist mit unserem Ed25519-Schlüssel signiert, und eine unsignierte, falsch signierte, aus einem alten Zeitstempel wiedereingespielte oder auf einen fremden Host zeigende Antwort wird verworfen, ohne die Website zu berühren.

Grenzen

  • Die Editorvorschau ist beim Layout exakt, aber nicht bei allem. Die Arbeitsfläche gibt dasselbe CSS aus wie das Frontend, deshalb stimmen Abstände, Hintergrund, Rahmen, Typografie, Transformationen und Position überein. Abweichend bleibt jede Regel, die auf das Markup innerhalb eines Blocks zielt, denn dort zeichnet der Block seine eigenen Bearbeitungselemente.
  • 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.
  • Das Portfolio hat kein Modal und keine Seitennummerierung. Karten, ein Filter und ein Link zum Archiv — das ist der ganze Block.
  • Der Social-Feed hat keinen API-Adapter. Er ist eine Liste von Links, die du von Hand aussuchst; nichts wird aus irgendeinem Netzwerk geholt, und es wird kein Token gespeichert.
  • Es gibt keine scrollgebundenen Animationen und keine Regel, die zwei Effekte am Kollidieren hindert. Einblend-, Parallaxe- und Hover-Effekte gibt es, und alle sind bei reduzierter Bewegung still.
  • Das Kreisdiagramm animiert nicht, und es ist nicht interaktiv: Die Werte werden daneben als Liste ausgegeben, statt bei Hover gezeigt zu werden.
  • 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.
  • Der Icon-Satz besteht aus 94 Strich-Icons, alle in einer einzigen 24-Pixel-Box gezeichnet. Es gibt keine Icon-Schriftart und keine Möglichkeit, eigene in die Auswahl aufzunehmen; ein eigenes SVG kommt über den Block Bild oder SVG-Animation hinein.
  • 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.