MevvBlocks — Documentazione Mevvsoft

Installazione

MevvBlocks richiede WordPress 6.0 o successivo e PHP 8.1 o successivo. Non c’è nessun’altra dipendenza: nessuna libreria esterna, nessun carattere dal server di qualcun altro, nessun passaggio di build.

Carichi e attivi il plugin.
Apra una pagina nell’editor a blocchi e aggiunga il blocco Contenitore.
Vi inserisca i blocchi che desidera. Li trova nella categoria Design.
Gestisca il resto dal menu MevvBlocks nella barra laterale di amministrazione.

WooCommerce è facoltativo. Installarlo aggiunge due blocchi.
MevvBridge è facoltativo. Se arriva da Elementor, è MevvBlocks a rendere di nuovo modificabili quelle pagine.
MevvLegal è facoltativo. Se è presente, il blocco mappa consegna il proprio embed a MevvLegal così la mappa non viene caricata prima che il visitatore acconsenta.

Pro è un plugin separato installato accanto a quello gratuito, e dichiara il plugin gratuito come requisito obbligatorio. La Sua chiave di licenza si inserisce nella schermata Lisans (Licenza). Senza Pro, MevvBlocks non effettua alcuna richiesta ai nostri server.

Stile per dimensione di schermo — la lacuna che questo colma

I blocchi del core accettano un valore di spaziatura interna, un’altezza minima, un numero di colonne. Quel valore si applica su ogni schermo. Se una sezione ha bisogno di 100 pixel di spaziatura su desktop e 40 su mobile, il core non può esprimerlo — e quell’unica lacuna è la ragione tecnica più comune per cui si installa un page builder.

MevvBlocks memorizza tre valori invece di uno — desktop, tablet, mobile. Le soglie sono fisse:

Desktop: Nessuna media query — il valore di base.
Tablet: Si applica da 1024 pixel in giù.
Mobile: Si applica da 767 pixel in giù.

Gli stessi due numeri sono usati ovunque nel resto del plugin — la soglia del menu a panino, il numero di colonne della griglia. Un campo libero in pixel non è stato offerto di proposito: chi scegliesse 900 avrebbe il menu a panino a 900 mentre la spaziatura cambierebbe ancora a 1024, e due sistemi di breakpoint significano layout in contraddizione con sé stessi.

I valori risiedono negli attributi del blocco stesso, dentro post_content — non in una tabella personalizzata né nei post meta. Il CSS viene prodotto sul server, al momento della richiesta, e stampato come un piccolo blocco di stile accanto all’elemento a cui appartiene.

Perché non salvare il CSS con la pagina? Perché l’HTML salvato può portare un solo breakpoint. Il rendering al momento della richiesta è ciò che rende possibili i tre valori — ed è il motivo per cui una licenza scaduta non può mai oscurare una pagina pubblicata: su quel percorso non c’è un solo controllo di licenza.

L’anteprima dell’editor — che cosa mostra e che cosa ancora non può

Questa pagina diceva che l’anteprima era un’approssimazione. Non lo è più, per quanto riguarda il layout. L’area di lavoro ora chiede al server lo stesso CSS che la pagina stamperà e lo applica alle stesse classi contenitore che usa il front-end.

Ciò che oggi è accurato nell’area di lavoro: layout del contenitore (direzione, colonne, spaziatura tra gli elementi, allineamento), spaziatura interna, margine, sfondo, bordo, raggio, ombra, altezza minima, tipografia, trasformazioni, maschere e posizionamento — con i valori per tablet e mobile che si applicano man mano che ridimensiona, perché l’area di lavoro è un iframe e le media query funzionano al suo interno.

Perché il CSS arriva dal server invece di essere ricostruito in JavaScript: c’è un solo motore di stili, e una seconda copia finirebbe per divergere dalla prima. Il giorno in cui qualcuno aggiungesse un’impostazione all’uno dimenticando l’altro, l’editor sarebbe sbagliato pur dichiarandosi esatto — peggio della vecchia, onesta approssimazione.

Ciò che ancora non è esatto: le regole che colpiscono il markup dentro un blocco. Nella tela un blocco disegna i propri comandi di modifica, quindi un selettore scritto sulla struttura del front-end non ha nulla da agganciare. Chiudere quel divario significa rendere il markup di modifica identico al markup pubblicato per ognuno dei centodieci blocchi; è lavoro vero e non è fatto.

Misurato, non asserito: la stessa sezione è stata renderizzata due volte con lo stesso foglio di stile — una come la stampa il front-end, una come la costruisce l’area di lavoro — e sedici proprietà di layout sono state confrontate su ogni elemento. La vecchia area di lavoro differiva in ventiquattro di esse. Ora sono zero su sessantaquattro. Lo strumento che lo misura è nel codice sorgente del plugin (tools/onizleme-esitlik.js), ed è stato prima puntato sul vecchio markup per dimostrare che non era cieco.

I blocchi

Centodieci blocchi, o ottantasette senza WooCommerce. Sono tutti nell'edizione gratuita tranne i tre indicati come Pro qui sotto; nessun altro blocco è riservato al Pro. Vivono nella categoria Design dell'inseritore, e le chiavi di impostazione che ciascuno salva sono elencate in docs/BLOK-AYARLARI.md dentro il plugin — un file generato, quindi non può allontanarsi dal codice.

I gruppi qui sotto sono gli stessi cinque che il plugin usa per le proprie pagine vetrina.

