{"id":233989,"date":"2023-02-26T12:07:00","date_gmt":"2023-02-26T09:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233989"},"modified":"2023-02-26T12:08:13","modified_gmt":"2023-02-26T09:08:13","slug":"kuinka-lisaetae-vaeriasetuksia-mukautettuun-gutenberg-lohkoon","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-lisaetae-vaeriasetuksia-mukautettuun-gutenberg-lohkoon\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 v\u00e4riasetuksia mukautettuun Gutenberg-lohkoon"},"content":{"rendered":"\n<p>T\u00e4m\u00e4 viesti k\u00e4sittelee syv\u00e4llisemmin v\u00e4riasetusten lis\u00e4\u00e4mist\u00e4 mukautettuun WordPress Gutenberg -lohkoon. Opimme lis\u00e4\u00e4m\u00e4\u00e4n saman v\u00e4riasetuskomponentin, jossa valitaan paletin v\u00e4reist\u00e4 ja mukautetuista v\u00e4reist\u00e4, kuten monet WordPressin oletuslohkot k\u00e4ytt\u00e4v\u00e4t.<\/p>\n<p>T\u00e4m\u00e4n lis\u00e4\u00e4mme mukautettuun lohkoomme:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\" alt=\"Kuinka lis\u00e4t\u00e4 v\u00e4riasetuksia mukautettuun Gutenberg-lohkoon\"><\/a><\/p>\n<p>Gutenbergin komponentteja k\u00e4ytt\u00e4m\u00e4ll\u00e4 voimme helposti toteuttaa t\u00e4m\u00e4n paletti-\/v\u00e4ri-osion omaan mukautettuun lohkoomme. Voit m\u00e4\u00e4ritt\u00e4\u00e4 v\u00e4riasetukset vaikuttamaan mihin tahansa haluamaasi v\u00e4riin. tausta, tekstin v\u00e4ri, reunuksen v\u00e4ri tai mik\u00e4 tahansa muu. Voit my\u00f6s lis\u00e4t\u00e4 t\u00e4h\u00e4n paneeliin niin monta v\u00e4riasetusta kuin haluat.<\/p>\n<p>Ennen kuin sukeltaamme koodiin, sinun on oltava tietoinen joistakin asioista. \u00c4l\u00e4 hypp\u00e4\u00e4 eteenp\u00e4in koodiin, sill\u00e4 seuraava osa selitt\u00e4\u00e4 paljon, miksi koodin on teht\u00e4v\u00e4 se kuten sen tekee.<\/p>\n<h2>Mit\u00e4 sinun tulee tiet\u00e4\u00e4 ensin<\/h2>\n<p>Komponentit paletti\/v\u00e4riasetusten toteuttamiseen ovat ja <code>PanelColorSettings<\/code>paketista. Komponentti on ns. korkeamman asteen komponentti ja se pit\u00e4\u00e4 toteuttaa hieman eri tavalla kuin pelkk\u00e4 normaalin komponentin tulostaminen. Palaan my\u00f6hemmin hieman tarkemmin. Mutta ensin meid\u00e4n on oltava tietoisia siit\u00e4, miten Gutenberg k\u00e4sittelee lohkon v\u00e4riasetuksia.<code>withColors``wp.blockEditor``withColors<\/code><\/p>\n<h3>Miten Gutenberg-lohkot k\u00e4sittelev\u00e4t v\u00e4riasetuksia<\/h3>\n<p>On olemassa tiettyj\u00e4 s\u00e4\u00e4nt\u00f6j\u00e4 sille, kuinka Gutenberg k\u00e4sittelee v\u00e4riasetuksia lohkoissa. Jos olet koskaan muotoillut Gutenbergin tukemaa teemaa ennen kuin olet luultavasti jo perehtynyt n\u00e4ihin s\u00e4\u00e4nt\u00f6ihin. K\u00e4ymme ne kuitenkin nopeasti l\u00e4pi, koska meid\u00e4n on k\u00e4sitelt\u00e4v\u00e4 t\u00e4m\u00e4 estokoodissamme.<\/p>\n<ul>\n<li>Kun paletin v\u00e4ri valitaan, solmulohkoelementti saa tietyn kuvion luokan. Tunti alkaa kirjaimella &quot; <code>has-<\/code>&quot;, jonka j\u00e4lkeen tulee paletin etana. Loppu riippuu siit\u00e4, mihin elementtiin v\u00e4rin tulee vaikuttaa. Tekstin v\u00e4rin kohdalla se p\u00e4\u00e4ttyy &quot; <code>-color<\/code>&quot;. Taustav\u00e4rille se p\u00e4\u00e4ttyy &quot; <code>-background-color<\/code>&quot;. Esimerkiksi lohko, jonka paletin v\u00e4ri on &quot;punainen&quot;, on valittu taustav\u00e4riksi, saa luokan &quot; <code>has-red-background-color<\/code>&quot;.<\/li>\n<li>Kun mukautettu v\u00e4ri valitaan (v\u00e4rivalitsimesta), solmulohkoelementti saa sis\u00e4\u00e4nrakennetun tyylin heksadesimaalikoodin kanssa. Esimerkiksi taustav\u00e4riksi valittu mukautettu v\u00e4ri #DD0000 saa attribuutin &quot; <code>style=\"background-color: #DD0000;<\/code>&quot;.<\/li>\n<\/ul>\n<p>Kun otamme k\u00e4ytt\u00f6\u00f6n v\u00e4riasetukset lohkollemme, meid\u00e4n on otettava k\u00e4ytt\u00f6\u00f6n oikea luokka ja sis\u00e4inen tyyli. Teemme sen t\u00e4m\u00e4n opetusohjelman lopussa.<\/p>\n<h3>Kuinka ty\u00f6skennell\u00e4<code>withColors<\/code><\/h3>\n<p>Kuten aiemmin mainittiin <code>withColors<\/code>, se on <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">korkeamman asteen komponentti<\/a>. T\u00e4m\u00e4 tarkoittaa periaatteessa sit\u00e4, ett\u00e4 se on komponentti, joka ottaa komponentin ja palauttaa uuden komponentin. Palautetussa komponentissa saamme hy\u00f6dyllisi\u00e4 rekvisiitta ylemm\u00e4n asteen komponentista. Yksinkertaisesti sanottuna <code>withColors<\/code>palautamme oman komponenttimme mukautetulle lohkollemme. Lohkokomponenttimme saa tarvittavat rekvisiitta v\u00e4rien kanssa ty\u00f6skentelyyn osoitteesta <code>withColors<\/code>.<\/p>\n<p>Komponentti <code>withColors<\/code>k\u00e4sittelee tilaa ja paljon toimintoja v\u00e4rien kanssa ty\u00f6skentelemiseen. Ja saamme paljon automaatiota t\u00e4ss\u00e4 prosessissa. T\u00e4m\u00e4 on eritt\u00e4in k\u00e4tev\u00e4\u00e4 selvitt\u00e4\u00e4ksesi, onko valittu v\u00e4ri paletin v\u00e4ri (meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 luokka) vai mukautettu v\u00e4ri (meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 sis\u00e4inen tyyli). <code>withColors<\/code>yksinkertaistaa paljon valitun v\u00e4rin tallentamista lohkomme attribuutteihin, oli se mik\u00e4 tahansa. Ominaisuuksista puheen ollen..<\/p>\n<h3>Ominaisuudet ja<code>withColors<\/code><\/h3>\n<p>Ilmeisesti lohkosi tarvitsee m\u00e4\u00e4ritteit\u00e4 valitun v\u00e4rin tallentamiseksi. Hy\u00f6ty\u00e4ksesi withColorin automaatiosta oikean v\u00e4rin tallentamiseen, sinun on itse asiassa m\u00e4\u00e4ritett\u00e4v\u00e4 kaksi attribuuttia kullekin v\u00e4riasetukselle. Toinen paletin v\u00e4rin slug ja toinen heksadesimaalikoodin tallentamiseen. On kuitenkin joitain s\u00e4\u00e4nt\u00f6j\u00e4.<\/p>\n<p>Oletetaan, ett\u00e4 haluat lis\u00e4t\u00e4 v\u00e4riasetuksen lohkon tekstin v\u00e4rille \u2013 joten p\u00e4\u00e4t\u00e4t m\u00e4\u00e4ritt\u00e4\u00e4 attribuutin, jonka nimi on osuvasti &quot; <code>textColor<\/code>&quot;. Sinun on sitten m\u00e4\u00e4ritett\u00e4v\u00e4 toinen attribuutti mallissa &quot; <code>customYourOriginalAttribute<\/code>&quot;. T\u00e4ss\u00e4 esimerkiss\u00e4 toisen attribuutin nimi on oltava &quot; <code>customTextColor<\/code>&quot;. Ota huomioon camelCase (isot kirjaimet) t\u00e4ss\u00e4. T\u00e4m\u00e4n mallin <code>withColors<\/code>noudattaminen automaattisesti:<\/p>\n<ul>\n<li>Jos paletin v\u00e4ri on valittu, attribuutti &quot; <code>textColor<\/code>&quot; sis\u00e4lt\u00e4\u00e4 paletin v\u00e4rin.<\/li>\n<li>Jos mukautettu v\u00e4ri on valittu, &quot; <code>customTextColor<\/code>&quot; t\u00e4ytet\u00e4\u00e4n heksadesimaalikoodilla.<\/li>\n<\/ul>\n<p>N\u00e4m\u00e4 kaksi toimivat rinnakkain. Jos valitset mukautetun v\u00e4rin, <code>textColor<\/code>se on automaattisesti <code>undefined<\/code>ja p\u00e4invastoin.<\/p>\n<p>Ja lopuksi viel\u00e4 yksi asia, joka tulee muistaa: <strong>sinun ei tarvitse k\u00e4ytt\u00e4\u00e4 <code>setAttributes()<\/code>v\u00e4rim\u00e4\u00e4ritteiden p\u00e4ivitt\u00e4miseen<\/strong>! Mukana toimitetut rekvisiittat <code>withColors<\/code>sis\u00e4lt\u00e4v\u00e4t toiminnon, joka p\u00e4ivitt\u00e4\u00e4 attribuutit automaattisesti puolestasi. Sinun tarvitsee vain v\u00e4litt\u00e4\u00e4 t\u00e4m\u00e4 toiminto <code>onChange<\/code>tapahtumalle <code>PanelColorSettings<\/code>komponentille, jolloin m\u00e4\u00e4ritteet p\u00e4ivitet\u00e4\u00e4n automaattisesti.<\/p>\n<p>Ok, on aika n\u00e4hd\u00e4 t\u00e4m\u00e4 kaikki k\u00e4yt\u00e4nn\u00f6ss\u00e4!<\/p>\n<h2>V\u00e4riasetusten k\u00e4ytt\u00f6\u00f6notto mukautetussa lohkossa<\/h2>\n<p>Aloittaakseni minulla on melko hy\u00f6dyt\u00f6n mukautettu lohko, joka ei tee muuta kuin n\u00e4ytt\u00e4\u00e4 kovakoodattua teksti\u00e4. T\u00e4m\u00e4n ansiosta on helppo erottaa, mit\u00e4 tarvitsemme koodaamaan v\u00e4riasetusten lis\u00e4\u00e4miseksi. Minulla on <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-luoda-mukautettu-wordpress-gutenberg-lohko-opetusohjelmasarja\/\" title=\"opetusohjelmasarja omien mukautettujen lohkojen luomisesta,\">opetusohjelmasarja omien mukautettujen lohkojen luomisesta,<\/a> jos olet kiinnostunut oppimaan lis\u00e4\u00e4.<\/p>\n<p>Huomautus: Kirjoitan kaiken koodin ES6\/ESNext-tiedostoon. T\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 nuolitoiminnot, jotka vaativat erityist\u00e4 huolellisuutta Babel\/webpack-asetuksissa. Jos saat virheit\u00e4 johonkin alla olevasta koodista, noudata <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/taeydellinen-opas-kehitysympaeristoen-luomiseen-gutenbergille\/\" title=\"opastani Webpackin ja Babelin m\u00e4\u00e4ritt\u00e4misest\u00e4 ES6\/ESNextille\">opastani Webpackin ja Babelin m\u00e4\u00e4ritt\u00e4misest\u00e4 ES6\/ESNextille<\/a> tai s\u00e4\u00e4d\u00e4 koodia niin, ettei &quot;kokeellisia syntakseja&quot; k\u00e4ytet\u00e4.<\/p>\n<p>T\u00e4m\u00e4 on mukautettu peruslohkoni ennen kuin teen mit\u00e4\u00e4n v\u00e4riasetuksien kanssa:<\/p>\n<pre><code>const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\n\u00a0\nconst BlockWithColorSettings = (props) =&gt; {\n    return(\n        &lt;div&gt;\n            PanelColorSettings Demo\n        &lt;\/div&gt;\n    );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n    title: __('Color Settings Demo'),\n    icon: 'carrot',\n    category: 'common',\n    edit: BlockWithColorSettings,\n    save: (props) =&gt; { \n        return(\n            &lt;div&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        );\n    }\n});<\/code><\/pre>\n<p>Se on melko perus. Huomaa, ett\u00e4 <code>edit<\/code>funktio viittaa yksinkertaisesti erilliseen komponenttiin, <code>BlockWithColorSettings<\/code>sen sijaan ett\u00e4 kirjoittaisit sen tekstin sis\u00e4\u00e4n. T\u00e4m\u00e4 helpottaa sen toteuttamista <code>withColors<\/code>my\u00f6hemmin.<\/p>\n<p>Okei, on aika ottaa v\u00e4riasetukset k\u00e4ytt\u00f6\u00f6n lohkossamme! Esimerkkin\u00e4 haluan m\u00e4\u00e4ritt\u00e4\u00e4 tekstin v\u00e4rin.<\/p>\n<h3>Attribuuttien lis\u00e4\u00e4minen<\/h3>\n<p>Kuten aiemmin mainittiin, kullekin v\u00e4riasetukselle on m\u00e4\u00e4ritett\u00e4v\u00e4 kaksi attribuuttia. Ja meid\u00e4n on oltava erityisen varovaisia \u200b\u200bheid\u00e4n nime\u00e4misess\u00e4. Haluan lis\u00e4t\u00e4 tekstin v\u00e4rim\u00e4\u00e4ritteen, joten nime\u00e4n attribuutin <code>textColor<\/code>. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 lis\u00e4\u00e4n my\u00f6s attribuutin <code>customTextColor<\/code>. Molempien tulee olla merkkijonoa.<\/p>\n<pre><code>...\nregisterBlockType('awp\/colorsettings', {\n    title: __('Color Settings Demo'),\n    icon: 'carrot',\n    category: 'common',\n    attributes: {\n        textColor: {\n            type: 'string'\n        },\n        customTextColor: {\n            type: 'string'\n        },\n    },\n    edit: BlockWithColorSettings,\n    save: (props) =&gt; { \n    ...<\/code><\/pre>\n<p>Attribuuttimme ovat valmiita lohkon tekstin v\u00e4riasetuksen tallentamista varten. Nyt on aika toteuttaa <code>withColors<\/code>ja <code>PanelColorSettings<\/code>.<\/p>\n<h3>Toteutus<code>withColors<\/code><\/h3>\n<p>Kuten aiemmin mainittiin <code>withColors<\/code>, se on korkeamman asteen komponentti, jonka palauttaminen vaatii komponentin. Haluamme luonnollisesti sen palauttavan muokkauskomponenttimme, <code>BlockWithColorSettings<\/code>. Mutta parametrina <code>withColors<\/code>tarjoamme objektin.<\/p>\n<p>Kohteessa, joka v\u00e4litet\u00e4\u00e4n, <code>withColors<\/code>on kerrottava, <code>withColors<\/code>mit\u00e4 attribuuttia haluamme k\u00e4ytt\u00e4\u00e4 v\u00e4rin tallentamiseen ja mink\u00e4laista elementti\u00e4 se v\u00e4ritt\u00e4\u00e4 (tapauksessamme tekstin v\u00e4ri eli CSS-s\u00e4\u00e4nt\u00f6 &quot;v\u00e4ri&quot;). CSS-s\u00e4\u00e4nn\u00f6st\u00e4 ilmoittaminen varmistaa, ett\u00e4 palautetut luokkanimet ovat oikein. Koska t\u00e4m\u00e4 on tekstin v\u00e4ri, haluamme luokkien nimet, kuten &quot;has-color&quot;.<\/p>\n<p>Ensin hieman tuhoa ylh\u00e4\u00e4ll\u00e4. <code>withColors<\/code>asuu <code>wp.blockEditor<\/code>paketissa.<\/p>\n<pre><code>const { withColors } = wp.blockEditor;<\/code><\/pre>\n<p>Muutamme <code>edit<\/code>toiminnon muotoon:<\/p>\n<pre><code>    ...\n    attributes: {\n        ...\n    },\n    edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n    save: (props) =&gt; { \n        ...<\/code><\/pre>\n<p>T\u00e4ll\u00e4 koodilla komponenttimme <code>BlockWithColorSettings<\/code>saa lis\u00e4tarvikkeita:<\/p>\n<ul>\n<li><code>props.textColor<\/code>: on objekti, joka sis\u00e4lt\u00e4\u00e4 kaikki tiedot valitusta v\u00e4rist\u00e4. Jos paletin v\u00e4ri valittiin, se tallentaa ominaisuuksia heksadesimaalikoodille, paletin etanalle, luokan nimelle ja muille. Jos valittiin mukautettu v\u00e4ri, objekti sis\u00e4lt\u00e4\u00e4 heksadesimaalikoodin. Hex &#8211; koodi l\u00f6ytyy aina kiinteist\u00f6st\u00e4 <code>color<\/code>. Ja luokan nimi (vain jos paletin v\u00e4ri on valittu) asetetaan ominaisuuteen <code>class<\/code>.<\/li>\n<li><code>props.setTextColor<\/code>: Toiminto, joka p\u00e4ivitt\u00e4\u00e4 attribuuttimme puolestamme. Tarjoamme t\u00e4m\u00e4n v\u00e4riasetusten <code>onChange<\/code>tapahtumaa varten, kuten n\u00e4emme my\u00f6hemmin. Funktio p\u00e4ivitt\u00e4\u00e4 sek\u00e4 <code>textColor<\/code>attribuutit ett\u00e4 <code>customTextColor<\/code>. Koska noudatimme nime\u00e4miss\u00e4\u00e4nt\u00f6j\u00e4, se p\u00e4ivittyy automaattisesti <code>customTextColor<\/code>, vaikka emme koskaan antaneet t\u00e4t\u00e4 m\u00e4\u00e4ritteen nime\u00e4.<\/li>\n<\/ul>\n<p>Huomaa, ett\u00e4 &quot;set&quot;-funktio, joka tarjotaan propaan, noudattaa s\u00e4\u00e4nt\u00f6\u00e4: &quot; <code>setYourAttributeName<\/code>&quot;. Koska toimitimme <code>textColor<\/code>, funktio on nimetty <code>setTextColor<\/code>. Jos sen sijaan nime\u00e4mme attribuuttimme <code>awesomeColor<\/code>ja antaisimme t\u00e4m\u00e4n <code>withColors<\/code>objektiin, set-funktion nimeksi tulee <code>setAwesomeColor()<\/code>.<\/p>\n<h3>Toteutus<code>PanelColorSettings<\/code><\/h3>\n<p>Seuraava vaihe on varsinaisen Tarkastaja-osion k\u00e4ytt\u00f6\u00f6notto. T\u00e4t\u00e4 varten lis\u00e4\u00e4mme komponentin <code>PanelColorSettings<\/code>sis\u00e4\u00e4n. <code>InspectorControls<\/code>Koska React vaatii kaiken olevan yhden juurisolmun sis\u00e4ll\u00e4, k\u00e4yt\u00e4mme my\u00f6s <code>Fragment<\/code>(from <code>wp.elements<\/code>) k\u00e4\u00e4rim\u00e4\u00e4n kaiken sis\u00e4ll\u00e4.<\/p>\n<p>Ensin tiedoston yl\u00e4reunaan rakennemuutoksia:<\/p>\n<pre><code>const { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors } = wp.blockEditor;<\/code><\/pre>\n<p>Ja p\u00e4ivit\u00e4mme <code>BlockWithColorSettings<\/code>komponenttimme t\u00e4llaiseksi:<\/p>\n<pre><code>const BlockWithColorSettings = (props) =&gt; {\n    const { textColor, setTextColor } = props;  \/\/ Props received from withColors\n    return(\n        &lt;Fragment&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelColorSettings \n                    title={__('Color settings')}\n                    colorSettings={[\n                        {\n                            value: textColor.color,\n                            onChange: setTextColor,\n                            label: __('Text color')\n                        },\n                    ]}\n                \/&gt;\n            &lt;\/InspectorControls&gt;\n            &lt;div&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        &lt;\/Fragment&gt;\n    );\n}<\/code><\/pre>\n<p>Kuten rivist\u00e4 n\u00e4kyy, tuhoamme osoitteesta ja: lt\u00e4 <code>#2<\/code>saadut rekvisiitta. Muista, ett\u00e4 se on osoitteesta saatu objekti ja attribuutti. Meid\u00e4n ei kuitenkaan tarvitse viitata m\u00e4\u00e4ritteeseen.<code>withColors``textColor``setTextColor``props.textColor``withColors``props.attributes.textColor<\/code><\/p>\n<p>Komponentin rekvisiittaksi <code>PanelColorSettings<\/code>voimme antaa osion otsikon (otsikko Inspectorin kokoontaitettavassa laatikossa). T\u00e4rke\u00e4 asia t\u00e4ss\u00e4 on rekvisiitta, <code>colorSettings<\/code>jossa meid\u00e4n on tarjottava joukko v\u00e4rinasetusobjekteja. Jokaiselle v\u00e4riasetukselle (meill\u00e4 on t\u00e4ll\u00e4 hetkell\u00e4 vain yksi) meid\u00e4n on annettava joitain ominaisuuksia. Kiinteist\u00f6 <code>value<\/code>odottaa t\u00e4ll\u00e4 hetkell\u00e4 valitun heksadesimaalikoodin (vaikka paletin v\u00e4ri valittiin). T\u00e4m\u00e4 tarjotaan meille <code>textColor<\/code>potkussa, kiinteist\u00f6n sis\u00e4ll\u00e4 <code>color<\/code>. <code>onChange<\/code>Kiinteist\u00f6lle tarjoamme yksinkertaisesti &quot;set&quot;-toiminnon, jonka tarjoaa <code>withColors<\/code>, <code>setTextColor<\/code>. Ja lopuksi meid\u00e4n pit\u00e4isi antaa, <code>label<\/code>jotta k\u00e4ytt\u00e4j\u00e4 tiet\u00e4\u00e4, mihin elementtiin t\u00e4m\u00e4 v\u00e4ri vaikuttaa. Se n\u00e4kyy v\u00e4rin valintaalueen yl\u00e4puolella.<\/p>\n<p>N\u00e4in komponenttimme n\u00e4kyy Gutenberg-editorissa juuri nyt:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\" alt=\"Kuinka lis\u00e4t\u00e4 v\u00e4riasetuksia mukautettuun Gutenberg-lohkoon\"><\/a><\/p>\n<p>Se p\u00e4ivitt\u00e4\u00e4 nyt onnistuneesti ominaisuuksiamme v\u00e4rej\u00e4 valittaessa. Voit n\u00e4hd\u00e4, ett\u00e4 se muistaa v\u00e4rivalintasi tallentaessasi julkaisua.<\/p>\n<p>Mit\u00e4\u00e4n visuaalisesti ei kuitenkaan tapahdu, kun vaihdat v\u00e4rej\u00e4. V\u00e4rivalinta tallennetaan attribuutteihin, mutta editorissa ei tapahdu v\u00e4rin muutosta eik\u00e4 julkaisua esikatseltaessa. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 koodi lohkon luokille ja tyyleille. Meid\u00e4n on teht\u00e4v\u00e4 t\u00e4m\u00e4 sek\u00e4 <code>edit<\/code>funktiolle (joka on editorille) ett\u00e4 <code>save<\/code>funktiolle (k\u00e4ytt\u00f6liittym\u00e4). Se on seuraava askel.<\/p>\n<h3>Luokka- ja sis\u00e4isten tyylien k\u00e4sittely<code>edit<\/code><\/h3>\n<p>Meid\u00e4n on rakennettava lohkon solmuluokka- ja tyyliattribuutit valitun v\u00e4riasetuksen mukaan. Onneksi <code>withColors<\/code>saamme t\u00e4h\u00e4n jonkin verran automaatiota. Muista, ett\u00e4 <code>props.textColor<\/code>se on objekti, joka sis\u00e4lt\u00e4\u00e4 kaikki tarvitsemamme tiedot, mukaan lukien luokan nimen.<\/p>\n<p>Voisimme tehd\u00e4 jotain n\u00e4in:<\/p>\n<pre><code>...\nconst BlockWithColorSettings = (props) =&gt; {\n    const { textColor, setTextColor } = props;  \/\/ Props received from withColors\n    let divClass;\n    let divStyles = {};\n    if (textColor != undefined) {\n        if (textColor.class != undefined) {\n            divClass = textColor.class;\n        } else {\n            divStyles.color = textColor.color;\n        }\n    }\n    return(\n        &lt;Fragment&gt;\n            &lt;InspectorControls&gt;\n                ...\n            &lt;\/InspectorControls&gt;\n            &lt;div className={divClass} style={divStyles}&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n            ...<\/code><\/pre>\n<p>Rivill\u00e4 <code>#20<\/code>k\u00e4yt\u00e4mme kriittist\u00e4 luokkaa ja sis\u00e4ist\u00e4 tyyli\u00e4 lohkomme juurisolmuun. Sit\u00e4 ennen rakennetaan luokka- ja inline style -attribuutti tarkistamalla <code>props.textColor<\/code>objekti.<\/p>\n<p>T\u00e4m\u00e4n muutoksen j\u00e4lkeen mukautetun lohkon pit\u00e4isi nyt olla t\u00e4ysin toimiva editorissa. Aina kun vaihdat v\u00e4ri\u00e4, lohko muuttaa tekstin v\u00e4ri\u00e4. Mahtava! Viimeinen vaihe on tehd\u00e4 t\u00e4m\u00e4 my\u00f6s <code>save<\/code>funktiolle, jotta saamme n\u00e4m\u00e4 luokat ja tyylit my\u00f6s k\u00e4ytt\u00f6liittym\u00e4\u00e4n.<\/p>\n<h3>Luokka- ja sis\u00e4isten tyylien k\u00e4sittely<code>save<\/code><\/h3>\n<p>Luokka- ja rivityylien rakentamisen ja niiden k\u00e4ytt\u00e4misen juurisolmussa ajatus on sama <code>save<\/code>kuin kohteessa <code>edit<\/code>. Mutta siin\u00e4 on ratkaiseva ero. <code>save<\/code>Meill\u00e4 ei ole tarjoamia <code>withColors<\/code>rekvisiitta. Emme my\u00f6sk\u00e4\u00e4n voi lis\u00e4t\u00e4 funktioon korkeamman asteen komponentteja <code>save<\/code>. Joten <code>save<\/code>funktiossa kaikki tieto, joka meill\u00e4 on, ovat attribuutteja.<\/p>\n<p>On hyv\u00e4 peukalos\u00e4\u00e4nt\u00f6 v\u00e4ltt\u00e4\u00e4 &quot;has-&quot;-luokkanimien kovakoodausta. Ent\u00e4 jos WordPress p\u00e4\u00e4tt\u00e4\u00e4 muuttaa t\u00e4t\u00e4 s\u00e4\u00e4nt\u00f6\u00e4 tulevaisuudessa? Onneksi meill\u00e4 on funktio, joka voi auttaa meit\u00e4 luomaan meille oikeat luokkanimet: <code>getColorClassName()<\/code>.<\/p>\n<p>Ennen kuin unohdamme, tuhotaan se. Se on my\u00f6s <code>wp.blockEditor<\/code>paketissa.<\/p>\n<pre><code>const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\n<p><code>getColorClassName()<\/code>Toiminnon k\u00e4ytt\u00e4minen vaatii kaksi parametria. Ensin merkkijono CSS-s\u00e4\u00e4nn\u00f6lle. Koska v\u00e4riasetus on tekstin v\u00e4rej\u00e4 varten, tarjoamme &#8217; <code>color<\/code>&#8217;. T\u00e4m\u00e4 kertoo funktiolle, ett\u00e4 sen pit\u00e4isi palauttaa luokkanimi &quot;on-jotain-v\u00e4ri&quot; eik\u00e4 esimerkiksi &quot;on-something-background-color&quot;. Toisena parametrina meid\u00e4n on annettava attribuutin arvo.<\/p>\n<p>Tyyli-attribuutti luodaan yksinkertaisesti asettamalla attribuutin arvoksi &quot;v\u00e4ri&quot; <code>customTextColor<\/code>, jos se on m\u00e4\u00e4ritetty.<\/p>\n<pre><code>save: (props) =&gt; { \n    const { textColor, customTextColor } = props.attributes;\n    let divClass;\n    let divStyles = {};\n    if (textColor != undefined) {\n        divClass = getColorClassName('color', textColor);\n    }\n    if (customTextColor != undefined) {\n        divStyles.color = customTextColor;\n    }\n    return(\n        &lt;div className={divClass} style={divStyles}&gt;\n            PanelColorSettings Demo\n        &lt;\/div&gt;\n    );\n}<\/code><\/pre>\n<p>Ja tietysti, \u00e4l\u00e4 unohda soveltaa luokkaa ja tyyli\u00e4 lohkosi juurisolmuun; kuten riviss\u00e4 <code>#12<\/code>.<\/p>\n<p>PS: Jos testaat lohkoasi editorissa t\u00e4t\u00e4 koodia kirjoittaessasi, saat nyt lohkovirheen. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 olemme nyt muuttaneet <code>save<\/code>funktion l\u00e4ht\u00f6\u00e4 ja kaikki aiemmin tallentamasi tiedot ovat ristiriidassa. Sinun on poistettava esto ja lis\u00e4tt\u00e4v\u00e4 se uudelleen.<\/p>\n<p>T\u00e4m\u00e4n muutoksen j\u00e4lkeen lohkosi pit\u00e4isi nyt k\u00e4ytt\u00e4\u00e4 valittua tekstin v\u00e4ri\u00e4 oikein my\u00f6s k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n<p>Ja siin\u00e4 se! Olet nyt onnistuneesti ottanut v\u00e4riasetukset k\u00e4ytt\u00f6\u00f6n lohkossasi. Jos olet kiinnostunut lis\u00e4\u00e4m\u00e4\u00e4n useita v\u00e4riasetuksia (ei vain tekstin v\u00e4ri\u00e4), lue eteenp\u00e4in.<\/p>\n<h2>Huomautus useista v\u00e4riasetuksista<\/h2>\n<p>T\u00e4h\u00e4n menness\u00e4 sinun pit\u00e4isi pysty\u00e4 toteuttamaan useita v\u00e4riasetuksia. Haluat ehk\u00e4 lis\u00e4t\u00e4 lohkoasi taustav\u00e4rin, tekstin v\u00e4rin, reunuksen v\u00e4rin tai mink\u00e4 tahansa muun asetukset. T\u00e4ss\u00e4 osiossa teen nopean yleiskatsauksen siit\u00e4, mit\u00e4 meid\u00e4n on teht\u00e4v\u00e4 useiden v\u00e4riasetusten toteuttamiseksi.<\/p>\n<p>Oletetaan, ett\u00e4 haluan lis\u00e4t\u00e4 taustav\u00e4rin my\u00f6s lohkooni.<\/p>\n<p>Ensin minun on m\u00e4\u00e4ritett\u00e4v\u00e4 uusi attribuutti luovasti nimelt\u00e4 <code>backgroundColor<\/code>. M\u00e4\u00e4rittelen my\u00f6s toisen attribuutin <code>customBackgroundColor<\/code>.<\/p>\n<p>Muutan <code>edit<\/code>funktiossa tarjotun objektin <code>withColors<\/code>sellaiseksi:<\/p>\n<pre><code>withColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\n<p>T\u00e4m\u00e4 kertoo <code>withColors<\/code>, ett\u00e4 <code>textColor<\/code>m\u00e4\u00e4ritteeni on CSS-s\u00e4\u00e4nn\u00f6lle &quot; <code>color<\/code>&quot; (tekstin v\u00e4rille) ja attribuutti <code>backgroundColor<\/code>on CSS-s\u00e4\u00e4nn\u00f6lle &quot; <code>background-color<\/code>&quot;. <code>withColors<\/code>tunnistaa ja p\u00e4ivitt\u00e4\u00e4 automaattisesti my\u00f6s attribuutit ja <code>customTextColor<\/code>.<code>customBackgroundColor<\/code><\/p>\n<p><code>PanelColorSettings<\/code>Komponentissa annan toisen objektin taulukkoon prop <code>colorSettings<\/code>. Niin kuin:<\/p>\n<pre><code>&lt;PanelColorSettings \n    title={__('Color settings')}\n    colorSettings={[\n        {\n            value: textColor.color,\n            onChange: setTextColor,\n            label: __('Text color')\n        },\n        {\n            value: backgroundColor.color,\n            onChange: setBackgroundColor,\n            label: __('Background color')\n        },\n    ]}\n\/&gt;<\/code><\/pre>\n<p>T\u00e4m\u00e4n avulla sinun pit\u00e4isi saada kaksi erillist\u00e4 v\u00e4riasetusta Inspector-ruutuun v\u00e4riasetuksia varten.<\/p>\n<p>Viimeinen vaihe on sopivien luokkanimien ja tyylien rakentaminen sek\u00e4 <code>edit<\/code>ja <code>save<\/code>. T\u00e4m\u00e4 on melko yksinkertainen vaihe, koska se vain rakentaa merkkijono- tai tyyliobjektin oikein. Muista, ett\u00e4 luokkasi nimen on tuettava useita v\u00e4riluokkia (esim. jos valittiin sek\u00e4 tekstin v\u00e4ri ett\u00e4 taustav\u00e4ri). Lis\u00e4\u00e4 vain v\u00e4lily\u00f6nti jokaisen luokan nimen v\u00e4liin.<\/p>\n<p>PS: Jos joudut k\u00e4sittelem\u00e4\u00e4n monia luokkanimi\u00e4 lohkollesi, saatat hy\u00f6ty\u00e4 <code>classnames<\/code>paketin asentamisesta. Melkein kaikki Gutenbergin komponentit k\u00e4ytt\u00e4v\u00e4t t\u00e4t\u00e4 kirjastoa luokkanimien yhdist\u00e4miseen helpommin.<\/p>\n<h2>P\u00e4\u00e4telm\u00e4 ja t\u00e4ydellinen koodi<\/h2>\n<p>Sinun olisi nyt pit\u00e4nyt oppia k\u00e4ytt\u00e4m\u00e4\u00e4n v\u00e4riasetuksia mukautetussa lohkossasi. Toivottavasti t\u00e4st\u00e4 oli sinulle jotain hy\u00f6ty\u00e4! Minun piti lis\u00e4t\u00e4 t\u00e4m\u00e4 ominaisuus projektiini, enk\u00e4 todellakaan l\u00f6yt\u00e4nyt mit\u00e4\u00e4n tietoa tai hyv\u00e4\u00e4 dokumentaatiota. Joten t\u00e4m\u00e4 on tulos siit\u00e4, ett\u00e4 olen yhdist\u00e4nyt kaiken, mit\u00e4 olen oppinut t\u00e4st\u00e4 aiheesta monien yritysten ja erehdyksen j\u00e4lkeen.<\/p>\n<p>T\u00e4ss\u00e4 on lopullinen koodi kokonaisuudessaan mukautetulle lohkolle, jossa on tekstin v\u00e4riasetus:<\/p>\n<pre><code>const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;\n\u00a0\nconst BlockWithColorSettings = (props) =&gt; {\n    const { textColor, setTextColor } = props;  \/\/ Props received from withColors\n\u00a0\n    let divClass;\n    let divStyles = {};\n    if (textColor != undefined) {\n        if (textColor.class != undefined) {\n            divClass = textColor.class;\n        } else {\n            divStyles.color = textColor.color;\n        }\n    }\n    return(\n        &lt;Fragment&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelColorSettings \n                    title={__('Color settings')}\n                    colorSettings={[\n                        {\n                            value: textColor.color,\n                            onChange: setTextColor,\n                            label: __('Text color')\n                        },\n                    ]}\n                \/&gt;\n            &lt;\/InspectorControls&gt;\n            &lt;div className={divClass} style={divStyles}&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        &lt;\/Fragment&gt;\n    );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n    title: __('Color Settings Demo'),\n    icon: 'carrot',\n    category: 'common',\n    attributes: {\n        textColor: {\n            type: 'string'\n        },\n        customTextColor: {\n            type: 'string'\n        },\n    },\n    edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n    save: (props) =&gt; { \n        const { textColor, customTextColor } = props.attributes;\n        let divClass;\n        let divStyles = {};\n        if (textColor != undefined) {\n            divClass = getColorClassName('color', textColor);\n        }\n        if (customTextColor != undefined) {\n            divStyles.color = customTextColor;\n        }\n        return(\n            &lt;div className={divClass} style={divStyles}&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        );\n    }\n});<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 viestiss\u00e4 k\u00e4sitell\u00e4\u00e4n syv\u00e4llisemmin v\u00e4riasetusten lis\u00e4\u00e4mist\u00e4 mukautettuun WordPress Gutenberg -lohkoon oikealla tavalla &#8211; aivan kuten WordPressin lohkot tekev\u00e4t sen.<\/p>\n","protected":false},"author":1,"featured_media":151573,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,938,813,1110,843,803,803,813,843,864,864],"tags":[1166],"class_list":["post-233989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-laajennuksia","category-n-a","category-opetusohjelmia","category-php-5","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233989","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=233989"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233989\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}