MevvBlocks — Mevvsoft-documentatie

Installatie

MevvBlocks heeft WordPress 6.0 of nieuwer en PHP 8.1 of nieuwer nodig. Er is geen andere afhankelijkheid: geen externe bibliotheek, geen lettertype van andermans server, geen buildstap.

Upload de plug-in en activeer die.
Open een pagina in de blokeditor en voeg het blok Container toe.
Zet daar de blokken in die u wilt. U vindt ze in de categorie Ontwerp.
De rest beheert u vanuit het menu MevvBlocks in de beheerzijbalk.

WooCommerce is optioneel. Installeren voegt twee blokken toe.
MevvBridge is optioneel. Komt u van Elementor, dan is MevvBlocks wat die pagina's weer bewerkbaar maakt.
MevvLegal is optioneel. Is het aanwezig, dan geeft het kaartblok zijn embed door aan MevvLegal, zodat de kaart niet wordt geladen voordat de bezoeker instemt.

Pro is een aparte plug-in die naast de gratis versie wordt geïnstalleerd, en die verklaart de gratis plug-in tot harde vereiste. Uw licentiesleutel voert u in op het scherm Lisans. Zonder Pro doet MevvBlocks helemaal geen verzoek aan onze servers.

Stijl per schermgrootte — het gat dat dit dicht

Kernblokken accepteren één opvullingswaarde, één minimumhoogte, één kolomaantal. Die waarde geldt op elk scherm. Heeft een sectie 100 pixels opvulling nodig op desktop en 40 op mobiel, dan kan de kern dat niet uitdrukken — en juist dat ene gat is de meest voorkomende technische reden waarom mensen een paginabouwer installeren.

MevvBlocks slaat drie waarden op in plaats van één — desktop, tablet, mobiel. De drempels liggen vast:

Desktop: Geen media query — de basiswaarde.
Tablet: Geldt vanaf 1024 pixels en lager.
Mobiel: Geldt vanaf 767 pixels en lager.

Dezelfde twee getallen worden overal elders in de plug-in gebruikt — de hamburgerdrempel van het menu, de kolomaantallen van het raster. Een vrij pixelveld is bewust niet aangeboden: wie 900 kiest, krijgt de hamburger bij 900 terwijl zijn opvulling nog steeds op 1024 verandert, en twee breakpointsystemen betekenen lay-outs die het met zichzelf oneens zijn.

De waarden zitten in de eigen attributen van het blok, binnen post_content — niet in een eigen tabel en niet in postmeta. De CSS wordt op de server, op het moment van de aanvraag, geproduceerd en afgedrukt als een klein stijlblok naast het element waar het bij hoort.

Waarom wordt de CSS niet met de pagina opgeslagen? Omdat opgeslagen HTML maar één breakpoint kan dragen. Renderen op het moment van de aanvraag maakt drie waarden pas mogelijk — en daarom kan een verlopen licentie nooit een gepubliceerde pagina donker maken: op dat pad zit geen enkele licentiecontrole.

De editorvoorbeeldweergave — wat die toont en wat die nog niet kan

Op deze pagina stond vroeger dat de voorbeeldweergave een benadering was. Voor de lay-out is dat niet meer zo. Het canvas vraagt nu bij de server dezelfde CSS op die de pagina zal afdrukken, en past die toe op dezelfde wrapperklassen die de front-end gebruikt.

Wat vandaag nauwkeurig is in het canvas: containerlay-out (richting, kolommen, tussenruimte, uitlijning), opvulling, marge, achtergrond, rand, radius, schaduw, minimumhoogte, typografie, transformaties, maskers en positionering — waarbij de tablet- en mobielwaarden gelden terwijl u het formaat aanpast, want het canvas is een iframe en media queries werken daarbinnen.

Waarom de CSS van de server komt in plaats van in JavaScript te worden nagebouwd: er is één stijlmotor, en een tweede kopie zou uit de pas gaan lopen met de eerste. Op de dag dat iemand een instelling aan de ene toevoegt en de andere vergeet, zou de editor fout zijn terwijl hij beweert exact te zijn — erger dan de oude, eerlijke benadering.

Wat nog niet exact is: regels die op de markup binnen een blok mikken. Op het canvas tekent een blok zijn eigen bewerkingsaffordances, dus een selector die tegen de front-endstructuur is geschreven heeft niets om op aan te grijpen. Dat gat dichten betekent de bewerkingsmarkup identiek maken aan de gepubliceerde markup voor elk van de honderdtien blokken; dat is echt werk en het is niet gedaan.

Gemeten, niet beweerd: dezelfde sectie is twee keer gerenderd onder dezelfde stylesheet — één keer zoals de front-end die afdrukt, één keer zoals het canvas die opbouwt — en zestien lay-outeigenschappen zijn op elk element vergeleken. Het oude canvas week op vierentwintig daarvan af. Nu is het nul van de vierenzestig. Het gereedschap dat dit meet, zit in de broncode van de plug-in (tools/onizleme-esitlik.js), en het werd eerst op de oude markup gericht om te bewijzen dat het niet blind was.

De blokken

Honderdtien blokken, of zevenentachtig zonder WooCommerce. Ze zitten allemaal in de gratis editie behalve de drie die hieronder als Pro staan aangeduid; geen ander blok is alleen voor Pro. Ze staan in de categorie Design van de invoeger, en de instellingssleutels die elk blok opslaat staan opgesomd in docs/BLOK-AYARLARI.md in de plugin — een gegenereerd bestand, dus het kan niet van de code af drijven.

De groepen hieronder zijn dezelfde vijf die de plugin voor zijn eigen demopagina's gebruikt.

