Come preparare il tuo sito per WordPress Gutenberg

Gutenberg arriverà presto su WordPress. Il tuo sito web è pronto? Mentre ancora non sappiamo esattamente quale forma prenderà, questo nuovo sistema di contenuti sarà aggiunto al core di WordPress in futuro. Diamo un'occhiata ai potenziali impatti che questo potrebbe avere sul tuo sito e ai modi in cui puoi determinare e correggere le aree problematiche prima del tempo.

Che cos'è Gutenberg?

Gutenberg è un progetto WordPress che mira a offrire agli utenti una maggiore flessibilità nella progettazione dei loro contenuti. In sostanza, il progetto mira a sostituire l'attuale editor, che si comporta principalmente come un word processor, con un'interfaccia più visiva e strutturata. Attualmente Gutenberg è un plug-in e offre agli utenti la possibilità di modificare i loro contenuti in modo simile a come fanno Visual Composer o altri editor drag-and-drop, anche se in modo semplificato e molto intuitivo.

Se vuoi saperne di più su cosa è specificamente Gutenberg, dai un'occhiata al mio post precedente "What Is WordPress Gutenberg?"

I pezzi del tuo sito

Gutenberg è un'impresa enorme e probabilmente toccherà un gran numero di endpoint all'interno del tuo sito web. Queste sono le tre aree che cercheremo di risolvere:

  • Il tuo tema: Gutenberg ha un proprio set di stili per i contenuti. Il tuo tema è compatibile? Che aspetto avrà con Gutenberg attivo?

  • I tuoi plugin: È possibile che Gutenberg possa interagire con gli altri plug-in in modi inaspettati. Vedremo cosa potrebbero essere questi e cosa fare riguardo a eventuali problemi che si presentano.

  • Il tuo contenuto: Gutenberg influenzerà il modo in cui viene visualizzato il contenuto stesso. Esamineremo come ciò potrebbe cambiare l'aspetto delle tue pagine e andare oltre alcune potenziali correzioni in caso di problemi.

Impostazione di un'area di test

Prima di iniziare, è una buona idea impostare un'area di test in cui sperimentare Gutenberg senza interrompere il tuo sito live. Idealmente, dovresti impostare la tua area di test o creare una copia locale del tuo sito. Per ulteriori informazioni su come eseguire una di queste attività, consultare il seguente tutorial:

Se nessuno di questi è possibile, puoi eseguire i test direttamente sul tuo sito. Si noti che questo può essere rischioso, tuttavia, poiché attiveremo e disattiveremo una serie di parti del tuo sito. Se esegui il test dal vivo, assicurati di creare un backup del tuo sito prima di iniziare.

Una volta che sai dove testerai, vai alla directory dei plugin e trova Gutenberg. Una volta installato e attivato, continua a leggere.

Metti il ​​tuo tema attraverso i suoi passi

Ora che hai installato Gutenberg, diamo un'occhiata alla prima sezione del tuo sito che potrebbe essere interessata: il suo tema. Se ci sono già grossi problemi a questo punto, come errori di database o problemi con l'amministratore di WordPress, vai al menu Cosa fare quando ci sono troppi problemi sezione.

Poiché Gutenberg interagisce principalmente con il contenuto del sito, abbiamo solo bisogno di testare una serie ristretta di cose, fortunatamente per noi.

Il primo è che Gutenberg viene fornito con un proprio foglio di stile e un insieme di stili. Controlla ciascuno dei diversi tipi di pagina e modelli utilizzati sul tuo sito per assicurarti che appaiano ancora correttamente. L'obiettivo principale qui saranno elementi all'interno dell'area di contenuto principale delle tue pagine, in particolare i blocchi di contenuto e immagine. Se vedi qualche problema, è probabile che gli stili di Gutenberg abbiano la precedenza sul tuo sito.

Per correggere questo, è necessario identificare da dove proviene il problema. Tipicamente, sarà un selettore CSS focalizzato su un elemento HTML, oppure potrebbe essere una priorità degli stili di Gutenberg rispetto alle tue classi. Qualunque sia il caso, prova a identificare dove si sta verificando l'errore. Successivamente, determina il motivo per cui gli stili di Gutenberg ignorano il tuo e correggono il tuo codice per consentirgli di avere la precedenza.

Cerca di apportare correzioni all'interno del tuo tema (o, meglio ancora, in un tema figlio o nell'area specificata per i CSS nel tuo tema), piuttosto che alterare Gutenberg. Se modifichi direttamente qualcuno dei file in Gutenberg, è probabile che venga sovrascritto quando il plugin viene aggiornato.

