Dacă aceasta este o dezvoltare modernă a temei WordPress, înregistrează-mă

Am avut o idee cu o temă de bloc care îmi zbârnâie în creier de ceva vreme. De luni de zile, m-am gândit să construiesc o temă de profil/carte de o singură pagină și, în cele din urmă, m-am așezat și am lucrat în weekend. În parte, am vrut să fac asta doar pentru distracție. Cu toate acestea, o altă parte a mea a vrut să vadă cum a progresat tematica blocului din perspectiva dezvoltatorului.

Inspirația pentru această temă a venit de la alți câțiva oameni și proiecte. Experimentul pentru pagina de destinație pe două coloane al lui Kjell Reigstad din octombrie 2020 l-a declanșat pentru prima dată. O întrebare recentă adresată rubricii Ask the Bartender despre teme compacte și confortabile mi-a făcut să curgă din nou sumele creative. Cu toate acestea, văzând că Echipa Teme aprobă o temă de bloc similară, Miniblock OOAK, de Carolina Nymark, a însemnat că regulile erau acum suficient de laxe pentru a putea scoate ceva de genul acesta în lume.

Una dintre probleme este că tematica bazată pe blocuri m-a ars înainte. Am petrecut luni de zile construind un nou proiect anul trecut, în timpul meu liber prețios, doar pentru ca actualizările pluginului Gutenberg să-mi distrugă progresul săptămâni mai târziu. Știam că lucrurile se pot schimba odată cu fundamentul instabil al software-ului de nivel alfa, dar tot se dezumfla. Inutil să spun că nu am reușit să găsesc niciodată motivația să-l iau înapoi.

Cu WordPress 5.9 și un sistem mai stabil de tematică în blocuri cu doar câteva zile înainte, era timpul să-i mai dăm o șansă.

Am vrut să învăț profund tematica de blocare . Singurul mod în care puteam face asta era să mă întorc la început. Trebuia să mă familiarizez din nou cu acele elemente fundamentale ale HTML simplu, CSS și PHP. Și uită tot ce am crezut că știu, construind deasupra rețelei moderne. Trebuia să devin din nou un noob .

Din punct de vedere tehnic, este imposibil să uit tot ce știu fără a suferi un fel de amnezie. Cu toate acestea, poate - doar poate - aș putea reveni la elementele de bază ale web-ului.

Aș putea crea o temă WordPress fără o rețea complexă de dependențe care se întinde pe peste 900 de proiecte în folderul meu /node_modules ?

Aș putea crea ceva fără să trag în mod consecvent scripturile mele PHP de bază prin Composer?

Aș putea, știi , să creez doar o temă WordPress?

Primul pas a fost să-mi verific ego-ul la ușă. Când am lăsat deoparte ani de instrumente moderne și un flux de lucru construit în jurul lor, ceea ce am găsit a fost un sistem de tematică frumos și simplu, care aduce un omagiu rădăcinilor WordPress, dar este suficient de flexibil pentru a se extinde pentru versiuni avansate.

Acest lucru nu înseamnă că nu au existat sughițuri pe parcurs, dar auzim despre acestea destule. În plus, consider că programarea/dezvoltarea este arta de a rezolva probleme.

Am avut un weekend agitat. Am patru, poate cinci, ore de somn solid între vineri și sâmbătă noaptea. Poate că aveam atât de multe proiecte și lucruri în desfășurare încât mintea mea nu putea să le excludă. Indiferent, m-am trezit din nou la 3:30 dimineața duminică dimineața, obosit, dar incapabil să prind acei Z-uri atât de necesare. Așadar, mi-am deschis editorul de cod și am creat un nou proiect temă.

Într-o oră a funcționat. Era într-o formă suficient de decentă pentru a le împărtăși prietenilor prin Twitter în două.

Mai jos este o captură de ecran a paginii de pornire curente. Din punct de vedere tehnic, este singura pagină. M-am chinuit puțin de când am împins primele mele comite live.

Acesta este un model de bloc numit „Reflecții”. Fotografia de munte care se reflectă pe lac este din WordPress Photos și fotografiată de Anne McCarthy. Gradientul folosit pentru fundal este și el o reflectare a culorilor imaginii, ceea ce mi s-a părut o atingere plăcută.

Tema include câteva alte modele. Scopul este de a permite utilizatorilor să-și aleagă preferatul pentru cardul de profil, să personalizeze conținutul și să salveze. Ușor de gălăgie. M-am lovit cu asta, în care mă cufund la sfârșitul postării. În cea mai mare parte, totul a mers bine.

Ce am învățat din experiență

