{"id":233981,"date":"2023-02-27T12:46:00","date_gmt":"2023-02-27T09:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233981"},"modified":"2022-11-11T13:33:12","modified_gmt":"2022-11-11T10:33:12","slug":"kohandatud-gutenbergi-ploki-loomine-4-osa-atribuudid","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-gutenbergi-ploki-loomine-4-osa-atribuudid\/","title":{"rendered":"Kohandatud Gutenbergi ploki loomine \u2013 4. osa: atribuudid"},"content":{"rendered":"\n

Selles osas vaatleme, kuidas atribuute m\u00e4\u00e4ratleda, nende v\u00e4\u00e4rtusi hankida ja v\u00e4rskendada. Atribuutide abil saame vastu v\u00f5tta redaktori sisendit, salvestada selle ja v\u00e4ljastada, kuidas me valime. Eelmises etapis<\/a> vaatasime WordPressi komponente, kust neid leida ja kuidas neid juurutada. Selles postituses lisame rekvisiidid atribuutidega \u00fchenduse loomiseks \u2013 salvestatud andmetega.<\/p>\n

Atribuutide m\u00e4\u00e4ratlemine<\/h2>\n

Atribuudid lisatakse objektidena massiivi attributes<\/code>atribuudile asukohas registerBlockType()<\/code>. Iga atribuudi v\u00f5ti on atribuudi nimi ja atribuut peab olema type<\/code>v\u00e4hemalt.<\/p>\n

Vara type<\/code>v\u00f5ib olla \u00fcks j\u00e4rgmistest; null<\/code>, boolean<\/code>, object<\/code>, array<\/code>, number<\/code>, string<\/code>, v\u00f5i integer<\/code>.<\/p>\n

Soovi korral saate default<\/code>oma atribuudi algv\u00e4\u00e4rtuse m\u00e4\u00e4ratlemiseks m\u00e4\u00e4rata atribuudi. Kui te vaikeseadet ei anna, on atribuudiks vaikimisi null<\/code>.<\/p>\n

Teine atribuudi atribuut on source<\/code>see, mis t\u00f6\u00f6tab atribuudiga koos selector<\/code>, kuid need on peened asjad, mida me allpool \u00fcksikasjalikumalt vaatleme.<\/p>\n

N\u00e4iteks kahe atribuudi m\u00e4\u00e4ratlemine; exampleText<\/code>stringina ja postIds<\/code>massiivina n\u00e4eks v\u00e4lja selline:<\/p>\n

const { registerBlockType } = wp.blocks;\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        },\n        postIds: {\n            type: 'array'\n            default: []\n        }\n    },\n    edit: (props) => { \n    ...<\/code><\/pre>\n
K\u00f5ik, mida vajate oma ploki jaoks salvestamiseks (kasutaja\/redaktori sisend) n\u00f5uab atribuuti<\/strong>. Teie otsustate, kuidas oma andmeid struktureerite, m\u00e4\u00e4rates iga\u00fche jaoks eraldi atribuudid v\u00f5i koondades need k\u00f5ik \u00fchte objekti. Vahe on lihtsalt selles, kuidas te nende andmeid hankite ja kuidas neid v\u00e4rskendate.<\/p>\n
Atribuutide v\u00e4\u00e4rtuste hankimine<\/h2>\n
Atribuudid on saadaval teie ploki edit<\/code>ja save<\/code>funktsioonide rekvisiididena. Kui olete j\u00e4rginud seda seeriat eelmisest etapist<\/a>, pidage meeles, et v\u00e4rskendasime funktsioone, et edastada parameetrina rekvisiidid.<\/p>\n
On tavaline, et atribuute h\u00e4vitatakse<\/strong> rekvisiitidest, nagu tavaliselt neile sageli viitate. N\u00e4iteks exampleText<\/code>n\u00e4eks atribuudi v\u00e4ljastamine v\u00e4lja selline:<\/p>\n
edit: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n},<\/code><\/pre>\n
Atribuutide v\u00e4\u00e4rtuste v\u00e4rskendamine<\/h2>\n
Atribuutide v\u00e4rskendamiseks on meil rekvisiitides saadaval meetod nimega setAttributes()<\/code>. See funktsioon aktsepteerib objekti, kuhu saate lisada mis tahes atribuudi, mida soovite v\u00e4rskendada. Saate v\u00e4rskendada ainult \u00fchte atribuuti, rohkem v\u00f5i k\u00f5iki korraga. Kui teil on m\u00e4\u00e4ratletud mitu atribuuti ja helistate setAttributes()<\/code>ainult \u00fche neist v\u00e4rskendamiseks, siis teisi ei puudutata.<\/p>\n
Kui teil on Reactiga kogemusi, tunnete t\u00f5en\u00e4oliselt kohe \u00e4ra sarnasused setAttributes()<\/code>ja vahel setState()<\/code>. Need t\u00f6\u00f6tavad t\u00e4pselt samamoodi, kuid erinevus seisneb selles, et Reacti olek on lihtsalt selles komponendis lokaalselt salvestatud ja atribuudid salvestatakse tegelikult andmetena v\u00e4ljaspool komponenti.<\/p>\n
Atribuudi v\u00e4rskendamiseks peate tavaliselt funktsiooni rekvisiidist h\u00e4vitama ja nimetama seda nii: allpool v\u00e4rskendame exampleText<\/code>atribuuti "Tere".<\/p>\n
const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n
Loomulikult k\u00e4ivitaksite setAttributes()<\/code>m\u00f5ne toimingu seestpoolt. Tavaline n\u00e4ide on onChange<\/code>rekvisiidi sees mingil sisendv\u00e4ljal, mida kasutatakse exampleText<\/code>atribuudi v\u00e4\u00e4rtuse salvestamiseks.<\/p>\n
Salvestage atribuudid kindlasti atribuudis m\u00e4\u00e4ratletud t\u00fc\u00fcbis. Teil ei \u00f5nnestu n\u00e4iteks objekte stringatribuuti salvestada.<\/p>\n
Proovime seda praktikas! Algatage npm run start<\/code>, kui te pole seda juba teinud.<\/p>\n
Atribuudi kuvamine kohandatud tekstisisendis ja atribuudi v\u00e4\u00e4rtuse v\u00e4rskendamine<\/h2>\n
Eelmises etapis lisasime m\u00f5ned komponendid edit<\/code>, nt tekstisisestus, kuid midagi ei salvestatud. Lisame oma plokki selle jaoks atribuudi ja \u00fche tekstisisestuse. M\u00f5lemad tagame, et tekstisisend n\u00e4itab praegust v\u00e4\u00e4rtust, ja kui sisendit muudetakse, v\u00e4rskendame atribuuti.<\/p>\n
Tekstisisestuse ja selle onChange<\/code>rekvisiidi lisamine<\/h3>\n
const { registerBlockType } = wp.blocks;\nconst { TextControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <TextControl \n                    value={attributes.exampleText}\n                    onChange={(newtext) => setAttributes({ exampleText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    save:() => { \n        return <div>:)<\/div> \n    }\n});<\/code><\/pre>\n
Destruktureerime attributes<\/code>ja setAttributes<\/code>alates props<\/code>kuna kasutame m\u00f5lemat. Seej\u00e4rel kasutame TextControl<\/code>komponenti WordPressi wp.components<\/code>paketist. Anname sellele kaks rekvisiiti; value<\/code>m\u00e4\u00e4rab sisendi v\u00e4\u00e4rtuse (nii algselt kui ka tippimise ajal) ja toimingu sisendi s\u00fcndmusele onChange<\/code>.<\/p>\n
Seadistame value<\/code>selle oma atribuudi v\u00e4\u00e4rtusele; attributes.exampleText<\/code>. Juhul, kui onChange<\/code>k\u00e4ivitame funktsiooni, edastades parameetrina meie sisendi tr\u00fckitud v\u00e4\u00e4rtuse newtext<\/code>(sisendv\u00e4\u00e4rtus on komponendilt tagastatav rekvisiit). Selles funktsioonis kutsume setAttributes()<\/code>v\u00e4lja ja v\u00e4rskendame atribuuti exampleText<\/code>vastavalt sellele, mis sisestati sisendisse.<\/p>\n
See on p\u00f5hiline React \u2013 peale selle, et me t\u00f6\u00f6tame atribuutidega, mitte olekuga. Kui \u00fclaltoodu ajas teid segadusse, soovitan vaadata Reacti kiir\u00f5petust, kuna see selgitab seda t\u00f5en\u00e4oliselt paremini kui mina!<\/p>\n
V\u00e4rskendage oma redaktorit ja vaadake, kuidas plokk t\u00f6\u00f6tab! Asjade sisestamiseks peaksite hankima standardse tekstisisestuse ja see salvestatakse alati, kui vajutate postituse redigeerimisel nuppu Salvesta\/v\u00e4rskenda.<\/p>\n
Tulemus frontendis ja andmebaasis<\/h3>\n
Kui vaatate oma postitust esiotsas, peaks see siiski kajama div-ga, millel on ":)", sest see on meie save<\/code>funktsioonis endiselt olemas. Aga lava taga on midagi juhtunud! Meie ploki kommentaariplokk sisaldab n\u00fc\u00fcd meie JSON-i atribuudi v\u00e4\u00e4rtust.<\/p>\n
\"Kohandatud<\/a><\/p>\n
Te ei n\u00e4e kommentaaride plokke mallis, mis teeb tavalist the_content()<\/code>k\u00f5net. Kommentaariplokkide n\u00e4gemiseks on teil kaks v\u00f5imalust. Vaadake kas post_content<\/code>postituste andmebaasi tabelit. V\u00f5i lisage echo get_the_content()<\/code>mall ja vaadake seda kontrolli-\/silumist\u00f6\u00f6riistas.<\/p>\n
Ilmselgelt on meil juurdep\u00e4\u00e4s ka atribuutidele save<\/code>, alates rekvisiitidest.<\/p>\n
Sisendv\u00e4\u00e4rtuse kuvaminesave<\/code><\/h3>\n
Kuvame atribuudi v\u00e4\u00e4rtuse meie save<\/code>funktsioonis div sees:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n}<\/code><\/pre>\n
M\u00e4rkus. P\u00e4rast selle muudatuse tegemist kuvatakse postituses katkine plokk, kuhu olete selle ploki juba lisanud. See juhtub seet\u00f5ttu, et redaktor puutub kokku erineva v\u00e4ljundiga save<\/code>kui see, mida oleme praegu m\u00e4\u00e4ratlenud. Eemaldage plokk ja lisage see uuesti. Sisestage midagi oma tekstisisestusse, v\u00e4rskendage postitust ja vaadake seda kasutajaliideses.<\/p>\n
Ja see on tegelikult asja tuum. Teie otsustate, milliseid atribuute vajate, et soovitud plokki salvestada. Te edit<\/code>saate kasutajale sisestusviise, hoolitsedes selle eest, et kuvatakse praegused v\u00e4\u00e4rtused, ja v\u00e4rskendate neid alati, kui need muutuvad. Ja save<\/code>ekstraheerite salvestatud atribuudid ja renderdate v\u00e4ljundi nii, nagu soovite.<\/p>\n
Selles \u00f5petusesarjas k\u00e4sitleme palju rohkem erinevaid komponente ja atribuute. Kuid vaatame veel \u00fcht selle postituse komponenti, et n\u00e4ha, mida atribuudi atribuut endast source<\/code>kujutab.<\/p>\n
RichText ja atribuudi atribuutsource<\/code><\/h2>\n
WordPressi RichText<\/code>komponent annab teile "\u00e4\u00e4risteta" tekstiala koos tekstivormingu toega. V\u00f5ib-olla eelistaksite seda kasutada (inetu?) standardse tekstisisestuse v\u00f5i tekstiala asemel. Kuid pidage meeles, et seda RichText<\/code>tuleb k\u00e4sitleda veidi erinevalt, kuna on mitmeid rekvisiite, millest peate teadma, ja see, kuidas me oma save<\/code>funktsiooni v\u00e4\u00e4rtust saavutame, on erinev.<\/p>\n
RichText<\/code>Komponendi lisamine<\/h3>\n
Lihtsaim vorm RichText<\/code>on selle rakendamine nagu tekstisisestuse korral:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    attributes: {\n        myRichText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <RichText \n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    ...<\/code><\/pre>\n
Destruktureerime RichText<\/code>komponendi wp.blockEditor<\/code>paketist, kuid muidu on \u00fclaltoodu identne sellega, mida tegime standardse tekstisisestuse puhul.<\/p>\n
K\u00e4sitsemine save<\/code>koosRichText<\/code><\/h3>\n
Kuid save<\/code>funktsioonis peate RichText<\/code>atribuudi v\u00e4\u00e4rtuse saamiseks komponenti uuesti kasutama. Helistame RichText.Content<\/code>ja seadistame rekvisiidi value<\/code>oma atribuudile:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
See v\u00e4ljastab k\u00f5ik, mis redaktorisse sisestati, RichText<\/code>otse ilma HTML-i \u00fcmbritsemata.<\/p>\n
Kui t\u00f6\u00f6tate koos RichText<\/code>teiega, soovite suure t\u00f5en\u00e4osusega juhtida teksti \u00fcmber olevat HTML-i \u00fcmbrist, n\u00e4iteks a <p><\/code>v\u00f5i a <h2><\/code>, nii kasutajaliideses kui ka redaktoris. Selleks saame kasutada rekvisiiti nimega tagName<\/code>.<\/p>\n
Komponent RichText<\/code>v\u00f5imaldab ka mitmeid muid rekvisiite. Saate m\u00e4\u00e4rata kohat\u00e4ideteksti, mida kuvatakse (kaotakse), kui see on t\u00fchi koos placeholder<\/code>rekvisiidiga. Samuti v\u00f5imaldab komponent juhtida, milliseid vormindamisvalikuid v\u00e4li lubab (millisi nuppe see t\u00f6\u00f6riistaribal n\u00e4itab).<\/p>\n
RichText<\/code>koostagName<\/code><\/h3>\n
Rekvisiidiga tagName<\/code>saate eelm\u00e4\u00e4ratleda, millisesse HTML-i m\u00e4rgendisse selle v\u00e4ljund m\u00e4hitakse. Kasutamisel tagName<\/code>peaksite kasutama sama tagName<\/code>rekvisiidi ja v\u00e4\u00e4rtust m\u00f5lemas edit<\/code>ja save<\/code>.<\/p>\n
Oletame, et soovite oma atribuudi v\u00e4\u00e4rtuse panna <h2><\/code>, mis muudab redaktoris iga sisendi v\u00e4\u00e4rtuseks h2. Siin edit<\/code>saate teha:<\/p>\n
<RichText \n    tagName=\"h2\"\n    placeholder=\"Write your heading here\"\n    value={attributes.myRichText}\n    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n\/><\/code><\/pre>\n
Ja sisse save<\/code>:<\/p>\n
<RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/><\/code><\/pre>\n
\u00dclaltoodud v\u00e4ljastab n\u00fc\u00fcd k\u00f5ik, mis on kirjutatud sildi RichText<\/code>sees olevasse piirkonda .<h2><\/code><\/p>\n
Kasutadessource<\/code><\/h3>\n
Ilmselgelt saate ploki jaoks kombineerida mitu rikasteksti, n\u00e4iteks \u00fche pealkirja ja teise l\u00f5igu jaoks. Pidage meeles, et iga\u00fcks vajab oma atribuuti. N\u00e4iteks:<\/p>\n
attributes: {\n    myRichHeading: {\n        type: 'string'\n    },\n    myRichText: {\n        type: 'string'\n    }\n},\nedit: (props) => { \n    const { attributes, setAttributes } = props;\n    return (<div>\n            <RichText \n                tagName=\"h2\"\n                placeholder=\"Write your heading here\"\n                value={attributes.myRichHeading}\n                onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n            \/>\n            <RichText\n                tagName=\"p\"\n                placeholder=\"Write your paragraph here\"\n                value={attributes.myRichText}\n                onChange={(newtext) => setAttributes({ myRichText: newtext })}\n            \/>\n        <\/div>\n    );\n},\nsave: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                tagName=\"h2\"\n                value={attributes.myRichHeading}\n            \/>\n            <RichText.Content \n                tagName=\"p\"\n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Kuid n\u00fc\u00fcdseks hakkate tekkima m\u00f5ningaid probleeme. Kuigi saate redigeerijas teksti vormindada, ei salvestata midagi (v\u00f5i m\u00f5nda vormingust). Kui vaatate postitust esiservas, kuvatakse see lihtsalt kujul h2<\/code>ja p<\/code>, ilma et oleksite vormindanud (kaldkiri, paksus kirjas, link). Isegi teie ploki kommentaariplokk ei sisalda vormingut. See on keeruline asi RichText<\/code>. Selle lahendamiseks peame t\u00f6\u00f6tama atribuudi atribuudiga source<\/code>.<\/p>\n
Atribuut source<\/code>, mis v\u00f5imaldab WordPressil sisu otse postituse sisust v\u00e4lja v\u00f5tta ja t\u00f5lgendada. Kui atribuuti pole source<\/code>m\u00e4\u00e4ratud, salvestatakse see HTML-i kommentaariplokki ja ekstraheeritakse see sealt.<\/p>\n
T\u00f6\u00f6tades RichText<\/code>me tavaliselt m\u00e4\u00e4rame source<\/code>, html<\/code>mis kasutab HTML-m\u00e4rgistuse s\u00f5elumiseks WordPressi teeki. Atribuut source<\/code>t\u00f6\u00f6tab koos teise atribuudi atribuudiga; selector<\/code>mis m\u00e4\u00e4rab, millisest HTML-i m\u00e4rgendist see peaks ekstraktima.<\/p>\n
N\u00e4itena m\u00e4\u00e4rame source<\/code>oma html<\/code>l\u00f5igule asendi RichText<\/code>ja m\u00e4\u00e4rame selector<\/code>kui p<\/code>(muidu vaikimisi on see ploki juur).<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n
N\u00fc\u00fcd RichText<\/code>peaks meie teine \u200b\u200b\u200b\u200bkogu tekstivormingu edukalt salvestama. Samuti m\u00e4rkate, et kommentaariplokk kuvab n\u00fc\u00fcd ainult myRichHeading<\/code>JSON-i atribuuti. Atribuut myRichText<\/code>on kommentaariplokist t\u00e4ielikult kadunud. Selle p\u00f5hjuseks on asjaolu, et source<\/code>WordPress anal\u00fc\u00fcsib n\u00fc\u00fcd atribuudi v\u00e4\u00e4rtuse kommentaariploki asemel postituse sisu.<\/p>\n
\"Kohandatud<\/a><\/p>\n
Kui aus olla, ei ole ma selle source<\/code>atribuudiga \u00fcldse nii palju t\u00f6\u00f6tanud ja soovitan v\u00f5imalusel seda v\u00e4ltida. WordPressi dokumentatsioon selgitab m\u00f5nev\u00f5rra rohkem allika ja atribuutide<\/a> kohta, mida soovite ise kontrollida.<\/p>\n
Selles postituses oleme \u00f5ppinud atribuutide p\u00f5hit\u00f5desid; kuidas neid defineerida, v\u00e4rskendada ja nende v\u00e4\u00e4rtusi v\u00e4ljastada. J\u00e4rgmistes sammudes vaatame rohkem erinevaid komponente ja seda, kuidas lisada s\u00e4tteid v\u00e4ljaspool ploki sisu; t\u00f6\u00f6riistaribal ja redaktori k\u00fclgribal (nimega Inspector).<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Selles algajatele m\u00f5eldud Gutenbergi ploki \u00f5ppet\u00fckis vaatleme, kuidas atribuute m\u00e4\u00e4ratleda, nende v\u00e4\u00e4rtusi hankida ja v\u00e4rskendada.<\/p>\n","protected":false},"author":1,"featured_media":151358,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[937,937,1110,842,812,812,842,863,863],"tags":[1165],"class_list":["post-233981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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\/233981","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=233981"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}