Testo e azione: Contenitore, Titolo, Testo, Pulsante, Divisore, Spaziatore, Ancora, Immagine, Shortcode, Citazione, Checklist, Codice, Invito all'azione, Icona, Riquadro icona, Elenco di icone, Titolo animato, Avviso, Interruttore, Schede annidate con Pannelli scheda, Schede, Fisarmonica, FAQ, Passi
Dati e prezzi: Contatore, Barra di avanzamento, Barra dati, Grafico a torta, Riquadro numerico, Tabella prezzi, Listino prezzi, Testimonianza, Valutazione a stelle, Carosello di testimonianze, Membro del team, Conto alla rovescia, Badge, Striscia di loghi, Selettore di contenuto e Pannello del selettore (Pro)
Portfolio e mappa: Cronologia, Tabella, Confronto, Indice dei contenuti, Mappa, Griglia di contenuti, Mappa del sito, Portfolio (Pro)
Media e moduli: Video, Audio, Playlist, Galleria, Prima / Dopo, Riquadro girevole, Banner, Punto attivo, Suggerimento, Feed social, Icone social, Condivisione social, Slider, Diapositive, Testo su un tracciato, Pannello laterale, Pulsanti di contatto, Barra degli annunci, Avanzamento di lettura, Tempo di lettura, Torna su, Modulo, Modulo di accesso, Modulo di registrazione, Newsletter, Modulo di ricerca, Menu di navigazione, Lottie (Pro)
Design e movimento: Animazione SVG, Riquadro immagine, Copyright, e gli otto stili di blocco descritti qui sotto. Il movimento non è un blocco: un pannello con animazione d'ingresso, posizione fissa e parallasse viene aggiunto a ogni blocco MevvBlocks.
Modelli di sito e di tema: Logo del sito, Titolo del sito, Motto del sito, Titolo della pagina, Breadcrumb, Informazioni sull'articolo, Riquadro autore, Commenti, Precedente / Successivo, Titolo dell'archivio, Descrizione dell'archivio
WooCommerce (23): Prodotti, Categorie di prodotto, Immagini prodotto, Titolo prodotto, Prezzo prodotto, Valutazione prodotto, Descrizione breve, Descrizione prodotto, Meta prodotto, Informazioni aggiuntive, Schede prodotto, Aggiungi al carrello, Stato della giacenza, Prodotti correlati, Upsell, Vendite incrociate, Mini carrello, Carrello, Pagamento, Il mio account, Tracciamento ordine, Ordinamento prodotti, Conteggio risultati — aggiunti solo quando WooCommerce è attivo

Una nota su quelli aggiunti più di recente, perché ognuno porta con sé una decisione visibile sulla pagina:

Interruttore: Un <details> nativo che accoglie qualsiasi blocco al suo interno e può essere annidato dentro un altro interruttore. Impostazioni: baslik (il testo del riepilogo) e acik (aperto al caricamento). Non serve alcun id, quindi due interruttori sulla stessa pagina non possono entrare in conflitto.
Schede annidate e Pannello scheda: Un gruppo di schede i cui pannelli sono normali blocchi interni, quindi un pannello può contenere qualsiasi cosa — incluso un altro gruppo di schede. Impostazioni del gruppo: yon (orizzontale o verticale) e acik (la scheda aperta al caricamento); ogni pannello ha un baslik. La barra delle schede segue il pattern ARIA delle schede con i tasti freccia, Home e Fine, e gli id sono resi unici per gruppo così l'annidamento è sicuro. Solo i pannelli figli diretti appartengono a un gruppo. Una barra verticale diventa orizzontale su uno schermo stretto.
Grafico a torta: A torta o ad anello (tur), righe scritte come “etichetta | valore | colore facoltativo” in satirlar, più un baslik. Il cerchio è disegnato con stroke-dasharray e porta role="img"; gli stessi valori sono stampati sotto come elenco testuale con le loro percentuali, perché un grafico che nessuno può leggere è una decorazione. Non si anima.
Playlist: Audio o video (tur), con un baslik e un ripetitore di tracce: dosya, baslik, sure, poster e altyazi (una traccia WebVTT). Ogni traccia è stampata come un normale collegamento, quindi l'elenco è utilizzabile prima che parta qualsiasi script; con lo script, scegliere una traccia sostituisce la sorgente sul posto.
Feed social: Post che scegli a mano, disposti in sutun colonne. Ogni voce ha adres, metin, tarih e gorsel. Non c'è alcun adattatore API, nessun token e nessuna richiesta a qualsiasi rete — questo è un elenco di collegamenti, e il plugin lo dice invece di lasciar intendere un feed dal vivo.
Suggerimento: metin è la parola nella tua frase, ipucu la spiegazione, konum il lato da cui si apre. È un vero pulsante con role="tooltip" sulla bolla: passaggio del mouse e focus sono gestiti in CSS, il tocco nello script, ed Esc la chiude. La bolla è nascosta con visibility invece che rimossa, così la relazione described-by resta nell'albero di accessibilità.
Animazione SVG: dosya è l'SVG, durgun un fotogramma fermo, alt il testo alternativo e genislik la larghezza. Il file è reso dentro un <img>, deliberatamente: in quel modo uno script dentro un SVG non può raggiungere la tua pagina. Un <picture> sostituisce il fotogramma fermo quando il visitatore ha chiesto movimento ridotto.
Avviso, Titolo animato, Cronologia, Tabella, Riquadro girevole: All'avviso si può dare un pulsante di chiusura (kapatilabilir) e sposta il focus sull'elemento successivo quando viene chiuso; tipo e titolo sono modificabili. Il titolo animato sceglie il proprio tag (baslik_etiketi, h1–h6, p, div o span) e può digitare le sue parole (etki) — la prima parola è sempre stampata, ed entrambi gli effetti si fermano in caso di movimento ridotto. La cronologia accetta un layout orizzontale (yon) che torna verticale su uno schermo stretto senza cambiare l'ordine di lettura. Le celle di intestazione della tabella portano scope="col" e una cella vuota stampa un trattino con un'etichetta per lo screen reader. Il riquadro girevole si gira al tocco, con Invio e Spazio, ed Esc lo rigira indietro.
Selettore di contenuto (Pro): Una barra di schede — di solito mensile e annuale — sopra Pannelli del selettore che contengono qualsiasi blocco. Impostazioni: etiket (il nome accessibile della barra), rozet (un badge, ad esempio un risparmio) e acik; ogni pannello ha un baslik.
Portfolio (Pro): gonderi_turu, taksonomi, terimler, adet, sutun, suzgec (mostra il filtro) e arsiv_bag (collegamento all'archivio). Le schede sono rese sul server e il filtro si limita a nasconderle e mostrarle nel browser, quindi nessuna richiesta lascia la pagina. Non c'è finestra modale né paginazione.
Lottie (Pro): adres, alt, baslik, durgun (un fotogramma fermo), onay e onay_metni. LottieFiles è un servizio esterno, quindi il blocco segue lo stesso percorso di consenso della mappa e del video: mostra l'immagine ferma finché il visitatore non acconsente, e in caso di movimento ridotto non parte mai. La libreria del player continua a non essere inclusa.

Nulla qui è nascosto quando il JavaScript non si carica. Le schede mostrano ogni pannello, l'interruttore e la fisarmonica sono elementi details nativi, lo slider scorre, la playlist è un elenco di collegamenti, e le frecce sono stampate nascoste finché lo script non può guidarle — mostrare un pulsante che non fa nulla è mostrare un'interfaccia rotta. Contenuto nascosto è contenuto inaccessibile. Pulsanti e collegamenti d'azione hanno un'area bersaglio minima di 44 pixel.

Stili di blocco

Otto stili sono registrati tramite register_block_style di WordPress, quindi compaiono nel pannello Stili che l'editor mostra già per un blocco selezionato. Non c'è nessun controllo nuovo da imparare, e la scelta è salvata come classe is-style-… nel tuo markup invece che come impostazione in una nostra tabella.

Sovrapposizione a gradiente: Contenitore, Immagine, Riquadro immagine, Banner, Slider
Scala di grigi, colore al passaggio del mouse: Immagine, Riquadro immagine, Membro del team, Striscia di loghi, Galleria
Sfocatura fino al passaggio del mouse: Immagine, Riquadro immagine, Banner
Maschera circolare / Maschera arrotondata: Immagine, Riquadro immagine, Membro del team — e, per quella arrotondata, Banner e Galleria
Sollevamento al passaggio del mouse: Contenitore, Riquadro icona, Riquadro immagine, Tabella prezzi, Membro del team, Testimonianza, Invito all'azione, Banner
Zoom dell'immagine al passaggio del mouse: Immagine, Riquadro immagine, Banner, Galleria
Inclinazione al passaggio del mouse: Riquadro icona, Riquadro immagine, Banner, Riquadro numerico

Ogni trasformazione al passaggio del mouse viene disattivata quando il sistema del visitatore chiede movimento ridotto. Applicare uno stile richiede che il contenitore del blocco porti la classe, ed è per questo che il livello di rendering ora ripulisce l'attributo className del core dal markup interno e lo stampa invece sul contenitore; le pagine convertite con MevvBridge non hanno mai portato quell'attributo, quindi non sono interessate.

Il blocco newsletter

Un campo indirizzo, un campo nome facoltativo (ad_alani), una casella di consenso e un pulsante di invio. I testi sono tuoi: baslik, metin, dugme_metni, onay_metni e basari_metni.

È un semplice POST firmato con un HMAC, non con un nonce. Un nonce è legato alla sessione e a dodici ore; dietro una cache di pagina intera un nonce scaduto uccide il modulo in silenzio. La firma è la stessa che usa il motore dei moduli.
Un campo honeypot viene inghiottito in silenzio. Mostrare un errore insegnerebbe al bot successivo a evitare la trappola.
Si applica un limite di frequenza per indirizzo.
La regola di consenso è letta dal contenuto stesso del blocco, mai dal modulo inviato — leggerla da un campo nascosto metterebbe l'impostazione nelle mani del visitatore.
Gli indirizzi sono salvati con gli altri invii dei moduli, sotto una chiave bulten:. Non c'è nessuna nostra lista e nessuna richiesta a terzi.

Per consegnare un indirizzo confermato a ciò che già usi, aggancia l'azione:

add_action( 'mevvblocks_newsletter_subscribe', function ( $eposta, $ad, $blok_kimligi ) {
    // $eposta       : l'indirizzo confermato
    // $ad           : il nome, o una stringa vuota quando il campo è disattivato
    // $blok_kimligi : da quale blocco newsletter proviene
}, 10, 3 );

L'azione scatta dopo che l'indirizzo è stato validato e salvato, quindi un errore nel tuo handler non può far perdere l'iscrizione.

Testo dinamico e campi personalizzati

I blocchi Titolo, Testo, Pulsante e Immagine possono prendere il proprio valore dall'articolo invece che da ciò che hai scritto. Il pannello si chiama Dinamico, e le fonti sono un elenco fisso: titolo dell'articolo, riassunto, autore, data, prima categoria, tag, numero di commenti, titolo dell'archivio, termine cercato, nome e motto del sito, l'anno corrente, il prezzo WooCommerce, lo SKU e la giacenza — e un campo personalizzato per chiave.

Con Advanced Custom Fields attivo il campo è letto tramite get_field(), così ottieni il valore formattato invece di quello grezzo. Senza ACF si ripiega sui semplici metadati dell'articolo, e in nessuno dei due casi qualcosa si rompe.
Le chiavi che iniziano con un trattino basso vengono rifiutate. Sono i campi interni di WordPress; stamparli farebbe trapelare ciò che la pagina non ha mai inteso mostrare.
Non esiste alcun campo “esegui questa espressione”. Consegnerebbe l'esecuzione di codice a chiunque possa modificare una pagina.

Mentre modifichi il template di una scheda di loop non c'è contesto d'articolo, quindi un binding dinamico mostra il suo valore statico di ripiego invece di un valore. Quello è il template, non la pagina.

Griglia di contenuti e costruttore di loop

Il blocco Griglia contenuti interroga articoli, pagine o prodotti e li dispone. La paginazione è fatta di semplici link, quindi funziona anche con JavaScript disattivato.

L’ordinamento è un elenco chiuso — data, modifica, titolo, ordine di menu, casuale — perché il valore arriva fino al database.
I titoli delle schede vanno da h2 a h6. L’h1 non viene offerto: una griglia di schede su una pagina che ha già un h1 romperebbe l’ordine dei titoli.
Un link per scheda. Rendere link l’immagine, il titolo e il “leggi di più” significa che uno screen reader annuncia la stessa destinazione tre volte.
La griglia mette in cache gli id degli articoli che ha trovato, mai l’HTML renderizzato, e la cache viene invalidata al salvataggio di qualsiasi articolo — così “ho pubblicato un articolo e non compare” non può succedere.

Il costruttore di loop Le permette di disegnare la scheda da sé anziché usare quella integrata. Crea un template di tipo Scheda loop, lo costruisce con blocchi normali e collegamenti dinamici, e lo sceglie nelle impostazioni della griglia.

Mentre modifica un modello di scheda non c’è contesto di articolo, quindi le associazioni dinamiche mostrano i loro valori statici di ripiego. E se il modello è vuoto, eliminato, lasciato in bozza o rimanda a sé stesso, la griglia ripiega sulla scheda integrata invece di non stampare nulla. L’annidamento dei loop è limitato a due livelli.

Il motore per i moduli

Sedici tipi di campo, con validazione lato server. Il modulo è l’unica parte di una pagina che fa davvero qualcosa, quindi funziona senza JavaScript: un invio POST semplice riceve la stessa validazione e gli stessi messaggi di uno con script.

Tipi di campo: Testo, E-mail, Telefono, Indirizzo (URL), Numero, Data, Ora, Nascosto, Testo lungo, Menu a discesa, Elenco a scelta multipla, Scelta singola, Caselle di spunta multiple, Casella di controllo, Testo del consenso (KVKK) e Titolo secondario. Pro aggiunge un campo per il caricamento di file.
Dove vanno gli invii: In una tabella dedicata e anche via e-mail. Il record viene scritto per primo e la posta inviata dopo, perché la consegna della posta fallisce assai più spesso di una scrittura sul database.
Leggerli: MevvBlocks → Invii dei moduli. Pro vi aggiunge un’esportazione CSV.
E-mail di notifica: Il mittente è il Suo sito, mai il visitatore. Usare l’indirizzo del visitatore come mittente è il motivo più comune per cui la posta di un modulo non arriva mai — SPF e DMARC la respingono. Il suo indirizzo diventa invece il Reply-To.

Lo spam è gestito con tre livelli e nessun CAPTCHA: una firma che non dipende da una sessione, un tempo minimo di compilazione e un campo honeypot. Un invio che riempie l’honeypot viene accettato in silenzio e scartato — mostrare un errore direbbe al bot di essere stato scoperto, e al tentativo successivo salterebbe quel campo.

Perché una firma anziché un nonce di WordPress? Un nonce è legato a una sessione e a una finestra di dodici ore. Su un sito con cache lo stesso HTML viene servito per ore o giorni, il nonce al suo interno è scaduto da un pezzo, e il modulo smette di funzionare in silenzio. È il guasto sul campo più comune dei plugin per moduli. La firma usata qui è valida sette giorni e non dipende da chi sta navigando.

L’indirizzo IP di un invio non viene mai memorizzato in forma leggibile — solo un digest, con il sale della chiave del Suo sito, così i record di due siti diversi non possono essere messi in relazione tra loro.

L’archiviazione degli invii non è legata alla licenza. Se lo fosse, il giorno in cui un pagamento scade sarebbe il giorno in cui il cliente comincia a perdere dati.

Modelli di tema

Sette tipi di template, costruiti nell’editor di WordPress che già usa — Header, Footer, Contenuto singolo, Archivio, Risultati della ricerca, Non trovato (404) e Scheda loop. Un secondo editor sarebbe un’altra cosa da tenere al passo con il core di WordPress.

Il tipo e le condizioni stanno in un semplice riquadro laterale, non in un pannello React — un riquadro classico si salva anche con JavaScript disattivato, e non si rompe quando cambia l’API dell’editor.

Condizioni: Intero sito, home page, tipo di post, categoria o un singolo contenuto. Le lasci vuote per l’intero sito.
Quando ne corrispondono più d’una: Vince la condizione più ristretta.
Condizioni malformate: Vengono scartate al salvataggio e memorizzate vuote, invece di essere conservate come testo non valido che farebbe sì che il modello non compaia mai, in silenzio.

I modelli di intestazione e piè di pagina vengono applicati solo su Astra e GeneratePress. Se il Suo tema non ha una ricetta, non vengono stampati affatto e la schermata lo dice — innestare un’intestazione su un tema che non riusciamo a sollevare significa due intestazioni, garantito. I modelli di contenuto singolo, archivio, ricerca e 404 continuano a funzionare su qualsiasi tema, perché sostituiscono il loop e lasciano al loro posto l’intestazione e il piè di pagina del tema.

Un template Scheda loop non si posiziona mai da solo da nessuna parte. È un blocco griglia a sceglierlo.

Libreria di pattern e preset dei blocchi

Settantasei pattern pronti: sessantaquattro sezioni e dodici pagine complete. Sono registrati come normali pattern di WordPress, quindi li inserite come già sapete — il pulsante +, la scheda Pattern, poi la categoria MevvBlocks sections o MevvBlocks pages. Le sezioni attraversano le famiglie hero, funzionalità, testimonianza, FAQ, prezzi, invito all’azione, contatti, chi siamo, fascia sopra il piè di pagina e statistiche; le pagine aggiungono tre varianti di home page, una pagina FAQ, una pagina campagna, una pagina storia e una pagina di ringraziamento.

Per questo non è stata scritta alcuna finestra modale su misura. Lo strumento di inserimento del core offre già anteprima, ricerca, navigazione da tastiera e traduzione gratis, e ciò che inserisce è normale markup a blocchi — nulla a cui restare vincolati.

Nove di questi richiedono WooCommerce: otto sezioni prodotto e categoria e una pagina di atterraggio del negozio. Vivono in un file proprio e vengono registrati solo mentre WooCommerce è attivo, così a un sito senza negozio non viene mai proposto un pattern che inserirebbe un blocco che non sa disegnare. I prodotti al loro interno provengono da una query — nuovi, in evidenza, in offerta, più venduti — e non da un id di categoria scritto nel pattern, perché lo stesso id finisce su una categoria vuota o semplicemente sbagliata in un altro negozio.

I pattern arrivano senza immagini. Prendere immagini da altrove è una questione di diritto d’autore, una questione di privacy, e lega l’aspetto della Sua pagina al fatto che il server di qualcun altro resti in piedi. I blocchi immagine sono al loro posto con il testo alternativo già compilato; scelga le Sue.

I preset dei blocchi salvano sotto un nome le impostazioni di aspetto di un blocco e le applicano a un altro blocco dello stesso tipo. Il contenuto deliberatamente non viene salvato — testo, link, immagini e voci di elenco vengono rimossi, così applicare un preset non sovrascrive mai ciò che ha scritto.

I pattern non vengono registrati affatto sul front-end. Generare il loro markup a ogni visualizzazione di pagina è stato misurato in 109 KB e 3,59 ms — pagati per nulla, dato che nessuno inserisce un pattern mentre legge.

Popup

Si costruiscono nell’editor a blocchi come qualsiasi altra cosa; gli attivatori, le condizioni e la frequenza si trovano nella barra laterale della stessa schermata. Si gestiscono in MevvBlocks → Popup.

Attivatori: Al caricamento della pagina con un ritardo, a una percentuale di scorrimento, all’intenzione di uscita, a un clic che corrisponde a un selettore CSS, oppure dopo un periodo di tempo attivo. Il timer di attività si ferma mentre la scheda è in secondo piano.
Condizioni: Intero sito, home page, pagine specifiche, tipo di post o categoria; con accesso effettuato, senza accesso o tutti; e per dispositivo.
Frequenza: Ogni volta, una volta per sessione, oppure una volta ogni N giorni.
Aspetto: Posizione, larghezza, se il titolo è visibile, se il clic all’esterno lo chiude, e l’animazione di apertura.

Il contatore del “non mostrare più” resta nel browser del visitatore, non sul server. Contarlo lato server significherebbe coniare un’identità duratura per ogni visitatore solo per non mostrargli due volte un riquadro.

Il targeting per dispositivo lo decide il browser, non l’analisi dello user agent. Uno user agent non può distinguere in modo affidabile un tablet da un telefono, e dietro una cache a pagina intera servirebbe a tutti il dispositivo del primo visitatore. Se non viene selezionato alcun attivatore, il popup ripiega sul caricamento della pagina; se non viene selezionato alcun dispositivo, ripiega su tutti e tre — un popup che in silenzio non compare mai è peggio di uno che compare troppo spesso.

La palette del sito

Un’unica schermata per colori e tipografia, raggiungibile sia dal menu di MevvBlocks sia da Aspetto, perché è lì che la gente la cerca. Ogni voce mostra il proprio nome di variabile, e i blocchi fanno riferimento a quei nomi invece che a valori letterali.

È questo che permette a una pagina costruita prima del passaggio di adottare una nuova palette invece di perdere i propri riferimenti — i nomi delle variabili restano gli stessi che le Sue pagine già usano.

Non esiste l’eliminazione. Un colore o un set tipografico si può lasciare vuoto, ma rimuoverlo lascerebbe ogni blocco che vi faceva riferimento puntato sul nulla. Svuotare è reversibile; eliminare un riferimento no.

L’audit di accessibilità

MevvBlocks → Accessibilità analizza le Sue pagine, articoli e template pubblicati e segnala ciò che ogni blocco ha tralasciato: un’immagine senza testo alternativo, un titolo vuoto, un pulsante senza nome o senza destinazione, un ordine dei titoli interrotto, un contrasto troppo basso.

La stessa verifica è disponibile come pannello laterale mentre sta ancora modificando, ovvero dove correggere una segnalazione costa meno.

Questo deliberatamente non è un overlay. I livelli che innestano un “menu di accessibilità” su una pagina non risolvono nulla: un’immagine senza testo alternativo continua a non averlo, e un testo a basso contrasto resta illeggibile. Sostenere che “questo sito è accessibile” senza che sia vero è una posizione peggiore del non affermare nulla — siti che usano overlay sono stati citati in giudizio proprio per questo. Questo strumento misura e Glielo dice; la correzione spetta a Lei.

Il contrasto viene segnalato solo quando entrambi i colori sono davvero noti. Indovinare un colore ereditato produrrebbe avvisi su cui non si può intervenire.

Velocità — cache degli elementi e immagini

Due cose distinte, entrambe nell’edizione gratuita.

Cache degli elementi. L’output dei blocchi viene memorizzato invece di essere ricostruito a ogni richiesta. Misurato: tempo di rendering dei blocchi ridotto del 33–72%. Usa una cache di oggetti persistente (Redis, Memcached) quando c’è, e i transient quando non c’è.

Un blocco il cui output varia per visitatore, per query o per momento non viene mai memorizzato: moduli, accesso, registrazione, mini carrello, griglia prodotti, ricerca, carrello, checkout, il mio account, shortcode. Lo shortcode è in quell’elenco perché non sappiamo che cosa contiene — una volta abbiamo congelato un token di WPForms su un sito reale, e da allora la regola è applicata dal codice.

Ottimizzazione delle immagini. Accanto all’originale viene scritta una copia WebP (facoltativamente AVIF) di ogni immagine caricata; l’originale non viene mai toccato. Misurato: dal 39 al 78% più leggere. Un file che non si riduce non viene conservato — i PNG piccoli e piatti di solito crescono in WebP.

Le immagini vengono servite dentro un elemento <picture>: l’indirizzo di ogni formato è nell’HTML ed è il browser a scegliere. Decidere sul server in base all’intestazione Accept è stato scartato di proposito — quando lo stesso indirizzo varia per visitatore, ogni cache lungo il percorso può consegnare il file sbagliato alla persona sbagliata.

Se un altro plugin sta davvero facendo questo lavoro (LiteSpeed, ShortPixel, Imagify, Smush, EWWW, Optimole, Converter for Media), MevvBlocks si fa da parte da solo e spiega perché. La domanda non è “è installato?” ma “può davvero funzionare?”: LiteSpeed con l’ottimizzazione delle immagini attiva ma senza chiave cloud non fa proprio nulla.

Core Web Vitals — misurati sui Suoi visitatori

I Core Web Vitals sono dati di campo per definizione: misurati nei browser di visitatori reali e riportati come 75º percentile su una finestra di 28 giorni. Un’esecuzione di Lighthouse è un’altra cosa — una macchina, una rete, un momento. Sapere qual è quale è ciò che scioglie la confusione del “PageSpeed dice 98, Search Console dice rosso”.

La schermata Web Vitals mostra tre numeri per classe di dispositivo:

LCP: Quanto tempo impiega a comparire il contenuto principale. Buono è 2,5 secondi o meno.
CLS: Quanto si muove la pagina mentre si assesta. Buono è 0,1 o meno.
INP: Quanto tempo impiega la pagina a rispondere a un tocco o a un clic. Buono è 200 ms o meno.

Lo script di misurazione occupa circa un kilobyte e non carica alcuna libreria — il lavoro lo fa il PerformanceObserver del browser. Il campionamento è per impostazione predefinita il 10% delle visite e lo decide il browser, non il server: se decidesse il server, lo stesso URL produrrebbe due documenti HTML diversi e una cache a pagina intera servirebbe a tutti quello visto per primo.

Non viene raccolto nulla di personale: nessun IP, nessun cookie, nessun identificatore. Tre valori, una classe di dispositivo e il percorso della pagina, conservati sul Suo server come conteggi raggruppati. Nulla viene inviato da nessuna parte.

Sotto le cento rilevazioni la schermata non mostra alcun numero — dice quante ne ha. Un percentile ricavato da una dozzina di misure è rumore, e un numero sbagliato è peggio di nessun numero, perché qualcuno ci baserà una decisione. Il percentile viene letto da un istogramma, quindi è approssimato all’ampiezza dell’intervallo, e la schermata lo dichiara.

Trasformazioni e maschere

Qualsiasi blocco può essere traslato, ridimensionato, ruotato (su Z e in 3D X/Y), inclinato e capovolto — ciascuna cosa con valori distinti per desktop, tablet e mobile. Si possono impostare una trasformazione al passaggio del mouse separata e una durata della transizione.

Le maschere possono essere un cerchio, un triangolo, un esagono, una macchia, un fiore, una forma a mano libera o una Sua immagine, con controlli di dimensione, posizione e ripetizione.

Le forme sono incorporate nel CSS, non distribuite come file SVG separati. Un percorso di file sbagliato fa sparire una maschera in silenzio e nessuno vede il 404; dietro una CDN anche l’indirizzo della cartella del plugin può cambiare.

Codice personalizzato per l’intero sito

HTML, CSS e JavaScript possono essere collocati nell’head, all’inizio del body o alla fine: tag di verifica, frammenti di misurazione, piccole correzioni di stile. Posizione, priorità e una condizione di sessione sono configurabili.

Non esegue PHP. Mettere un esecutore di PHP dentro un page builder trasformerebbe il permesso di un designer nel permesso di eseguire codice sul server.

La capacità richiesta è unfiltered_html: chi non può inserire uno script grezzo in un articolo non può inserirlo nemmeno a livello di sito. Con MevvLegal installato, anche gli script di tracciamento inseriti qui restano trattenuti finché non viene dato il consenso ai cookie.

Blocchi WooCommerce

Ventitré blocchi: titolo prodotto, immagini, prezzo, aggiungi al carrello, valutazione, disponibilità, meta, descrizione breve, descrizione, schede dati, informazioni aggiuntive, prodotti correlati, upsell, cross-sell, carrello, checkout, il mio account, tracciamento ordine, ordinamento e conteggio risultati — più prodotti, categorie prodotto e un mini carrello.

Nessuno di essi ridisegna WooCommerce. Richiamano tutti le sue funzioni di modello e i suoi shortcode. Il Suo tema modifica quei modelli e i Suoi plugin vi si agganciano — spedizioni, rate, avvisi di disponibilità, tabelle taglie. Disegnare un markup nostro farebbe cadere tutto questo in silenzio.

Carrello, checkout, il mio account e tracciamento dell’ordine sono specifici per visitatore: la cache a pagina intera viene disattivata e non finiscono mai nella cache degli elementi. Se WooCommerce non è attivo, questi blocchi non vengono registrati né sul server né nell’editor.

Note dell’editor

Può fissare una nota su qualsiasi blocco: chi l’ha scritta, quando e se è risolta.

Le note non vengono MAI stampate nella pagina. In quel file non c’è un solo hook del front-end e un test lo impone. Le note sono conversazione interna; che un visitatore le veda sarebbe peggio di un layout rotto.

Una nota è legata all’identità del blocco. Duplicare un blocco dà alla copia una NUOVA identità, quindi non eredita la nota — e come vantaggio aggiuntivo ottiene un proprio ambito CSS.

Le note risiedono nei dati stessi dell’articolo: elimini l’articolo e le note se ne vanno con lui, senza lasciare righe orfane.

IA nell’editor — con la Sua chiave

Scrivere, riscrivere, accorciare, generare il testo alternativo delle immagini e tradurre. Sono supportati Anthropic e OpenAI.

Inserisce la SUA chiave API e la richiesta va dal Suo sito DIRETTAMENTE al provider. Il Suo testo non arriva mai da noi; la quota e la fattura restano Sue. Non abbiamo costruito un nostro servizio cloud: il Suo testo passerebbe dai nostri server e la responsabilità sui dati diventerebbe nostra.

La chiave non arriva mai al browser — la richiesta parte dal server. E non viene restituita da alcun endpoint; nemmeno il modulo delle impostazioni ristampa il valore.

NON cifriamo la chiave, e lo diciamo chiaramente: in WordPress la chiave di cifratura deve stare sullo stesso server, quindi un aggressore con accesso al database ottiene entrambe. Chiamarla “cifrata” prometterebbe una protezione che non esiste.

Il risultato non viene scritto direttamente nel blocco; arriva come suggerimento ed è Lei ad applicarlo. È questa la nostra vera difesa contro una frase sepolta nel Suo contenuto che venga letta come un’istruzione — approva una persona.

Leggere il theme.json del tema

Un tema a blocchi dichiara già la sua tavolozza e tipografia in theme.json. MevvBlocks può leggere quel file e usarlo per riempire gli slot vuoti nella propria tavolozza del sito, così i colori che scegli in un blocco sono i colori che il tema già usa invece di un secondo set concorrente.

Il ponte è a senso unico e resta tale. Non viene mai scritto nulla di nuovo in theme.json. Un plugin che modifica il file stesso del tema ti lascia con un file che l’aggiornamento del tema sovrascriverà — e nessun modo per capire quale dei due fosse corretto. Inoltre riempie solo gli slot che hai lasciato vuoti: un colore che imposti a mano non viene mai sostituito.

È disattivato finché non lo attivi, perché un sito che ha già una tavolozza non vuole che venga silenziosamente ripuntata su quella del tema.

Il mega pannello

Un sottomenu può aprirsi come pannello a piena larghezza fino a quattro colonne invece di un menu a tendina stretto. Non è un nuovo blocco — è un’impostazione del blocco di navigazione che stai già usando, quindi il menu mantiene il proprio markup, il proprio comportamento da tastiera e il proprio layout mobile.

Attiva il pannello per una voce di menu che non ha sottomenu e il controllo di accessibilità te lo segnala. Un pannello vuoto non è un piccolo problema estetico: è un controllo che si annuncia a uno screen reader e poi non contiene nulla.

Una prima bozza di pagina, da una frase

Descrivi la pagina che vuoi e il modello sceglie le sezioni dalla libreria di pattern del plugin. Non scrive mai markup: restituisce un elenco di chiavi di sezione, e MevvBlocks rende quelle sezioni da solo. Ciò che arriva sulla pagina sono quindi blocchi ordinari che puoi modificare, non HTML generato che devi ripulire.

Una chiave di sezione inventata dal modello non esiste nella libreria, quindi viene scartata — e lo schermo ti dice che è stata scartata anziché produrre silenziosamente una pagina più corta.
La pagina viene sempre creata come bozza. Non esiste alcun percorso di codice che la pubblica.
Usa la stessa chiave che hai inserito per gli strumenti IA dell’editor: la tua chiave Anthropic o OpenAI, memorizzata sul tuo sito, con la richiesta che va direttamente dal tuo server al provider.

Free e Pro

L'edizione gratuita è l'intero prodotto: centosette dei centodieci blocchi, gli otto stili di blocco, i template del tema, la griglia e il costruttore di loop, il motore dei moduli con il suo archivio degli invii, il modulo newsletter, il testo dinamico compresi i campi ACF, il menu, la ricerca, i popup, la libreria di pattern, i preset dei blocchi, la palette globale, l'ottimizzazione delle immagini, la cache dei blocchi, il codice personalizzato per tutto il sito, le note dell'editor, la schermata Core Web Vitals e l'audit di accessibilità.

Pro aggiunge capacità di modifica, non di output:

Breakpoint — le schede desktop / tablet / mobile, con altezza minima, larghezza del contenuto, larghezza e i quattro valori di spaziatura interna per breakpoint.
CSS personalizzato per blocco, dove il token selector rappresenta il blocco stesso.
Extra per i moduli — campi condizionali, una risposta automatica al mittente, un webhook e un campo per il caricamento di file.
Esportazione CSV degli invii dei moduli.
Tre blocchi — il selettore di contenuto con i suoi pannelli, il portfolio con un filtro per tassonomia, e l'incorporamento Lottie. Nemmeno il loro rendering controlla la licenza: una pagina che già li contiene continua a stamparli.

I pannelli dei breakpoint e del CSS personalizzato compaiono oggi sui blocchi principali — Contenitore, Titolo, Testo, Pulsante, Separatore, Immagine, Testimonianza, Icona, Riquadro icona, Elenco con icone, Shortcode, Modulo, Prodotti e Categorie di prodotto. Diversi controlli per breakpoint sono gratuiti ovunque esistano: il numero di colonne della griglia su tablet e mobile, la soglia dell’hamburger del menu, la posizione su mobile del riquadro immagine e la scelta del dispositivo per la posizione fissa.

Quando una licenza scade o manca:

Il Suo sito appare esattamente uguale. Ogni valore salvato per tablet e mobile continua a essere stampato, e così ogni regola di CSS personalizzato per blocco. Non è una promessa, è una regola architetturale: nessun file sul percorso di rendering chiede della licenza, e un test lo verifica a ogni rilascio.
I moduli continuano a essere inviati, a salvare e a spedire posta.
I popup esistenti continuano a comparire.
Ciò che perde sono i pannelli Pro nell’editor — e nient’altro.

Se i nostri server non sono raggiungibili, una licenza attiva continua a funzionare per sette giorni. Un’installazione che non si è mai verificata con successo non ottiene alcun periodo di tolleranza: bloccare il nostro indirizzo non è un modo per ottenere Pro.

Quando qualcosa non funziona

“La sessione del modulo è scaduta.”: La copia in cache di quella pagina ha più di sette giorni, oppure le chiavi di sicurezza del Suo sito sono state ruotate. Svuoti la cache delle pagine.
Il modulo non invia posta: Controlli prima l’elenco degli invii — il record viene scritto prima della posta, quindi se c’è, il modulo ha funzionato e a fallire è stata la consegna. Poi verifichi l’indirizzo del destinatario e la configurazione della posta del Suo sito.
La pagina appare giusta nell’editor e sbagliata sul front-end: L’anteprima dell’editor è approssimativa per scelta progettuale; vedi sopra. Il front-end è la verità. Se un blocco porta valori per tablet o mobile, l’editor stampa un avviso che lo segnala.
Un blocco risulta non valido quando provo a modificarlo: In passato accadeva ai blocchi registrati sul server ma assenti dallo script dell’editor — venivano stampati perfettamente e fallivano solo all’apertura per la modifica. Ora un test lo previene; se dovesse ancora capitare, ci segnali il nome del blocco.
Il conto alla rovescia mostra l’ora sbagliata: Il markup porta un istante di destinazione assoluto, mai “mancano X secondi”, quindi una pagina in cache non può congelarlo. Il blocco si corregge sull’orologio del server; se quella richiesta è bloccata, ripiega sull’orologio del visitatore invece di fallire.
Il modello di intestazione o di piè di pagina non compare: Il Suo tema non ha una ricetta. Solo Astra e GeneratePress possono essere sollevati; la schermata La avverte. Gli altri tipi di modello funzionano su qualsiasi tema.
Sono comparse due intestazioni: MevvBlocks e MevvBridge ne stanno producendo una ciascuno. MevvBlocks occupa il posto per primo, di proposito — lasci l’intestazione a uno solo dei due.
I contenitori sono più larghi o più stretti di quanto impostato: Una regola del tema sta vincendo per specificità. Astra in particolare applica stili molto forti ai propri discendenti. Nei casi misurati è stato risolto alzando la specificità invece di usare !important; se ne incontra uno nuovo, ci dica di quale tema si tratta.
Un articolo pubblicato non compare in una griglia: Dovrebbe. La griglia mette in cache solo gli id degli articoli e il salvataggio di un qualsiasi articolo la invalida. Se il problema persiste, verifichi che il tipo di post e l’ordinamento siano quelli che si aspetta.

Aggiornamenti

Gli aggiornamenti arrivano tramite WordPress stesso. Il plugin chiede al nostro store se esiste una versione più recente e consegna la risposta al flusso di aggiornamento proprio di WordPress, così una nuova versione compare nella schermata dei plugin con un normale pulsante Aggiorna invece di attendere che qualcuno scarichi uno zip a mano. Nell’edizione gratuita quella richiesta porta solo il nome del pacchetto e la versione installata: nessun indirizzo del sito, nessun indirizzo e-mail, nessuna chiave di licenza e nessun inventario di plugin. Poiché nulla in essa vi identifica, la fiducia poggia sulla firma: la risposta è firmata con la nostra chiave Ed25519, e una risposta non firmata, firmata male, riprodotta da un timestamp vecchio o che punti il download a un host diverso dal nostro viene scartata senza toccare il sito.

Limiti

L’anteprima dell’editor è esatta per il layout, non per tutto. L’area di lavoro stampa lo stesso CSS del front end, quindi spaziature, sfondo, bordi, tipografia, trasformazioni e posizione coincidono. Resta diversa qualsiasi regola scritta sul markup interno a un blocco, perché lì l’editor disegna i propri strumenti di modifica.
I modelli di intestazione e piè di pagina funzionano solo su Astra e GeneratePress. Ogni altro tema non riceve nulla, più un avviso — il silenzio significherebbe due intestazioni.
La mappa è un embed di OpenStreetMap. Un indicatore, nessuna immagine di indicatore personalizzata, nessuno stile della mappa, nessuna indicazione stradale. Nessuna chiave API, nessun account di fatturazione e nessuna chiave nel codice sorgente della Sua pagina.
Il portfolio non ha finestra modale né paginazione. Schede, un filtro e un collegamento all'archivio — è tutto il blocco.
Il feed social non ha adattatore API. È un elenco di collegamenti che scegli a mano; nulla viene recuperato da alcuna rete, e nessun token viene salvato.
Non ci sono animazioni legate allo scorrimento né alcuna regola che impedisca a due effetti di scontrarsi. Effetti d'ingresso, parallasse e al passaggio del mouse esistono, e tutti sono silenziosi in caso di movimento ridotto.
Il grafico a torta non si anima, e non è interattivo: i valori sono stampati come elenco accanto invece di essere mostrati al passaggio del mouse.
Nessun overlay di accessibilità. Solo misurare e segnalare.
Nessun CAPTCHA.
Nessuna ricerca dal vivo. Una richiesta a ogni tasto premuto è una dipendenza e una superficie soggetta a limiti di frequenza.
Il conto alla rovescia usa il fuso orario del sito, non quello del visitatore. Una campagna finisce in un unico istante in tutto il mondo.
Il menu offre due breakpoint, non un valore libero in pixel, e non ha una modalità a tendina laterale né off-canvas — un pannello scorrevole con gestione del focus è esattamente ciò a cui serve il blocco popup.
Le schede della griglia non possono essere h1, e l’annidamento dei loop si ferma a due livelli.
Il set di icone è di 94 icone a tratto, tutte disegnate in un unico riquadro da 24 pixel. Non c'è alcun font di icone né modo di aggiungere le tue al selettore; un tuo SVG entra tramite il blocco Immagine o Animazione SVG.
Il contenuto dinamico proviene da un elenco chiuso di fonti. Non esiste un campo del tipo “esegui questa espressione”: consegnerebbe l’esecuzione di codice a chiunque possa modificare una pagina.
I set globali di colore e tipografia non si possono eliminare, solo svuotare.
Le schede prodotto le disegna WooCommerce, non noi, quindi il Suo tema e gli eventuali hook di terze parti continuano a funzionare.
L’interfaccia è distribuita in undici lingue. Turco, inglese, spagnolo, tedesco, francese, portoghese, italiano, olandese, giapponese, russo e polacco, più varianti nazionali come es_MX e pt_PT. Qualsiasi altra impostazione locale ripiega sull’inglese.
La finestra dei Web Vitals si azzera ogni 28 giorni; non è scorrevole. Una finestra scorrevole richiederebbe intervalli giornalieri e ventotto volte lo spazio di archiviazione. La schermata mostra quando è iniziata la finestra corrente.
La disinstallazione non rimuove la tabella degli invii né le impostazioni. Il contenuto dei Suoi blocchi resta comunque leggibile — è markup standard dentro post_content.

Non viene caricata alcuna libreria JavaScript o CSS di terze parti, da nessuna parte. Né per lo slider, né per la fisarmonica, né per il movimento, né per la mappa. Ognuna di esse sarebbe costata tra i quaranta e i cento kilobyte su ogni pagina che la usava.

Cento pixel su desktop, quaranta su mobile — nell’editor a blocchi.