Selle postituse eesmärk on aidata teil mõista WordPressi uue redaktori arendamise põhikontseptsioone; Gutenberg. Gutenberg on selle kirjutamise ajal veel üsna uus. Ja nagu kõigi uute tehnoloogiate puhul nende sünnifaasis, on dokumentatsioon ja standardid kahjuks veidi puudulikud.
WordPressi dokumentatsioonisaidil on arendajatele suur osa, mis on pühendatud Gutenbergile; nimega Gutenbergi toimetaja käsiraamat. See sisaldab juba üsna palju teavet. Kuid see võib olla pisut segane või hirmutav inimese jaoks, kes on Javascripti-põhiste tehnoloogiate jaoks täiesti uus. PHP-le keskendunud arendajatele, kellel võivad olla vaid põhiteadmised Javascriptist/jQueryst, võivad WordPressi uued tehnoloogiad tunduda hirmutavad. Kuid uskuge mind, kui olete põhimõisted selgeks õppinud, näete, millised uued võimalused teil nüüd WordPressi arendajana on.
Alustame absoluutsetest põhitõdedest. Milliseid programmeerimiskeeli (programmeerimiskeeli) ja tööriistu peaksite Gutenbergi jaoks parimaks arendamiseks kasutama või õppima?
Keel ja raamatukogud, mida peate teadma
Lühike vastus küsimusele, millist keelt peate Gutenbergi arendamiseks kasutama, on: Javascript. Kuid Javascripti maailmas on üsna palju kontseptsioone, laiendusi ja tööriistu, millest peaksite teadma.
Kõigepealt on küsimus Javascripti versioonis. Seal on Javascripti ametlik standardimine; ECMAScript. ECMAScript 5 (sageli lühendatud ES5 -ks) tuli välja umbes 10 aastat tagasi ja see on Javascripti versioon, mida enamik meist arendajatest tunneb. Siis on meil ECMAScript 6 (sageli lühendatud ES6 -ks ), mis ilmus 2015. aastal. Mõned inimesed nimetavad seda versiooni ES2015-ks. Ja lõpuks on ESNext, mis on dünaamiline nimi, mis katab tulevase versiooni ja sisaldab ettepanekuid, mida loodame lisada mis tahes järgmisesse Javascripti standardversiooni.
Võib-olla mõtlete järgmiselt: "See on kõik hea ja kõik, Javascripti uuemad versioonid tähendavad lihtsalt rohkem funktsioone. Nii et ma kasutan lihtsalt uusimat." Kuid Javascripti versioonide kohta peate teadma väga olulist asja ja see on järgmine: enamik brausereid saab tänapäeval aru ainult ES5-st.
See tähendab, et kui soovite Javascripti ES6-s või ESNextis kirjutada, peate seadistama tööriistad, mis muudavad teie koodi ES5-ks, et brauserid seda mõistaksid. Kuid enne, kui hakkate mõtlema ES6 ja ESNexti õppimise üldse vahelejätmisele, pidage meeles, et ES5 on 10 aastat vana. Ja see nõuab palju rohkem koodi kirjutamist. Samuti on see palju vähem loetav ja keerulisem, kui kirjutaksite selle ES6-s või ESNextis.
Lisaks soovite Gutenbergi kontseptsioonide jaoks kasutada ka JSX -i – Javascripti süntaksilaiendit. JSX on ka keel, mida brauserid ei mõista ilma seda muutmata.
Miks siis vaeva näha ES6, ESNexti või JSX-iga?
Kui te pole ikka veel veendunud, et ES6/ESNext on selle teisendamiseks lisasammu väärt, lubage mul näidata teile koodide võrdlust. ES6 ja JSX abil saate selle kirjutada lihtsa lõigu tagastamiseks; klassi ja muutuja dünaamilise väljundiga;
Neile teist, kes pole sellega tutvunud ja arvate, et olen tsitaadid unustanud – ei, ma ei ole seda teinud. See on JSX-i lihtsus. Võrdleme ülaltoodut sellega, kuidas kirjutaksite ES5 ja WordPressi Javascripti teekidega:
return wp.element.createElement(
'p',
{ className: 'example' },
'Hello, my name is ' + name
);Kogu ülaltoodud kood on vajalik ES6 ja JSX-i väljastamiseks ainsuses, mida on väga lihtne lugeda! Kujutage ette keerukama kasutajaliidese koostamist sündmuste ja tingimustingimustega, kui lihtsalt üks lõik nõuab seda kohmakat koodijuppi.
Kas olete veendunud? Hea!
Teisendustööriistad ja React JS
Kõige tavalisem ja WordPressi tööriist ES6/ESNexti teisendamiseks on Babel. Tavaliselt kasutate Babelit Webpacki pistikprogrammina, mis on tööriist, mis koondab ja minimeerib teie Javascripti faile. Mõlemad tööriistad kasutavad Node.js -i, mis annab teile mõned tööriistad Webpacki ja Babeli skriptide käivitamiseks käsureal. Kui see kõlab segadusse ajavalt, on mul postitus, mis selgitab põhjalikult, kuidas kõiki neid tööriistu Gutenbergi arendamiseks seadistada .
Teine asi, mida peate tehnoloogiate kohta teadma, on see, et Gutenberg põhineb React JS peal oleval abstraktsioonikihil. React JS on avatud lähtekoodiga Javascripti teek, mida haldab Facebook ja mis ilmus umbes 2013. aastal. Kuna React on olnud juba mõnda aega, on selle teegi jaoks palju õpetusi, juhendeid ja dokumentatsiooni. Reacti ametlikul saidil on hea ja üksikasjalik õpetus teile, kes pole Reacti kasutanud. Gutenbergi jaoks arendamiseks ei pea te kindlasti olema Reacti ekspert, kuid selle komponentide ja olekutega töötamise põhitõed aitavad teil Gutenbergi mõista.
Kokkuvõtteks:
- Learning React JS aitab palju mõista, kuidas Gutenbergi areneda. Eriti kui soovite luua oma kohandatud plokke või kohandada olemasolevaid.
- Saate teha ainult ES5 Javascripti kasutades, kuid kindlasti on soovitatav õppida ES6, ESNext ja JSX.
- Tutvuge vajalike tööriistadega, et saaksite oma ES6 / ESNext / JSX koodi teisendada. Need tööriistad on npm, Webpack ja Babel.
Uus viis postituse sisu salvestamiseks ja miks
Gutenbergi üks suurimaid eeliseid on postisisus fikseeritud HTML-ist eemaldumine. WordPress, enne Gutenbergi, ja enamik veebipõhiseid CMS-i salvestavad artiklite sisu puhtas HTML-is. Lihtsa sisu (pealkirjad ja lõigud) puhul see üldiselt probleem ei ole. Kuid keerulisema ja dünaamilisema rikkaliku sisu puhul võib see olla suurem probleem.
Kõik CMS-id, mis lubavad artikli sisus dünaamilist sisu, puutuvad kokku probleemidega selle salvestamisel kehtiva HTML-ina. See võib olla ükskõik milline pilt, mis viitab täieliku URL-i asemel selle ID-le süsteemis. Või vidin, mis kuvab dünaamiliselt antud kategooria viimaseid postitusi. Tavaliselt lahendatakse see kohandatud krüptilise HTML-i väljastamisega, mille tavapärasel väljastamisel pole mõtet. Seejärel laske CMS-i parseril muuta need HTML-i osad millekski tähendusrikkaks või dünaamiliseks. Selle puuduseks on see, et kui teisaldate oma sisu teise CMS-i, põhjustab see sageli inetu HTML-i. Sisu täidetakse sõelumata HTML-iga, mille peate käsitsi puhastama. Seda probleemi püüab Gutenberg lahendada.
Gutenbergiga on WordPress otsustanud salvestada täiendava ja dünaamilise teabe HTML-i kommentaaridena. HTML-i kommentaarid ei ole veebisaidi kasutajatele kunagi nähtavad ja põhimõtteliselt on kommentaariplokis kõik lubatud. HTML-i kommentaar algab <!--ja lõpeb tähega -->ning Gutenberg salvestab andmed teatud struktuuris JSON-vormingus. Iga Gutenbergi plokk on ümbritsetud algava HTML-i kommentaariga ja pärast seda sulgeva HTML-i kommentaariga.
Postituste sisu salvestatakse uuel viisil
Ma ei hakka kommenteerima, kuidas kommentaariplokid on üles ehitatud – selle kohta leiate üksikasjaliku juhendi WordPressi redaktori käsiraamatust. Kuid näiteks Gutenbergi postituse sisu lihtne lõik salvestatakse andmebaasi järgmiselt:
Mis puudutab dünaamilist sisu, siis tavaliselt ei väljastata HTML-i üldse. Kogu teave, mida WordPress vajab, et mõista, mida see plokk teeb, leiate HTML-i kommentaaridest. Nii salvestab Gutenberg ploki "Viimased postitused":
Kuna kõik on HTML-i kommentaar, siis oma postituste teise WordPressi ülekandmine ilma Gutenbergi või muu CMS-ita tagab, et välja ei sülitata inetut parseerimata HTML-i. Seda lihtsalt ignoreeritakse ja jäetakse vahele.
Nagu olete praeguseks ilmselt aru saanud, algavad kommentaaride plokid ploki nimega, mille ees on ‘ wp‘. Kui on kohandatud sätteid, väljastatakse need JSON-i nime järel, nagu näete viimaste postituste blokeerimise näites. Gutenberg viitab neile kui atribuutidele ja see kontseptsioon on midagi, millega saate väga tuttavaks, kui hakkate õppima Gutenbergi jaoks arendama.
Kasulik teada:
kui soovite põhjalikumalt uurida, kuidas uue postituse sisu salvestatakse, võite vaadata wp_postsoma andmebaasis olevat tabelit. WordPressi mallide seest andmebaasi täieliku väärtuse piilumiseks on veel üks lihtsam viis. Kasutage silmuses olevas ühes mallis lihtsalt " echo get_the_content()". Tavalise " the_content()" kasutamine väljastab sõelutud postituse sisu, kuid sisu väärtuse kordamisel väljastatakse täpselt see, mis on andmebaasis salvestatud. Kommentaariplokkide nägemiseks saate kasutada tööriista Kontrolli või vaadata allikat Chrome’is või Firefoxis.
Mida saate arendajana Gutenbergis teha
Teil on paar võimalust, kuidas kohandada oma teemasid või pistikprogramme Gutenbergi jaoks. Allpool on loetletud kõige levinumad kohandused, mida arendajana tõenäoliselt teeksite.
Laiendage ja kohandage olemasolevaid plokke
WordPress Gutenbergiga on kaasas suur hulk plokitüüpe ja saate mõnda neist laiendada. Saate ka mõned neist eemaldada või otsustada teatud juhtudel lubada või eemaldada ainult mõned neist.
Kõige tavalisem meetod ploki laiendamiseks on kohandatud plokistiilide lisamine – need on ploki stiilivariatsioonid. Blokeerimisstiilid ei ole WordPressis vaikimisi levinud, kuid neid on. Heitke pilk Quote plokki. Gutenbergi redaktoris on parempoolsel külgribal kast nimega "Stiilid".
Teine võimalus olemasolevate plokkide kohandamiseks on filtrite kasutamine. Tõenäoliselt tunnete WordPressis PHP-d kasutavaid filtreid, kuid Gutenbergi puhul on nüüd olemas Javascripti-põhised filtrid plokkidel. Näiteks saate kõikidele või teatud tüüpi plokkidele lisada oma kohandatud atribuute (sätteid) või filtreerida, kuidas neid salvestatakse või väljastatakse.
Samuti saate manipuleerida plokkide kategooriatega, samuti eemaldada või teatud olukordades teatud plokke lubada. Või võite näiteks veenduda, et kohandatud postituse tüübi jaoks on lubatud vaid käputäis plokitüüpe.
Looge oma kohandatud plokid
Kohandatud plokkide loomine on võib-olla enamiku WordPressi arendajate esimene mõte. WordPressi vaikeplokid võivad olla kaugel, kuid kui loote keerukama teema või pistikprogrammi, on teil tõenäoliselt konkreetsed vajadused. Näiteks Gutenbergi kasutamine, et luua kena välimusega esileht koos sisu ja dünaamilise sisu otseteedega. Enamiku kohandamisvõimaluste saavutamiseks on võimalik kasutada CSS-klassi valikut, mis on olemas kõigi plokkide jaoks. Kuid see pole eriti kasutajasõbralik.
Oma kohandatud plokkide kirjutamine on ilmselt Gutenbergi teema või pistikprogrammi kohandamisel kõige keerulisem. Kuid see võib olla ka kõige rahuldust pakkuv! Saate mitte ainult luua plokke, mis toimivad ja näevad välja täpselt sellised, nagu soovite, vaid see on ka suurepärane viis uue Javascripti-põhise tehnoloogia kiireks tundmaõppimiseks.
Veenduge, et teie teema oleks Gutenbergi jaoks valmis
Kui olete WordPressi teemaarendaja, peaksite teadma, et Gutenbergi jaoks võib teie teema vajada palju seadistamist, eriti add_theme_support(). WordPressi käsiraamatus on hea ülevaade kõigist teematugedest, mida peate oma teema Gutenbergi jaoks valmis muutmiseks arvestama.
Kuna vaikimisi tegeleb WordPress enamiku vaikeplokkide stiilimisega ise, nii et te ei peaks oma teemas nende stiilide pärast liiga palju muretsema. Kuid teemaarendajad on tavaliselt oma kujunduse ja stiili osas valivamad. Seega peate tõenäoliselt kohandama või täiendama ploki stiili. Redigeerija stiile saate lisada ainult kasutajaliidesele, ainult redaktorile või mõlemale. WordPress Gutenbergi käsiraamat annab ülevaate redaktori stiilidest ja vaikeplokistiilidest.
Samuti on olemas plokimallide kontseptsioon, kus saate eelnevalt määratleda, millised plokid peaksid postitustes ilmuma. Plokimalle saab kasutada kohahoidjana, mis aitab redaktoril plokke täita. Kuid seda saab kasutada ka kindla plokkide ja positsioonide komplekti määratlemiseks.
Ja lõpuks on saadaval funktsioonid Gutenbergi parseriga töötamiseks ja postitustest plokkide eraldamiseks. Kuna kogu sisu salvestatakse koos täieliku teabega sisu tüübi kohta, saate hõlpsalt välja võtta postituse sisu teatud osad. Hea näide on postituste esimese lõigu väljavõte, et seda väljavõttena näidata. Selle kontseptsiooni jaoks on väga kasulik PHP-funktsioon [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), mis kasutab pakutava postituse sisule Gutenbergi parserit ja vastutasuks saate PHP massiivi kogu ploki teabe ja sisuga.
Järeldus
Loodan, et see postitus pole mitte ainult õpetanud teile midagi Gutenbergi arendamise kohta, vaid muutnud teid ka uudishimulikuks ja huvi tundma õppida! PHP-le keskendunud WordPressi arendajana, kes oli algselt vastu ideele minna üle Javascripti-põhisele tehnoloogiale, võin teile öelda, et kui olete astunud sammu "uue viisi" tundmaõppimiseks, olete selle üle õnnelik. Gutenberg avab uusi viise WordPressi sisu kohandamiseks, kujundamiseks ja kuvamiseks, ilma et oleks vaja lehekoostajaid või raskete raamatukogudega teemasid, et võimaldada paindlikku ja ilusat postitussisu. Peame lihtsalt õppima, kuidas sellega optimaalselt töötada!