{"id":233925,"date":"2023-02-24T14:08:00","date_gmt":"2023-02-24T11:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233925"},"modified":"2022-11-11T13:13:53","modified_gmt":"2022-11-11T10:13:53","slug":"luo-mukautettu-gutenberg-lohko-osa-3-rekvisiitta-ja-wordpress-komponentit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-3-rekvisiitta-ja-wordpress-komponentit\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko – Osa 3: Rekvisiitta ja WordPress-komponentit"},"content":{"rendered":"\n

T\u00e4m\u00e4n opetusohjelmasarjan edellisess\u00e4 vaiheessa<\/a> k\u00e4ytiin l\u00e4pi mukautetun lohkon rekister\u00f6inti sek\u00e4 Javascriptiss\u00e4 ett\u00e4 PHP:ss\u00e4. T\u00e4ss\u00e4 vaiheessa opimme k\u00e4ytt\u00e4m\u00e4\u00e4n WordPressin komponentteja erilaisten kenttien ja asetusten lis\u00e4\u00e4miseen.<\/p>\n

Jotta voimme hy\u00f6dynt\u00e4\u00e4 WordPressin komponentteja lohkossamme, meid\u00e4n on ensin tiedett\u00e4v\u00e4 rekvisiitta.<\/p>\n

Rekvisiitta<\/h2>\n

Props on Reactin t\u00e4rke\u00e4 ominaisuus, ja se on pohjimmiltaan tapa siirt\u00e4\u00e4 muuttujia tai toimintoja muille komponenteille. Jos et ole tutustunut React-rekvisiittiin, voit lukea Reactin virallisen opetusohjelman<\/a> t\u00e4st\u00e4.<\/p>\n

WordPress tarjoaa joitain rekvisiittapalveluita edit<\/code>ja save<\/code>toimintoja varten registerBlockType()<\/code>. N\u00e4iden rekvisiittajen sis\u00e4ll\u00e4 saamme p\u00e4\u00e4syn kriittisiin asioihin, kuten attribuutteihin ja menetelm\u00e4\u00e4n ominaisuuksiemme p\u00e4ivitt\u00e4miseen. K\u00e4ymme attribuutit l\u00e4pi yksityiskohtaisesti seuraavassa vaiheessa<\/a>! <\/p>\n

T\u00e4h\u00e4n menness\u00e4 lohkossamme olemme kirjoittaneet funktion edit<\/code>ja save<\/code>kuten n\u00e4in:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Sinun pit\u00e4isi tottua lis\u00e4\u00e4m\u00e4\u00e4n parametri props<\/code>molempiin edit<\/code>ja save<\/code>, kuten n\u00e4in:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Nyt sinulla on t\u00e4ysi p\u00e4\u00e4sy muuttujaan props<\/code>ja kaikkeen sen sis\u00e4lt\u00e4m\u00e4\u00e4n sis\u00e4lt\u00e4 edit<\/code>ja save<\/code>. Jos olet utelias, voit lis\u00e4t\u00e4 funktioon console.log(props);<\/code>lauseen edelle. Sinun pit\u00e4isi n\u00e4hd\u00e4, mit\u00e4 rekvisiitta on saatavilla konsolin debuggerissa.edit``return<\/code><\/p>\n
WordPressin komponenttien k\u00e4ytt\u00e4minen<\/h2>\n
Kuten aiemmin mainittiin, meill\u00e4 on p\u00e4\u00e4sy valtavaan kirjastoon komponentteja ja hy\u00f6dyllisi\u00e4 toimintoja globaalin paketin sis\u00e4ll\u00e4 wp<\/code>. L\u00f6yd\u00e4t k\u00e4ytt\u00f6valmiita komponentteja kaikenlaisille tuloon liittyville komponenteille, joita voit ajatella. Esimerkkej\u00e4 ovat tekstinsy\u00f6tteet, Rich Text -sy\u00f6tteet, pudotusvalikot, vaihtopainikkeet, valintaruudut, eri tyyliset painikkeet, median latausohjelma ja v\u00e4rivalitsimet. Mukana on my\u00f6s toimintoja ja komponentteja edistyneemp\u00e4\u00e4n toimintoon. Esimerkiksi sis\u00e4ll\u00f6n (viestit, luokat jne.) kysely WordPressist\u00e4 joko sis\u00e4\u00e4nrakennetuilla funktioilla tai hakemalla REST API:lla.<\/p>\n
On helpompaa ja suositeltavaa k\u00e4ytt\u00e4\u00e4 WordPressin k\u00e4ytt\u00f6liittym\u00e4komponentteja. T\u00e4ll\u00e4 varmistetaan, ett\u00e4 suunnittelu ja toiminnallisuus ovat mahdollisimman virtaviivaisia, jotta k\u00e4ytt\u00e4ji\u00e4 ei h\u00e4mmennet\u00e4 tai h\u00e4irit\u00e4.<\/p>\n
Mutta valitettavasti t\u00e4t\u00e4 kirjoittaessa Gutenbergin dokumentaatio on hyvin niukka. Olen l\u00f6yt\u00e4nyt parhaan tavan oppia wp<\/code>paketin sis\u00e4ll\u00f6st\u00e4 ja komponenttien toiminnasta tarkastelemalla heid\u00e4n virallista Gutenberg Github -repoa<\/a>. Joissakin paketeissa (kansioissa) on readme-teksti, joka tarjoaa hieman dokumentaatiota. Katso esimerkiksi painikkeen<\/a> tai vaihtokytkimen<\/a> readme .<\/p>\n
Githubin repon tulee vastata wp<\/code>paketin sis\u00e4lt\u00f6\u00e4 (riippuen siit\u00e4, mik\u00e4 versio sinulla on ja mit\u00e4 haaraa tarkastelet Githubissa). T\u00e4m\u00e4 tarkoittaa, ett\u00e4 jokainen packages<\/code>Githubin juurihakemistossa n\u00e4kem\u00e4si kansio on globaalissa wp<\/code>paketissa. Muista esimerkiksi, ett\u00e4 edellisess\u00e4 vaiheessa k\u00e4ytt\u00e4m\u00e4mme funktio registerBlockType()<\/code>oli sis\u00e4ll\u00e4 wp.blocks<\/code>, mik\u00e4 tarkoittaa, ett\u00e4 l\u00f6yd\u00e4t t\u00e4m\u00e4n funktion l\u00e4hdekoodin vietyn\u00e4 sis\u00e4ll\u00e4 packages\/blocks\/<\/code>.<\/p>\n
Kun olen kehitt\u00e4nyt useita mukautettuja Gutenberg-lohkoja ja kaivanut paljon Githubin repossa, olen huomannut, ett\u00e4 on olemassa muutamia paketteja, jotka sis\u00e4lt\u00e4v\u00e4t yleisimm\u00e4t mukautettujen lohkojen luomiseen k\u00e4ytetyt toiminnot. Lis\u00e4\u00e4n ne alle.<\/p>\n
Saadaksesi t\u00e4ydellisemm\u00e4n yleiskatsauksen saatavilla olevista komponenteista, suosittelen lataamaan ilmaisen e-kirjani, joka kattaa Gutenbergin saatavilla olevat komponentit! Se sis\u00e4lt\u00e4\u00e4 yleisimm\u00e4t ja hy\u00f6dyllisimm\u00e4t komponentit sek\u00e4 tarvikkeita ja koodiesimerkkej\u00e4 koskevat asiakirjat:<\/p>\n
Nopea yleiskatsaus yleisimmist\u00e4 lohkoihin k\u00e4ytt\u00e4mist\u00e4si paketeista<\/h3>\n
Ilmeisesti saatavilla on paljon enemm\u00e4n, mutta alla oleva on yleisint\u00e4 lohkojen kehitt\u00e4misess\u00e4. K\u00e4yt\u00e4mme useimpia ellei kaikkia n\u00e4ist\u00e4 t\u00e4ss\u00e4 opetusohjelmasarjassa. Aina kun haluat k\u00e4ytt\u00e4\u00e4 komponenttia, sinun on tiedett\u00e4v\u00e4, miss\u00e4 pakkauksessa se on.<\/p>\n
wp.components<\/h4>\n
Useimmat k\u00e4ytt\u00f6liittym\u00e4n sy\u00f6tt\u00f6komponentit ovat sis\u00e4ll\u00e4 wp.components<\/code>. Esimerkkej\u00e4 ovat erilaiset tekstinsy\u00f6t\u00f6t, valintaruudut, valintaruudut, valintanapit, vedett\u00e4v\u00e4t komponentit, painikkeet, v\u00e4rinvalitsin, p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4nvalitsin ja niin edelleen. L\u00f6yd\u00e4t my\u00f6s k\u00e4ytt\u00f6liittym\u00e4komponentteja, joita voit k\u00e4ytt\u00e4\u00e4 estoty\u00f6kalurivin ja asetussivupalkin sis\u00e4ll\u00f6ss\u00e4 (nimelt\u00e4\u00e4n InspectorControls) editorissa.<\/p>\n
Tarkista kansiot Githubin repossa<\/a>.<\/p>\n
wp.blockEditor ja wp.editor<\/h4>\n
N\u00e4ist\u00e4 kahdesta paketista l\u00f6yd\u00e4t hy\u00f6dyllisi\u00e4 komponentteja RTF-tekstiin, kuvien\/median latausohjelman k\u00e4sittelyyn sek\u00e4 ty\u00f6kalurivien tai mukautettujen Inspector (sivupalkki) -paneelien lis\u00e4\u00e4miseen.<\/p>\n
T\u00e4m\u00e4n sarjan lopussa tarkastellaan dynaamisten lohkojen rakentamista, joissa k\u00e4yt\u00e4mme PHP:t\u00e4 lohkotulosteen render\u00f6imiseen, ja siihen k\u00e4ytet\u00e4\u00e4n komponenttia wp.editor<\/code>.<\/p>\n
Ymm\u00e4rt\u00e4\u00e4kseni useimmat komponentit alkoivat wp.editor<\/code>Gutenbergin aikoina, mutta varsinkin WordPress 5.3:n j\u00e4lkeen monet niist\u00e4 siirrettiin wp.blockEditor<\/code>. Jos k\u00e4yt\u00e4t komponenttia, wp.editor<\/code>johon WordPress aikoo siirty\u00e4, wp.blockEditor<\/code>se ei toistaiseksi ep\u00e4onnistu, mutta konsolin debuggerissa saat varoituksia, ett\u00e4 se on vanhentunut ja sinun tulee vaihtaa siihen, wp.blockEditor<\/code>kun voit. Ja palautuvasti, jos seuraat t\u00e4t\u00e4 sarjaa vanhemmalla WordPress-versiolla jostain syyst\u00e4 saatat kohdata virheit\u00e4 kutsuttaessa komponentteja, joihin ei ole wp.blockEditor<\/code>viel\u00e4 siirretty.<\/p>\n
\"Luo<\/a><\/p>\n
wp.element<\/h4>\n
Sis\u00e4lt\u00e4 wp.element<\/code>l\u00f6yd\u00e4t komponentteja, jotka vastaavat React-komponentteja. Esimerkiksi Component<\/code>(joka vastaa React.Component<\/code>) ja Fragment<\/code>( React.Fragment<\/code>). K\u00e4yt\u00e4mme n\u00e4it\u00e4, kun alamme jakaa koodimme erillisiin osiin.<\/p>\n
wp.i18n<\/h4>\n
Kuten nimi kertoo, wp.i18n<\/code>paketti sis\u00e4lt\u00e4\u00e4 toimintoja k\u00e4\u00e4nt\u00e4misen k\u00e4sittelyyn. Se sis\u00e4lt\u00e4\u00e4 samat k\u00e4\u00e4nn\u00f6stoiminnot kuin tunnemme ne PHP:ss\u00e4; esimerkiksi __()<\/code>ja _e()<\/code>. Tarkastelemme t\u00e4t\u00e4 yksityiskohtaisesti kohdassa <<<>>>>, kun opimme k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n lohkomme.<\/p>\n
wp.data<\/h4>\n
Paketti wp.data<\/code>on tarkoitettu tietojen kyselyyn WordPressist\u00e4 editorin ulkopuolelta. Viestien l\u00e4hett\u00e4miseen on komponentteja, withSelect<\/code>joita select<\/code>k\u00e4yt\u00e4mme my\u00f6hemmin t\u00e4ss\u00e4 sarjassa lohkomme sis\u00e4ll\u00e4 olevien viestien kyselyyn.<\/p>\n
wp.compose<\/h4>\n
Edellinen paketti ja wp.compose<\/code>ovat edistyneemp\u00e4\u00e4n lohkorakennukseen. T\u00e4m\u00e4n paketin sis\u00e4lt\u00e4 l\u00f6yd\u00e4t komponentteja ja toimintoja ns. korkeamman asteen komponenttien luomiseen. Korkeamman asteen komponentit<\/a> on Reactin mallitekniikka komponenttien ja logiikan uudelleenk\u00e4ytt\u00f6\u00f6n, ja k\u00e4yt\u00e4mme t\u00e4t\u00e4 yhdess\u00e4 kanssa wp.data<\/code>kyselyiden tekemiseen.<\/p>\n
Keskustelua riitt\u00e4\u00e4 \u2013 miten k\u00e4yt\u00e4t joitain n\u00e4ist\u00e4 komponenteista k\u00e4yt\u00e4nn\u00f6ss\u00e4?<\/h2>\n
Kuten aiemmin mainittu; Jotta voit k\u00e4ytt\u00e4\u00e4 WordPressin komponentteja, sinun on tiedett\u00e4v\u00e4, miss\u00e4 ne ovat. Toivottavasti yll\u00e4 oleva yleiskatsaukseni yhdistettyn\u00e4 Githubin repoon<\/a> antaa sinulle k\u00e4sityksen, mist\u00e4 niit\u00e4 saa.<\/p>\n
\u00c4l\u00e4 unohda, ett\u00e4 voit aina lis\u00e4t\u00e4 tavallisia HTML-tageja, kuten div, span, otsikot ja niin edelleen. Muista vain noudattaa Reactin ohjeita<\/a> m\u00e4\u00e4ritteiss\u00e4. Esimerkiksi class<\/code>varattu avainsana Reactissa (luokkapohjaisten komponenttien luomiseen), joten jos haluat lis\u00e4t\u00e4 luokan HTML-elementtiin, sinun on k\u00e4ytett\u00e4v\u00e4 className<\/code>.<\/p>\n
Huomautus: Kun kehit\u00e4t, \u00e4l\u00e4 unohda aloittaa npm run start<\/code>koodisi k\u00e4\u00e4nt\u00e4minen.<\/p>\n
Yksinkertaisena esimerkkin\u00e4 kokeillaan muutamia komponentteja n\u00e4hd\u00e4ksesi, milt\u00e4 ne n\u00e4ytt\u00e4v\u00e4t. Puramme ne vastaavista paketeista ja k\u00e4yt\u00e4mme niit\u00e4 edit<\/code>toiminnassamme.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
T\u00e4m\u00e4 johtaa esimerkiksi siihen, ett\u00e4 lohkomme n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4 editorissa.<\/p>\n
\"Luo<\/a><\/p>\n
Huomaat, ett\u00e4 saat virheilmoituksia konsolissa, kun kirjoitat niit\u00e4, ja ett\u00e4 se ei tallenna kirjoittamaasi viesti\u00e4 p\u00e4ivitett\u00e4ess\u00e4 (ja p\u00e4ivitt\u00e4ess\u00e4si). T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 meilt\u00e4 puuttuu rekvisiitta komponenteista, jotka muodostavat yhteyden attribuutteihin, joihin kaikki lohkotietomme on tallennettu. Rekvisiitta on vastuussa tallennettujen arvojen v\u00e4litt\u00e4misest\u00e4 ja funktioista, jotka vastaavat attribuuttiemme p\u00e4ivitt\u00e4misest\u00e4, kun jotain muuttuu sy\u00f6tteiss\u00e4mme. N\u00e4in teemme seuraavassa vaiheessa, jossa alamme vihdoin kirjoittaa jotain koodia oikeasti.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Edellisess\u00e4 vaiheessa rekister\u00f6itiin mukautettu Gutenberg-lohko. T\u00e4ss\u00e4 vaiheessa opimme k\u00e4ytt\u00e4m\u00e4\u00e4n WordPressin komponentteja erilaisten asetusten lis\u00e4\u00e4miseen.<\/p>\n","protected":false},"author":1,"featured_media":151761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,938,938,719,895,813,1110,843,813,843,864,864],"tags":[1166],"class_list":["post-233925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-kehittaejae","category-gutenberg-5","category-laajennuksia","category-n-a","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233925"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233925\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}