{"id":234015,"date":"2023-02-27T13:10:00","date_gmt":"2023-02-27T10:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234015"},"modified":"2022-11-11T13:53:42","modified_gmt":"2022-11-11T10:53:42","slug":"luo-mukautettu-gutenberg-lohko-osa-4-attribuutit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-4-attribuutit\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko \u2013 Osa 4: Attribuutit"},"content":{"rendered":"\n

T\u00e4ss\u00e4 osassa tarkastellaan attribuuttien m\u00e4\u00e4ritt\u00e4mist\u00e4, niiden arvojen hakemista ja p\u00e4ivitt\u00e4mist\u00e4. Attribuuttien avulla voimme hyv\u00e4ksy\u00e4 sy\u00f6tteen editorista, tallentaa sen ja tulostaa sen haluamallamme tavalla. Edellisess\u00e4 vaiheessa<\/a> tarkastelimme WordPressin komponentteja, mist\u00e4 ne l\u00f6ytyv\u00e4t ja miten ne toteutetaan. T\u00e4ss\u00e4 postauksessa lis\u00e4\u00e4mme rekvisiitta yhteyden muodostamiseen attribuutteihin \u2013 tallennettuihin tietoihin.<\/p>\n

Attribuuttien m\u00e4\u00e4rittely<\/h2>\n

Attribuutit lis\u00e4t\u00e4\u00e4n objekteina taulukossa olevaan attributes<\/code>ominaisuuteen registerBlockType()<\/code>. Kunkin m\u00e4\u00e4ritteen avain on m\u00e4\u00e4ritteen nimi, ja sinulla on oltava type<\/code>v\u00e4hint\u00e4\u00e4n ominaisuus.<\/p>\n

Omaisuus type<\/code>voi olla mik\u00e4 tahansa seuraavista; null<\/code>, boolean<\/code>, object<\/code>, array<\/code>, number<\/code>, string<\/code>, tai integer<\/code>.<\/p>\n

Voit halutessasi m\u00e4\u00e4ritt\u00e4\u00e4 ominaisuuden default<\/code>m\u00e4\u00e4ritteen aloitusarvon m\u00e4\u00e4ritt\u00e4miseksi. Jos et anna oletusarvoa, m\u00e4\u00e4ritteen oletusarvo on null<\/code>.<\/p>\n

Toinen attribuuttiominaisuus on source<\/code>se, ett\u00e4 se toimii yhdess\u00e4 selector<\/code>ominaisuuden kanssa, mutta n\u00e4m\u00e4 ovat nirsoja asioita, joita tarkastellaan tarkemmin alla.<\/p>\n

Esimerkiksi kahden attribuutin m\u00e4\u00e4ritt\u00e4minen; exampleText<\/code>merkkijonona ja postIds<\/code>taulukona n\u00e4ytt\u00e4isi t\u00e4lt\u00e4:<\/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
Kaikki mit\u00e4 tarvitset tallennettavaksi lohkoasi varten (sy\u00f6te k\u00e4ytt\u00e4j\u00e4lt\u00e4\/editorilta) vaatii m\u00e4\u00e4ritteen<\/strong>. Sin\u00e4 p\u00e4\u00e4t\u00e4t, kuinka rakennat tietosi m\u00e4\u00e4rittelem\u00e4ll\u00e4 kullekin erilliset attribuutit tai yhdist\u00e4m\u00e4ll\u00e4 ne kaikki yhteen objektiin. Ero on vain siin\u00e4, kuinka haet heid\u00e4n tietonsa ja kuinka p\u00e4ivit\u00e4t ne.<\/p>\n
Haetaan attribuuttiarvoja<\/h2>\n
Attribuutit ovat k\u00e4ytett\u00e4viss\u00e4 lohkojesi edit<\/code>ja save<\/code>toimintojesi rekvisiittana. Jos olet seurannut t\u00e4t\u00e4 sarjaa edellisest\u00e4 vaiheesta<\/a>, muista, ett\u00e4 p\u00e4ivitimme funktiot v\u00e4litt\u00e4m\u00e4\u00e4n rekvisiitta parametreina.<\/p>\n
On yleist\u00e4 tuhota<\/strong> attribuutteja rekvisiittasta, kuten yleens\u00e4 viittaat niihin. Esimerkiksi attribuutin tulostaminen exampleText<\/code>n\u00e4ytt\u00e4isi t\u00e4lt\u00e4:<\/p>\n
edit: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n},<\/code><\/pre>\n
P\u00e4ivitet\u00e4\u00e4n m\u00e4\u00e4ritteiden arvoja<\/h2>\n
Attribuuttien p\u00e4ivitt\u00e4miseksi meill\u00e4 on rekvisiittassa k\u00e4ytett\u00e4viss\u00e4 menetelm\u00e4 nimelt\u00e4 setAttributes()<\/code>. T\u00e4m\u00e4 funktio hyv\u00e4ksyy objektin, johon voit lis\u00e4t\u00e4 mink\u00e4 tahansa m\u00e4\u00e4ritteen, jonka haluat p\u00e4ivitt\u00e4\u00e4. Voit p\u00e4ivitt\u00e4\u00e4 vain yhden m\u00e4\u00e4ritteen, useamman tai kaikki kerralla. Jos olet m\u00e4\u00e4ritt\u00e4nyt useita m\u00e4\u00e4ritteit\u00e4 ja soita setAttributes()<\/code>p\u00e4ivitt\u00e4\u00e4ksesi vain yhden niist\u00e4, muita ei kosketa.<\/p>\n
Jos sinulla on kokemusta Reactista, huomaat todenn\u00e4k\u00f6isesti v\u00e4litt\u00f6m\u00e4sti yht\u00e4l\u00e4isyydet setAttributes()<\/code>ja v\u00e4lill\u00e4 setState()<\/code>. Ne toimivat t\u00e4sm\u00e4lleen samalla tavalla, mutta erona on, ett\u00e4 Reactin tila on vain jotain, joka on tallennettu paikallisesti kyseiseen komponenttiin, ja attribuutit tallennetaan itse asiassa datana komponentin ulkopuolelle.<\/p>\n
Attribuutin p\u00e4ivitt\u00e4mist\u00e4 varten funktio yleens\u00e4 tuhotaan rekvisiittasta ja kutsutaan sit\u00e4 n\u00e4in: Alla p\u00e4ivit\u00e4mme exampleText<\/code>attribuutin muotoon "Hei".<\/p>\n
const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n
Luonnollisesti ajaisit setAttributes()<\/code>jonkin toiminnon sis\u00e4lt\u00e4. Yleinen esimerkki on onChange<\/code>propin sis\u00e4ll\u00e4 jonkinlaisessa sy\u00f6tt\u00f6kent\u00e4ss\u00e4, jota k\u00e4ytet\u00e4\u00e4n exampleText<\/code>attribuutin arvon tallentamiseen.<\/p>\n
Muista tallentaa attribuutit siin\u00e4 tyypiss\u00e4, jonka m\u00e4\u00e4ritit attribuutille. Sinulla ei ole onnea yritt\u00e4\u00e4 tallentaa objekteja esimerkiksi merkkijonoattribuutiksi.<\/p>\n
Kokeillaan k\u00e4yt\u00e4nn\u00f6ss\u00e4! Tee aloite npm run start<\/code>, jos et ole jo tehnyt.<\/p>\n
Attribuutin n\u00e4ytt\u00e4minen mukautetussa tekstisy\u00f6t\u00f6ss\u00e4 ja m\u00e4\u00e4ritteen arvon p\u00e4ivitt\u00e4minen<\/h2>\n
Edellisess\u00e4 vaiheessa lis\u00e4simme joitain komponentteja sis\u00e4\u00e4n edit<\/code>, esim. tekstinsy\u00f6tt\u00f6, mutta mit\u00e4\u00e4n ei tallennettu. Lis\u00e4t\u00e4\u00e4n attribuutti ja yksi tekstisy\u00f6te sille lohkoomme. Varmistamme molemmat, ett\u00e4 tekstinsy\u00f6tt\u00f6 n\u00e4ytt\u00e4\u00e4 nykyisen arvon, ja aina kun sy\u00f6tt\u00f6\u00e4 muutetaan, p\u00e4ivit\u00e4mme attribuutin.<\/p>\n
Lis\u00e4\u00e4m\u00e4ll\u00e4 tekstinsy\u00f6t\u00f6n ja sen onChange<\/code>prop<\/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
Tuhoamme attributes<\/code>ja setAttributes<\/code>koska props<\/code>k\u00e4yt\u00e4mme molempia. Sitten k\u00e4yt\u00e4mme TextControl<\/code>komponenttia WordPress- wp.components<\/code>paketista. Annamme sille kaksi rekvisiittaa; value<\/code>asettaa sy\u00f6tteen arvon (sek\u00e4 alussa ett\u00e4 kirjoittamisen aikana) ja toiminnon sy\u00f6tteen tapahtumaan onChange<\/code>.<\/p>\n
Asetamme value<\/code>sen attribuuttimme arvoon; attributes.exampleText<\/code>. Siin\u00e4 onChange<\/code>tapauksessa, ett\u00e4 suoritamme funktion, joka v\u00e4litt\u00e4\u00e4 sy\u00f6tteemme kirjoitetun arvon parametrina newtext<\/code>(sy\u00f6tearvo on komponentista palautettu prop). T\u00e4ss\u00e4 funktiossa kutsumme setAttributes()<\/code>ja p\u00e4ivit\u00e4mme attribuutin exampleText<\/code>sy\u00f6tteeseen kirjoitetuksi.<\/p>\n
T\u00e4m\u00e4 on perus React – paitsi, ett\u00e4 ty\u00f6skentelemme attribuuttien emmek\u00e4 tilan kanssa. Jos yll\u00e4 oleva h\u00e4mment\u00e4\u00e4 sinua, suosittelen katsomaan nopeaa opetusohjelmaa Reactissa, koska n\u00e4m\u00e4 selitt\u00e4v\u00e4t t\u00e4m\u00e4n tavan todenn\u00e4k\u00f6isesti paremmin kuin min\u00e4!<\/p>\n
P\u00e4ivit\u00e4 editori ja katso kuinka lohko toimii! Sinun pit\u00e4isi saada tavallinen tekstisy\u00f6te asioiden kirjoittamista varten, ja se tallennetaan aina, kun painat Tallenna\/P\u00e4ivit\u00e4 j\u00e4lkimuokkauksessa.<\/p>\n
Tulos k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 ja tietokannassa<\/h3>\n
Jos katsot viesti\u00e4si k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, sen pit\u00e4isi silti kaikua div:ll\u00e4, koska se on edelleen save<\/code>toiminnassamme. Mutta jotain on tapahtunut kulissien takana! Lohkomme kommenttilohko sis\u00e4lt\u00e4\u00e4 nyt JSON-attribuuttimme arvon.<\/p>\n
\"Luo<\/a><\/p>\n
Et n\u00e4e kommenttilohkoja mallissa, joka tekee normaalin the_content()<\/code>kutsun. N\u00e4hd\u00e4ksesi kommenttilohkot sinulla on kaksi vaihtoehtoa. Katso joko post_content<\/code>viestien tietokantataulukkoa. Tai lis\u00e4\u00e4 echo get_the_content()<\/code>malli ja katso sit\u00e4 Tarkastus\/virheenkorjausty\u00f6kalussa.<\/p>\n
Ilmeisesti meill\u00e4 on p\u00e4\u00e4sy my\u00f6s attribuutteihin save<\/code>, rekvisiittasta.<\/p>\n
N\u00e4ytet\u00e4\u00e4n sy\u00f6tteen arvo sis\u00e4\u00e4nsave<\/code><\/h3>\n
N\u00e4ytet\u00e4\u00e4n attribuutin arvo div:n sis\u00e4ll\u00e4 save<\/code>funktiossamme:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n}<\/code><\/pre>\n
Huomautus: Kun olet tehnyt t\u00e4m\u00e4n muutoksen, saat rikkin\u00e4isen lohkon viestiin, johon olet jo lis\u00e4nnyt t\u00e4m\u00e4n lohkon. T\u00e4m\u00e4 tapahtuu, koska editori kohtaa erilaisen tulosteen save<\/code>kuin mit\u00e4 olemme nyt m\u00e4\u00e4ritt\u00e4neet. Poista lohko ja lis\u00e4\u00e4 se uudelleen. Kirjoita jotain tekstinsy\u00f6tt\u00f6\u00f6n, p\u00e4ivit\u00e4 viesti ja tarkastele sit\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
Ja t\u00e4m\u00e4 on itse asiassa asian ydin. Sin\u00e4 p\u00e4\u00e4t\u00e4t, mit\u00e4 m\u00e4\u00e4ritteit\u00e4 tarvitset tallentaaksesi haluamasi lohkoon. Siin\u00e4 edit<\/code>hahmotat tapoja, joilla k\u00e4ytt\u00e4j\u00e4 voi sy\u00f6tt\u00e4\u00e4, huolehtien siit\u00e4, ett\u00e4 nykyiset arvot n\u00e4kyv\u00e4t ja p\u00e4ivitt\u00e4v\u00e4t ne aina, kun ne muuttuvat. Ja save<\/code>purat tallennetut attribuutit ja teet tulosteen haluamallasi tavalla.<\/p>\n
K\u00e4sittelemme paljon enemm\u00e4n erilaisia \u200b\u200b\u200b\u200bkomponentteja ja ominaisuuksia t\u00e4ss\u00e4 opetusohjelmasarjassa. Mutta katsotaanpa yht\u00e4 muuta komponenttia t\u00e4ss\u00e4 viestiss\u00e4 n\u00e4hd\u00e4ksemme, mist\u00e4 m\u00e4\u00e4ritteen ominaisuudessa source<\/code>on kyse.<\/p>\n
RichText ja attribuutin ominaisuussource<\/code><\/h2>\n
WordPress- RichText<\/code>komponentti antaa sinulle "reunattoman" tekstialueen tekstin muotoilutuella. Saatat mieluummin k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 (ruma?) tavallisen tekstinsy\u00f6t\u00f6n tai tekstialueen sijaan. Mutta muista, ett\u00e4 RichText<\/code>sit\u00e4 on k\u00e4sitelt\u00e4v\u00e4 hieman eri tavalla, koska on olemassa useita rekvisiitta, jotka sinun on oltava tietoisia, ja on eroa siin\u00e4, kuinka saamme arvon save<\/code>toiminnallemme.<\/p>\n
RichText<\/code>Komponentin lis\u00e4\u00e4minen<\/h3>\n
Yksinkertaisin muoto RichText<\/code>on toteuttaa se samalla tavalla kuin tekstinsy\u00f6tt\u00f6\u00e4 k\u00e4ytett\u00e4ess\u00e4:<\/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
Puramme RichText<\/code>komponentin wp.blockEditor<\/code>paketista, mutta muuten yll\u00e4 oleva on identtinen tavallisen tekstinsy\u00f6t\u00f6n kanssa.<\/p>\n
K\u00e4sittely save<\/code>kanssaRichText<\/code><\/h3>\n
Funktiossa save<\/code>sinun on kuitenkin k\u00e4ytett\u00e4v\u00e4 RichText<\/code>komponenttia uudelleen saadaksesi attribuutin arvon. Soitamme RichText.Content<\/code>ja asetamme rekvisiitin value<\/code>attribuutillemme:<\/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
T\u00e4m\u00e4 tulostaa editoriin kirjoitetun RichText<\/code>suoraan ilman HTML-koodia.<\/p>\n
Kun ty\u00f6skentelet kanssasi, RichText<\/code>haluat todenn\u00e4k\u00f6isesti hallita tekstin ymp\u00e4rill\u00e4 olevaa HTML-k\u00e4\u00e4rett\u00e4, esimerkiksi a <p><\/code>tai a <h2><\/code>, sek\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 ett\u00e4 editorissa. T\u00e4t\u00e4 varten voimme k\u00e4ytt\u00e4\u00e4 rekvisiittaa nimelt\u00e4 tagName<\/code>.<\/p>\n
Komponentti RichText<\/code>mahdollistaa my\u00f6s useita muita rekvisiitta. Voit m\u00e4\u00e4ritt\u00e4\u00e4 paikkamerkkitekstin, joka n\u00e4ytet\u00e4\u00e4n (h\u00e4ivytettyn\u00e4), kun se on tyhj\u00e4 placeholder<\/code>. Komponentin avulla voit my\u00f6s hallita, mit\u00e4 muotoiluvaihtoehtoja kentt\u00e4 sallii (mit\u00e4 painikkeita se n\u00e4ytt\u00e4\u00e4 ty\u00f6kalupalkissa).<\/p>\n
RichText<\/code>kanssatagName<\/code><\/h3>\n
Prop:n tagName<\/code>avulla voit ennalta m\u00e4\u00e4ritt\u00e4\u00e4, mihin HTML-tunnisteeseen sen tulos k\u00e4\u00e4rit\u00e4\u00e4n. Kun k\u00e4yt\u00e4t, k\u00e4yt\u00e4 tagName<\/code>samaa tagName<\/code>propaa ja arvoa molemmissa edit<\/code>ja -kohdissa save<\/code>.<\/p>\n
Oletetaan, ett\u00e4 haluat laittaa attribuutin arvon <h2><\/code>, joka pakottaa editorissa mink\u00e4 tahansa sy\u00f6tteen arvoksi h2. Voit edit<\/code>tehd\u00e4:<\/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 sis\u00e4\u00e4n save<\/code>:<\/p>\n
<RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/><\/code><\/pre>\n
Yll\u00e4 oleva tulostaa nyt sen, mik\u00e4 on kirjoitettu tunnisteen RichText<\/code>sis\u00e4ll\u00e4 olevalle alueelle .<h2><\/code><\/p>\n
K\u00e4ytt\u00e4m\u00e4ll\u00e4source<\/code><\/h3>\n
Ilmeisesti voit yhdist\u00e4\u00e4 useita richtext-tekstej\u00e4 lohkoa varten, esimerkiksi yhden otsikkoa ja yhden kappaletta varten. Muista vain, ett\u00e4 jokainen tarvitsee oman ominaisuutensa. Esimerkiksi:<\/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
Nyt kuitenkin alat kohdata joitain ongelmia. Vaikka voit muotoilla teksti\u00e4 editorissa, mit\u00e4\u00e4n (tai osaa) muotoilusta ei tallenneta. Kun tarkastelet viesti\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, se n\u00e4kyy vain muodossa h2<\/code>ja p<\/code>ilman tekemi\u00e4si muotoiluja (kursivointi, lihavoitu, linkki). Edes lohkosi kommenttilohko ei sis\u00e4ll\u00e4 muotoilua. T\u00e4m\u00e4 on hankala asia RichText<\/code>. T\u00e4m\u00e4n ratkaisemiseksi meid\u00e4n on ty\u00f6skennelt\u00e4v\u00e4 attribuutin ominaisuuden kanssa source<\/code>.<\/p>\n
Ominaisuus source<\/code>, jonka avulla WordPress voi poimia ja tulkita sis\u00e4lt\u00f6\u00e4 suoraan viestin sis\u00e4ll\u00f6st\u00e4. Jos m\u00e4\u00e4ritett\u00e4 ei ole source<\/code>asetettu, se tallennetaan ja puretaan HTML-kommenttilohkosta.<\/p>\n
Kun ty\u00f6skentelemme kanssa, RichText<\/code>asetamme yleens\u00e4 source<\/code>arvoon html<\/code>, joka k\u00e4ytt\u00e4\u00e4 WordPressin kirjastoa HTML-merkint\u00f6jen j\u00e4sent\u00e4miseen. Ominaisuus source<\/code>toimii yhdess\u00e4 toisen attribuuttiominaisuuden kanssa; selector<\/code>joka m\u00e4\u00e4ritt\u00e4\u00e4, mist\u00e4 HTML-tunnisteesta sen tulee purkaa.<\/p>\n
Esimerkkin\u00e4 asetamme kappaleessamme source<\/code>as :n ja asetamme asteen (muuten se on oletuksena lohkon juuri).html``RichText``selector``p<\/code><\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n
Nyt toisen RichText<\/code>pit\u00e4isi onnistuneesti tallentaa kaikki tekstimuotoilunsa. Huomaat my\u00f6s, ett\u00e4 kommenttilohko n\u00e4ytt\u00e4\u00e4 nyt vain myRichHeading<\/code>JSON-m\u00e4\u00e4ritteen. Attribuutti myRichText<\/code>on kadonnut kokonaan kommenttilohkosta. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 source<\/code>WordPress j\u00e4sent\u00e4\u00e4 nyt viestin sis\u00e4ll\u00f6n attribuutin arvon kommenttilohkon sijaan.<\/p>\n
\"Luo<\/a><\/p>\n
Ollakseni t\u00e4ysin rehellinen, en ole ty\u00f6skennellyt niin paljon source<\/code>m\u00e4\u00e4ritteen kanssa ollenkaan ja suosittelen v\u00e4ltt\u00e4m\u00e4\u00e4n sit\u00e4, jos voit. WordPressin dokumentaatio selitt\u00e4\u00e4 hieman enemm\u00e4n l\u00e4hteest\u00e4 ja m\u00e4\u00e4ritteist\u00e4<\/a>, joiden haluat tarkistaa itse.<\/p>\n
T\u00e4ss\u00e4 viestiss\u00e4 olemme oppineet attribuuttien perusasiat; kuinka ne m\u00e4\u00e4ritell\u00e4\u00e4n, p\u00e4ivitet\u00e4\u00e4n ja arvot tulostetaan. Seuraavissa vaiheissa tarkastellaan lis\u00e4\u00e4 eri komponentteja ja kuinka lis\u00e4t\u00e4 asetuksia itse lohkon sis\u00e4ll\u00f6n ulkopuolelle; ty\u00f6kalupalkissa ja editorin sivupalkissa (nimelt\u00e4\u00e4n Inspector).<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ss\u00e4 Gutenberg-lohkooppitunnissa aloittelijoille tarkastellaan attribuuttien m\u00e4\u00e4rittely\u00e4, niiden arvojen hakemista ja p\u00e4ivitt\u00e4mist\u00e4.<\/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":[938,938,813,1110,843,813,843,864,864],"tags":[1166],"class_list":["post-234015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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\/234015","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=234015"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/234015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=234015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=234015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=234015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}