Ricreare la home page del tema WordPress dell'artista musicale con l'editor di blocchi

Una delle mie attività preferite ogni settimana è esaminare gli ultimi temi per arrivare nella directory dei temi di WordPress. Spesso, ci sono concetti di design intriganti. Tuttavia, la maggior parte delle volte, sono deluso nell'apprendere che i design delle home page di molti si basano sulle opzioni del tema anziché sull'editor di blocchi.

Sebbene l'editor abbia diversi limiti di progettazione, gli autori dei temi hanno molto spazio da esplorare. Ha abbastanza potenza per realizzare alcuni di questi design di home page personalizzate con molto meno lavoro di codice.

Music Artist è stato uno degli ultimi temi ad attirare la mia attenzione. Ho adorato la grande area degli eroi e diversi elementi del design del tema. Dopo averlo installato, mi sono reso conto che il layout della home page è stato gestito tramite le opzioni del tema. Tuttavia, l'autore del tema potrebbe aver costruito questa pagina interamente da blocchi e avvolto ogni sezione o anche l'intero progetto in schemi a blocchi.

Tutto questo è fattibile con l'editor di blocchi.

Per mettere in pratica ciò che sto predicando, ho impiegato un paio d'ore e ho ricreato la demo della homepage per il tema direttamente dall'editor dei blocchi. Nessun codice richiesto. C'erano alcuni pezzi complicati, di cui parlerò. Tuttavia, non è stato così difficile da costruire e avrebbe potuto essere semplificato se il tema avesse supportato l'editor di blocchi.

Il piano era di replicare la pagina personalizzata con il tema Music Artist installato. Tuttavia, la mancanza di supporto per i blocchi del tema significava che alcune cose erano fondamentalmente interrotte. Invece, ho attivato un tema con somiglianze di design, come caratteri e colori. Poiché sapevo già che Ariele Lite lavorava con l'editor di blocchi, aveva senso vedere se potevo costruire con esso. Si è rivelata una solida base.

Quello che segue è un confronto tra la home page del tema Music Artist originale (prima) e una ricreazione che utilizza i blocchi tramite il tema Ariele Lite (secondo):

Ci sono ovviamente differenze nella spaziatura, nei colori, nella tipografia e in altri elementi. Gran parte di questo dipende dalle scelte stilistiche dei designer del tema. Dato più tempo e modifiche tramite un plug-in come Editor Plus, avrei potuto adattarlo abbastanza per ottenere una replica più vicina. Tuttavia, il mio obiettivo era rimanere il più vicino possibile al core di WordPress. Tecnicamente, ho installato l'ultima versione del plugin Gutenberg, quindi potrebbero esserci alcuni elementi che devono ancora atterrare in WordPress.

Per questo esperimento ho utilizzato:

• WordPress 5.7 Beta
• Gutenberg 10.1 Beta
• Ariele Lite 1.0.8
• Editor più 2.6

Avevo solo bisogno di Editor Plus per apportare un paio di regolazioni del margine sul blocco Gruppo. Avrei potuto lasciar perdere, ma volevo ridurre parte della spaziatura tra le sezioni della pagina per ottenere una ricreazione più ravvicinata. In futuro, vedremo più controlli di spaziatura in WordPress, quindi ho considerato questo un equo compromesso.

Questo esperimento serve a mostrare agli autori dei temi che possono creare i loro progetti personalizzati con il sistema a blocchi. Eliminare le opzioni dei temi della vecchia scuola significa molto meno lavoro sul codice per gli sviluppatori, consentendo loro di concentrarsi maggiormente sullo stile. Gli utenti finali beneficiano anche di una maggiore flessibilità, come l'aggiunta di elementi personalizzati o la rimozione di parti che non desiderano. Ciò non include nemmeno le opzioni di stile a livello di singolo blocco.

Lo scopo secondario è mostrare agli utenti che possono creare alcune di queste home page senza codice. L'editor di blocchi e un tema completo e pronto per i blocchi possono portarti abbastanza lontano.

Ricreare la home page dell'artista musicale