Tekst en actie: Container, Kop, Tekst, Knop, Scheiding, Ruimte, Anker, Afbeelding, Shortcode, Citaat, Checklist, Code, Oproep tot actie, Pictogram, Pictogramvak, Pictogramlijst, Geanimeerde kop, Melding, Uitklapper, Geneste tabbladen met Tabbladpanelen, Tabbladen, Accordeon, FAQ, Stappen
Gegevens en prijzen: Teller, Voortgangsbalk, Gegevensbalk, Taartdiagram, Cijfervak, Prijstabel, Prijslijst, Referentie, Sterbeoordeling, Referentiecarrousel, Teamlid, Aftelklok, Label, Logostrook, Inhoudswisselaar en Wisselaarpaneel (Pro)
Portfolio en kaart: Tijdlijn, Tabel, Vergelijking, Inhoudsopgave, Kaart, Inhoudsraster, Sitemap, Portfolio (Pro)
Media en formulieren: Video, Audio, Speellijst, Galerij, Voor / Na, Flipbox, Banner, Hotspot, Tooltip, Sociale feed, Sociale pictogrammen, Delen op sociale media, Slider, Dia's, Tekst op een pad, Uitschuifpaneel, Contactknoppen, Aankondigingsbalk, Leesvoortgang, Leestijd, Terug naar boven, Formulier, Inlogformulier, Registratieformulier, Nieuwsbrief, Zoekformulier, Navigatiemenu, Lottie (Pro)
Ontwerp en beweging: SVG-animatie, Afbeeldingsvak, Copyright, en de acht blokstijlen die hieronder worden beschreven. Beweging is geen blok: een paneel met binnenkomstanimatie, plakkende positie en parallax wordt aan elk MevvBlocks-blok toegevoegd.
Site- en themasjablonen: Sitelogo, Sitetitel, Siteslogan, Paginatitel, Kruimelpad, Berichtinfo, Auteursvak, Reacties, Vorige / Volgende, Archieftitel, Archiefbeschrijving
WooCommerce (23): Producten, Productcategorieën, Productafbeeldingen, Producttitel, Productprijs, Productbeoordeling, Korte beschrijving, Productbeschrijving, Productmeta, Aanvullende informatie, Producttabbladen, In winkelwagen, Voorraadstatus, Gerelateerde producten, Upsells, Cross-sells, Minikar, Winkelwagen, Afrekenen, Mijn account, Bestelling volgen, Producten sorteren, Aantal resultaten — alleen toegevoegd wanneer WooCommerce actief is

Een notitie over de meest recent toegevoegde, omdat elk ervan een beslissing draagt die je op de pagina kunt zien:

Uitklapper: Een native <details> die willekeurige blokken in zich opneemt en in een andere uitklapper genest kan worden. Instellingen: baslik (de samenvattingstekst) en acik (open bij het laden). Er is geen id nodig, dus twee uitklappers op dezelfde pagina kunnen niet botsen.
Geneste tabbladen en Tabbladpaneel: Een tabbladgroep waarvan de panelen gewone binnenblokken zijn, dus een paneel kan van alles bevatten — ook een andere tabbladgroep. Groepsinstellingen: yon (horizontaal of verticaal) en acik (het tabblad dat bij het laden open staat); elk paneel heeft een baslik. De tabbladenstrip draagt het ARIA-tabbladpatroon met pijltoetsen, Home en End, en id's worden per groep uniek gemaakt zodat nesten veilig is. Alleen directe kindpanelen horen bij een groep. Een verticale strip wordt horizontaal op een smal scherm.
Taartdiagram: Taart of ring (tur), rijen geschreven als “label | waarde | optionele kleur” in satirlar, plus een baslik. De cirkel wordt met stroke-dasharray getekend en draagt role="img"; dezelfde waarden worden eronder als tekstlijst met hun percentages afgedrukt, want een diagram dat niemand kan lezen is versiering. Het animeert niet.
Speellijst: Audio of video (tur), met een baslik en een herhaler van tracks: dosya, baslik, sure, poster en altyazi (een WebVTT-track). Elke track wordt als gewone link afgedrukt, dus de lijst is bruikbaar voordat er een script draait; met het script wisselt het kiezen van een track de bron ter plekke.
Sociale feed: Berichten die je met de hand kiest, uitgelegd in sutun kolommen. Elk item heeft adres, metin, tarih en gorsel. Er is geen API-adapter, geen token en geen verzoek aan enig netwerk — dit is een lijst met links, en de plugin zegt dat ook in plaats van een live feed te suggereren.
Tooltip: metin is het woord in je zin, ipucu de uitleg, konum de kant waar hij opengaat. Het is een echte knop met role="tooltip" op de ballon: zweven en focus worden in CSS afgehandeld, tikken in script, en Escape sluit hem. De ballon wordt met visibility verborgen in plaats van verwijderd, zodat de described-by-relatie in de toegankelijkheidsboom blijft.
SVG-animatie: dosya is de SVG, durgun een stilstaand beeld, alt de alternatieve tekst en genislik de breedte. Het bestand wordt bewust binnen een <img> gerenderd: script in een SVG kan je pagina op die manier niet bereiken. Een <picture> wisselt het stilstaande beeld in wanneer de bezoeker om minder beweging heeft gevraagd.
Melding, Geanimeerde kop, Tijdlijn, Tabel, Flipbox: De melding kan een sluitknop krijgen (kapatilabilir) en verplaatst de focus naar het volgende element wanneer ze wordt gesloten; type en titel zijn bewerkbaar. De geanimeerde kop kiest zijn tag (baslik_etiketi, h1–h6, p, div of span) en kan zijn woorden typen (etki) — het eerste woord wordt altijd afgedrukt, en beide effecten stoppen bij minder beweging. De tijdlijn neemt een horizontale opmaak (yon) die op een smal scherm terugkeert naar verticaal zonder de leesvolgorde te veranderen. Kopcellen van de tabel dragen scope="col" en een lege cel drukt een streepje af met een label voor schermlezers. De flipbox draait bij tikken, Enter en Spatie, en Escape draait hem terug.
Inhoudswisselaar (Pro): Een tabbladenstrip — meestal maandelijks en jaarlijks — boven Wisselaarpanelen die willekeurige blokken bevatten. Instellingen: etiket (de toegankelijke naam van de strip), rozet (een label zoals een besparing) en acik; elk paneel heeft een baslik.
Portfolio (Pro): gonderi_turu, taksonomi, terimler, adet, sutun, suzgec (toon het filter) en arsiv_bag (link naar het archief). De kaarten worden op de server gerenderd en het filter verbergt en toont ze alleen in de browser, dus er verlaat geen verzoek de pagina. Er is geen modaal venster en geen paginering.
Lottie (Pro): adres, alt, baslik, durgun (een stilstaand beeld), onay en onay_metni. LottieFiles is een externe dienst, dus het blok volgt hetzelfde toestemmingspad als de kaart en de video: het toont het stilstaande beeld tot de bezoeker akkoord gaat, en bij minder beweging speelt het nooit af. De spelerbibliotheek wordt nog steeds niet meegeleverd.

