See on üksikasjalik õpetuste seeria, mis käsitleb oma kohandatud WordPressi Gutenbergi plokkide loomist. See on mõeldud teile, kes olete teemade või pistikprogrammide arendaja ja olete nagu minagi pettunud dokumentide puudumise pärast. Suurem osa sellest, mida olen WordPressi uues Javascripti maailmas arendamise osas õppinud, on katse-eksituse meetodil, jõuliselt katsetades ja kõike sellega seonduvat lugedes. Ja nii ma mõtlesin, et võiksin koondada kõik, mida olen seni õppinud, suurde õpetuseks.
See õpetus koosneb 10 osast, mille eesmärk on õpetada teile, kuidas kirjutada oma kohandatud plokke. Pole tähtis, milleks need on mõeldud, alustades põhitõdedest kuni keerukamate funktsioonideni. Soovitan koodi kopeerimise+kleepimise asemel kõik ise välja kirjutada. See on parim viis õppimiseks! Järgige seeriat sammudest 1 kuni 10, kuna me ehitame edasi ploki peale.
Mida peate teadma enne alustamist
Enne kui astume sammudesse; lahtiütlemine. On mõned asjad, mida peaksite juba eelnevalt teadma, mis see sari on ja mis mitte.
Programmeerimiskeeled
Peate teadma Javascripti – see on ette antud. Pole vaja olla ekspert, kuid see pole Javascripti õpetus. Mis puudutab ECMAScripti Javascripti versiooni; saab kirjutada ES5-s ja mitte muretseda oma koodi kompileerimise pärast Babeli ja muuga. Kuid see seeria on kirjutatud ES6 ja ESNext koodiga. Ärge muretsege – 1. samm on pühendatud teile ESNextis kodeerimiseks valmis arenduskeskkonna seadistamisel koos kõigi nende uute süntaksitega.
Nagu te ilmselt teate, põhineb Gutenberg React JS -il. See seeria ei ole ka Reacti õpetus ja eeldab põhiteadmisi Reacti ja selle toimimise kohta. Jällegi pole vaja olla ekspert. Kuna React on juba mõnda aega tegutsenud, on Reacti õpetamiseks palju häid õpetusi, dokumentatsiooni ja ressursse. Seega soovitan need kõigepealt üles otsida.
See seeria on keskendunud Javascripti, Reacti ja JSX-i osade õppimisele ega ole seotud stiilide / CSS-iga. Kuna teie ploki eesmärk võib olla drastiliselt erinev, olen otsustanud mitte keskenduda stiilile ja pakkusin ainult väga lihtsat HTML-i. Teie ülesanne on lisada oma stiil ja vajalik HTML-väljund, et muuta plokk renderdamaks täpselt nii, nagu vajate.
Selle õpetuse vanus
Ja lõpuks võtke arvesse selle sarja kirjutamise aega. Gutenberg on endiselt üsna uus, kuid muutub drastiliselt ja seda täiustatakse.
Kui leiate selle kaugemas tulevikus, võidakse mõni kood vananeda või asendada paremate meetoditega. See juhend on kirjutatud ja viimistletud WordPressi versioonis 5.2.3 (2019. aasta lõpp).
Mida sa õpid
Esimestes osades keskendume põhitõdedele. Seadistasime arenduskeskkonna koos meie koodi kompileerimisega. Ja ploki registreerimise põhitõed ja selle vajalikud PHP osad samuti. Õpime tundma WordPress Gutenbergi tohutut komponentide ja meetodite raamatukogu.
Edaspidi saame teada, kuidas lisada redaktori külgribal (inspektor) oma ploki jaoks jaotisi ja sätteid ning kohandada tööriistariba. Teekonnal puudutame palju erinevaid sisestustüüpe ja seda, kuidas nende jaoks Gutenbergi komponenti kasutada. Ja loomulikult õpime, kuidas salvestatud teavet oma plokki salvestada, värskendada ja väljastada – ja kuidas see kulisside taga toimib.
Lõpus vaatleme keerukamaid asju, nagu dünaamilised plokid ja kuidas kasutada PHP-d ploki väljundi renderdamiseks. Ja lõpuks, kuidas teha redaktoris postituse päringuid – võimaldades kasutajal valida renderdamiseks postituse loendist.
Sisukord
Altpoolt leiate otselingid sarja iga osa juurde.
-
1 osa: Arenduskeskkonna seadistamine
Selle õpetusseeria esimeses osas, kuidas luua kohandatud Gutenbergi plokke, peame seadistama oma arenduskeskkonna. Vajame kohta, kuhu saaksime oma koodi ES6/ESNext süntaksites kirjutada ja selle liikvel olles kompileerida. -
2 osa: Ploki registreerimine
Selles osas kirjutame oma kohandatud ploki registreerimiseks ja konfigureerimiseks Javascripti. Lõpus registreerime skripti PHP-ga ja teeme vajaliku PHP koodi, et WordPress tuvastaks selle uue plokina. -
Osa 3: Rekvisiidid ja WordPressi komponendid
Eelmises etapis õppisime, kuidas registreerida kohandatud plokki nii Javascriptis kui ka PHP-s. Selles etapis õpime kasutama WordPressi komponente erinevat tüüpi väljade ja sätete lisamiseks. -
4 osa: Atribuudid
Selles osas vaatleme, kuidas atribuute defineerida, nende väärtusi hankida ja värskendada. Atribuutide abil saame vastu võtta redaktori sisendit, salvestada selle ja väljastada, kuidas me valime. -
5 osa: Inspektori sätete lisamine
Selles etapis keskendume sellele, mida WordPress (vähemalt koodis) kutsub Inspectoriks – redaktoris paremal küljel oleval külgribal. Käsitleme mõnda uut komponenti, mida on mõttekas külgribale paigutada, ja kuidas neid käsitleda. -
6 osa: Tööriistaribade lisamine
Selles postituses õpime, kuidas lisada oma plokki WordPressi tööriistaribasid, st joondamiseks ja plokkide joondamiseks. Samuti õpime lisama oma tööriistaribasid oma nuppudega kohandatud toimingute tegemiseks. -
7 osa: oma komponentide loomine
Siiani oleme selles õpetusesarjas kirjutanud kogu koodifunktsiooniregisterBlockType().editSee on täiesti võimalik ja sageli soovitatakse selle asemel määrata redigeerimine eraldi komponendile. Seda tehes saame kasutada selliseid funktsioone nagu komponendi oleku ja elutsükli meetodid. -
8 osa: Teie ploki tõlkimine
Selles osas keskendume sellele, kuidas tõlkida meie ploki tekste ja väärtusi. Kasutame WP-CLI-d vajalike failide genereerimiseks, et Gutenberg saaks WordPressi keele vahetamisel laadida meie tõlkeid. -
9 osa: Dünaamilised plokid
Seni oleme ploki väljundi renderdanud Javascriptis. Dünaamilise sisu puhul, nagu hiljutised postitused või postituse kuvamine, võib meil aga tekkida vajadus ploki väljundi PHP-s renderdamiseks. -
10 osa: Postituste ja kõrgema järgu komponentide toomine
Viimases osas õpime, kuidas kasutada kõrgemat järku komponente ja seega toimetada redaktoris postituse päringut ning pakkuda meetodit postituste valimiseks.