Un plugin per il blocco della barra di avanzamento realizzato direttamente dal team Tiles – WordPress Tavern
Tempo di lettura: 4 minuti

È da un po’ che sono alla ricerca di una soluzione decente per la barra di avanzamento. La maggior parte di questi sono raggruppati in grandi librerie di blocchi, che richiedono l’installazione di altri 20 o 30 blocchi in cui non ne ho bisogno. Altri sembrano mancare completamente il bersaglio con configurazioni strane e opzioni di blocco. Alcuni dei plug-in rimanenti utilizzano ancora shortcode e widget, ma è il 2021. Sto cercando un blocco.

Un paio di giorni fa, il Blocco di avanzamento delle tessere atterrato nella directory. Sembra essere un pezzo più piccolo di un progetto più grande chiamato Tiles. Ho tenuto d’occhio il lavoro della squadra sin dalla sua iniziale plugin per framework di design e modelli lanciato la scorsa settimana. Quel progetto è ancora in beta e solo il tempo dirà se diventerà un progetto competitivo nello spazio dei blocchi.

Tuttavia, il nuovo blocco della barra di avanzamento del team era proprio quello che stavo cercando. A parte un bug, che io segnalato allo sviluppatore, non ho riscontrato problemi seri.

Il plugin fa quello che dice sulla scatola. Registra un blocco della barra di avanzamento:

Barre di avanzamento piccole e grandi con colori predefiniti.

Di serie, include gli stili Small e Large, consentendo all’utente di regolare le dimensioni della barra.

Il suo punto di forza è che – non posso sottolinearlo abbastanza – il contenuto del blocco è modificabile all’interno dell’area dell’area di disegno dell’editor. Ciò include l’etichetta e la percentuale. Questo è un cambiamento rinfrescante rispetto ai molti altri che richiedono agli utenti di tornare alla barra laterale delle opzioni di blocco per modificare il testo semplice. Poiché il blocco utilizza i campi Rich Text per l’etichetta e la percentuale, gli utenti finali possono utilizzare strumenti di formattazione in linea come grassetto, corsivo e altro.

Il blocco utilizza anche la tipografia standard e i controlli della tavolozza dei colori dal core di WordPress. Ciò fornisce l’accesso alle dimensioni e ai colori dei caratteri del tema.

Personalizzazione dell'output del Blocco barra di avanzamento nell'editor di WordPress con colori personalizzati.
Aggiunta di etichette, percentuali e colori personalizzati.

Inoltre, gli utenti possono scegliere layout ampi e a larghezza intera, una caratteristica spesso trascurata nei plug-in di blocco.

Nel complesso, sto scavando questo plugin di blocco. Se avessi una richiesta di funzionalità, sarebbe quella di aggiungere un’opzione bordo-raggio. Per impostazione predefinita, la barra di avanzamento è arrotondata, ma alcuni utenti potrebbero preferire gli angoli squadrati.

Estendere il blocco

Nelle anteprime dei temi, vedo quasi sempre le barre di avanzamento mostrate insieme a quanto PHP, HTML e JavaScript sono le demo falso sviluppatore ha imparato. Raramente è una rappresentazione del mondo reale delle barre di avanzamento. Come quantificare quanto di un linguaggio di programmazione hai imparato? Lo faccio da quasi due decenni e non posso rispondere.

Le barre di avanzamento dovrebbero essere di cose misurabili. Ad esempio, i passaggi che qualcuno ha intrapreso in un corso di apprendimento online, la percentuale delle donazioni totali ricevute e qualsiasi numero di cose che possono essere contate sono molto più realistici.

Il mio uso preferito delle barre di avanzamento è anche su my sito web del romanziere preferito. Mi piace tenere d’occhio il lavoro di Brandon Sanderson, non vedo l’ora di ricevere la mia prossima dose letteraria (sì, sono un fanboy).

Screenshot delle barre di avanzamento dal sito Web di Brandon Sanderson.
I progressi nella scrittura di Brandon Sanderson.

Attualmente, Tiles Progress Block non gestisce quel layout esatto. Tuttavia, poiché è costruito sul sistema a blocchi e non fa nulla di straordinario, gli autori del tema possono cambiarlo con stili personalizzati.

Ed è proprio quello che ho fatto. Mio alla sandersoniana barre di avanzamento del libro (grezza, non lucidata) codice disponibile come Gist):

Barre di avanzamento che spostano la percentuale accanto alla barra.
Barre di avanzamento con stile di blocco personalizzato.

La cosa che amo del sistema a blocchi è che i temi possono estendere i blocchi in questo modo. Non è necessario controllare i plug-in attivi, caricare fogli di stile aggiuntivi per plug-in o capire il sistema unico di ciascun plug-in.

Se un blocco è codificato secondo gli standard attuali, gli autori del tema devono semplicemente agganciarsi ai propri stili. Gli utenti possono quindi selezionare quegli stili tramite l’editor e persino impostarli come predefiniti.

Voglio vedere di più dall’ecosistema dei plugin di blocco.

Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.