Niets hier is verborgen wanneer JavaScript niet laadt. Tabbladen tonen elk paneel, de uitklapper en de accordeon zijn native details-elementen, de slider scrolt, de speellijst is een lijst met links, en de pijlen worden verborgen afgedrukt tot het script ze kan aansturen — een knop tonen die niets doet is een kapotte interface tonen. Verborgen inhoud is ontoegankelijke inhoud. Knoppen en actielinks hebben een minimale doelgrootte van 44 pixels.

Blokstijlen

Acht stijlen worden geregistreerd via WordPress' eigen register_block_style, dus ze verschijnen in het paneel Stijlen dat de editor al toont voor een geselecteerd blok. Er is geen nieuwe knop om te leren, en de keuze wordt opgeslagen als een is-style-…-class in je markup in plaats van als een instelling in een tabel van ons.

Verlooplaag: Container, Afbeelding, Afbeeldingsvak, Banner, Slider
Grijstinten, kleur bij zweven: Afbeelding, Afbeeldingsvak, Teamlid, Logostrook, Galerij
Vervaging tot zweven: Afbeelding, Afbeeldingsvak, Banner
Rond masker / Afgerond masker: Afbeelding, Afbeeldingsvak, Teamlid — en, voor het afgeronde, Banner en Galerij
Optillen bij zweven: Container, Pictogramvak, Afbeeldingsvak, Prijstabel, Teamlid, Referentie, Oproep tot actie, Banner
Afbeelding inzoomen bij zweven: Afbeelding, Afbeeldingsvak, Banner, Galerij
Kantelen bij zweven: Pictogramvak, Afbeeldingsvak, Banner, Cijfervak

Elke zweeftransformatie wordt uitgezet wanneer het systeem van de bezoeker om minder beweging vraagt. Een stijl toepassen vereist dat de wrapper van het blok de class draagt, en daarom haalt de renderlaag nu het className-attribuut van de kern van de binnenste markup af en drukt het in plaats daarvan op de wrapper af; pagina's die met MevvBridge zijn omgezet droegen dat attribuut nooit, dus die blijven onaangeroerd.

Het nieuwsbriefblok

Een adresveld, een optioneel naamveld (ad_alani), een toestemmingsvakje en een verzendknop. De teksten zijn van jou: baslik, metin, dugme_metni, onay_metni en basari_metni.

Het is een gewone POST ondertekend met een HMAC, niet met een nonce. Een nonce is gebonden aan de sessie en aan twaalf uur; achter een cache van hele pagina's doodt een verlopen nonce het formulier in stilte. De handtekening is dezelfde die de formuliermotor gebruikt.
Een honeypot-veld wordt in stilte weggeslikt. Een foutmelding tonen zou de volgende bot leren de val te omzeilen.
Er geldt een snelheidslimiet per adres.
De toestemmingsregel wordt uit de eigen inhoud van het blok gelezen, nooit uit het verzonden formulier — hem uit een verborgen veld lezen zou de instelling in handen van de bezoeker leggen.
Adressen worden bij je andere formulierinzendingen opgeslagen, onder een bulten:-sleutel. Er is geen lijst van ons en geen verzoek aan een derde partij.

Om een bevestigd adres door te geven aan wat je al gebruikt, haak je in op de actie:

add_action( 'mevvblocks_newsletter_subscribe', function ( $eposta, $ad, $blok_kimligi ) {
    // $eposta       : het bevestigde adres
    // $ad           : de naam, of een lege string wanneer het veld uit staat
    // $blok_kimligi : uit welk nieuwsbriefblok het kwam
}, 10, 3 );

De actie vuurt af nadat het adres is gevalideerd en opgeslagen, dus een fout in je handler kan de inschrijving niet kwijtmaken.

Dynamische tekst en aangepaste velden

De blokken Kop, Tekst, Knop en Afbeelding kunnen hun waarde uit het bericht halen in plaats van uit wat je hebt getypt. Het paneel heet Dynamisch, en de bronnen zijn een vaste lijst: berichttitel, samenvatting, auteur, datum, eerste categorie, tags, aantal reacties, archieftitel, zoekterm, sitenaam en slogan, het huidige jaar, de WooCommerce-prijs, SKU en voorraad — en een aangepast veld op sleutel.

Met Advanced Custom Fields actief wordt het veld via get_field() gelezen, zodat je de opgemaakte waarde krijgt in plaats van de ruwe. Zonder ACF valt het terug op gewone berichtmeta, en in beide gevallen gaat er niets stuk.
Sleutels die met een liggend streepje beginnen worden geweigerd. Dat zijn de interne velden van WordPress; ze afdrukken zou lekken wat de pagina nooit heeft willen tonen.
Er is geen veld “voer deze expressie uit”. Dat zou code-uitvoering in handen leggen van iedereen die een pagina kan bewerken.

Terwijl je een sjabloon voor een loopkaart bewerkt is er geen berichtcontext, dus een dynamische binding toont zijn statische terugvalwaarde in plaats van een waarde. Dat is het sjabloon, niet de pagina.

Inhoudsraster en de loopbouwer

Het blok Inhoudsraster bevraagt berichten, pagina’s of producten en zet ze op. De paginering bestaat uit gewone links, dus het werkt ook met JavaScript uitgeschakeld.

De sortering is een vaste lijst — datum, wijzigingsdatum, titel, menuvolgorde, willekeurig — omdat de waarde tot in de database komt.
Kaartkoppen lopen van h2 tot h6. h1 wordt niet aangeboden: een raster met kaarten op een pagina die al een h1 heeft, zou de kopvolgorde breken.
Eén link per kaart. Van de afbeelding, de titel en 'lees meer' allemaal links maken betekent dat een schermlezer hetzelfde doel drie keer aankondigt.
Het raster cachet de gevonden bericht-id's, nooit de gerenderde HTML, en de cache wordt ongeldig zodra een bericht wordt opgeslagen — 'ik heb een bericht gepubliceerd en het verschijnt niet' kan dus niet gebeuren.

