Share
Noul editor WordPress (codificat Gutenberg) se va lansa în versiunea 5.0. Acum este momentul perfect pentru a face față cu ea înainte de a ateriza în WordPress de bază.
Vă voi arăta cum să lucrați cu API-ul bloc și să creați propriile blocuri de conținut pe care le puteți utiliza pentru a vă construi mesajele și paginile.
Nu există încă o dată exactă când WordPress 5.0 va fi lansat, dar ar trebui să existe o perioadă de timp în următoarele câteva luni. Până atunci, Gutenberg este disponibil ca plugin independent.
Aș recomanda să încercați noul editor Gutenberg dacă nu ați făcut-o deja. Este foarte ușor de instalat direct de la administratorul WordPress. Cu toate acestea, deoarece aceasta este încă o versiune beta a noului editor, nu este recomandat să îl utilizați încă pe site-urile de producție. Păstrați-o doar pentru site-urile de dezvoltare locală.
De asemenea, instalarea lui Gutenberg este esențială dacă doriți să urmați acest tutorial. În acest fel, puteți experimenta crearea propriilor blocuri personalizate. Dezvoltarea noului editor a înregistrat ritmuri rapide în ultimele luni, cu câteva lansări deja înregistrate până în 2018. Cea mai recentă versiune a lui Gutenberg este în prezent 2.7.0 în momentul redactării.
Cu fiecare versiune, se adaugă noi caracteristici, iar interfața editorului este îmbunătățită în mod constant pe baza feedback-ului utilizatorului. Încep să se uite și să se simtă mult mai subțire decât versiunile anterioare. De asemenea, o mulțime de bug-uri au fost rezolvate, făcând editorul mult mai robust.
Gutenberg oferă un nou mod de construire a conținutului posturilor prin "blocuri", care pot fi stivuite una peste cealaltă pentru a forma o pagină completă. Fiecare bloc individual există independent de alte blocuri și poate conține aproape orice marcaj, stiluri și JavaScript pe care îl doriți.
Pe parcursul acestui tutorial, vom acoperi tot ce trebuie să știți despre API-ul bloc, astfel încât să puteți începe să vă creați propriile blocuri personalizate imediat. Odată ce ați învățat fundamentele, crearea unor blocuri mai complexe este mai ușor decât credeți!
Proiectul Gutenberg este o veste mare pentru WordPress din alt motiv important. Este construit pe partea de sus a lui React. Asta-i drept, pentru prima dată în WordPress, React va fi inclus în core! Aceasta este o veste minunată pentru dezvoltatorii de teme și plugin-uri, deoarece React poate fi adăugat cu ușurință în orice pagină prin folosirea bibliotecilor React și ReactDOM incluse în WordPress core.
Destul de curând veți putea crea componente UI pentru toate proiectele dvs. WordPress direct în React. Anterior, dacă doriți să folosiți bibliotecile React și ReactDOM, trebuie să le includeți manual. Având în nucleu, este mult mai convenabil.
Gândiți-vă doar la cât de minunat ar fi să creați un ecran cu opțiuni de plugin în întregime în Reacție! Sau cum despre niște controale avansate avansate de personalizare? Aceste instrumente noi vor oferi dezvoltatorilor o mulțime de libertate și flexibilitate pentru a crea niște interfețe interactive interactiv utilizator.
Anticipăm că dezvoltarea WordPress în următorii câțiva ani va fi foarte interesantă și o mulțime de distracție!
Conceptul de blocuri din noul editor este o schimbare reală de schimbare de la actualul editor bazat pe TinyMCE, așa că haideți să aruncăm o privire mai atentă asupra a ceea ce este un bloc înainte de a ne arunca cu capul în API bloc. Gândiți-vă la blocuri sub formă de cutii negre, fiecare conținând o grămadă de marcare, stiluri și JavaScript toate înfășurate într-o entitate convenabilă numită "bloc".
Atunci când un bloc este adăugat la editor, acesta afișează o previzualizare a ceea ce va arăta la capătul din față. Aproape toate blocurile au setări pentru a personaliza în continuare aspectul și / sau comportamentul acestora.
Unele dintre blocurile disponibile în mod implicit în noul editor sunt:
Aceasta vă oferă o idee despre tipul de conținut pe care îl puteți adăuga editorului folosind blocurile incluse în noul editor. Toate aceste tipuri de blocuri sunt utile, dar destul de fundamentale, deci așteptați o mulțime de plugin-uri pentru a începe să apară cu blocuri mult mai cuprinzătoare pentru a adăuga aproape orice tip de conținut pe care vă puteți gândi.
S-ar putea să vă gândiți deja la unele blocuri de conținut de care aveți nevoie pentru propriile proiecte. Dacă niciunul dintre acestea nu este disponibil în Gutenberg, este probabil un candidat bun pentru crearea unui bloc personalizat.
Aș recomanda să încercați codul prezentat în această serie de tutori, deoarece este cel mai bun mod de a învăța cum să creați propriile blocuri utilizând blocul API. Prin toate mijloacele citiți mai întâi tutorialul pentru a afla cum funcționează API-ul blocului, dar reveniți și încercați singur codul și începeți să creați niște blocuri!
Aceasta este o serie de tutorial nivel mediu și avansat, deci presupuneți că nu sunteți nou în dezvoltarea WordPress. Pentru a profita la maxim de această serie, ar trebui să aveți cel puțin o cunoaștere activă a următoarelor:
Dacă aveți nevoie să citiți pe oricare dintre aceste subiecte, ar putea fi o idee bună să faceți acest lucru înainte de a continua. Voi explica conceptele pe măsură ce mergem, dar este în afara scopului tutorialului pentru a explica fiecare detaliu mic.
Este o practică obișnuită de a crea blocuri personalizate în WordPress folosind JSX, dar acest lucru nu este în nici un caz necesar. Dacă sunteți obișnuiți să dezvoltați componentele React în JavaScript de vanilie, puteți face acest lucru și în WordPress. Alegerea este în întregime a ta. Cu toate acestea, cea mai mare parte a codului de bloc pe care îl veți întâlni va fi scris în JSX (inclusiv acest tutorial), astfel încât veți găsi mai ușor să înțelegeți conceptele dacă utilizați și JSX.
Proiectul Gutenberg continuă să se dezvolte foarte mult, astfel încât unele lucruri pot fi supuse schimbării chiar și atunci când citiți acest tutorial. Aceasta ar putea include modificări ale interfeței editorului, componente noi de bază etc..
Cu toate acestea, editorul nou este destul de stabil acum, iar funcțiile recent adăugate, cum ar fi blocurile imbricate și reordonarea prin tragere / plasare, sunt destul de interesante. Chiar dacă unele detalii minore ale Cum puneți în aplicare blocuri se poate schimba, lucru important de reținut este conceptul general de blocuri și modul în care le puteți utiliza pentru a crea orice tip de conținut.
Dacă rămâneți blocat, recomand să consultați manualul oficial Gutenberg, care este la curent cu cele mai recente modificări. De asemenea, verificați proiectul Gutenberg de pe GitHub pentru a inspecta codul sursă și pentru a înregistra eventualele probleme pe care le puteți întâlni.
Acest lucru va ajuta doar proiectul să devină mai puternic cu cât mai mulți oameni îl testează. Acesta este un alt motiv mare pentru a începe să dezvolți blocuri acum, înainte de a fi oficial parte din WordPress!
Pentru a urmări împreună cu codul din acest tutorial, veți avea nevoie de următoarele:
Dacă nu aveți deja un mediu de dezvoltare local, atunci puteți utiliza ceva asemănător Local by Flywheel sau DesktopServer deoarece ambele au versiuni gratuite disponibile și suportă mai multe sisteme de operare.
Asigurați-vă că rulați cele mai recente versiuni de WordPress și pluginul Gutenberg pentru a vă asigura că utilizați toate cele mai recente funcții. De asemenea, există câțiva editori de coduri excelente acolo, deci dacă nu aveți deja unul instalat, aruncați o privire la editorii gratuit, cum ar fi Visual Studio Code sau Atom, care ar trebui să fie mai mult decât suficiente.
Pentru a crea cu ușurință blocuri noi, vom folosi un set de instrumente relativ nou numit crea-guten-bloc. Acesta vă permite să transformați rapid un nou plugin care conține toate setările și codul de pornire necesare pentru a crea blocuri. Este de asemenea un set de instrumente de configurare zero, deci funcționează chiar din cutie într-un mod similar cu cel al Create-reacționează aplicație set de instrumente pentru scări noi aplicații React cu efort minim. Deci, dacă ați folosit vreodată Create-reacționează aplicație, veți ști ce să vă așteptați.
Să aruncăm o privire acum asupra modului în care putem folosi acest instrument pentru a crea blocuri Gutenberg. Deschideți o fereastră de terminal în interiorul dosarului plugin (/ Wp-content / plugins /) pentru site-ul dvs. de dezvoltare locală și introduceți următoarele:
npx crea-guten-block blocul meu-custom-block cd my-custom-block npm start
(Notă: este necesar să se folosească npm v5.2 + npx comanda.)
După câteva minute, un nou plugin va fi creat în interiorul unui folder numit mi-personalizat-bloc conținând toate fișierele și instrumentele necesare pentru a crea blocuri folosind React! Nu e rău, eh?
Numele pluginului din administratorul WordPress va fi my-custom-block - Plug-in CGB Gutenberg Block. Mergeți și activați-o.
Pluginul creează un nou bloc disponibil pentru noi în editorul Gutenberg. Pentru a testa noul nostru bloc, navigați la editorul de postare și faceți clic pe textul cu titlul selectat Scrie povestea ta.
Apoi, apăsați pe / pentru a afișa o casetă pop-up pe care o putem folosi pentru a căuta toate blocurile disponibile.
Notă: există și alte modalități de căutare pentru un bloc, dar îmi place să îl folosesc / pentru a afișa fereastra blocului de căutare destul de rapid și convenabil. Dar folosiți metoda pe care vă simțiți mai confortabilă.
Cu caseta de căutare deschisă, începeți să tastați mi-personalizat-bloc și selectați my-custom-block - Blocul CGB. Aceasta va afișa blocul nostru personalizat în fereastra editorului.
În momentul de față, este vorba doar de un bloc de boilerplate, care nu face altceva decât să afișeze textul cu loc de substituire în interiorul unei cutii colorate. Cu toate acestea, acesta evidențiază un aspect interesant de a crea blocuri.
Clic Vezi mesajul pentru a vedea cum postul va arăta vizitatorilor site-ului.
După cum puteți vedea, atât conținutul, cât și stilurile blocului redat sunt diferite pe capătul din față și pe cel din spate. Acest lucru se aplică și codului JavaScript, care poate fi diferit și pentru partea frontală.
Motivul pentru diferența de randare este că, atunci când creați blocuri, trebuie să declarați în mod specific funcții separate de redare frontală și back-end.
Asta pentru că o mulțime de blocuri necesită elemente UI suplimentare pentru a fi redate în interiorul editorului post pentru a ajuta la configurarea setărilor blocului. Deoarece acest lucru este relevant doar pentru editorul post, este complet redundant atunci când redarea blocului pe front. Prin urmare, specificați ieșirea care trebuie afișată pe front, într-o funcție de redare separată.
Deși această abordare are sens și funcționează bine, aceasta ridică probleme de duplicare a codului. Dacă nu sunteți atent, puteți ajunge la o mulțime de definiții duplicate ale conținutului.
Acolo unde este posibil, este o idee bună să separați conținutul comun pentru funcțiile de redare de la front și back-end pentru a ajuta la reducerea duplicării. Vom urmări această abordare pe parcursul acestei serii tutorial.
În acest tutorial, am introdus conceptul a ceea ce este un bloc și de ce noul editor Gutenberg va fi o veste mare atunci când vine cu WordPress 5.0. Este o adevărată schimbare de schimbare de la actualul editor bazat pe TinyMCE.
Pentru a ajuta la crearea rapidă a blocurilor, crea-guten-bloc este un instrument foarte util care vă permite să creați un plugin complet care conține un bloc de pornire care să fie pregătit pentru personalizare.
Am completat lucrurile prin a vedea cum să folosim blocul nostru personalizat în noul editor de posturi și am descoperit că redarea pe partea din față și din spate poate să pară foarte diferită. În Gutenberg, nu vi se cere să potriviți rezultatele!
În partea a doua, vom intra în specificul API-ului bloc și cum îl puteți folosi pentru a vă crea propriile blocuri personalizate.
Între timp, verificați câteva dintre celelalte postări despre WordPress Gutenberg!
Accentsconagua