{"id":233492,"date":"2023-02-15T17:27:00","date_gmt":"2023-02-15T14:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233492"},"modified":"2023-02-26T12:08:21","modified_gmt":"2023-02-26T09:08:21","slug":"luo-mukautettu-gutenberg-lohko-osa-5-tarkastajan-asetukset","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-5-tarkastajan-asetukset\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko \u2013 Osa 5: Tarkastajan asetukset"},"content":{"rendered":"\n

Edellisiss\u00e4 vaiheissa opimme komponenttien ja attribuuttien hahmontamisesta lohkossa. T\u00e4ss\u00e4 vaiheessa keskitymme siihen, mit\u00e4 WordPress (ainakin koodissa) kutsuu Inspectoriksi: sivupalkkiin editorin oikealla puolella. K\u00e4sittelemme joitain uusia komponentteja, jotka on j\u00e4rkev\u00e4\u00e4 sijoittaa sivupalkkiin ja miten niit\u00e4 k\u00e4sitell\u00e4\u00e4n.<\/p>\n

Tarkastajan\/sivupalkin komponentti<\/h2>\n

Jos haluat lis\u00e4t\u00e4 mukautetut asetukset ja HTML-koodin Inspector-sivupalkkiin, k\u00e4\u00e4rit kaiken komponentin nimelt\u00e4 InspectorControls<\/code>. Mit\u00e4 tahansa laitat t\u00e4m\u00e4n komponentin sis\u00e4\u00e4n, tulostetaan sivupalkkiin, ei itse lohkoon\/editoriin. Voit periaatteessa laittaa komponentin ja sen sis\u00e4ll\u00f6n kaikkialle edit<\/code>funktion palautukseen.<\/p>\n

Sen lis\u00e4ksi k\u00e4sittelet asetuksia sivupalkin sis\u00e4ll\u00e4 samoin kuin ne olivat lohkon sis\u00e4ll\u00e4. Jokainen asetus vaatii m\u00e4\u00e4ritteen, ja voit ladata ja p\u00e4ivitt\u00e4\u00e4 m\u00e4\u00e4ritteet samalla tavalla.<\/p>\n

\"Luo<\/a><\/p>\n

Katsotaanpa ensin nopeasti, milt\u00e4 lohkomme sivupalkki n\u00e4ytt\u00e4\u00e4 (kun lohkomme on aktiivinen editorissa) edellisess\u00e4 vaiheessa p\u00e4\u00e4dyttyyn koodiin perustuen.<\/p>\n

Kaikissa lohkoissa n\u00e4kyy oletusarvoisesti lohkon kuvake, nimi ja kuvaus sek\u00e4 osio Lis\u00e4asetukset \u2013 kutistettu. Advanced-kohdasta l\u00f6yd\u00e4t tekstisy\u00f6tteen CSS-luokan tarjoamiseksi lohkolle.<\/p>\n

Sivupalkkiosion ja joidenkin asetusten lis\u00e4\u00e4minen<\/h2>\n

Sivupalkki on jaettu osiin (kutsutaan koodissa paneeleiksi), ja optimaalisen suunnittelun ja toiminnallisuuden saavuttamiseksi (mukaan lukien avoimen tiivistyksen toiminto) meid\u00e4n tulisi k\u00e4ytt\u00e4\u00e4 WordPressin komponentteja paneelien tulostamiseen oikein.<\/p>\n

K\u00e4yt\u00e4 komponenttia PanelBody<\/code>osion lis\u00e4\u00e4miseen (ne jotka voit avata tai tiivist\u00e4\u00e4), jotka l\u00f6ytyv\u00e4t wp.components<\/code>pakkauksesta. Komponentti hyv\u00e4ksyy muutaman rekvisiitin, esimerkiksi otsikon ja sen, pit\u00e4isik\u00f6 paneelin olla auki vai kiinni vai ei. Voit my\u00f6s tarjota mukautetun luokan, kuvakkeen ja liitt\u00e4\u00e4 tapahtumatoiminnon avaus-sulje-liipaisuun.<\/p>\n

PanelBody<\/code>WordPress suosittelee sitten k\u00e4ytt\u00e4m\u00e4\u00e4n PanelRow<\/code>komponenttia, joka toimii paneelin yleisin\u00e4 konteina – suunnittelun virtaviivaistamisen varmistamiseksi. T\u00e4m\u00e4 komponentti k\u00e4ytt\u00e4\u00e4 automaattisesti jonkin verran marginaalia ja joustavaa rivityyli\u00e4 sis\u00e4ll\u00f6llesi. Tyylin " flex-direction: row<\/code>" takia sinun tulee k\u00e4\u00e4ri\u00e4 jokainen asetus yhteen PanelRow<\/code>. Tai voit ohittaa sen kokonaan ja ottaa vastuun sen muotoilusta itse diveill\u00e4 ja sellaisilla.<\/p>\n

Paneelin ja asetusten lis\u00e4\u00e4minen<\/h3>\n

Lis\u00e4t\u00e4\u00e4n lohkoomme sivupalkkipaneeli, jossa on muutama asetus, jotta n\u00e4emme sen k\u00e4yt\u00e4nn\u00f6ss\u00e4. Lis\u00e4\u00e4mme vaihtos\u00e4\u00e4timen, valintatulon, v\u00e4rivalitsimen ja valintaruudun \u2013 vain saadaksemme kokemusta erityyppisist\u00e4 sy\u00f6tt\u00f6komponenteista. Olen j\u00e4tt\u00e4nyt lohkon sis\u00e4ll\u00f6n (kahdella RichText<\/code>s:ll\u00e4) ja save<\/code>funktion aivan kuten ennenkin.<\/p>\n

const { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    icon: 'smiley',\n    description: 'Learning in progress',\n    keywords: ['example', 'test'],\n    attributes: {\n        myRichHeading: {\n            type: 'string',\n        },\n        myRichText: {\n            type: 'string',\n            source: 'html',\n            selector: 'p'\n        },\n        toggle: {\n            type: 'boolean',\n            default: true\n        },\n        favoriteAnimal: {\n            type: 'string',\n            default: 'dogs'\n        },\n        favoriteColor: {\n            type: 'string',\n            default: '#DDDDDD'\n        },\n        activateLasers: {\n            type: 'boolean',\n            default: false\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <InspectorControls>\n                    <PanelBody\n                        title=\"Most awesome settings ever\"\n                        initialOpen={true}\n                    >\n                        <PanelRow>\n                            <ToggleControl\n                                label=\"Toggle me\"\n                                checked={attributes.toggle}\n                                onChange={(newval) => setAttributes({ toggle: newval })}\n                            \/>\n                        <\/PanelRow>\n                        <PanelRow>\n                            <SelectControl\n                                label=\"What's your favorite animal?\"\n                                value={attributes.favoriteAnimal}\n                                options={[\n                                    {label: \"Dogs\", value: 'dogs'},\n                                    {label: \"Cats\", value: 'cats'},\n                                    {label: \"Something else\", value: 'weird_one'},\n                                ]}\n                                onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n                            \/>\n                        <\/PanelRow>\n                        <PanelRow>\n                            <ColorPicker\n                                color={attributes.favoriteColor}\n                                onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n                                disableAlpha\n                            \/>\n                        <\/PanelRow>\n                        <PanelRow>\n                            <CheckboxControl\n                                label=\"Activate lasers?\"\n                                checked={attributes.activateLasers}\n                                onChange={(newval) => setAttributes({ activateLasers: newval })}\n                            \/>\n                        <\/PanelRow>\n                    <\/PanelBody>\n                <\/InspectorControls>\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    },\n    save: (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    }\n});<\/code><\/pre>\n
Kuten aina, aloitamme purkamalla komponentit ja toiminnot, joita haluamme k\u00e4ytt\u00e4\u00e4. Sis\u00e4ll\u00e4 m\u00e4\u00e4rit\u00e4mme yhden attribuutin sy\u00f6tett\u00e4 kohden ja attributes<\/code>sovitamme registerBlockType()<\/code>tyypin \u2013 esimerkiksi vaihtos\u00e4\u00e4din odottaa loogista arvoa ja koska pudotusvalikon arvot ovat merkkijonoja, attribuutin tulee olla my\u00f6s tyyppimerkkijono.<\/p>\n
Rivilt\u00e4 #41<\/code>aloitamme InspectorControls<\/code>komponentin, ja kaikki siit\u00e4 pisteest\u00e4 riviin #80<\/code>ilmestyy sivupalkkiin. Loput n\u00e4kyv\u00e4t itse editorissa, enk\u00e4 ole tehnyt siihen muutoksia.<\/p>\n
\"Luo<\/a><\/p>\n
Sis\u00e4lle luomme ensin paneelin, PanelBody<\/code>jossa prop initialOpen<\/code>on asetettu tosi, kerromme Gutenbergille, ett\u00e4 t\u00e4m\u00e4 paneeli pit\u00e4isi avata oletuksena. Ja sitten on meist\u00e4 itsest\u00e4mme kiinni, mit\u00e4 kuhunkin lis\u00e4t\u00e4\u00e4n PanelRow<\/code>.<\/p>\n
Komponentille ToggleControl<\/code>k\u00e4yt\u00e4mme samoja rekvisiitta, kuin olemme tehneet ennenkin tekstinsy\u00f6tteiden kanssa, paitsi ett\u00e4 prop:n sijaan value<\/code>annamme attribuutin arvon prop sis\u00e4ll\u00e4 checked<\/code>. T\u00e4m\u00e4 koskee kaikkia sy\u00f6tteit\u00e4, jotka odottavat valittua attribuuttia tavallisessa HTML:ss\u00e4, esimerkiksi valintaruudut. Radiopainikkeissa k\u00e4yt\u00e4t rekvisiittaa selected<\/code>, koska t\u00e4t\u00e4 k\u00e4ytet\u00e4\u00e4n my\u00f6s tavallisessa HTML:ss\u00e4. Muista, ett\u00e4 t\u00e4m\u00e4n sy\u00f6tteen m\u00e4\u00e4ritteen on oltava tyyppi\u00e4 boolean<\/code>.<\/p>\n
Mit\u00e4 tulee CheckboxControl<\/code>yksitt\u00e4isen valintaruudun k\u00e4sittelyyn, se toimii t\u00e4sm\u00e4lleen samalla tavalla kuin ToggleControl<\/code>– se palauttaa loogisen arvon riippumatta siit\u00e4, onko se valittu vai ei.<\/p>\n
Luo SelectControl<\/code>valikon avattavan valikon ja odottaa mahdollisia valintoja taulukkona prop options<\/code>. Jokaisen elementin on oltava objekti, jolla on ominaisuudet label<\/code>ja value<\/code>. Sama koskee valintaruutuja ja valintapainikkeita (RadioControl<\/code>). Normaaleissa olosuhteissa luot luultavasti valinnat muuttujana HTML-ulostulon ulkopuolella.<\/p>\n
Saatat huomata, ett\u00e4 se ColorPicker<\/code>toimii hieman eri tavalla kuin muut, koska t\u00e4m\u00e4 on monimutkaisempi komponentti eik\u00e4 tavallinen HTML-sy\u00f6tt\u00f6. Anna color<\/code>tallennetun v\u00e4rin tuki ja sen sijaan onChange<\/code>(s\u00e4teilee kerran napsauttamalla, mutta my\u00f6s aina, kun arvoa muutetaan vedett\u00e4ess\u00e4 \u2013 mik\u00e4 voi johtaa useisiin tulipaloihin) onChangeComplete<\/code>. T\u00e4ss\u00e4 tapahtumassa palautettu rekvisiitta on my\u00f6s objekti, jossa meid\u00e4n on p\u00e4\u00e4tett\u00e4v\u00e4, mink\u00e4 osan haluamme tallentaa attribuutissamme. T\u00e4ss\u00e4 esimerkiss\u00e4 haluamme tallentaa heksadesimaaliarvon (ilman alfaa\/opasiteettia), joten sis\u00e4ll\u00e4 setAttributes()<\/code>poimimme palautetun objektin hex<\/code>ominaisuuden. color<\/code>T\u00e4st\u00e4 syyst\u00e4 my\u00f6s lis\u00e4\u00e4mme kiinteist\u00f6ndisableAlpha<\/code>Alfa-kanavan k\u00e4ytt\u00f6liittym\u00e4n poistaminen (opasiteetin hallintaan), koska ei ole j\u00e4rkev\u00e4\u00e4 tarjota k\u00e4ytt\u00e4j\u00e4lle t\u00e4t\u00e4, kun emme koskaan tallenna peitt\u00e4vyysarvoa.<\/p>\n
Jokaisessa komponentissa on label<\/code>k\u00e4ytett\u00e4viss\u00e4 rekvisiitta, paitsi v\u00e4rivalitsin. Jos haluat tulostaa tunnisteen tai tekstin ennen sit\u00e4, sinun on k\u00e4ytett\u00e4v\u00e4 HTML-koodia tai tyyli\u00e4 varmistaaksesi, ett\u00e4 se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4.<\/p>\n
Voit tietysti lis\u00e4t\u00e4 niin monta paneelia kuin haluat, lis\u00e4\u00e4 vain toinen PanelBody<\/code>komponentti edellisen j\u00e4lkeen.<\/p>\n
Jos olet kiinnostunut oppimaan lis\u00e4\u00e4 lohkoasetusten lis\u00e4\u00e4misest\u00e4, minulla on erilliset opetusohjelmat monimutkaisemmille asetuksille ja komponenteille Inspectorille. Kuvavalinnan lis\u00e4\u00e4minen<\/a> ja v\u00e4riasetuspaneelin lis\u00e4\u00e4minen<\/a>.<\/p>\n
K\u00e4sittelysave<\/code><\/h3>\n
Olen j\u00e4tt\u00e4nyt save<\/code>toiminnon entisell\u00e4\u00e4n. Se on sinun ja kaikki riippuu siit\u00e4, mit\u00e4 asetukset ohjaavat l\u00e4hd\u00f6ss\u00e4. Tied\u00e4t jo, kuinka saada kunkin asetuksen arvot. Esimerkkin\u00e4 oletetaan, ett\u00e4 boolean-attribuutti activateLasers<\/code>ohjaa, hahmonnetaanko mukautettu HTML-elementti vai ei. Jos attribuutti true<\/code>on div, tulee tulostaa, muuten ei. Voit tehd\u00e4 sen perinteisell\u00e4 if-checkill\u00e4 tai k\u00e4ytt\u00e4\u00e4 JSX:n rivi\u00e4 if<\/code>ja &&<\/code>operaattoria. Lue lis\u00e4\u00e4 t\u00e4st\u00e4 Reactin ehdollisen render\u00f6innin oppaasta<\/a>.<\/p>\n
save: (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            {attributes.activateLasers && \n                <div className=\"lasers\">Lasers activated<\/div>\n            }\n        <\/div>\n    );\n}<\/code><\/pre>\n
Koska k\u00e4yt\u00e4mme RichText<\/code>t\u00e4t\u00e4 tulostetta, se ei n\u00e4y editorissa, mutta se n\u00e4kyy k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
L\u00f6yd\u00e4t lis\u00e4\u00e4 komponentteja wp.components<\/code> Githubin reposta<\/a>. Useimmat n\u00e4ist\u00e4 kansioista tarjoavat sinulle readme-tiedoston, jossa on ohjeita sen k\u00e4yt\u00f6st\u00e4. Opin suurimman osan t\u00e4st\u00e4 katsomalla t\u00e4t\u00e4 repoa ja my\u00f6s WordPressin ydinkomponentteja, kuinka he sen tekiv\u00e4t.<\/p>\n
Sarjan seuraavassa vaiheessa<\/a> keskitymme lohkon ty\u00f6kalurivin ohjaamiseen. Opettelemme k\u00e4sittelem\u00e4\u00e4n esimerkiksi lohkon kohdistusta ja lis\u00e4\u00e4m\u00e4\u00e4n mukautettuja painikkeita ty\u00f6kalupalkkiin.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ss\u00e4 Gutenberg-opetustunnissa keskitymme eri komponenttien lis\u00e4\u00e4miseen Inspectoriin – sivupalkkiin editorin oikealla puolella.<\/p>\n","protected":false},"author":1,"featured_media":153128,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,938,938,719,895,1110,834,843,803,803,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233492","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-kehittaejae","9":"category-gutenberg-5","13":"category-n-a","14":"category-opas-aloittelijoille","15":"category-opetusohjelmia","16":"category-php-5","20":"category-wordpress-5","22":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233492","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=233492"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233492\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/153128"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}