Met de loop-bouwer tekent u de kaart zelf in plaats van de ingebouwde te gebruiken. U maakt een sjabloon van het type Loop-kaart, bouwt het op uit gewone blokken met dynamische bindingen, en kiest het in de instellingen van het raster.

Terwijl u een kaartsjabloon bewerkt, is er geen berichtcontext, dus dynamische bindingen tonen hun statische terugvalwaarden. En is het sjabloon leeg, verwijderd, als concept gelaten of verwijst het naar zichzelf, dan valt het raster terug op de ingebouwde kaart in plaats van niets af te drukken. Het nesten van loops is begrensd op twee niveaus.

De formuliermotor

Zestien veldtypen, met validatie op de server. Het formulier is het ene deel van een pagina dat echt iets doet, dus het werkt zonder JavaScript: een gewone POST-inzending krijgt dezelfde validatie en dezelfde meldingen als een script-gestuurde.

Veldtypen: Tekst, E-mail, Telefoon, Adres (URL), Nummer, Datum, Tijd, Verborgen, Lange tekst, Vervolgkeuzelijst, Meerkeuzelijst, Enkelvoudige keuze, Meerdere selectievakjes, Selectievakje, Toestemmingstekst (KVKK) en Subkop. Pro voegt een veld voor bestandsupload toe.
Waar inzendingen naartoe gaan: Zowel naar een eigen tabel als naar e-mail. Het record wordt eerst weggeschreven en de mail daarna verstuurd, want mailbezorging mislukt veel vaker dan een databaseschrijfactie.
Ze lezen: MevvBlocks → Formulierinzendingen. Pro voegt daar een CSV-export toe.
Meldings-e-mail: De afzender is uw site, nooit de bezoeker. Het adres van de bezoeker als afzender gebruiken is verreweg de meest voorkomende reden dat formuliermail nooit aankomt — SPF en DMARC wijzen die af. Zijn adres wordt in plaats daarvan de Reply-To.

Spam wordt door drie lagen afgevangen en geen CAPTCHA: een handtekening die niet van een sessie afhangt, een minimale invultijd en een honeypotveld. Een inzending die de honeypot invult, wordt in stilte aanvaard en weggegooid — een foutmelding zou de bot vertellen dat hij gepakt is, en de volgende poging zou dat veld overslaan.

Waarom een handtekening in plaats van een WordPress-nonce? Een nonce is gebonden aan een sessie en een venster van twaalf uur. Op een gecachte site wordt dezelfde HTML uren- of dagenlang geserveerd, de nonce erin is allang verlopen, en het formulier stopt in stilte met werken. Dat is de meest voorkomende storing in het veld bij formulierplug-ins. De handtekening hier is zeven dagen geldig en hangt niet af van wie er browst.

Het IP-adres van een inzending wordt nooit in leesbare vorm opgeslagen — alleen een digest, gezouten met de sleutel van uw eigen site, zodat records van twee verschillende sites niet aan elkaar gekoppeld kunnen worden.

De opslag van inzendingen is niet aan de licentie gekoppeld. Als dat wel zo was, zou de dag waarop een betaling verloopt de dag zijn waarop de klant gegevens begint te verliezen.

Themasjablonen

Zeven sjabloontypen, gebouwd in de WordPress-editor die u al gebruikt — Header, Footer, Losse inhoud, Archief, Zoekresultaten, Niet gevonden (404) en Loop-kaart. Een tweede editor zou nog iets zijn dat in de pas moet blijven met de WordPress-kern.

Het type en de voorwaarden staan in een eenvoudig zijbalkvak, niet in een React-paneel — een klassiek vak slaat ook op met JavaScript uit en gaat niet stuk wanneer de editor-API verandert.

Voorwaarden: Hele site, homepage, berichttype, categorie of één stuk inhoud. Laat ze leeg voor de hele site.
Wanneer er meerdere passen: De smalste voorwaarde wint.
Ongeldige voorwaarden: Worden bij het opslaan weggegooid en leeg opgeslagen, in plaats van bewaard als ongeldige tekst waardoor het sjabloon stilletjes nooit zou verschijnen.

Sjablonen voor koptekst en voettekst worden alleen geplaatst bij Astra en GeneratePress. Heeft uw thema geen recept, dan worden ze helemaal niet afgedrukt en zegt het scherm dat — een koptekst hangen aan een thema dat we niet kunnen optillen betekent gegarandeerd twee kopteksten. Sjablonen voor enkelvoudige weergave, archief, zoeken en 404 blijven op elk thema werken, omdat ze de loop vervangen en de eigen koptekst en voettekst van het thema laten staan.

Een Loop-kaart-sjabloon plaatst zichzelf nergens. Een rasterblok kiest het.

Patronenbibliotheek en blokvoorinstellingen

Zesenzeventig kant-en-klare patronen: vierenzestig secties en twaalf volledige pagina’s. Ze worden geregistreerd als gewone WordPress-patronen, dus u voegt ze in zoals u gewend bent — de +-knop, het tabblad Patronen, en dan de categorie MevvBlocks sections of MevvBlocks pages. De secties lopen door de families hero, functie, testimonial, FAQ, prijzen, oproep tot actie, contact, over ons, band boven de voettekst en statistieken; de pagina’s voegen drie homepagevarianten toe, een FAQ-pagina, een campagnepagina, een verhaalpagina en een bedankpagina.

Hiervoor is geen eigen modaal venster geschreven. De blokkenkiezer van de kern geeft voorbeeldweergave, zoeken, toetsenbordnavigatie en vertaling al gratis, en wat hij invoegt is gewone blokmarkup — niets om aan vast te zitten.

Negen daarvan hebben WooCommerce nodig: acht product- en categoriesecties en één winkellandingspagina. Ze staan in een eigen bestand en worden alleen geregistreerd zolang WooCommerce actief is, zodat een site zonder winkel nooit een patroon krijgt aangeboden dat een blok zou invoegen dat het niet kan tekenen. De producten erin komen uit een query — nieuw, uitgelicht, in de aanbieding, best verkocht — en niet uit een categorie-id dat in het patroon is geschreven, want datzelfde id belandt in een andere winkel op een lege of ronduit verkeerde categorie.

De patronen komen zonder afbeeldingen. Afbeeldingen van elders halen is een auteursrechtelijke vraag, een privacyvraag, en het bindt het uiterlijk van uw pagina aan de beschikbaarheid van andermans server. De afbeeldingsblokken staan er, met ingevulde alt-tekst; kies uw eigen afbeeldingen.

