See on \u00fcksikasjalik \u00f5petuste seeria, mis k\u00e4sitleb oma kohandatud WordPressi Gutenbergi plokkide loomist. See on m\u00f5eldud teile, kes olete teemade v\u00f5i pistikprogrammide arendaja ja olete nagu minagi pettunud dokumentide puudumise p\u00e4rast. Suurem osa sellest, mida olen WordPressi uues Javascripti maailmas arendamise osas \u00f5ppinud, on katse-eksituse meetodil, j\u00f5uliselt katsetades ja k\u00f5ike sellega seonduvat lugedes. Ja nii ma m\u00f5tlesin, et v\u00f5iksin koondada k\u00f5ik, mida olen seni \u00f5ppinud, suurde \u00f5petuseks.<\/p>\n
See \u00f5petus koosneb 10 osast, mille eesm\u00e4rk on \u00f5petada teile, kuidas kirjutada oma kohandatud plokke. Pole t\u00e4htis, milleks need on m\u00f5eldud, alustades p\u00f5hit\u00f5dedest kuni keerukamate funktsioonideni. Soovitan koodi kopeerimise+kleepimise asemel k\u00f5ik ise v\u00e4lja kirjutada. See on parim viis \u00f5ppimiseks! J\u00e4rgige seeriat sammudest 1 kuni 10, kuna me ehitame edasi ploki peale.<\/p>\n
Enne kui astume sammudesse; lahti\u00fctlemine. On m\u00f5ned asjad, mida peaksite juba eelnevalt teadma, mis see sari on ja mis mitte.<\/p>\n
Peate teadma Javascripti \u2013 see on ette antud. Pole vaja olla ekspert, kuid see pole Javascripti \u00f5petus. Mis puudutab ECMAScripti Javascripti versiooni; saab kirjutada ES5-s ja mitte muretseda oma koodi kompileerimise p\u00e4rast Babeli ja muuga. Kuid see seeria on kirjutatud ES6 ja ESNext koodiga. \u00c4rge muretsege \u2013 1. samm on p\u00fchendatud teile ESNextis kodeerimiseks valmis arenduskeskkonna seadistamisel koos k\u00f5igi nende uute s\u00fcntaksitega.<\/p>\n
Nagu te ilmselt teate, p\u00f5hineb Gutenberg React JS<\/a> -il. See seeria ei ole ka Reacti \u00f5petus ja eeldab p\u00f5hiteadmisi Reacti ja selle toimimise kohta. J\u00e4llegi pole vaja olla ekspert. Kuna React on juba m\u00f5nda aega tegutsenud, on Reacti \u00f5petamiseks palju h\u00e4id \u00f5petusi, dokumentatsiooni ja ressursse. Seega soovitan need k\u00f5igepealt \u00fcles otsida.<\/p>\n See seeria on keskendunud Javascripti, Reacti ja JSX-i osade \u00f5ppimisele ega ole seotud stiilide \/ CSS-iga. Kuna teie ploki eesm\u00e4rk v\u00f5ib olla drastiliselt erinev, olen otsustanud mitte keskenduda stiilile ja pakkusin ainult v\u00e4ga lihtsat HTML-i. Teie \u00fclesanne on lisada oma stiil ja vajalik HTML-v\u00e4ljund, et muuta plokk renderdamaks t\u00e4pselt nii, nagu vajate.<\/p>\n Ja l\u00f5puks v\u00f5tke arvesse selle sarja kirjutamise aega. Gutenberg on endiselt \u00fcsna uus, kuid muutub drastiliselt ja seda t\u00e4iustatakse.<\/p>\n Kui leiate selle kaugemas tulevikus, v\u00f5idakse m\u00f5ni kood vananeda v\u00f5i asendada paremate meetoditega. See juhend on kirjutatud ja viimistletud WordPressi versioonis 5.2.3 (2019. aasta l\u00f5pp).<\/p>\n Esimestes osades keskendume p\u00f5hit\u00f5dedele. Seadistasime arenduskeskkonna koos meie koodi kompileerimisega. Ja ploki registreerimise p\u00f5hit\u00f5ed ja selle vajalikud PHP osad samuti. \u00d5pime tundma WordPress Gutenbergi tohutut komponentide ja meetodite raamatukogu.<\/p>\n Edaspidi saame teada, kuidas lisada redaktori k\u00fclgribal (inspektor) oma ploki jaoks jaotisi ja s\u00e4tteid ning kohandada t\u00f6\u00f6riistariba. Teekonnal puudutame palju erinevaid sisestust\u00fc\u00fcpe ja seda, kuidas nende jaoks Gutenbergi komponenti kasutada. Ja loomulikult \u00f5pime, kuidas salvestatud teavet oma plokki salvestada, v\u00e4rskendada ja v\u00e4ljastada \u2013 ja kuidas see kulisside taga toimib.<\/p>\n L\u00f5pus vaatleme keerukamaid asju, nagu d\u00fcnaamilised plokid ja kuidas kasutada PHP-d ploki v\u00e4ljundi renderdamiseks. Ja l\u00f5puks, kuidas teha redaktoris postituse p\u00e4ringuid \u2013 v\u00f5imaldades kasutajal valida renderdamiseks postituse loendist.<\/p>\n Altpoolt leiate otselingid sarja iga osa juurde.<\/p>\n 1 osa: Arenduskeskkonna seadistamine<\/a><\/strong> 2 osa: Ploki registreerimine<\/a> Osa 3: Rekvisiidid ja WordPressi komponendid<\/a><\/strong> 4 osa: Atribuudid<\/a><\/strong> 5 osa: Inspektori s\u00e4tete lisamine<\/a><\/strong> 6 osa: T\u00f6\u00f6riistaribade lisamine<\/a><\/strong> 7 osa: oma komponentide loomine<\/a><\/strong> 8 osa: Teie ploki t\u00f5lkimine<\/a><\/strong>Selle \u00f5petuse vanus<\/h3>\n
Mida sa \u00f5pid<\/h2>\n
Sisukord<\/h3>\n
\n
\nSelle \u00f5petusseeria esimeses osas, kuidas luua kohandatud Gutenbergi plokke, peame seadistama oma arenduskeskkonna. Vajame kohta, kuhu saaksime oma koodi ES6\/ESNext s\u00fcntaksites kirjutada ja selle liikvel olles kompileerida.<\/p>\n<\/li>\n
\nSelles osas kirjutame oma kohandatud ploki registreerimiseks ja konfigureerimiseks Javascripti. L\u00f5pus registreerime skripti PHP-ga ja teeme vajaliku PHP koodi, et WordPress tuvastaks selle uue plokina.<\/p>\n<\/li>\n
\nEelmises etapis \u00f5ppisime, kuidas registreerida kohandatud plokki nii Javascriptis kui ka PHP-s. Selles etapis \u00f5pime kasutama WordPressi komponente erinevat t\u00fc\u00fcpi v\u00e4ljade ja s\u00e4tete lisamiseks.<\/p>\n<\/li>\n
\nSelles osas vaatleme, kuidas atribuute defineerida, nende v\u00e4\u00e4rtusi hankida ja v\u00e4rskendada. Atribuutide abil saame vastu v\u00f5tta redaktori sisendit, salvestada selle ja v\u00e4ljastada, kuidas me valime.<\/p>\n<\/li>\n
\nSelles etapis keskendume sellele, mida WordPress (v\u00e4hemalt koodis) kutsub Inspectoriks \u2013 redaktoris paremal k\u00fcljel oleval k\u00fclgribal. K\u00e4sitleme m\u00f5nda uut komponenti, mida on m\u00f5ttekas k\u00fclgribale paigutada, ja kuidas neid k\u00e4sitleda.<\/p>\n<\/li>\n
\nSelles postituses \u00f5pime, kuidas lisada oma plokki WordPressi t\u00f6\u00f6riistaribasid, st joondamiseks ja plokkide joondamiseks. Samuti \u00f5pime lisama oma t\u00f6\u00f6riistaribasid oma nuppudega kohandatud toimingute tegemiseks.<\/p>\n<\/li>\n
\nSiiani oleme selles \u00f5petusesarjas kirjutanud kogu koodifunktsiooniregisterBlockType()<\/code>. edit<\/code>See on t\u00e4iesti v\u00f5imalik ja sageli soovitatakse selle asemel m\u00e4\u00e4rata redigeerimine eraldi komponendile. Seda tehes saame kasutada selliseid funktsioone nagu komponendi oleku ja eluts\u00fckli meetodid.<\/p>\n<\/li>\n
\nSelles osas keskendume sellele, kuidas t\u00f5lkida meie ploki tekste ja v\u00e4\u00e4rtusi. Kasutame WP-CLI-d vajalike failide genereerimiseks, et Gutenberg saaks WordPressi keele vahetamisel laadida meie t\u00f5lkeid.<\/p>\n<\/li>\n