In un modo simile, ti consigliamo di dare all'area di amministrazione una volta sola per qualsiasi problema di stile. Le opzioni del tema e altre sezioni personalizzate create dal tuo tema sembrano essere i maggiori colpevoli fino ad ora. Una volta identificati i problemi di stile in queste aree, in genere puoi correggerli modificando o creando un tema figlio e regolando il CSS lì.

Funzionano i tuoi plugin?

Dopo che il tema è stato eliminato, i plugin del tuo sito sono i prossimi. In particolare, tieni d'occhio tutti i plug-in che forniscono gli shortcode che utilizzi nel tuo contenuto (es. Gravity Forms), i plugin che influiscono sull'aspetto dei tuoi contenuti (es. Plugin di accessibilità che influenzano le dimensioni del testo) e plugin che inseriscono direttamente elementi nella tua pagina (come Advanced Custom Fields).

Guardando Shortcode

Per controllare quest'area, prima raccogli una lista di eventuali codici brevi che potresti utilizzare, insieme a quali pagine sono presenti. Con la tua lista in mano, visita ognuna di queste pagine per vedere se si stanno comportando come previsto. Se si verificano problemi di stile, è probabile che si stia verificando lo stesso problema di sopra e che sia necessario regolare nuovamente gli stili.

Tuttavia, se stai ottenendo lo shortcode reso temuto, vale a dire che la tua pagina sta visualizzando il [codice corto] invece di fare ciò che dovrebbe: c'è un'altra soluzione. In questo caso, puoi osservare il blocco in cui si trova lo shortcode e confermare che non è considerato testo (cercando e rimuovendo tag indesiderati attorno allo shortcode). Se il problema persiste, spostare lo shortcode su un tipo di blocco più appropriato dovrebbe riportare tutto in funzione.

Aspetto del contenuto

Questo problema deriva dallo stesso problema che abbiamo trattato in precedenza: sostituzioni di stile. Identificare gli elementi che sono interessati e correggere il CSS.

Creazione di elementi

L'area finale che esamineremo per problemi conflittuali riguarda la creazione di elementi. Qualsiasi plug-in che inserisce elementi HTML in una pagina senza utilizzare shortcode è sospetto qui, ad esempio quando PHP estrae campi personalizzati dal plug-in Campi personalizzati avanzati.

Lo slittamento più comune con la creazione di elementi ruota attorno ai blocchi non corrispondenti. Poiché Gutenberg fornisce i propri stili, c'è la possibilità che se i tuoi elementi vengono creati all'interno di un blocco non intenzionale, potrebbero essere visualizzati in modo errato. La correzione per questo è assicurarsi che il tuo codice aggiunga elementi al blocco dove vuoi che siano.

Il tuo contenuto appare come necessario?

Questo non è così urgente come gli altri problemi che abbiamo discusso, ma potrebbero esserci alcune complicazioni con il modo in cui il tuo contenuto è reso. La maggior parte di questi problemi deriveranno da modifiche di stile minori o da come sono organizzati i blocchi. Per correggere questo, dovrai giocare con il sistema di blocco fino a ottenere la tua pagina come vuoi.

Cosa fare quando ci sono troppi problemi

Hai incontrato un problema che non potresti risolvere con i suggerimenti in questo articolo? Non farti prendere dal panico! C'è ancora un po 'di tempo prima che Gutenberg raggiunga WordPress Core.

Innanzitutto, registra qual è l'errore e quali passaggi hanno portato all'errore. Più informazioni riesci a raccogliere, meglio è. Passa tutte queste informazioni al team di Gutenberg. Con un po 'di fortuna, saranno in grado di determinare il problema e risolverlo in una versione futura.

Se stavi lavorando su un sito di staging, a questo punto, è tutto ciò che puoi fare per ora. Continua a controllare le note di rilascio per vedere se il tuo problema è stato risolto, o eventualmente a risolverlo da solo.

Se stavi lavorando al tuo sito live, la disattivazione di Gutenberg dovrebbe riportare tutto alla normalità. In caso contrario, ora è il momento di ripristinare il backup che hai fatto!

Buona fortuna per la tua installazione!

Gutenberg vuole essere un enorme cambiamento nell'ambiente WordPress, uno che cerca di cambiare i contenuti in meglio. Prima che colpisca il ramo principale, assicurati di controllare che il tuo sito funzioni con le nuove modifiche. Se hai problemi diversi da quelli elencati qui, soluzioni migliori o correzioni per qualsiasi cosa in questo articolo, lascia un commento qui sotto!