Blokvoorinstellingen slaan de uiterlijkinstellingen van een blok onder een naam op en passen ze toe op een ander blok van hetzelfde type. Inhoud wordt bewust niet opgeslagen — tekst, links, afbeeldingen en lijstitems worden eruit gehaald, zodat het toepassen van een voorinstelling nooit overschrijft wat u hebt geschreven.

Patronen worden op de front-end helemaal niet geregistreerd. Hun markup bij elke paginaweergave genereren is gemeten op 109 KB en 3,59 ms — voor niets betaald, want niemand voegt een patroon in tijdens het lezen.

Pop-ups

Worden net als al het andere in de blokeditor gebouwd; de triggers, voorwaarden en frequentie staan in de zijbalk van datzelfde scherm. Beheerd onder MevvBlocks → Pop-ups.

Triggers: Bij het laden van de pagina met vertraging, op een scrollpercentage, bij vertrekintentie, bij een klik die overeenkomt met een CSS-selector, of na een periode van actieve tijd. De activiteitsteller stopt zolang het tabblad op de achtergrond staat.
Voorwaarden: Hele site, homepage, specifieke pagina's, berichttype of categorie; ingelogd, uitgelogd of iedereen; en per apparaat.
Frequentie: Elke keer, eenmaal per sessie, of eenmaal per N dagen.
Uiterlijk: Positie, breedte, of de titel wordt getoond, of erbuiten klikken sluit, en de openingsanimatie.

De teller voor 'niet meer tonen' zit in de browser van de bezoeker zelf, niet op de server. Die aan de serverkant tellen zou betekenen dat elke bezoeker een blijvende identiteit krijgt, alleen om hem een venster niet twee keer te tonen.

Apparaatgerichtheid wordt door de browser bepaald, niet door de user agent te besnuffelen. Een user agent kan een tablet niet betrouwbaar van een telefoon onderscheiden, en achter een volledige paginacache zou hij het apparaat van de eerste bezoeker aan iedereen serveren. Is er geen trigger gekozen, dan valt de pop-up terug op het laden van de pagina; is er geen apparaat gekozen, dan op alle drie — een pop-up die stilletjes nooit verschijnt, is erger dan een die te vaak verschijnt.

Het palet van de site

Eén scherm voor kleuren en typografie, bereikbaar zowel via het MevvBlocks-menu als via Weergave, want daar zoeken mensen het. Elk item toont zijn eigen variabelenaam, en blokken verwijzen naar die namen in plaats van naar letterlijke waarden.

Juist dat laat een pagina die vóór de omschakeling is gebouwd een nieuw palet oppikken in plaats van haar verwijzingen kwijt te raken — de variabelenamen blijven dezelfde die uw pagina's al gebruiken.

Er is geen verwijderen. Een kleur- of typografieset kan leeg blijven, maar die verwijderen zou elk blok dat ernaar verwees naar niets laten wijzen. Leegmaken is omkeerbaar; een verwijzing verwijderen niet.

De toegankelijkheidsaudit

MevvBlocks → Toegankelijkheid scant uw gepubliceerde pagina’s, berichten en sjablonen en meldt wat elk blok heeft weggelaten: een afbeelding zonder alt-tekst, een lege kop, een knop zonder naam of zonder doel, een gebroken koppenvolgorde, een te laag contrast.

Dezelfde audit is beschikbaar als zijbalkpaneel terwijl u nog aan het bewerken bent, en daar is een bevinding het goedkoopst te verhelpen.

Dit is bewust geen overlay. Lagen die een 'toegankelijkheidsmenu' op een pagina schroeven, lossen niets op: een afbeelding zonder alt-tekst heeft die nog steeds niet, en tekst met laag contrast blijft onleesbaar. De bewering 'deze site is toegankelijk' voeren zonder dat het waar is, is een slechtere positie dan helemaal niets beweren — sites met overlays zijn precies daarom aangeklaagd. Dit gereedschap meet en vertelt het u; het herstellen is aan u.

Contrast wordt alleen gemeld wanneer beide kleuren echt bekend zijn. Gokken naar een geërfde kleur zou waarschuwingen opleveren waar u niets mee kunt.

Snelheid — elementcaching en afbeeldingen

Twee losstaande dingen, beide in de gratis editie.

Elementcaching. Blokuitvoer wordt opgeslagen in plaats van bij elk verzoek opnieuw opgebouwd. Gemeten: rendertijd van blokken 33–72% lager. Het gebruikt een persistente objectcache (Redis, Memcached) wanneer die er is, en transients wanneer niet.

Een blok waarvan de uitvoer per bezoeker, per query of per moment verschilt, wordt nooit opgeslagen: formulieren, inloggen, registreren, mini-winkelwagen, productraster, zoeken, winkelwagen, afrekenen, mijn account, shortcode. Shortcode staat op die lijst omdat we niet weten wat erin zit — we hebben ooit op een echte site een WPForms-token bevroren, en de regel wordt sindsdien vanuit de broncode afgedwongen.

Afbeeldingsoptimalisatie. Naast elke geüploade afbeelding wordt een WebP- (optioneel AVIF-)kopie geschreven; het origineel wordt nooit aangeraakt. Gemeten: 39–78% kleiner. Een bestand dat niet krimpt, wordt niet bewaard — kleine, vlakke PNG's worden als WebP meestal groter.

Afbeeldingen worden geserveerd binnen een <picture>-element: het adres van elk formaat staat in de HTML en de browser kiest. Op de server beslissen op basis van de Accept-header is bewust niet gebruikt — wanneer hetzelfde adres per bezoeker verschilt, kan elke cache op het pad het verkeerde bestand aan de verkeerde persoon geven.

Als een andere plug-in dit werk werkelijk doet (LiteSpeed, ShortPixel, Imagify, Smush, EWWW, Optimole, Converter for Media), treedt MevvBlocks vanzelf terug en zegt waarom. De vraag is niet 'is het geïnstalleerd' maar 'kan het echt draaien': LiteSpeed met afbeeldingsoptimalisatie aan maar zonder cloudsleutel doet helemaal niets.

Core Web Vitals — gemeten bij uw bezoekers