Crearea temelor WordPress cu blocuri este ușoară. Majoritatea lucrurilor sunt structurate și joacă după un set standard de reguli. Șabloanele merg aici. Piesele merg acolo. Conectați-vă setările de acolo. Probabil că vom vedea și mai multă structură în versiunile viitoare de WordPress.

Am construit tema de la zero folosind doar editorul meu de cod și o instalare locală WordPress. Fără module Node. Fără biblioteci PHP. Nicio configurație de construcție.

Probabil că voi folosi acele lucruri înainte ca acest proiect să fie finalizat. Unele instrumente pur și simplu facilitează dezvoltarea. Cu toate acestea, a nu avea nevoie de ele sau a scufunda în API-uri PHP mai complexe a redus bariera de intrare.

M-am simțit ca și cum aș fi fost transportat înapoi la mijlocul anilor 2000, doar cu un sistem mai bun pentru a avea grijă de toate elementele complexe. Pentru o dată, m-am putut concentra aproape în întregime pe design.

Există multe probleme cu sistemul de bază. Ciudățeniile, cum ar fi elementele de înveliș suplimentare în jurul blocurilor aliniate larg, există încă în editor. Și, mai multe blocuri au nevoie de actualizare - mă uit la dvs. Bloc de fișiere pentru a nu reutiliza blocul Button existent .

Practic, există ciudații. În calitate de tematic, înveți să lucrezi cu ei în minte, să aștepți o remediere în amonte sau să-ți riști sănătatea mentală încercând să găsești soluții.

Eu ezit cu privire la împărtășirea lucrărilor neterminate, dar ar trebui să arăt și dovezi. Cei interesați pot verifica depozitul GitHub la data acestui articol, cel puțin înainte de a face ceva prea nebun cu el.

Unii autori de teme ar putea să se uite la proiectul meu și să creadă că este un exemplu prea simplu. Cu toate acestea, aș putea aplica cu ușurință totul despre el la o temă completă. Standardele sunt aceleași, indiferent de mărime.

Poate ar trebui să începem să regândim ce este o temă . Întrucât tematica bazată pe blocuri este atât de tânără, ar trebui să facem cu toții puțină experimentare.

O oportunitate ratată

Voi deveni puțin tehnic în acest bit, deoarece este esențial pentru a explica o oportunitate ratată pentru o experiență de utilizator completă. Editorul site-ului este într-un loc în care este ușor de construit pentru utilizatorii mai avansați. Modelele ajută la reducerea decalajului pentru cei mai puțin tehnici, dar nu sunt suficiente.

Gândiți-vă la secțiunile majore ale unei pagini web. Piese precum antetul, subsolul, bara laterală, conținutul și chiar sub-secțiunile acestora. Ca utilizator, cum înlocuiți întregul design al zonei de conținut care este deja pe ecran cu un model de conținut diferit?

Puteți să-l ștergeți pe cel care este acolo și să introduceți un model nou. Cu toate acestea, ștergerea și inserarea secțiunilor unei pagini este o acțiune cu risc ridicat.

Dacă zona pe care doriți să o modificați este o parte șablon, puteți înlocui una cu alta. Asta presupunând că autorul temei a înregistrat vreunul pentru acea zonă. Aceasta este o acțiune cu risc scăzut și una dintre cele mai bune caracteristici ale editorului de site.

De exemplu, iată șabloane de antet pe care Twenty Twenty-Two le înregistrează așa cum apar sub elementul de meniu „Înlocuire” din bara de instrumente:

Cu toate acestea, aceasta nu este întreaga gamă de modele de antet a temei - are 18 în total. Îmi imaginez că majoritatea utilizatorilor finali nu le vor descoperi niciodată.

Unul dintre dezavantajele creării de modele pentru anumite piese de șablon este că utilizatorii finali nu au nicio modalitate de a înlocui sau transforma o piesă angro cu un model nou.

Autorii temei își pot duplica eforturile prin copierea codului modelului în partea șablon, presupunând că nu are PHP amestecat. Sau pot crea acele părți și pot introduce modelul asociat prin blocul Pattern:

 <!-- wp:pattern { "slug":"namespace/slug" } -->

Problema cu această abordare este că editorul site-ului nu afișează conținutul modelului în meniul derulant „Înlocuire” ( tocmai am descoperit o eroare? ):

Soluția ar trebui să fie simplă. Modelele înregistrate pentru o parte a șablonului ar trebui să fie interschimbabile prin interfața de utilizare. Sau, piesele care folosesc blocul Pattern ar trebui să se afișeze corect în meniul derulant „Înlocuire”.