Una cassetta degli attrezzi per Wordpress Gutenberg: si può fare?

valijolie

Una cassetta degli attrezzi per Wordpress Gutenberg: si può fare?

Ciao a tutti,
da qualche tempo ho ricominciato a giocare con Wordpress e mi incuriosisce la possibilità di realizzare dei progetti validi e completi con #Gutenberg.
A differenza di molti detrattori, Gutenberg a me piace, la trovo una alternativa interessante ai visual composer che mal sopporto perché farraginosi, non solo nelle performance.

Non sono una sviluppatrice, mi occupo di SEO e content, quindi non vorrei sostituire per niente al mondo le professionalità e competenze del mondo dev... anzi io credo che a oggi fare un sito senza avvalersi di un buon programmatore sia da pazzi, quindi mi sento di dire: assumete sviluppatori!

Ciò non toglie la mia curiosità, quindi per tornare alla domanda: mi piacerebbe realizzare una raccolta per avere una cassetta degli attrezzi utile per essere autonomi con Gutenberg.

Lo spunto è nato da questa discussione qui:
https://connect.gt/topic/243004/i-migliori-temi-wordpress

e vorrei mettere a fuoco solo Gutenberg, non solo per il tema.
Per estenderne le funzionalità, ad esempio, bisogna per forza affidarsi ai plugin? Li avete provati? Se sì quali consigliate?
Esistono guide di stile per il design?

Mi rendo conto che oggi Gutenberg sia ancora acerbo, ma la prospettiva mi sembra sia quella di volerlo rendere qualcosa in più.
Intanto mi piacerebbe conoscere altre esperienze a riguardo.
Grazie

g.lanzi

Ciao @valijolie,
Ti porto la mia esperienza di web designer non convenzionale. Io infatti ho un percorso alle spalle da fotografo e grafico che non è propriamente quello di uno sviluppatore. Per farla breve, saprei sviluppare, ma sarei super lento nel farlo e preferisco, comunque, concentrarmi sull'aspetto estetico piuttosto.

Anche a me Gutenberg piace molto, ma solo per gli articoli. Per le pagine preferisco un editor WYSIWYG. Per questo trovo più facile usare visual composer o page builder, nonostante gli evidenti problemi che potrebbero dare (difficoltà di utilizzo/ carenza nella prestazioni).

Per Gutenberg, guardandomi intorno, ho visto parecchi plugin che aggiungono blocchi utilizzabili, ma anche plugin che permettono di "costruire blocchi".
Uno di questi è Genesis Custom Blocks, lo trovi nel repo ufficiale.

Non è comodissimo da usare per me, ma fa quello che dice: ti permette di creare dei blocchi che puoi poi esportare e riprodurre anche su altri installazioni di WP.
Come ti dicevo non lo uso, preferisco gestire le pagine con i visual composer o page builder.

overclokk

@valijolie ha detto in Una cassetta degli attrezzi per Wordpress Gutenberg: si può fare?:

Non sono una sviluppatrice, mi occupo di SEO e content, quindi non vorrei sostituire per niente al mondo le professionalità e competenze del mondo dev... anzi io credo che a oggi fare un sito senza avvalersi di un buon programmatore sia da pazzi, quindi mi sento di dire: assumete sviluppatori!

E con questo hai la mia attenzione

Alcuni consigli che mi sento di dare su Gutenberg:

I blocchi di default sono sufficienti per realizzare la maggior parte degli elementi di un design di una pagina quindi senza bisogno di installare nulla in più, prima di cercare altrove guarderei in casa.

Di default WordPress carica una base di stile per far funzionare alcuni dei blocchi, column, media & text, cover ecc, che si può disattivare così:

<?php
declare(strict_types=1);

namespace MyNamespace;