Core Web Vitals zijn per definitie veldgegevens: gemeten in de browsers van echte bezoekers, gerapporteerd als het 75e percentiel over een venster van 28 dagen. Een Lighthouse-run is iets anders — één machine, één netwerk, één moment. Weten wat wat is, beslecht de verwarring 'PageSpeed zegt 98, Search Console zegt rood'.

Het scherm Web Vitals toont drie getallen per apparaatklasse:

LCP: Hoe lang de hoofdinhoud erover doet om te verschijnen. Goed is 2,5 seconden of minder.
CLS: Hoeveel de pagina beweegt terwijl ze tot rust komt. Goed is 0,1 of minder.
INP: Hoe lang de pagina erover doet om op een tik of klik te reageren. Goed is 200 ms of minder.

Het meetscript is ongeveer een kilobyte en laadt geen bibliotheek — de PerformanceObserver van de browser doet het werk. De steekproef staat standaard op 10% van de bezoeken en de browser beslist, niet de server: besliste de server, dan zou dezelfde URL twee verschillende HTML-documenten opleveren en zou een volledige paginacache aan iedereen serveren wat hij het eerst zag.

Er worden geen persoonsgegevens verzameld: geen IP, geen cookie, geen identificator. Drie waarden, een apparaatklasse en het paginapad, opgeslagen op uw eigen server als gebucketteerde tellingen. Er wordt niets ergens naartoe gestuurd.

Onder de honderd metingen toont het scherm helemaal geen getal — het zegt in plaats daarvan hoeveel het er heeft. Een percentiel uit een dozijn metingen is ruis, en een verkeerd getal is erger dan geen getal, want iemand gaat ernaar handelen. Het percentiel wordt uit een histogram gelezen en is dus benaderend tot op de bucketbreedte, en het scherm zegt dat erbij.

Transformaties en maskers

Elk blok kan worden verschoven, geschaald, gedraaid (Z en 3D X/Y), scheefgetrokken en gespiegeld — telkens met aparte waarden voor desktop, tablet en mobiel. Er kan een aparte hover-transformatie en een overgangsduur worden ingesteld.

Maskers kunnen een cirkel, driehoek, zeshoek, blob, bloem, vrije vorm of uw eigen afbeelding zijn, met besturing voor grootte, positie en herhaling.

De vormen zitten ingebed in de CSS en worden niet als aparte SVG-bestanden geleverd. Een verkeerd bestandspad laat een masker stilletjes verdwijnen en niemand ziet de 404; achter een CDN kan het adres van de plug-inmap bovendien veranderen.

Eigen code voor de hele site

HTML, CSS en JavaScript kunnen in de head, aan het begin van de body of aan het einde worden geplaatst: verificatietags, meetsnippets, kleine stijlcorrecties. Positie, prioriteit en een sessievoorwaarde zijn instelbaar.

Het voert geen PHP uit. Een PHP-uitvoerder in een paginabouwer stoppen zou de bevoegdheid van een ontwerper veranderen in de bevoegdheid om code op de server uit te voeren.

De vereiste bevoegdheid is unfiltered_html: wie geen ruw script in een bericht mag zetten, mag er ook geen sitebreed plaatsen. Is MevvLegal geïnstalleerd, dan worden hier geplaatste trackingscripts eveneens tegengehouden tot de cookietoestemming is gegeven.

WooCommerce-blokken

Drieëntwintig blokken: producttitel, afbeeldingen, prijs, toevoegen aan winkelwagen, beoordeling, voorraad, meta, korte beschrijving, beschrijving, gegevenstabbladen, aanvullende informatie, gerelateerde producten, upsells, cross-sells, winkelwagen, afrekenen, mijn account, bestelling volgen, sortering en aantal resultaten — plus producten, productcategorieën en een miniwinkelwagen.

Geen van deze tekent WooCommerce opnieuw. Ze roepen allemaal de eigen sjabloonfuncties en shortcodes ervan aan. Uw thema wijzigt die sjablonen en uw plug-ins haken erop in — verzending, termijnbetaling, voorraadmeldingen, maattabellen. Eigen markup tekenen zou dat allemaal stilletjes laten vallen.

Winkelwagen, afrekenen, mijn account en bestelling volgen zijn bezoekerspecifiek: volledige paginacaching wordt uitgeschakeld en ze worden nooit element-gecachet. Is WooCommerce niet actief, dan worden deze blokken noch op de server noch in de editor geregistreerd.

Editornotities

U kunt aan elk blok een notitie prikken: wie die heeft geschreven, wanneer, en of ze is afgehandeld.

Notities worden NOOIT op de pagina afgedrukt. In dat bestand zit geen enkele front-endhook en een test dwingt dat af. Notities zijn intern gesprek; een bezoeker die ze ziet, zou erger zijn dan een kapotte lay-out.

Een notitie is gekoppeld aan de identiteit van het blok. Een blok dupliceren geeft de kopie een NIEUWE identiteit, dus die erft de notitie niet — en als bijkomend voordeel krijgt ze haar eigen CSS-scope.

Notities zitten in de eigen gegevens van het bericht: verwijder het bericht en de notities gaan mee, zonder verweesde rijen achter te laten.

AI in de editor — met uw eigen sleutel

Schrijven, herschrijven, inkorten, alt-tekst voor afbeeldingen genereren en vertalen. Anthropic en OpenAI worden ondersteund.

U voert UW EIGEN API-sleutel in en het verzoek gaat van uw site RECHTSTREEKS naar de aanbieder. Uw tekst bereikt ons nooit; het quotum en de rekening blijven bij u. We hebben geen eigen clouddienst gebouwd: uw tekst zou dan via onze servers lopen en de verantwoordelijkheid voor de gegevens zou de onze worden.

De sleutel bereikt de browser nooit — het verzoek wordt vanaf de server gedaan. Hij wordt ook door geen enkel eindpunt teruggegeven; zelfs het instellingenformulier drukt de waarde niet terug af.

We versleutelen de sleutel NIET, en we zeggen dat gewoon: in WordPress moet de versleutelingssleutel op dezelfde server staan, dus een aanvaller met databasetoegang krijgt beide. Hem 'versleuteld' noemen zou een bescherming beloven die niet bestaat.

Het resultaat wordt niet meteen in het blok geschreven; het komt binnen als suggestie en u past het toe. Dat is onze echte verdediging tegen een zin die diep in uw inhoud verstopt zit en als instructie wordt gelezen — een mens keurt het goed.