Iniziare con una base di Ariele Lite significava che il design era inscatolato. Tuttavia, il tema ha un modello di pagina "Tela vuota" personalizzato che consente agli utenti di progettare l'intera pagina.

C'erano elementi che non potevo ricreare interamente a causa delle limitazioni con l'editor di blocchi. Altre parti erano problemi o scelte di progettazione derivanti dal tema.

Quella che segue è una panoramica generale di come ho realizzato la costruzione di ogni sezione della home page. Salterò parti come l'aggiunta di colori e la modifica delle dimensioni dei caratteri mentre mi concentrerò sui concetti relativi al layout.

Sezione Eroi

Il blocco Cover di WordPress rimane uno dei miei blocchi preferiti. Consente agli utenti di creare sezioni di eroi senza molto lavoro. Ho preso l'immagine di sfondo dalla demo originale e l'ho inserita. Avevo fatto il primo vero passo verso il basso di questo viaggio.

Quindi, ho aggiunto un blocco Intestazione, regolandone leggermente le dimensioni. L'ho seguito con un blocco Spacer e Social Icons.

Ho subito colpito due intoppi. Il primo è che WordPress non include un'icona social di iTunes. Non sono riuscito a trovare un problema aperto nel repository Gutenberg per questo. Forse non è una caratteristica molto richiesta. Il secondo problema era che il blocco Social Icons non generava le etichette dei social network, quindi non potevo replicare quella parte del design.

Sezione Discografia

Ci sono alcuni modi per gestire questa sezione. Supponendo che gli album elencati siano un tipo di post personalizzato, qualunque sia il plug-in da cui provengono questi album avrebbe idealmente un blocco personalizzato per l'output. Gli utenti possono anche utilizzare il blocco Ultimi post se si tratta di post del blog o il prossimo blocco Query.

Per semplicità, ho deciso di aggiungere un blocco Colonne e inserire tre immagini collegate.

Sezione media e testo

Il mio piano per questa sezione era di utilizzare il blocco Media e testo di base. Tuttavia, supporta solo i media self-hosted. Non c'era modo per me di incorporare un video di YouTube.

Invece, sono andato con un blocco Colonne. Nella colonna di sinistra, ho rilasciato l'URL di un video di YouTube. Sulla destra, ho aggiunto i blocchi Intestazione, Paragrafo e Pulsanti.

Sezione Video

Questa era una sezione relativamente semplice da ricreare. Per il layout, è stato necessario solo un blocco Intestazione seguito da un blocco Colonne. Quindi, ho preso un paio di link video da YouTube e ho incollato gli URL nell'editor.

Sezione Ultimi Messaggi

Questa è stata la parte del layout con cui ho avuto più problemi. WordPress fornisce il blocco Ultimi post, che può essere impostato in una griglia. Tuttavia, Ariele Lite non ha gestito correttamente le colonne.

Quindi, ho barato un po'.

Sono passato a un tema basato su blocchi che supporta l'imminente funzionalità di modifica completa del sito. Quindi, ho inserito un blocco Query per ottenere un maggiore controllo sulle colonne dei post. Successivamente, sono tornato al tema Ariele Lite.

Il design originale potrebbe essere eseguito con l'attuale blocco Ultimi post, quindi questo non è un problema di editor di blocchi.

Sezione della barra laterale del piè di pagina

Tecnicamente, la barra laterale del piè di pagina non rientra nell'ambito del design della home page. Fa parte del piè di pagina del tema nell'intero sito. Tuttavia, ho deciso di aggiungerlo poiché ero già su un rotolo.

Questa sezione richiede il blocco Colonne. Da quel momento, si tratta di inserire un blocco di intestazione per ciascuna colonna. Ho aggiunto un blocco Paragrafo, Calendario e Galleria per ricreare i tre "widget".

Il design del blocco Calendario di Ariele Lite funziona meglio su uno sfondo di colore chiaro. Era un piccolo punto dolente che ho trascurato. A lungo termine, WordPress dovrebbe fornire controlli di progettazione sui blocchi che li mancano.