{"id":233879,"date":"2023-02-24T14:12:00","date_gmt":"2023-02-24T11:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233879"},"modified":"2022-11-11T12:57:06","modified_gmt":"2022-11-11T09:57:06","slug":"looge-kohandatud-gutenbergi-plokk-3-osa-rekvisiidid-ja-wordpressi-komponendid","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/looge-kohandatud-gutenbergi-plokk-3-osa-rekvisiidid-ja-wordpressi-komponendid\/","title":{"rendered":"Looge kohandatud Gutenbergi plokk \u2013 3. osa: rekvisiidid ja WordPressi komponendid"},"content":{"rendered":"\n

Selle \u00f5petuste seeria eelmine samm<\/a> l\u00e4bis kohandatud ploki registreerimise nii Javascriptis kui ka PHP-s. Selles etapis \u00f5pime kasutama WordPressi komponente erinevat t\u00fc\u00fcpi v\u00e4ljade ja s\u00e4tete lisamiseks.<\/p>\n

WordPressi komponentide kasutamiseks oma plokis peame esmalt teadma rekvisiite.<\/p>\n

Rekvisiidid<\/h2>\n

Rekvisiidid on Reacti peamine funktsioon ja see on p\u00f5him\u00f5tteliselt viis muutujate v\u00f5i funktsioonide edastamiseks teistele komponentidele. Kui te ei tunne Reacti rekvisiite, v\u00f5ite lugeda selle kohta Reacti ametlikku \u00f5petust<\/a>.<\/p>\n

WordPress pakub m\u00f5ningaid rekvisiite rakenduse edit<\/code>ja save<\/code>funktsioonide jaoks registerBlockType()<\/code>. Nende rekvisiitide sees saame juurdep\u00e4\u00e4su kriitilistele asjadele, nagu atribuudid ja meetod oma atribuutide v\u00e4rskendamiseks. J\u00e4rgmises etapis<\/a> k\u00e4sitleme atribuute \u00fcksikasjalikult !<\/p>\n

Siiani oleme oma plokis kirjutanud funktsiooni jaoks edit<\/code>ja save<\/code>nii:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Peaksite harjuma parameetri props<\/code>lisamisega m\u00f5lemale edit<\/code>ja save<\/code>, n\u00e4iteks:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
N\u00fc\u00fcd on teil t\u00e4ielik juurdep\u00e4\u00e4s muutujale props<\/code>ja k\u00f5igele, mida see sisaldab, seest edit<\/code>ja save<\/code>. Kui olete uudishimulik, saate lause console.log(props);<\/code>ette lisada edit<\/code>funktsiooni return<\/code>. Peaksite n\u00e4gema, millised rekvisiidid on konsooli siluris saadaval.<\/p>\n
WordPressi komponentide kasutamine<\/h2>\n
Nagu varem mainitud, on meil globaalses paketis juurdep\u00e4\u00e4s tohutule komponentide ja kasulike funktsioonide raamatukogule wp<\/code>. Leiate kasutusvalmis komponente mis tahes t\u00fc\u00fcpi sisendiga seotud komponentide jaoks. N\u00e4ited h\u00f5lmavad tekstisisestusi, rikasteksti sisestusi, rippmen\u00fc\u00fcd, l\u00fclitit, m\u00e4rkeruudud, erineva stiiliga nupud, meedia \u00fcleslaadija ja v\u00e4rvivalijad. T\u00e4iustatud funktsionaalsuse jaoks on ka funktsioone ja komponente. N\u00e4iteks WordPressist sisu (postitused, kategooriad jne) p\u00e4ringute esitamine sisseehitatud funktsioonidega v\u00f5i toomine REST API-ga.<\/p>\n
Lihtsam ja soovitatav on kasutada WordPressi kasutajaliidese komponente. Selle eesm\u00e4rk on tagada, et disain ja funktsionaalsus oleksid v\u00f5imalikult sujuvad, et kasutajaid mitte segadusse ajada ega h\u00e4irida.<\/p>\n
Kuid kahjuks on selle kirjutamise ajal Gutenbergi dokumentatsioon v\u00e4ga napp. Leidsin parima v\u00f5imaluse saada teavet selle kohta, mis wp<\/code>paketi sees on ja kuidas komponendid tegelikult t\u00f6\u00f6tavad, vaadates nende ametlikku Gutenbergi Githubi repot<\/a>. M\u00f5nel paketil (kaustadel) on lugemiseks tekst, mis pakub natuke dokumentatsiooni. Vaadake n\u00e4iteks nuppu<\/a> Readme v\u00f5i l\u00fclitit<\/a>.<\/p>\n
Githubi repo peaks vastama wp<\/code>paketi sees olevale (olenevalt sellest, milline versioon teil on ja millist haru Githubis vaatate). See t\u00e4hendab, et iga kaust, mida n\u00e4ete packages<\/code>Githubi juurkataloogis, asub globaalses wp<\/code>paketis. N\u00e4iteks pidage meeles, et eelmises etapis kasutatud funktsioon registerBlockType()<\/code>, oli sees wp.blocks<\/code>, mis t\u00e4hendab, et leiate selle funktsiooni l\u00e4htekoodi, mis on eksporditud packages\/blocks\/<\/code>.<\/p>\n
Kuna olen v\u00e4lja t\u00f6\u00f6tanud mitmeid kohandatud Gutenbergi plokke ja uurinud \u00fcsna palju Githubi repost, avastasin, et on m\u00f5ned paketid, mis sisaldavad k\u00f5ige tavalisemaid kohandatud plokkide loomiseks kasutatavaid funktsioone. Lisan need allpool.<\/p>\n
Saadaolevatest komponentidest t\u00e4ielikuma \u00fclevaate saamiseks soovitan alla laadida minu tasuta e-raamatu, mis h\u00f5lmab Gutenbergis saadaolevaid komponente! See sisaldab k\u00f5ige levinumaid ja kasulikke komponente koos rekvisiitide ja koodin\u00e4idetega:<\/p>\n
Kiire \u00fclevaade enamlevinud pakettidest, mida plokkide jaoks kasutate<\/h3>\n
Ilmselgelt on saadaval palju rohkem, kuid allpool on plokkide arendamiseks k\u00f5ige tavalisem. Selles \u00f5petusesarjas kasutame enamikku neist, kui mitte k\u00f5iki. Kui soovite m\u00f5nda komponenti kasutada, peate teadma, millises pakendis see on.<\/p>\n
wp.components<\/h4>\n
Enamiku kasutajaliidese sisendkomponentidest leiate wp.components<\/code>. N\u00e4iteks erinevad tekstisisestused, valikud, m\u00e4rkeruudud, raadionupud, lohistatavad komponendid, nupud, v\u00e4rvivalija, kuup\u00e4evavalija jne. Samuti leiate kasutajaliidese komponendid, mida saate kasutada plokkide t\u00f6\u00f6riistariba ja seadete k\u00fclgriba sisu jaoks (nn InspectorControls).<\/p>\n
Vaadake Githubi repos<\/a> olevaid kaustu .<\/p>\n
wp.blockEditor ja wp.editor<\/h4>\n
Nendest kahest paketist leiate kasulikke komponente rikasteksti jaoks, piltide\/meediumi\u00fcleslaadija haldamiseks ning t\u00f6\u00f6riistaribade v\u00f5i kohandatud inspektori (k\u00fclgriba) paneelide lisamiseks.<\/p>\n
Selle seeria l\u00f5pus vaatleme d\u00fcnaamiliste plokkide ehitamist, milles kasutame ploki v\u00e4ljundi renderdamiseks PHP-d ja selleks kasutame komponenti wp.editor<\/code>.<\/p>\n
Nagu ma aru saan, algas enamik komponente wp.editor<\/code>juba Gutenbergi p\u00e4evil, kuid eriti p\u00e4rast WordPress 5.3 viidi paljud neist \u00fcle wp.blockEditor<\/code>. Kui kasutate komponenti, wp.editor<\/code>millesse WordPress kavatseb sellesse kolida, wp.blockEditor<\/code>ei kuku see praegu l\u00e4bi, kuid konsooli siluris saate hoiatusi, et see on aegunud ja peaksite v\u00f5imaluse wp.blockEditor<\/code>korral sellele \u00fcle minema. Ja p\u00f6\u00f6rduvalt, kui j\u00e4lgite seda seeriat vanema WordPressi versiooniga, v\u00f5ite mingil p\u00f5hjusel ilmneda t\u00f5rkeid komponentide helistamisel, mida pole wp.blockEditor<\/code>veel teisaldatud.<\/p>\n
\"Looge<\/a><\/p>\n
wp.element<\/h4>\n
Seest wp.element<\/code>leiate komponendid, mis vastavad Reacti komponentidele. N\u00e4iteks Component<\/code>(mis vastab React.Component<\/code>) ja Fragment<\/code>( React.Fragment<\/code>). Kasutame neid siis, kui hakkame koodi jagama eraldi komponentideks.<\/p>\n
wp.i18n<\/h4>\n
Nagu nimigi \u00fctleb, wp.i18n<\/code>sisaldab pakett t\u00f5lke haldamise funktsioone. See sisaldab samu t\u00f5lkefunktsioone, mida me teame PHP-s; n\u00e4iteks __()<\/code>ja _e()<\/code>. Vaatleme seda \u00fcksikasjalikult jaotises <<<>>>>, kui saame teada, kuidas oma plokki t\u00f5lkida.<\/p>\n
wp.data<\/h4>\n
Pakett wp.data<\/code>on m\u00f5eldud WordPressist andmete p\u00e4rimiseks v\u00e4ljaspool redaktorit. S\u00f5numite saatmiseks on olemas komponendid, withSelect<\/code>mida select<\/code>kasutame selles seerias hiljem meie blokis olevate postituste p\u00e4ringute tegemiseks.<\/p>\n
wp.compose<\/h4>\n
Eelmine pakett ja wp.compose<\/code>on t\u00e4iustatud plokkide ehitamiseks. Selle paketi seest leiame komponendid ja funktsioonid nn k\u00f5rgema j\u00e4rgu komponentide loomiseks. K\u00f5rgema j\u00e4rgu komponendid<\/a> on Reacti mustritehnika komponentide ja loogika taaskasutamiseks ning me kasutame seda koos komponendiga wp.data<\/code>postituste p\u00e4ringute tegemiseks.<\/p>\n
Piisavalt juttu \u2013 kuidas te m\u00f5nda neist komponentidest praktikas kasutate?<\/h2>\n
Nagu varem mainitud; WordPressi komponentide kasutamiseks peate teadma, kus need asuvad. Loodetavasti annab minu \u00fclaltoodud \u00fclevaade koos Githubi repoga<\/a> teile aimu, kust neid hankida.<\/p>\n
\u00c4rge unustage, et saate alati lisada tavalisi HTML-m\u00e4rgendeid, nagu div, span, pealkirjad jne. \u00c4rge unustage j\u00e4rgida atribuutide osas Reacti juhiseid .<\/a> N\u00e4iteks class<\/code>on Reactis reserveeritud m\u00e4rks\u00f5na (klassip\u00f5histe komponentide loomiseks), nii et kui soovite HTML-elemendile klassi lisada, peate kasutama className<\/code>.<\/p>\n
M\u00e4rkus. Arendades \u00e4rge unustage npm run start<\/code>koodi kompileerimist alustada.<\/p>\n
Lihtsa n\u00e4itena proovime m\u00f5nda komponenti, et n\u00e4ha, kuidas need v\u00e4lja n\u00e4evad. Destruktureerime need vastavatest pakettidest ja kasutame neid oma edit<\/code>funktsioonis.<\/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
Selle tulemuseks on n\u00e4iteks see, et meie plokk n\u00e4eb redaktoris v\u00e4lja selline.<\/p>\n
\"Looge<\/a><\/p>\n
M\u00e4rkate, et konsoolis kuvatakse nende sisestamisel veateateid ja see ei salvesta postituse v\u00e4rskendamisel (ja v\u00e4rskendamisel) sisestatavat teksti. Selle p\u00f5hjuseks on asjaolu, et meil puuduvad komponentide rekvisiidid, mis on \u00fchendus atribuutidega, kuhu salvestatakse k\u00f5ik meie plokkide andmed. Rekvisiidid vastutavad salvestatud v\u00e4\u00e4rtuste edastamise ja funktsioonide eest, mis vastutavad meie atribuutide v\u00e4rskendamise eest, kui meie sisendites midagi muudetakse. Seda teeme j\u00e4rgmises etapis, kus hakkame l\u00f5puks p\u00e4riselt koodi kirjutama.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Eelmises etapis registreerisime kohandatud Gutenbergi ploki. Selles etapis \u00f5pime kasutama WordPressi komponente erinevate seadete lisamiseks.<\/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":[718,894,718,937,937,894,1110,842,812,812,842,863,863],"tags":[1165],"class_list":["post-233879","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-gutenberg-4","category-n-a","category-opetused","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233879"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233879\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}