use function add_action;
function remove_wp_block_library_css(): void {
	wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\remove_wp_block_library_css' );

Ma serve tutto sto codice per disattivare un file css?
Volendo basterebbero le ultime 4 righe ma volevo stupirvi con i miei effetti speciali

Se lo disattiviamo poi dobbiamo prenderci in carico di creare noi lo stile che manca.

Consideriamo che chi ha la possibilità anche di customizzare il css fa praticamente tutto o quasi.

Se proprio vogliamo farci male e inserire slider, carousel e robe simili allora si, servono anche altri blocchi non compresi nel core.

Per far "funzionare Gutenberg" lato front-end ricordiamoci che serve prima di tutto il css e in alcuni casi anche js quindi bisogna valutare bene attentamente quello che buttiamo dentro perché alcuni buttando dentro troppo e se installo diversi plugin ognuno di questi carica i suoi css e js, teniamolo sempre a mente.

Sto lavorando proprio in questi giorni ad un progetto in cui mi sono imposto di usare solo esclusivamente Gutenberg (+ plugin con blocchi) senza scrivere codice e vedere le cose da una prospettiva diversa, bene, ho fallito miseramente , alla fine ho dovuto scrivere del codice e crearmi io ciò che mi mancava perché fra i vari plugin che ho provato (e ne ho provati veramente tanti) praticamente nessuno mi ha convinto (ed è per questo che non ne nominerò alcuno), o fanno troppo (troppi blocchi di cui ne userei solo uno) o troppo poco (manca proprio l'opzione che serve a me), questo però mi ha dato il vantaggio di studiarmi meglio le API di Gutenberg, dopo tanto tempo di procrastinazione, e crearmi il mio plugin che forse in futuro caricherò sulla repo, vediamo.

Un altro problema dei plugin che offrono troppo è proprio questo, tutti i blocchi che aggiungono non vanno bene per la maggior parte dei progetti perché sono troppo poco generici e alla fine ci si ritrova ad usare sempre quei 4 blocchi al bar. (cit. vediamo chi l'ha capita )

"E i plguin che ti consentono di creare blocchi custom usando i custom field?"
Ho provato anche questi e personalmente li sconsiglio perché la UX nell'editor non è paragonabile a quella dei blocchi standard e comunque devo scrivere codice per creare la parte che manca lato front-end, capisco che a un dev php sia comodo ma sinceramente non la trovo una opzione valida nel tempo, meglio studiarsi le API e creare blocchi senza dipendere da altri plugin.

Per quanto riguarda i temi non ne so abbastanza perché io uso solo il mio + child dove customizzo tutto.

Gutenberg è ancora acerbo?

Si, lo è sotto molti punti di vista.

Si può comunque utilizzare senza problemi?

Per quanto riguarda tutto quello fornito dal core si, si può utilizzare quasi senza problemi.

E i plugin che aggiungono funzionalità ai blocchi tipo padding, margin, ecc?

Anche in questo caso per ora non mi sento di consigliarli, ne ho provati alcuni è dal mio punti di vista creano confusione lato UX, aggiungono troppa roba ai vari controlli e aumentano la complessità dell'interfaccia.

Riassumendo:

Prima provo con i blocchi del core, li provo in tutte le salse finché non trovo il loro limite e poi al limite cerco quello che manca.

shazarak

alura... discorso che potrebbe diventare un po lunghetto, e che per ora riassumo :

presupposti:

la volontà di usare Gutenberg e non altri builder, i motivi non ci interessano.
utilizzo di temi Gutenberg Ready per chiamarli cosi, Astra, GeneratePress, ecc

ci sono due tipi di "aiuti" a Gutenberg:

blocchi singoli, una collezioni di blocchi da usare, come Genesis Custom Block ecc
librerie con blocchi pre stilizzati e starter pack esempio Qubely

a mia esperienza, la differenza sta nella quantità di personalizzazioni già pronte all'uso o meno, ovvero puoi usare blocchi piu o meno semplici di partenza, come griglie e colonne, che poi ti dovrai personalizzare in modo "avanzato" , che sia con il codice a mano che sia con altri css edito visuali ecc ( esempio CssHero)

oppure puoi usare dei questi pacchetti starter, che diciamo di permettono di avere a disposizione e subito un certo tip di layout grafico e/o animazione, giusto per capirci qualcosa che si orienta alla modalità visual builder/elementor

Ovviamente se l'interesse è posto anche sulle performance del sito, per la serie "uso Gutenberg perche Divi e Bakery sono pieni di codice sporco e lenti" ecc allora andrebbe fatta maggiore attenzione a quali blocchi, o framework o librerie usare, perche non tutti sono "light"

esempio pratico, se installi un pack con dentro 25 blocchi e devi usare solo il countdown, se quel plugin poi carica i css di tutti e 25 i blocchi ....sappiamo come finisce.

Ci sono almeno un paio di produttori di temi che sviluppano anche plguin di blocchi, che non devono necessariamente essere usati in combo, ma anche liberamente, ma Astra Theme ha Ultimate Addons for Gutenberg mentre Generatepres ha Generate Blocks

personalmente preferisco esse il piu possibile slegato da pacchetti preconfezionati, ma ho comprato settimana scorsa Qubely che vorrei testare, nel caso c'e' un'offerta https://appsumo.com/qubely/

Per finire c'e' poi la possibilità di crearsi i propri blocchi da poi riutilizzare dove si vuole, cosa che potrebbe diventare molto utile, non so dire altro perche ancora non l'ho imparato.. magari altri sanno gia come spiegare meglio

overclokk

Preciso un punto fondamentale:

CSS !== codice

Ovvero, il css non è codice, ci tengo a precisarlo perché non vorrei che venisse confuso questo concetto.

valijolie

Grazie a tutti per i contributi, sono stati molto interessanti!

Dopo questa panoramica e lo spiegone di @overclokk sono ancora più convinta che sia meglio far lavorare uno sviluppatore , però mi avete dato degli spunti utili che sicuramente proverò.

Per quanto riguarda il tema, al momento sto provando Neve (https://themeisle.com/themes/neve/) nella versione Gutenberg che si appoggia al plugin "Gutenberg Blocks and Template Library by Otter".
Finora mi sembra di avere già buone possibilità e mi sembra che sia una soluzione analoga alla scelta di uno strumento come Qubely che suggerisce @shazarak, con il vantaggio che fin qui è tutto gratuito e si può smanettare un po'.

Rispetto al design non ho trovato metodi migliori che guardare i layout predefiniti e imparare come vengono personalizzati i vari blocchi.

Tra le varie risorse, mi è sembrato interessante questo tutorial che combina Gutenberg con Toolset, uno strumento non strettamente legato ai blocchi, ma tuttofare per chi non vuole occuparsi del codice

https://colorlib.com/wp/wordpress-gutenberg-tutorial/

Fatemi sapere se avete altro da segnalare.

shazarak

@valijolie https://www.cloudways.com/blog/create-wordpress-gutenberg-block-templates/

https://wptavern.com/gutenberg-hub-launches-collection-of-100-block-templates

https://lazyblocks.com/

https://wordpress.org/plugins/genesis-blocks/

https://wordpress.org/plugins/ultimate-addons-for-gutenberg/

https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/

overclokk

@valijolie ha detto in Una cassetta degli attrezzi per Wordpress Gutenberg: si può fare?:

Fatemi sapere se avete altro da segnalare.

Dipende quanto vuoi addentrarti nella tana del Bianconiglio

Follow the White Rabbit! (cit.)