{"id":233940,"date":"2023-02-26T12:20:00","date_gmt":"2023-02-26T09:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233940"},"modified":"2023-02-26T12:20:54","modified_gmt":"2023-02-26T09:20:54","slug":"kuidas-lisada-kohandatud-gutenbergi-plokki-vaervisaetteid","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-lisada-kohandatud-gutenbergi-plokki-vaervisaetteid\/","title":{"rendered":"Kuidas lisada kohandatud Gutenbergi plokki v\u00e4rvis\u00e4tteid"},"content":{"rendered":"\n<p>Selles postituses k\u00e4sitletakse \u00fcksikasjalikult, kuidas lisada kohandatud WordPressi Gutenbergi plokki v\u00e4rvis\u00e4tteid. \u00d5pime, kuidas lisada sama v\u00e4rviseadete komponenti, mis v\u00f5imaldab valida paletiv\u00e4rvide ja kohandatud v\u00e4rvide hulgast, nagu paljud WordPressi vaikeplokid kasutavad.<\/p>\n<p>Selle lisame oma kohandatud plokki:<\/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=\"Kuidas lisada kohandatud Gutenbergi plokki v\u00e4rvis\u00e4tteid\"><\/a><\/p>\n<p>Gutenbergi komponente kasutades saame selle paleti\/v\u00e4rviosa v\u00e4ga lihtsalt oma kohandatud plokki rakendada. Saate m\u00e4\u00e4rata v\u00e4rvis\u00e4tted, mis m\u00f5jutavad mis tahes soovitud v\u00e4rvi; tausta, teksti v\u00e4rvi, \u00e4\u00e4rise v\u00e4rvi v\u00f5i mis iganes muu. Samuti saate sellele paneelile lisada nii palju v\u00e4rvis\u00e4tteid, kui soovite.<\/p>\n<p>Enne koodiga tutvumist peate teadma m\u00f5ningaid asju. \u00c4rge j\u00e4tke koodi juurde, sest j\u00e4rgmine jaotis selgitab palju, miks kood peab seda nii tegema.<\/p>\n<h2>Mida peate k\u00f5igepealt teadma<\/h2>\n<p>Komponendid paleti\/v\u00e4rviseadete rakendamiseks on ja <code>PanelColorSettings<\/code>pakendist. Komponent on nn k\u00f5rgema j\u00e4rgu komponent ja seda tuleb realiseerida natuke teistmoodi kui lihtsalt tavalise komponendi v\u00e4ljastamist. Ma r\u00e4\u00e4gin hiljem veidi \u00fcksikasjalikumalt. Kuid k\u00f5igepealt peame olema teadlikud p\u00f5hit\u00f5dedest, kuidas Gutenberg ploki v\u00e4rviseadeid k\u00e4sitleb.<code>withColors``wp.blockEditor``withColors<\/code><\/p>\n<h3>Kuidas Gutenbergi plokid v\u00e4rviseadeid k\u00e4sitlevad<\/h3>\n<p>Gutenbergi v\u00e4rviseadete k\u00e4sitlemisel plokkides kehtivad teatud reeglid. Kui olete kunagi varem Gutenbergi toetatud teema stiili kujundanud, olete t\u00f5en\u00e4oliselt nende reeglitega juba tuttav. Sellegipoolest vaatame need kiiresti l\u00e4bi, sest peame seda oma plokkkoodis k\u00e4sitlema.<\/p>\n<ul>\n<li>Kui paleti v\u00e4rv on valitud, saab s\u00f5lmeploki element kindla mustri klassi. Tund algab t\u00e4hega &quot; <code>has-<\/code>&quot; ja seej\u00e4rel j\u00e4rgneb paleti n\u00e4lkjas. L\u00f5pp s\u00f5ltub sellest, millist elementi v\u00e4rv peaks m\u00f5jutama. Teksti v\u00e4rvi puhul l\u00f5peb see t\u00e4hega &quot; <code>-color<\/code>&quot;. Taustav\u00e4rvi puhul l\u00f5peb see t\u00e4hega &quot; <code>-background-color<\/code>&quot;. N\u00e4iteks plokk, mille taustav\u00e4rviks on valitud paletiv\u00e4rv &quot;punane&quot;, saab klassi &quot; <code>has-red-background-color<\/code>&quot;.<\/li>\n<li>Kui valitakse kohandatud v\u00e4rv (v\u00e4rvivalijast), saab s\u00f5lme ploki element inline stiili koos kuueteistk\u00fcmnendkoodiga. N\u00e4iteks taustav\u00e4rvi jaoks valitud kohandatud v\u00e4rv #DD0000 saab atribuudi &quot; <code>style=\"background-color: #DD0000;<\/code>&quot;.<\/li>\n<\/ul>\n<p>Kui rakendame oma ploki v\u00e4rvis\u00e4tteid, peame rakendama \u00f5ige klassi ja tekstisisese stiili. Teeme seda selle \u00f5petuse l\u00f5pus.<\/p>\n<h3>Kuidas t\u00f6\u00f6tada<code>withColors<\/code><\/h3>\n<p>Nagu varem mainitud, <code>withColors<\/code>on see <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00f5rgema j\u00e4rgu komponent<\/a>. P\u00f5him\u00f5tteliselt t\u00e4hendab see, et see on komponent, mis v\u00f5tab komponendi ja tagastab uue komponendi. Tagastatud komponendis saame kasulikud rekvisiidid k\u00f5rgemat j\u00e4rku komponendist. Lihtsamalt \u00f6eldes kasutame <code>withColors<\/code>kohandatud ploki jaoks oma komponendi tagastamiseks. Meie plokikomponent saab v\u00e4rvidega t\u00f6\u00f6tamiseks vajalikud rekvisiidid aadressilt <code>withColors<\/code>.<\/p>\n<p>Komponent <code>withColors<\/code>k\u00e4sitleb olekut ja palju funktsioone v\u00e4rvidega t\u00f6\u00f6tamiseks. Ja me saame selles protsessis palju automatiseerimist. See on v\u00e4ga mugav, et v\u00e4lja selgitada, kas valitud v\u00e4rv on paletiv\u00e4rv (peame lisama klassi) v\u00f5i kohandatud v\u00e4rv (peame lisama tekstisisese stiili). <code>withColors<\/code>lihtsustada palju valitud v\u00e4rvi salvestamise protsessi, mis iganes see ka poleks, meie ploki atribuutidesse. Atribuutidest r\u00e4\u00e4kides..<\/p>\n<h3>Atribuudid ja<code>withColors<\/code><\/h3>\n<p>Ilmselt vajab teie plokk valitud v\u00e4rvi salvestamiseks atribuute. Et saada kasu withColori automatiseerimisest \u00f5igete v\u00e4rvide salvestamisel, peate tegelikult m\u00e4\u00e4rama iga v\u00e4rvis\u00e4tte jaoks kaks atribuuti. \u00dcks paletiv\u00e4rvi n\u00e4pun\u00e4idete ja teine \u200b\u200bkuueteistk\u00fcmnendkoodi salvestamiseks. Siiski on m\u00f5ned reeglid.<\/p>\n<p>Oletagem, et soovite lisada ploki tekstiv\u00e4rvi jaoks v\u00e4rvis\u00e4tte \u2013 nii otsustate m\u00e4\u00e4ratleda atribuudi, mille nimi on tabav <code>textColor<\/code>. Seej\u00e4rel peate mustris &quot; <code>customYourOriginalAttribute<\/code>&quot; m\u00e4\u00e4rama teise atribuudi. Selles n\u00e4ites peab teise atribuudi nimi olema &quot; <code>customTextColor<\/code>&quot;. Pidage meeles kaamelCase (suurt\u00e4he) siin. Selle mustri j\u00e4rgimine <code>withColors<\/code>toimub automaatselt:<\/p>\n<ul>\n<li>Kui paleti v\u00e4rv on valitud, sisaldab atribuut &#8221; <code>textColor<\/code>&quot; paleti n\u00e4ppu.<\/li>\n<li>Kui valitud on kohandatud v\u00e4rv, <code>customTextColor<\/code>t\u00e4idetakse kuueteistk\u00fcmnendkoodiga &quot; &quot;.<\/li>\n<\/ul>\n<p>Need kaks t\u00f6\u00f6tavad koos. Kui valitakse kohandatud v\u00e4rv, on <code>textColor<\/code>see automaatselt <code>undefined<\/code>ja vastupidi.<\/p>\n<p>Ja l\u00f5puks, viimane asi, mida meeles pidada: <strong>te ei pea seda kasutama <code>setAttributes()<\/code>oma v\u00e4rviatribuutide v\u00e4rskendamiseks<\/strong>! Pakutavad rekvisiidid <code>withColors<\/code>sisaldavad funktsiooni, mis v\u00e4rskendab teie atribuute teie eest automaatselt. K\u00f5ik, mida pead tegema, on edastada see funktsioon <code>onChange<\/code>s\u00fcndmusele <code>PanelColorSettings<\/code>komponendile ja teie atribuute v\u00e4rskendatakse automaatselt.<\/p>\n<p>Ok, on aeg seda k\u00f5ike praktikas n\u00e4ha!<\/p>\n<h2>V\u00e4rvis\u00e4tete rakendamine kohandatud plokis<\/h2>\n<p>Asjade alustamiseks on mul \u00fcsna kasutu kohandatud plokk, mis ei tee muud, kui kuvab k\u00f5vakoodiga teksti. See muudab lihtsalt v\u00e4rviseadete lisamiseks kodeerimiseks vajaliku eraldamise lihtsaks. Mul on <a href=\"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-wordpressi-gutenbergi-ploki-loomine-opetusesari\/\" title=\"\u00f5petusesari, kuidas luua oma kohandatud plokke,\">\u00f5petusesari, kuidas luua oma kohandatud plokke,<\/a> kui soovite rohkem teada saada.<\/p>\n<p>M\u00e4rkus: kirjutan kogu koodi ES6\/ESNexti. See h\u00f5lmab noolefunktsioone, mis n\u00f5uavad Babeli\/veebipaketi seadistamisel erilist hoolt. Kui saate m\u00f5ne alloleva koodi puhul vigu, j\u00e4rgige minu <a href=\"https:\/\/wordpress.mediadoma.com\/et\/taeielik-juhend-gutenbergi-arenduskeskkonna-seadistamiseks\/\" title=\"juhendit Webpacki ja Babeli seadistamiseks ES6\/ESNexti jaoks\">juhendit Webpacki ja Babeli seadistamiseks ES6\/ESNexti jaoks<\/a> v\u00f5i kohandage koodi nii, et see ei kasutaks &quot;eksperimentaalseid s\u00fcntakse&quot;.<\/p>\n<p>See on minu p\u00f5hiline kohandatud plokk enne v\u00e4rviseadetega midagi tegemist:<\/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>See on \u00fcsna elementaarne. Pange t\u00e4hele, et <code>edit<\/code>funktsioon viitab lihtsalt eraldi komponendile, <code>BlockWithColorSettings<\/code>selle asemel, et seda tekstisiseselt kirjutada. <code>withColors<\/code>See muudab selle hilisema rakendamise lihtsamaks .<\/p>\n<p>Olgu, aeg rakendada v\u00e4rviseadeid meie plokis! N\u00e4iteks soovin seadistada teksti v\u00e4rvi.<\/p>\n<h3>Atribuutide lisamine<\/h3>\n<p>Nagu varem mainitud, peame iga v\u00e4rviseade jaoks m\u00e4\u00e4ratlema kaks atribuuti. Ja me peame olema nende nimede m\u00e4\u00e4ramisel eriti ettevaatlikud. Soovin lisada tekstiv\u00e4rvi atribuudi, seega panen atribuudile nimeks <code>textColor<\/code>. Mis t\u00e4hendab, et lisan ka atribuudi <code>customTextColor<\/code>. M\u00f5lemad peaksid olema t\u00fc\u00fcpi stringid.<\/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>Meie atribuudid on valmis ploki teksti v\u00e4rviseadete salvestamiseks. N\u00fc\u00fcd on aeg juurutada <code>withColors<\/code>ja <code>PanelColorSettings<\/code>.<\/p>\n<h3>Rakendamine<code>withColors<\/code><\/h3>\n<p>Nagu varem mainitud <code>withColors<\/code>, on see k\u00f5rgema j\u00e4rgu komponent, mille tagastamiseks peaks olema komponent. Ilmselt tahame, et see tagastaks meie redigeerimiskomponendi <code>BlockWithColorSettings<\/code>. Kuid parameetrina <code>withColors<\/code>pakume objekti.<\/p>\n<p>Talle edastatavas objektis <code>withColors<\/code>peame \u00fctlema, <code>withColors<\/code>millist atribuuti soovime v\u00e4rvi salvestamiseks kasutada ja millist elementi see v\u00e4rvib (meie puhul tekstiv\u00e4rv, mis t\u00e4hendab CSS-i reeglit &#8220;v\u00e4rv&#8221;). CSS-i reeglist teavitamine tagab, et tagastatud klassinimed on \u00f5iged. Kuna see on tekstiv\u00e4rv, tahame klassinimesid nagu &quot;has-color&quot;.<\/p>\n<p>Esmalt \u00fclaosas m\u00f5ni destruktureerimine. <code>withColors<\/code>asub <code>wp.blockEditor<\/code>pakendis.<\/p>\n<pre><code>const { withColors } = wp.blockEditor;<\/code><\/pre>\n<p>Muudame <code>edit<\/code>funktsiooni j\u00e4rgmiseks:<\/p>\n<pre><code>    ...\n    attributes: {\n        ...\n    },\n    edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n    save: (props) =&gt; { \n        ...<\/code><\/pre>\n<p>Selle koodiga <code>BlockWithColorSettings<\/code>saab meie komponent t\u00e4iendavaid rekvisiite:<\/p>\n<ul>\n<li><code>props.textColor<\/code>: on objekt, mis koosneb kogu teabest valitud v\u00e4rvi kohta. Kui valiti paleti v\u00e4rv, salvestab see atribuudid kuueteistk\u00fcmnendkoodi, paleti n\u00e4lkja, klassi nime ja muu jaoks. Kui valiti kohandatud v\u00e4rv, sisaldab objekt kuueteistk\u00fcmnendkoodi. Kuueteistk\u00fcmnendkoodi leiate alati kinnisvarast <code>color<\/code>. Ja klassi nimi (ainult siis, kui valiti paleti v\u00e4rv) m\u00e4\u00e4ratakse atribuudis <code>class<\/code>.<\/li>\n<li><code>props.setTextColor<\/code>: funktsioon, mis v\u00e4rskendab meie atribuute. Pakume seda v\u00e4rviseadete <code>onChange<\/code>s\u00fcndmuse jaoks, nagu n\u00e4eme hiljem. Funktsioon v\u00e4rskendab nii <code>textColor<\/code>ja <code>customTextColor<\/code>atribuute. Kuna j\u00e4rgisime nimetamisreegleid, v\u00e4rskendatakse seda automaatselt <code>customTextColor<\/code>, kuigi me pole seda atribuudi nime kunagi esitanud.<\/li>\n<\/ul>\n<p>Pange t\u00e4hele, et rekvisiidina pakutav funktsioon &quot;set&quot; j\u00e4rgib reeglit: &quot; <code>setYourAttributeName<\/code>&quot;. Kuna me andsime <code>textColor<\/code>, on funktsiooni nimi <code>setTextColor<\/code>. Kui me selle asemel nimetaksime oma atribuudile nime <code>awesomeColor<\/code>ja esitaksime selle <code>withColors<\/code>objektis, oleks set-funktsiooni nimi <code>setAwesomeColor()<\/code>.<\/p>\n<h3>Rakendamine<code>PanelColorSettings<\/code><\/h3>\n<p>J\u00e4rgmine samm on tegeliku inspektori jaotise rakendamine. Selleks lisame komponendi <code>PanelColorSettings<\/code>sisse <code>InspectorControls<\/code>. Kuna React n\u00f5uab, et k\u00f5ik oleks \u00fche juurs\u00f5lme sees, kasutame ka <code>Fragment<\/code>(alates <code>wp.elements<\/code>) k\u00f5ige selle sees oleva m\u00e4hkimiseks.<\/p>\n<p>K\u00f5igepealt faili \u00fclaosas m\u00f5ni struktureerimine:<\/p>\n<pre><code>const { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors } = wp.blockEditor;<\/code><\/pre>\n<p>Ja v\u00e4rskendame oma <code>BlockWithColorSettings<\/code>komponenti millekski selliseks:<\/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>Nagu n\u00e4ete real <code>#2<\/code>, h\u00e4vitame <code>withColors<\/code>, <code>textColor<\/code>ja <code>setTextColor<\/code>. Pidage meeles, et <code>props.textColor<\/code>see on objektilt saadud objekt <code>withColors<\/code>ja <code>props.attributes.textColor<\/code>atribuut. Meil pole aga vaja atribuudile viidata.<\/p>\n<p>Komponendi rekvisiidina <code>PanelColorSettings<\/code>saame anda jaotisele pealkirja (pealkiri Inspectori kokkupandavas kastis). Siin on oluline rekvisiit, <code>colorSettings<\/code>kus peame pakkuma hulga v\u00e4rviseadeid. Iga v\u00e4rviseade jaoks (meil on praegu ainult \u00fcks) peame esitama m\u00f5ned omadused. Vara <code>value<\/code>eeldab praegu valitud kuueteistk\u00fcmnendkoodi (kuigi valiti paleti v\u00e4rv). See on meile ette n\u00e4htud <code>textColor<\/code>kinnisvara sees olevas rekvisiidis <code>color<\/code>. Kinnisvara jaoks <code>onChange<\/code>pakume lihtsalt komplekti funktsiooni, mille pakub <code>withColors<\/code>, <code>setTextColor<\/code>. Ja l\u00f5puks peaksime andma a <code>label<\/code>, et kasutaja teaks, millist elementi see v\u00e4rv m\u00f5jutab. See kuvatakse otse v\u00e4rvi valimise ala kohal.<\/p>\n<p>Nii kuvatakse meie komponent Gutenbergi redaktoris praegu:<\/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=\"Kuidas lisada kohandatud Gutenbergi plokki v\u00e4rvis\u00e4tteid\"><\/a><\/p>\n<p>N\u00fc\u00fcd v\u00e4rskendab see edukalt meie atribuute v\u00e4rvide valimisel. N\u00e4ete, et see j\u00e4tab postituse salvestamisel teie v\u00e4rvivaliku meelde.<\/p>\n<p>V\u00e4rvide vahetamisel ei juhtu aga visuaalselt midagi. V\u00e4rvivalik salvestatakse atribuutidesse, kuid v\u00e4rvimuutust ei toimu redaktoris ega ka postituse eelvaate kuvamisel. Seda seet\u00f5ttu, et peame lisama koodi ploki klasside ja stiilide jaoks. Peame seda tegema nii <code>edit<\/code>funktsiooni (mis on redaktori jaoks) kui ka <code>save<\/code>funktsiooni jaoks (liides). See on j\u00e4rgmine samm.<\/p>\n<h3>Klassi ja tekstisiseste stiilide k\u00e4sitlemine<code>edit<\/code><\/h3>\n<p>Peame ehitama ploki s\u00f5lme klassi ja stiili atribuudid vastavalt valitud v\u00e4rviseadele. \u00d5nneks <code>withColors<\/code>saame selles osas automatiseerida. Pidage meeles, et <code>props.textColor<\/code>see on objekt, mis sisaldab kogu vajalikku teavet, sealhulgas klassi nime.<\/p>\n<p>V\u00f5iksime teha midagi sellist:<\/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>Real <code>#20<\/code>rakendame oma ploki juurs\u00f5lmele kriitilist klassi ja tekstisisest stiili. Enne seda koostame klassi ja tekstisisese stiili atribuudi, kontrollides <code>props.textColor<\/code>objekti.<\/p>\n<p>P\u00e4rast seda muudatust peaks teie kohandatud plokk n\u00fc\u00fcd redaktoris t\u00e4ielikult toimima. V\u00e4rvi vahetamisel muudab plokk teksti v\u00e4rvi. Vinge! Viimane samm on seda teha ka <code>save<\/code>funktsiooni jaoks, et saaksime need klassid ja stiilid ka kasutajaliidesesse.<\/p>\n<h3>Klassi ja tekstisiseste stiilide k\u00e4sitlemine<code>save<\/code><\/h3>\n<p>Klassi ja siseste stiilide loomise ja juurs\u00f5lmele rakendamise kontseptsioon on sama, <code>save<\/code>mis rakenduses <code>edit<\/code>. Kuid on oluline erinevus. Meil <code>save<\/code>ei ole pakutud rekvisiite <code>withColors<\/code>. Ja me ei saa funktsioonile lisada k\u00f5rgema j\u00e4rgu komponente <code>save<\/code>. Seega on <code>save<\/code>funktsioonis kogu teave, mis meil on, atribuudid.<\/p>\n<p>See on hea rusikareegel, et v\u00e4ltida &quot;has-&quot; klassinimede k\u00f5vakodeerimist. Mis siis, kui WordPress otsustab seda reeglit tulevikus muuta? \u00d5nneks on meil funktsioon, mis aitab meil luua meie jaoks \u00f5iged klassinimed: <code>getColorClassName()<\/code>.<\/p>\n<p>Enne kui unustame, h\u00e4vitame selle. See on ka <code>wp.blockEditor<\/code>pakendis.<\/p>\n<pre><code>const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\n<p>Funktsiooni kasutamine <code>getColorClassName()<\/code>n\u00f5uab kahte parameetrit. Esiteks string CSS-i reegli jaoks. Kuna meie v\u00e4rviseade on teksti v\u00e4rvi jaoks, pakume &quot; <code>color<\/code>&quot;. See \u00fctleb funktsioonile, et see peaks tagastama klassinime &quot;has-something-color&quot; ja mitte n\u00e4iteks &quot;on-something-background-color&quot;. Teise parameetrina peame esitama atribuudi v\u00e4\u00e4rtuse.<\/p>\n<p>Stiili atribuut luuakse lihtsalt, m\u00e4\u00e4rates atribuudi v\u00e4\u00e4rtuseks &quot;v\u00e4rv&quot; <code>customTextColor<\/code>, kui see on m\u00e4\u00e4ratletud.<\/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 muidugi \u00e4rge unustage klassi ja stiili oma ploki juurs\u00f5lmele rakendada; nagu rivis <code>#12<\/code>.<\/p>\n<p>PS: Kui testite selle koodi kirjutamise ajal oma plokki redaktoris, kuvatakse n\u00fc\u00fcd blokeeringu viga. See juhtub seet\u00f5ttu, et oleme n\u00fc\u00fcd funktsiooni v\u00e4ljundit muutnud <code>save<\/code>ja k\u00f5ik, mida olete varem salvestanud, on vastuolus. Peate ploki eemaldama ja uuesti lisama.<\/p>\n<p>P\u00e4rast seda muudatust peaks teie plokk n\u00fc\u00fcd \u00f5igesti rakendama valitud tekstiv\u00e4rvi ka esiprogrammis.<\/p>\n<p>Ja see ongi k\u00f5ik! Olete n\u00fc\u00fcd oma ploki v\u00e4rvis\u00e4tted edukalt rakendanud. Kui olete huvitatud mitme v\u00e4rviseadete (mitte ainult teksti v\u00e4rvi) lisamisest, lugege edasi.<\/p>\n<h2>M\u00e4rkus mitme v\u00e4rviseadete kohta<\/h2>\n<p>N\u00fc\u00fcdseks peaksite saama rakendada mitut v\u00e4rviseadet. V\u00f5imalik, et soovite oma ploki jaoks lisada s\u00e4tteid taustav\u00e4rvi, teksti v\u00e4rvi, \u00e4\u00e4rise v\u00e4rvi v\u00f5i muu jaoks. Selles jaotises annan kiire \u00fclevaate sellest, mida peame tegema mitme v\u00e4rvis\u00e4tte rakendamiseks.<\/p>\n<p>Oletame, et tahan oma plokile lisada ka taustav\u00e4rvi.<\/p>\n<p>K\u00f5igepealt pean m\u00e4\u00e4ratlema uue atribuudi loovalt nimega <code>backgroundColor<\/code>. Ma m\u00e4\u00e4ratlen ka teise atribuudi <code>customBackgroundColor<\/code>.<\/p>\n<p>Funktsioonis <code>edit<\/code>muudan pakutava objekti <code>withColors<\/code>selliseks:<\/p>\n<pre><code>withColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\n<p>See \u00fctleb <code>withColors<\/code>, et minu <code>textColor<\/code>atribuut on CSS-reegli jaoks &quot; <code>color<\/code>&quot; (teksti v\u00e4rvi jaoks) ja atribuut <code>backgroundColor<\/code>CSS-reegli jaoks &quot; <code>background-color<\/code>&quot;. <code>withColors<\/code>tuvastab ja v\u00e4rskendab automaatselt ka <code>customTextColor<\/code>atribuute <code>customBackgroundColor<\/code>ja.<\/p>\n<p><code>PanelColorSettings<\/code>Komponentis pakun massiivile propile veel \u00fche objekti <code>colorSettings<\/code>. Nagu nii:<\/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>Sellega peaksite saama kaks eraldi v\u00e4rviseadet v\u00e4rviseadete kasti Inspektor.<\/p>\n<p>Viimane samm on sobivate klassinimede ja stiilide loomine nii <code>edit<\/code>ja <code>save<\/code>. See on \u00fcsna lihtne samm, kuna see lihtsalt ehitab stringi v\u00f5i stiiliobjekti \u00f5igesti. Pidage meeles, et teie klassi nimi peab toetama mitut v\u00e4rviklassi (nt kui valitud on nii teksti- kui ka taustav\u00e4rv). Lihtsalt lisage iga klassi nime vahele t\u00fchik.<\/p>\n<p>PS: Kui teil on vaja oma ploki jaoks kasutada palju klassinimesid, v\u00f5ib <code>classnames<\/code>paketi installimine teile kasuks tulla. Peaaegu k\u00f5ik Gutenbergi komponendid kasutavad seda teeki klassinimede h\u00f5lpsamaks kombineerimiseks.<\/p>\n<h2>J\u00e4reldus ja t\u00e4ielik kood<\/h2>\n<p>N\u00fc\u00fcd peaksite olema \u00f5ppinud, kuidas kohandatud plokis v\u00e4rvis\u00e4tteid rakendada. Loodan, et sellest oli teile mingit kasu! Pidin selle funktsiooni oma projektile lisama ja ma t\u00f5esti ei leidnud mingit teavet ega head dokumentatsiooni. Nii et see on selle teema kohta \u00f5pitu konsolideerimise tulemus.<\/p>\n<p>Siin on teksti v\u00e4rvi seadistusega kohandatud ploki n\u00e4ide kokku l\u00f5plik kood:<\/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>Selles postituses k\u00e4sitletakse p\u00f5hjalikult, kuidas oma kohandatud WordPressi Gutenbergi plokki v\u00e4rvis\u00e4tteid \u00f5igel viisil lisada \u2013 t\u00e4pselt nagu WordPressi plokid seda teevad.<\/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":[937,937,1110,842,802,802,812,812,842,863,863],"tags":[1165],"class_list":["post-233940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-4","category-n-a","category-opetused","category-php-4","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233940","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=233940"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233940\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}