Gutenberg arriverà presto su WordPress. Vostro sito web è pronto? Sebbene non sappiamo ancora esattamente quale forma assumerà, questo nuovo sistema di contenuti verrà aggiunto a WordPress in futuro. Diamo un'occhiata ai potenziali impatti che ciò potrebbe avere sul tuo sito e ai modi per identificare e risolvere le aree problematiche in anticipo.
Cos'è Gutenberg?
Gutenberg è un progetto WordPress che mira a offrire agli utenti una maggiore flessibilità nella progettazione dei propri contenuti. In sostanza, il progetto mira a sostituire l'attuale editor, che funziona principalmente come word processor, con un'interfaccia più visiva e strutturata. Attualmente, Gutenberg è un plug-in e offre agli utenti la possibilità di modificare i propri contenuti allo stesso modo di Visuale Compositore o altri editor drag and drop (Drag & Drop), ma in modo semplificato e molto intuitivo.
Per saperne di più su Gutenberg, clicca qui.
Le parti del tuo sito
Gutenberg è un'azienda enorme e probabilmente raggiungerà molti endpoint nel tuo sito web. Queste sono le tre aree che esploreremo per potenziali problemi:
- Il tuo tema: Gutenberg viene fornito con il proprio set di stili per il contenuto. Il tuo tema è compatibile? Come sarà Gutenberg quando è attivo?
- I tuoi plugin: È possibile che Gutenberg possa interagire con gli altri tuoi plugin in modi inaspettati. Vedremo cosa potrebbe essere e cosa è necessario fare per risolvere eventuali problemi che si presentano.
- Il tuo contenuto: Gutenberg influenzerà il modo in cui vengono visualizzati i tuoi contenuti. Daremo un'occhiata a come questo potrebbe cambiare l'aspetto delle tue pagine e esamineremo alcune potenziali soluzioni in caso di problemi.
Allestimento di un'area di prova
Prima di iniziare, è una buona idea creare un'area di test in cui puoi sperimentare Gutenberg senza mettere a rischio il tuo sito principale. Idealmente, dovresti creare la tua area di test o creare una copia locale del tuo sito. Per ulteriori informazioni su come eseguire una di queste attività, vedere il seguente tutorial: Come installare WordPress localmente.
Se ciò non è possibile, puoi eseguire i test direttamente sul tuo sito. Tieni presente che questo può essere rischioso, poiché attiveremo e disattiveremo una serie di parti del tuo sito. Se stai eseguendo il test dal vivo, assicurati di creare un backup del tuo sito prima di iniziare.
Una volta che sai dove vuoi testare, vai alla directory dei plugin e trova Gutenberg. Una volta installato e attivato, continua a leggere.
Metti alla prova il tuo tema
Ora che hai installato Gutenberg, diamo un'occhiata alla prima sezione del tuo sito che potrebbe essere interessata: il tuo tema. Se a questo punto sono già presenti problemi importanti, come errori del database o problemi con il dashboard di WordPress, passare alla sezione Cosa fare quando ci sono troppi problemi.
Poiché Gutenberg interagisce principalmente con il contenuto del sito, è sufficiente testare alcune cose, fortunatamente per noi.
Il primo è che Gutenberg viene fornito con il proprio foglio di stile e una serie di stili. Controlla ciascuno dei diversi tipi di pagine e modelli utilizzati sul tuo sito per assicurarti che vengano visualizzati correttamente. L'obiettivo principale qui è concentrarsi sugli elementi nell'area del contenuto principale delle tue pagine, in particolare sui contenuti e sui blocchi di immagini. Se riscontri problemi, è probabile che gli stili di Gutenberg abbiano la precedenza su quelli del tuo sito.
Per correggere questo problema, dovrai identificare l'origine del problema. Di solito, questo sarà un selettore CSS focalizzato su un elemento HTML o sulla priorità degli stili di Gutenberg rispetto alle tue classi. In ogni caso, prova a identificare dove si è verificato l'errore. Quindi, scopri perché gli stili di Gutenberg sovrascrivono il tuo e correggi il tuo codice per consentirgli di avere la precedenza.
Prova ad apportare correzioni nel tuo tema (o meglio ancora, in un tema figlio o un'area specificata per CSS nel tuo tema), piuttosto che modificare Gutenberg. Se modifichi direttamente uno dei file in Gutenberg, è probabile che venga sovrascritto quando il plug-in viene aggiornato.
Allo stesso modo, ti consigliamo di eseguire gli stessi test sulla tua dashboard una volta per tutte. Le opzioni del tema e altre sezioni personalizzate generate dal tuo tema sembrano essere i maggiori colpevoli finora. Dopo aver identificato i problemi di stile in queste aree, di solito puoi risolverli modificando o creando un tema figlio e modificando il CSS lì.
I tuoi plugin funzionano?
Dopo aver testato il tuo tema, i plugin per il tuo sito sono i seguenti. In particolare, tieni d'occhio i plug-in che forniscono codici brevi da utilizzare nei tuoi contenuti (ad es. Gravity Forms), plug-in che influenzano l'aspetto del tuo contenuto (ad es. Plug-in di accessibilità che influiscono sulla dimensione del testo) e plugin che inseriscono direttamente elementi nella tua pagina (come Advanced Custom Fields).
Esplora gli shortcode
Per controllare quest'area, inizia raccogliendo un elenco di tutti gli shortcode che stai utilizzando, oltre alle pagine in cui esistono. Con l'elenco in mano, visita ciascuna di queste pagine per vedere se funzionano come previsto. Se hai problemi di stile, è probabile che tu stia riscontrando lo stesso problema di prima e hai bisogno di riadattare i tuoi stili.
Tuttavia, se viene visualizzato lo shortcode e non il contenuto previsto (ovvero la tua pagina visualizza il file [shortcode]invece di fare la cosa giusta) c'è un'altra soluzione. In questo caso, puoi guardare il blocco in cui si trova lo shortcode e confermare che non è considerato testo (trova e rimuovi le etichette indesiderate attorno allo shortcode). Se il problema persiste, spostare lo shortcode su un tipo di blocco più adatto dovrebbe riavviare tutto.
Aspetto del contenuto
Questo problema deriva dallo stesso problema che abbiamo già trattato: le sostituzioni di stile. Identifica gli elementi interessati e correggi il CSS.
Creazione di elementi
L'ultima area che esamineremo per problemi di conflitto riguarda la creazione di oggetti. Qualsiasi plug-in che inserisce elementi HTML in una pagina senza utilizzare codici brevi è sospetto qui, ad esempio, quando PHP estrae campi personalizzati dal plug-in Advanced Custom Fields.
Lo slittamento più comune con la creazione di elementi ruota attorno a blocchi incompatibili. Poiché Gutenberg fornisce i propri stili, è possibile che se i tuoi elementi vengono creati all'interno di un blocco involontario, potrebbero non essere visualizzati correttamente. La soluzione per questo è assicurarti che il tuo codice aggiunga elementi al blocco dove vuoi che siano.
I tuoi contenuti appaiono come necessari?
Non è così urgente come gli altri problemi che abbiamo discusso, ma potrebbero esserci delle complicazioni nel modo in cui i tuoi contenuti vengono visualizzati. La maggior parte di questi problemi deriverà da modifiche stilistiche minori o dalorganizzazione blocchi. Per risolvere questo problema dovrai giocare con il sistema a blocchi finché non otterrai la tua pagina nel modo desiderato.
Cosa fare quando ci sono troppi problemi
Hai riscontrato un problema che non sei riuscito a risolvere con i suggerimenti di questo tutorial? Niente panico ! C'è ancora del tempo prima che Gutenberg venga integrato nel core di WordPress.
Innanzitutto, annota qual è l'errore e quali passaggi hanno portato all'errore. Più informazioni puoi 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 a 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 forse lavora per risolverlo da solo.
Se stavi lavorando sul tuo sito live, disabilitare Gutenberg dovrebbe riportare tutto alla normalità. In caso contrario, è ora di tornare al backup che hai eseguito all'inizio del tutorial!
Buona fortuna per la tua installazione!
Gutenberg mira ad essere un enorme cambiamento nell'ambiente WordPress, che cerca di cambiare i contenuti in meglio. Prima che raggiunga il ramo principale, assicurati di verificare 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 tutorial, lascia un commento qui sotto.