Het theme.json van het thema uitlezen

Een blokthema verklaart zijn palet en typografie al in theme.json. MevvBlocks kan dat bestand lezen en gebruiken om de lege plekken in zijn eigen sitepalet te vullen, zodat de kleuren die je in een blok kiest de kleuren zijn die het thema al gebruikt, in plaats van een tweede, concurrerende set.

De brug is eenrichtingsverkeer en blijft dat. Er wordt nooit iets teruggeschreven naar theme.json. Een plugin die het eigen bestand van het thema bewerkt, laat je achter met een bestand dat de thema-update zal overschrijven — zonder manier om te bepalen welk van de twee klopte. Bovendien vult het alleen plekken die je zelf leeg hebt gelaten: een kleur die je met de hand instelt, wordt nooit vervangen.

Het staat uit totdat je het aanzet, want een site die al een palet heeft, wil niet dat dit stilletjes naar dat van het thema wordt omgezet.

Het megapaneel

Een submenu kan openen als een paneel over de volle breedte met tot vier kolommen, in plaats van een smalle vervolgkeuzelijst. Het is geen nieuw blok — het is een instelling op het navigatieblok dat je al gebruikt, dus het menu behoudt zijn markup, zijn toetsenbordgedrag en zijn mobiele lay-out.

Zet het paneel aan voor een menu-item zonder submenu en de toegankelijkheidscontrole meldt dat. Een leeg paneel is geen klein cosmetisch probleem: het is een bedieningselement dat zich aankondigt bij een schermlezer en vervolgens niets bevat.

Een eerste conceptversie van een pagina, vanuit een zin

Beschrijf de pagina die je wilt en het model kiest secties uit de eigen patroonbibliotheek van de plugin. Het schrijft nooit markup: het geeft een lijst met sectiesleutels terug, en MevvBlocks rendert die secties zelf. Wat op de pagina terechtkomt zijn dus gewone blokken die je kunt bewerken, geen gegenereerde HTML die je moet opschonen.

Een sectiesleutel die het model verzint, bestaat niet in de bibliotheek, dus wordt hij weggelaten — en het scherm vertelt je dat hij is weggelaten in plaats van stilletjes een kortere pagina te produceren.
De pagina wordt altijd als concept aangemaakt. Er is geen codepad dat hem publiceert.
Het gebruikt dezelfde sleutel die je voor de AI-tools van de editor hebt ingevoerd: je eigen Anthropic- of OpenAI-sleutel, opgeslagen op je site, waarbij het verzoek rechtstreeks van je server naar de provider gaat.

Free en Pro

De gratis editie is het hele product: honderdzeven van de honderdtien blokken, de acht blokstijlen, themasjablonen, de raster- en loopbouwer, de formuliermotor met zijn inzendingenopslag, het nieuwsbriefformulier, dynamische tekst inclusief ACF-velden, het menu, zoeken, pop-ups, de patronenbibliotheek, blokvoorinstellingen, het globale palet, beeldoptimalisatie, blokcaching, sitebrede eigen code, editornotities, het Core Web Vitals-scherm en de toegankelijkheidsaudit.

Pro voegt bewerkingsmogelijkheden toe, geen uitvoer:

Breekpunten — de tabbladen desktop / tablet / mobiel, met minimale hoogte, inhoudsbreedte, breedte en de vier opvulwaarden per breekpunt.
Eigen CSS per blok, waarbij het token selector voor dat blok zelf staat.
Formulierextra's — voorwaardelijke velden, een automatisch antwoord aan de afzender, een webhook en een veld voor bestandsupload.
CSV-export van formulierinzendingen.
Drie blokken — de inhoudswisselaar met zijn panelen, het portfolio met een taxonomiefilter, en de Lottie-insluiting. Ook hun rendering controleert de licentie nooit: een pagina die ze al bevat blijft ze afdrukken.

De panelen voor breekpunten en eigen CSS verschijnen vandaag op de kernblokken — Container, Titel, Tekst, Knop, Scheidingsteken, Afbeelding, Testimonial, Pictogram, Pictogramvak, Pictogramlijst, Shortcode, Formulier, Producten en Productcategorieën. Verschillende instellingen per breekpunt zijn gratis waar ze bestaan: het aantal kolommen van het raster op tablet en mobiel, de hamburgerdrempel van het menu, de mobiele positie van het afbeeldingsvak en de apparaatkeuze van de plakkende positie.

Wanneer een licentie verloopt of ontbreekt:

Uw site ziet er precies hetzelfde uit. Elke opgeslagen tablet- en mobielwaarde wordt nog steeds afgedrukt, en elke eigen CSS-regel per blok ook. Dit is geen belofte maar een architectuurregel: geen enkel bestand op het renderpad vraagt naar de licentie, en een test controleert dat bij elke release.
Formulieren blijven inzenden, blijven opslaan en blijven mail versturen.
Bestaande pop-ups blijven verschijnen.
Wat u verliest, zijn de Pro-panelen in de editor — en alleen die.

Zijn onze servers onbereikbaar, dan blijft een actieve licentie zeven dagen werken. Een installatie die zich nooit met succes heeft geverifieerd, krijgt helemaal geen respijt: ons adres blokkeren is geen manier om Pro te krijgen.

Wanneer iets niet werkt

