Controllo Block Design tramite il plugin EditorPlus WordPress

La scorsa settimana, mentre stavo apportando le modifiche finali a una revisione del suo progetto Gutenberg Forms, Munir Kamal si stava preparando per il lancio di un altro tipo di plugin per WordPress per l'editor di blocchi. Questo si chiamava EditorPlus e creerebbe un sistema di progettazione per i blocchi. Kamal e il suo team hanno messo tranquillamente gli ultimi ritocchi alla versione 1.0 e pochi giorni dopo hanno rilasciato il plug-in nel repository dei plug-in di WordPress.

A differenza di molti altri plugin che creano blocchi personalizzati per ottenere risultati di progettazione specifici, EditorPlus offre agli utenti la flessibilità di personalizzare le proprie pagine con ciò che hanno a portata di mano. Aggiunge una serie di opzioni di progettazione a ciascuno dei blocchi esistenti di WordPress. Sul front-end, lascia un'impronta leggera emettendo al volo solo il CSS necessario per quella pagina.

Forse la cosa migliore di questo plugin in questo momento è che getta le basi per molte funzionalità relative al design che probabilmente troveranno una casa permanente in Gutenberg e alla fine nel core WordPress. Il team di Gutenberg può prendere in prestito idee, ripetere e migliorarle. Abbiamo già visto il controllo del riempimento sperimentale atterrare in Gutenberg 8.3. Avrebbe senso che il team di sviluppo prosegua con ulteriori controlli di progettazione lungo la strada. L'aspetto positivo di questi controlli prima di essere implementati nei plug-in di terze parti è che il team può vedere come reagiscono gli utenti e avere un'idea se lavoreranno direttamente in Gutenberg prima di impegnarsi in qualsiasi cosa.

EditorPlus non manca di chicche per coloro a cui piace avere molta libertà di progettazione senza toccare il codice. In sostanza, il plugin è un editor CSS senza la necessità di conoscere CSS. Fornisce agli utenti finali le opzioni per le funzionalità CSS più necessarie tramite le opzioni di blocco. È un parco giochi per coloro a cui piace armeggiare con il design e abbastanza potente da creare layout unici senza gonfiare il sito sul front-end.

Come funziona EditorPlus

Dopo aver attivato il plug-in EditorPlus, gli utenti finali possono iniziare a utilizzare le sue opzioni immediatamente andando all'editor di post o di pagina. Dopo aver inserito un blocco, il plug-in rende disponibili le seguenti otto schede nel pannello delle opzioni del blocco (ognuna è preceduta da un simbolo + ):

• Confine
• Box Ombra
• Dimensionamento
• Sfondo
• Margine
• Imbottitura
• Raggio di confine
• Extra

Queste schede appariranno solo per i blocchi principali di WordPress e non per i blocchi di plug-in di terze parti in questo momento. A parte la scheda Extra, ogni scheda corrisponde alle sue controparti CSS. La scheda Extra fornisce un'opzione "Visualizza" più avanzata, che consente agli utenti di modificare il valore di display dell'elemento di wrapping del blocco in CSS. Questa opzione è meglio lasciare agli utenti più avanzati. Fornisce anche un'opzione di transizione che funzionerebbe bene con gli stili al passaggio del mouse.

Ciascuna delle schede delle opzioni di blocco ha anche misteriosi pulsanti "R" e "H". Il pulsante "R" consente agli utenti di abilitare le opzioni reattive, il che significa che possono modificare gli stili di blocco in base a desktop, tablet e schermi mobili. Il pulsante "H" consente agli utenti di modificare il design in base allo stato al passaggio del mouse.

Il plugin racchiude molte opzioni in un po' di spazio. All'inizio, tutte le nuove schede di progettazione possono sembrare un po' opprimenti. Tuttavia, con un piccolo utilizzo, è facile guadagnare un po' di memoria muscolare e far esplodere rapidamente layout personalizzati.

Ciascuna delle opzioni del plugin è abbastanza semplice. E, quando non lo sono, ottieni il vantaggio di un feedback istantaneo tramite l'editor dei blocchi.

Ci sono alcune aree che potrebbero rivelarsi problematiche per alcuni utenti, a seconda di come il loro tema stilizza determinati blocchi. Ad esempio, le impostazioni di larghezza nella scheda Ridimensionamento potrebbero non funzionare sempre. Alcuni temi aggiungeranno una larghezza massima ai blocchi, il che limiterà la larghezza complessiva indipendentemente dalle dimensioni. È possibile annullarlo tramite il plug-in, ma Kamal ha scelto di non farlo nella versione 1.0.

Fai attenzione ai margini. A seconda del design del tema, può utilizzare i margini sinistro e destro per posizionare il contenuto. Anche quando si imposta solo un margine superiore o inferiore, il plug-in produrrà automaticamente 0 per i margini sinistro e destro. Ciò potrebbe interrompere il layout del contenuto per alcuni temi.

Un problema che ho riscontrato con il plugin sono stati gli stili del mio tema attivo che prevalevano sugli stili del plugin in generale. Ad esempio, il tema predefinito Twenty Twenty punta p.has-background nel suo CSS per aggiungere un riempimento personalizzato. Pertanto, prevale sul CSS del plug-in EditorPlus con una maggiore specificità. Questo problema era previsto e lo sviluppatore del plug-in ha aggiunto una soluzione sotto forma di una casella di controllo "importante" per ciascuna opzione di progettazione. Se un utente seleziona questa casella, aggiunge !important alla regola di stile sull'output, che gli consentirà di annullare gli stili del tema. Non è una soluzione infallibile al 100%. Il tuo chilometraggio può variare, a seconda del tema, ma dovrebbe funzionare per la maggior parte dei casi d'uso.

Non mi piace l'idea di una casella di controllo importante nell'interfaccia utente. Non è qualcosa di cui un utente dovrebbe preoccuparsi. Tuttavia, è la realtà di un mondo in cui temi e plugin non hanno un modo reale per comunicare quali regole di progettazione sono più importanti di altre. Nonostante non lo volesse nell'interfaccia utente, è stata una decisione intelligente includerlo. Altrimenti, troppe regole di stile dei temi avrebbero sovrascritto il CSS del plugin.

Pensieri finali

Per una versione 1.0, EditorPlus ha avuto un buon inizio. Nei miei test, ho riscontrato alcuni difetti. Eventuali problemi per l'utente medio probabilmente si presenteranno sotto forma di conflitti di temi e tali conflitti riguarderanno molto probabilmente temi che utilizzano un'elevata specificità o !important nel loro CSS.

Kamal chiarisce sulla pagina Web del plug-in che c'è molto altro in arrivo da questo plug-in. Non sono sicuro di quali caratteristiche abbia in mente, ma non vedo l'ora di vederle. Vorrei vedere un'opzione di ombra del testo per i blocchi relativi al testo come Intestazione e Paragrafo. Sarebbe anche bello vedere alcune opzioni di progettazione per le immagini all'interno del blocco Galleria piuttosto che solo l'elemento di avvolgimento.

L'utilizzo di EditorPlus dipenderà dalla necessità di ulteriori controlli di progettazione. EditorPlus è pensato per le persone che hanno bisogno di qualcosa di più simile a un generatore di pagine leggero ma vogliono attenersi a WordPress nativo. Questo plugin è una bella vetrina di ciò che è possibile ed è un buon indicatore delle potenziali opzioni di progettazione che un giorno potrebbero atterrare su WordPress.