“De formuliersessie is verlopen.”: De gecachte kopie van die pagina is ouder dan zeven dagen, of de beveiligingssleutels van uw site zijn vervangen. Leeg de paginacache.
Het formulier verstuurt geen mail: Controleer eerst de lijst met inzendingen — het record wordt vóór de mail weggeschreven, dus staat het er, dan werkte het formulier en de bezorging niet. Controleer daarna het ontvangeradres en de mailinstellingen van uw site.
De pagina ziet er goed uit in de editor en verkeerd op de front-end: De editorvoorbeeldweergave is van huis uit een benadering; zie hierboven. De front-end is de waarheid. Draagt een blok tablet- of mobielwaarden, dan drukt de editor daarover een melding af.
Een blok zegt dat het ongeldig is wanneer ik het probeer te bewerken: Historisch overkwam dit blokken die op de server geregistreerd waren maar ontbraken in het editorscript — ze werden perfect afgedrukt en faalden pas bij het openen voor bewerking. Een test beschermt daar nu tegen; ziet u het toch, meld dan de bloknaam.
De aftelklok toont de verkeerde tijd: De markup draagt een absoluut doelmoment, nooit 'nog X seconden', zodat een gecachte pagina die niet kan bevriezen. Het blok corrigeert zichzelf tegen de serverklok; wordt dat verzoek geblokkeerd, dan valt het terug op de klok van de bezoeker in plaats van te falen.
Het koptekst- of voettekstsjabloon verschijnt niet: Uw thema heeft geen recept. Alleen Astra en GeneratePress kunnen worden opgetild; het scherm waarschuwt u. De andere sjabloontypen werken op elk thema.
Er verschenen twee kopteksten: Zowel MevvBlocks als MevvBridge produceert er een. MevvBlocks neemt de plek met opzet het eerst — laat de koptekst aan één van beide over.
Containers zijn breder of smaller dan ingesteld: Een themaregel wint op specificiteit. Vooral Astra stijlt zijn afstammelingen sterk. Voor de gemeten gevallen is dit opgelost door de specificiteit te verhogen in plaats van !important te gebruiken; stuit u op een nieuw geval, zeg dan welk thema.
Een gepubliceerd bericht verschijnt niet in een raster: Dat hoort wel. Het raster cachet alleen de bericht-id's en elk opgeslagen bericht maakt de cache ongeldig. Blijft het zo, controleer dan of het berichttype en de sortering zijn wat u verwacht.

Updates

Updates komen via WordPress zelf. De plugin vraagt onze winkel of er een nieuwere versie bestaat en geeft het antwoord door aan WordPress’ eigen updatestroom, zodat een nieuwe versie op het pluginscherm verschijnt met een gewone Bijwerken-knop in plaats van te wachten tot iemand handmatig een zip ophaalt. In de gratis editie draagt dat verzoek alleen de pakketnaam en de geïnstalleerde versie — geen siteadres, geen e-mailadres, geen licentiesleutel en geen plugin-inventaris. Omdat niets erin u identificeert, rust het vertrouwen op de handtekening: het antwoord is ondertekend met onze Ed25519-sleutel, en een antwoord dat niet is ondertekend, verkeerd is ondertekend, opnieuw is afgespeeld vanaf een oud tijdstempel of de download naar een andere host dan de onze wijst, wordt weggegooid zonder de site aan te raken.

Grenzen

De voorvertoning in de editor klopt voor de opmaak, niet voor alles. Het canvas drukt dezelfde CSS af als de voorkant, dus witruimte, achtergrond, randen, typografie, transformaties en positie komen overeen. Wat nog verschilt, is elke regel die op de opmaak binnen een blok is geschreven, want daar tekent het blok zijn eigen bewerkingselementen.
Sjablonen voor koptekst en voettekst werken alleen bij Astra en GeneratePress. Elk ander thema krijgt niets, plus een waarschuwing — zwijgen zou twee kopteksten betekenen.
De kaart is een OpenStreetMap-embed. Eén marker, geen eigen markerafbeelding, geen kaartstijl, geen routebeschrijving. Geen API-sleutel, geen factureringsaccount en geen sleutel in de broncode van uw pagina.
Het portfolio heeft geen modaal venster en geen paginering. Kaarten, een filter en een link naar het archief — dat is het hele blok.
De sociale feed heeft geen API-adapter. Het is een lijst met links die je met de hand kiest; er wordt niets van enig netwerk opgehaald, en er wordt geen token opgeslagen.
Er zijn geen animaties die aan het scrollen hangen en geen regel die voorkomt dat twee effecten botsen. Binnenkomst-, parallax- en zweefeffecten bestaan, en ze zijn allemaal stil bij minder beweging.
Het taartdiagram animeert niet, en het is niet interactief: de waarden worden ernaast als lijst afgedrukt in plaats van bij zweven getoond.
Geen toegankelijkheidsoverlay. Alleen meten en melden.
Geen CAPTCHA.
Geen live zoekfunctie. Een verzoek per toetsaanslag is een afhankelijkheid en een oppervlak voor snelheidslimieten.
De aftelklok gebruikt de tijdzone van de site, niet die van de bezoeker. Een campagne eindigt wereldwijd op één moment.
Het menu biedt twee breakpoints, geen vrije pixelwaarde, en heeft geen fly-out- of off-canvasmodus — een schuivend paneel met focusbeheer is precies waar het pop-upblok voor is.
Rasterkaarten kunnen geen h1 zijn, en het nesten van loops houdt op bij twee niveaus.
De pictogramset bestaat uit 94 lijnpictogrammen, allemaal getekend in één vak van 24 pixels. Er is geen pictogramlettertype en geen manier om je eigen aan de kiezer toe te voegen; een eigen SVG gaat er via het blok Afbeelding of SVG-animatie in.
Dynamische inhoud komt uit een vaste lijst van bronnen. Er is geen veld 'voer deze expressie uit': dat zou code-uitvoering geven aan iedereen die een pagina mag bewerken.
Globale kleur- en typografiesets kunnen niet worden verwijderd, alleen leeggemaakt.
Productkaarten worden getekend door WooCommerce, niet door ons, zodat uw thema en eventuele hooks van derden blijven werken.
De interface wordt in elf talen geleverd. Turks, Engels, Spaans, Duits, Frans, Portugees, Italiaans, Nederlands, Japans, Russisch en Pools, plus landvarianten zoals es_MX en pt_PT. Elke andere taal valt terug op het Engels.
Het Web Vitals-venster wordt elke 28 dagen gereset; het schuift niet mee. Een schuivend venster zou dagbuckets en achtentwintig keer zoveel opslag vergen. Het scherm toont wanneer het huidige venster begon.
Verwijderen haalt de inzendingentabel en de instellingen niet weg. Uw blokinhoud blijft hoe dan ook leesbaar — het is standaardmarkup in post_content.

Er wordt nergens een JavaScript- of CSS-bibliotheek van derden geladen. Niet voor de slider, niet voor de accordeon, niet voor beweging, niet voor de kaart. Elk daarvan zou tussen de veertig en honderd kilobyte hebben gekost op elke pagina die het gebruikte.

Honderd pixels op desktop, veertig op mobiel — in de blokeditor.