[add_filter](https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/)()<\/code>funktion tapaan meill\u00e4 on Javascript-toiminto [addFilter](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-hooks\/#api-usage)()<\/code>.<\/p>\nKirjoitan koodin Javascript ES6 -syntaksilla, joka vaatii k\u00e4\u00e4nt\u00e4j\u00e4n sen muuttamiseksi. Voit kirjoittaa ES5-syntaksilla, mutta suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n ES6\/ESNexti\u00e4. Minulla on viesti, joka selitt\u00e4\u00e4 muuntajan asettamisen ES6\/ESNextille<\/a>. Oletan my\u00f6s, ett\u00e4 sinulla on jonkin verran kokemusta React\/JSX:st\u00e4, mahdollisesti kokemusta omien mukautettujen Gutenberg-lohkojen luomisesta<\/a>.<\/p>\nMit\u00e4 voit suodattaa Gutenberg-lohkoilla<\/h2>\n
Saatavilla olevissa Gutenberg-koukuissa ja -suodattimissa ei ole paljon dokumentaatiota. Mutta tarkoitus on lis\u00e4t\u00e4 mukautettuja asetuksia ja jollakin tavalla soveltaa niit\u00e4 olemassa oleviin lohkoihin; t\u00e4m\u00e4n olen l\u00f6yt\u00e4nyt t\u00e4h\u00e4n menness\u00e4. Olen keskittynyt yksinkertaisten asetusten lis\u00e4\u00e4miseen \u2013 en toimintoihin, jotka edellytt\u00e4v\u00e4t rajuja komponenttien muutoksia tai monimutkaista k\u00e4ytt\u00e4ytymist\u00e4.<\/p>\n
Mukautettujen asetusten lis\u00e4\u00e4minen olemassa oleviin lohkoihin on kolme vaihetta:<\/p>\n
\n- Lis\u00e4\u00e4mme suodattimen olemassa olevan lohkon
[registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/#registerblocktype)<\/code>asetustaulukkoon. N\u00e4in voimme lis\u00e4t\u00e4 uusia attribuutteja attributes<\/code>taulukkoon, jolloin voimme tallentaa lis\u00e4tietoa lohkoon. Meid\u00e4n on tallennettava mukautettu asetus jonnekin.<\/li>\n- Kiinnit\u00e4 lohkon
edit<\/code>komponentti (komponentti, joka vastaa lohkon hahmontamisesta editorissa). T\u00e4ss\u00e4 koukussa voimme kiinnitt\u00e4\u00e4 Inspectoriin (sivupalkkiin) ja lis\u00e4t\u00e4 omia komponenttejamme. Voimme joko lis\u00e4t\u00e4 uuden osion\/paneelin tai kytkeyty\u00e4 "Advanced"-osioon, joka on aina l\u00e4sn\u00e4 kaikissa lohkoissa. Sitten on meid\u00e4n teht\u00e4v\u00e4mme render\u00f6id\u00e4 asetussy\u00f6tteet, kuten tekstisy\u00f6tteet, valintaruudut tai mit\u00e4 muuta.<\/li>\n- Suodata lohkon
save<\/code>rekvisiitta. Voimme s\u00e4\u00e4t\u00e4\u00e4 tallennuksen rekvisiitta, joka vastaa sek\u00e4 lohkon tallentamisesta ett\u00e4 sen render\u00f6imisest\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 (editorin ulkopuolella). Meid\u00e4n tapauksessamme haluamme lis\u00e4t\u00e4 luokan tai rivin tyylin.<\/li>\n<\/ul>\nVoimme kohdistaa tiettyihin lohkoihin tai kaikkiin. Meill\u00e4 on aina p\u00e4\u00e4sy siihen, mink\u00e4 tyyppisess\u00e4 lohkossa olemme.<\/p>\n
Toisin sanoen: Lis\u00e4\u00e4mme joitain mukautettuja asetuksia Inspectoriin ja tallennamme ne mukautetuiksi m\u00e4\u00e4ritteiksi, jotka olemme lis\u00e4nneet lohkoon. Voimme sitten vaikuttaa lohkon luokan nimeen tai rivin tyyliin (joissain tapauksissa) tallennettujen attribuuttien mukaan. Mukautettujen luokkanimien avulla voimme helposti lis\u00e4t\u00e4 mukautettuja CSS-sy\u00f6tteit\u00e4, jotka visuaalisesti antavat asetuksillemme tehosteen.<\/p>\n
Mit\u00e4 emme voi tehd\u00e4 (toistaiseksi?)<\/h2>\n
Valitettavasti joitakin asioita emme voi k\u00e4ytt\u00e4\u00e4 olemassa olevien lohkojen suodattimilla. Mit\u00e4 tulee yksinkertaisten mukautettujen asetusten lis\u00e4\u00e4miseen lohkoihin, n\u00e4m\u00e4 ovat yleisi\u00e4 asioita, joihin emme voi vaikuttaa.<\/p>\n
Ei p\u00e4\u00e4sy\u00e4 lohkon rivityyliin editorin sis\u00e4ll\u00e4<\/h3>\n
Tapauksissa, joissa asetukset vaikuttavat lohkon suunnitteluun, meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 rivin tyyli lohkon rivityssolmuun. Pelkk\u00e4 luokan nimi ei kelpaa. Jos esimerkiksi lis\u00e4\u00e4t mukautetun v\u00e4riasetuksen ja k\u00e4ytt\u00e4j\u00e4 valitsee mukautetun v\u00e4rin (colorpickerist\u00e4), et voi ratkaista t\u00e4t\u00e4 lis\u00e4\u00e4m\u00e4ll\u00e4 luokkaa \u2013 tarvitset sis\u00e4\u00e4nrakennetun tyylin.<\/p>\n
Valitettavasti n\u00e4ytt\u00e4\u00e4 silt\u00e4, \u200b\u200b\u200b\u200bett\u00e4 WordPressin oletuslohkot k\u00e4sittelev\u00e4t tekstin sis\u00e4ist\u00e4 tyyli\u00e4 editorissa t\u00e4ysin itsen\u00e4isesti ilman suodatus- tai "kiinnitysvaihtoehtoa". N\u00e4yt\u00e4n tavan kiert\u00e4\u00e4 t\u00e4m\u00e4 alla olevassa viimeisess\u00e4 esimerkiss\u00e4, mutta se ei ole ihanteellinen kaikissa tapauksissa.<\/p>\n
Miksi v\u00e4litt\u00e4\u00e4 siit\u00e4, ett\u00e4 lohko n\u00e4ytt\u00e4\u00e4 erilaiselta editorissa verrattuna k\u00e4ytt\u00f6liittym\u00e4\u00e4n, saatat kysy\u00e4? Gutenbergin koko idea on toteuttaa visuaalinen tapa muokata sis\u00e4lt\u00f6\u00e4, jossa se, mit\u00e4 n\u00e4emme, on todella sit\u00e4, mit\u00e4 saamme. Haluamme saavuttaa saman visuaalisen ilmeen sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
Jotkut lohkot eiv\u00e4t sis\u00e4ll\u00e4 luokan nime\u00e4 editorissa<\/h3>\n
Kuten edell\u00e4 mainittiin, voimme suodattaa lohkon rivitysluokan nimen, koska t\u00e4m\u00e4 on rekvisiitta, joka v\u00e4litet\u00e4\u00e4n kaikille Gutenberg-lohkoille. Mutta valitettavasti on joitain lohkoja, jotka eiv\u00e4t k\u00e4yt\u00e4 lohkon luokkaa ollenkaan edit<\/code>. Yksi esimerkki on kansilohko. Olen pelannut paljon k\u00e4ytt\u00e4m\u00e4ll\u00e4 Cover-lohkoja etusivujen "osioina" ja t\u00f6rm\u00e4nnyt jatkuvasti ongelmiin, koska Cover-lohko rakentaa oman luokkansa sis\u00e4\u00e4n edit<\/code>. Se ohittaa kokonaan mukaan lukien lohkon "globaalin" luokan (johon meill\u00e4 on p\u00e4\u00e4sy suodattimien kautta).<\/p>\nMutta ainakin voimme olla varmoja siit\u00e4, ett\u00e4 suodatettuja luokkien nimi\u00e4 k\u00e4ytet\u00e4\u00e4n aina save<\/code>(frontend). T\u00e4m\u00e4 tapahtuu automaattisesti kunkin lohkon koodin ulkopuolella.<\/p>\nJos olen v\u00e4\u00e4r\u00e4ss\u00e4 jonkin edell\u00e4 mainitun suhteen, ilmoita minulle alla olevissa kommenteissa! Opin jatkuvasti Gutenbergi\u00e4, ja samalla my\u00f6s Gutenberg kehittyy. Toivon, ett\u00e4 jossain vaiheessa yll\u00e4 oleva on mahdollista jossain vaiheessa tai ett\u00e4 se on mahdollista, mutta minulta puuttuu vain olennainen tieto!<\/p>\n
Kun se on poissa tielt\u00e4, aletaan tutkia jotain koodia.<\/p>\n
Esimerkki 1: Lis\u00e4\u00e4 vaihtokentt\u00e4 piilottaaksesi kansilohkon mobiililaitteessa<\/h2>\n
Oletetaan, ett\u00e4 kehit\u00e4mme teemaa, jossa kansilohkoja k\u00e4ytet\u00e4\u00e4n etusivun "osioissa". Ja haluamme tarjota k\u00e4ytt\u00e4j\u00e4lle mahdollisuuden piilottaa tietty osio mobiilista. T\u00e4m\u00e4n ratkaisemiseksi voimme lis\u00e4t\u00e4 vaihtokent\u00e4n "Lis\u00e4asetukset"-osioon Cover block’s Inspectorissa. Jos kentt\u00e4 on p\u00e4\u00e4ll\u00e4, Cover-lohko saa ylim\u00e4\u00e4r\u00e4isen mukautetun luokan, johon voimme kohdistaa CSS- ja mediakyselyill\u00e4.<\/p>\n
Muuten: T\u00e4m\u00e4 on tapaus, jossa ongelma Cover-lohkosta, joka ei k\u00e4yt\u00e4 mukautettuja luokkanimi\u00e4mme editorissa, on itse asiassa etu! Kuvittele, jos olisi; silloin k\u00e4ytt\u00e4j\u00e4n olisi mahdotonta muokata lohkoa editorissa, jos h\u00e4nell\u00e4 on pieni n\u00e4ytt\u00f6!<\/p>\n
Kuten aiemmin mainittiin, meid\u00e4n on koodattava kolme vaihetta. Meid\u00e4n on my\u00f6s lis\u00e4tt\u00e4v\u00e4 jonkin verran PHP:t\u00e4 jonoon Javascript-tiedostomme editoriin. Tehd\u00e4\u00e4n se ensin.<\/p>\n
Lis\u00e4\u00e4mme skriptimme editoriin<\/h3>\n
Yhdist\u00e4mme toimintaan funktion [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Toimintomme sis\u00e4ll\u00e4 laitamme skriptin jonoon, aivan kuten tavallisesti teemme wp_enqueue_scripts<\/code>hookissa.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\nMuista s\u00e4\u00e4t\u00e4\u00e4 polku siihen, miss\u00e4 skripti on! Huomautus: Jos kirjoitat ES6:ssa webpackilla, joka k\u00e4\u00e4nt\u00e4\u00e4 Javascripti\u00e4, muista asettaa skriptin koontipolku, ei l\u00e4hdett\u00e4.<\/p>\n
Haluan lis\u00e4t\u00e4 wp-edit-post<\/code>komentosarjan riippuvuudeksi merkin, jotta se latautuu riitt\u00e4v\u00e4n my\u00f6h\u00e4\u00e4n.<\/p>\nSiin\u00e4 kaikki PHP, joka meid\u00e4n on teht\u00e4v\u00e4. Loput on kirjoitettu Javascript-tiedostoomme.<\/p>\n
Lis\u00e4\u00e4 mukautettu attribuutti<\/h3>\n
Ensimm\u00e4inen suodatin, jota k\u00e4yt\u00e4mme, on blocks.registerBlockType<\/code>suodattimen registerBlockType<\/code>asetusobjekti.<\/p>\nMutta ensin v\u00e4h\u00e4n suodattimien lis\u00e4\u00e4misest\u00e4 Javascriptiin. Koska en ole l\u00f6yt\u00e4nyt t\u00e4lle mit\u00e4\u00e4n hyv\u00e4\u00e4 dokumentaatiota, selit\u00e4n sit\u00e4 hieman t\u00e4ss\u00e4. Funktio addFilter<\/code>on wp.hooks<\/code>nimiavaruudessa ja hyv\u00e4ksyy nelj\u00e4 argumenttia.<\/p>\naddFilter('hookName', 'namespace', 'functionName', 'priority');<\/code><\/p>\nEnsimm\u00e4inen parametri ’hookName’ on sen suodattimen nimi, johon haluamme liitt\u00e4\u00e4. T\u00e4m\u00e4 vastaa ensimm\u00e4ist\u00e4 parametria PHP:t\u00e4 k\u00e4ytett\u00e4ess\u00e4 add_filter()<\/code>. Toinen parametri, ’nimiavaruus’, on mukautettu nimiavaruus koodillesi. T\u00e4m\u00e4 on vain nimien t\u00f6rm\u00e4yksen v\u00e4ltt\u00e4miseksi. Voit asettaa t\u00e4\u00e4ll\u00e4 melkein mit\u00e4 tahansa, \u00e4l\u00e4 vain k\u00e4yt\u00e4 WordPressin nimiavaruutta (’wp’). K\u00e4yt\u00e4 nimesi tai projektin nimen lyhytt\u00e4 muotoa. Kolmas parametri, ’functionName’, on koukussa oleva funktio \u2013 joka on sama kuin PHP: add_filter()<\/code>n toinen argumentti. Ja lopuksi nelj\u00e4s parametri, ’priority’, on valinnainen. T\u00e4m\u00e4 on j\u00e4lleen sama kuin PHP: add_filter()<\/code>n kolmas argumentti.<\/p>\nSuodattimien prosessi Javascriptiss\u00e4 on sama kuin PHP:ss\u00e4. M\u00e4\u00e4rittelemme funktion, jonka on palautettava suodatettu muuttuja. Joskus muuttuja on merkkijono, objekti tai komponentti. Muokkaamme muuttujaa funktion sis\u00e4ll\u00e4 parhaaksi katsomallamme tavalla.<\/p>\n
Meid\u00e4n tapauksessamme haluamme lis\u00e4t\u00e4 uuden attribuutin lohkon attribute<\/code>objektiin. Kutsumme uutta attribuuttia hideOnMobile<\/code>ja asetamme sen tyypiksi boolean<\/code>. T\u00e4m\u00e4 tehd\u00e4\u00e4n n\u00e4in:<\/p>\nfunction addCoverAttribute(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/cover') {\n settings.attributes = Object.assign(settings.attributes, {\n hideOnMobile: {\n type: 'boolean',\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/cover-custom-attribute',\n addCoverAttribute\n);<\/code><\/pre>\nKohdistamme rivill\u00e4 #3<\/code>vain tyyppisi\u00e4 lohkoja core\/cover<\/code>. Toinen blocks.registerBlockType<\/code>suodatusargumentti on sopivasti lohkon nimi. Sitten lis\u00e4\u00e4mme objektiin uuden settings.attributes<\/code>objektikohteen. Lopuksi varmistamme, ett\u00e4 palautamme suodatetun muuttujan, settings<\/code>.<\/p>\nT\u00e4ss\u00e4 vaiheessa Gutenbergiss\u00e4 visuaalisesti mik\u00e4\u00e4n ei muutu. Mutta kaikilla Cover-lohkoilla on nyt lis\u00e4attribuutti, jota voimme k\u00e4ytt\u00e4\u00e4 asetuksemme tallentamiseen.<\/p>\n
Lis\u00e4\u00e4 asetus Inspectoriin (Lis\u00e4asetukset-paneeli)<\/h3>\n
Toista suodatinta kutsutaan editor.BlockEdit<\/code>ja se suodattaa lohkon edit<\/code>komponentin. T\u00e4m\u00e4 suodatin vastaanottaa alkuper\u00e4isen lohkon BlockEdit<\/code>komponentin ja palauttaa uuden paketoidun komponentin. Meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 wp.compose.createHigherOrderComponent<\/code>k\u00e4\u00e4rityn osan palauttamiseksi.<\/p>\nKomponenttimme sis\u00e4ll\u00e4 varmistamme, ett\u00e4 render\u00f6imme k\u00e4\u00e4ritty komponentti BlockEdit<\/code>siit\u00e4 huolimatta. Mutta jos lohko on tyyppi\u00e4 Cover, kiinnit\u00e4mme my\u00f6s komponenttiin InspectorAdvancedControls<\/code>(joka on Inspectorin "Advanced"-paneeli) ja lis\u00e4\u00e4mme ToggleControl<\/code>. Kirjoitamme ToggleControl<\/code>osoittamaan aiemmin lis\u00e4\u00e4m\u00e4mme mukautetun attribuutin arvon ja p\u00e4ivitt\u00e4m\u00e4\u00e4n sit\u00e4 hideOnMobile<\/code>.<\/p>\nconst coverAdvancedControls = wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n const { Fragment } = wp.element;\n const { ToggleControl } = wp.components;\n const { InspectorAdvancedControls } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n return (<Fragment>\n <BlockEdit {...props} \/>\n {isSelected && (props.name == 'core\/cover') && \n <InspectorAdvancedControls>\n <ToggleControl\n label={wp.i18n.__('Hide on mobile', 'awp')}\n checked={!!attributes.hideOnMobile}\n onChange={(newval) => setAttributes({ hideOnMobile: !attributes.hideOnMobile })}\n \/>\n <\/InspectorAdvancedControls>\n }\n <\/Fragment>\n );\n };\n}, 'coverAdvancedControls');\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/cover-advanced-control',\n coverAdvancedControls\n);<\/code><\/pre>\nMuista aina palauttaa alkuper\u00e4inen BlockEdit<\/code>, mink\u00e4 teemme linjalla #9<\/code>. Rivill\u00e4 #10 tarkistamme, onko lohkon tyyppi Cover, ja render\u00f6imme InspectorAdvancedControls<\/code>komponentin. Lis\u00e4\u00e4mme t\u00e4h\u00e4n sis\u00e4\u00e4n ToggleControl<\/code>, joka on sy\u00f6tt\u00f6s\u00e4\u00e4din, joka n\u00e4kyy vaihtajana tosi tai ep\u00e4tosi v\u00e4lill\u00e4. Asetamme tunnisteen ja yhdist\u00e4mme sen arvon hideOnMobile<\/code>m\u00e4\u00e4ritteeseen. Jos olet lis\u00e4nnyt asetuksia Inspectoriin aiemmin, t\u00e4m\u00e4n pit\u00e4isi olla sinulle melko suoraviivaista.<\/p>\nYll\u00e4 olevalla koodilla meid\u00e4n pit\u00e4isi nyt saada t\u00e4m\u00e4 "Lis\u00e4asetukset"-paneeliin Inspector on Cover blocksissa:<\/p>\n
![\"Lis\u00e4\u00e4](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70271f5a.png\")
<\/a><\/p>\nSy\u00f6te p\u00e4ivitt\u00e4\u00e4 nyt mukautetun m\u00e4\u00e4ritteen hideOnMobile<\/code>. Viimeinen vaihe on tehd\u00e4 jotain t\u00e4m\u00e4n attribuutin arvosta riippuen. T\u00e4ll\u00e4 hetkell\u00e4 m\u00e4\u00e4rite on tallennettu, mutta se ei vaikuta varsinaisesti mihink\u00e4\u00e4n.<\/p>\nLis\u00e4\u00e4 mukautettu luokka<\/h3>\n
Viimeinen vaihe on mukautetun luokan lis\u00e4\u00e4minen lohkon luokkaan. Teemme t\u00e4m\u00e4n suodattimen kanssa blocks.getSaveContent.extraProps<\/code>. T\u00e4m\u00e4 suodatin vaikuttaa lohkon save<\/code>komponentin tukiin. Yksi niist\u00e4 on prop className<\/code>, jota k\u00e4ytet\u00e4\u00e4n aina k\u00e4ytt\u00f6liittym\u00e4ss\u00e4. Lis\u00e4\u00e4mme mukautetun luokkamme sen j\u00e4lkeen, jos m\u00e4\u00e4rite oli true<\/code>, ja palautamme sen sitten. Olen p\u00e4\u00e4tt\u00e4nyt lis\u00e4t\u00e4 luokan " hide-on-mobile<\/code>", mutta voit kutsua sit\u00e4 miksi haluat.<\/p>\nfunction coverApplyExtraClass(extraProps, blockType, attributes) {\n const { hideOnMobile } = attributes;\n\u00a0\n if (typeof hideOnMobile !== 'undefined' && hideOnMobile) {\n extraProps.className = extraProps.className + ' hide-on-mobile';\n }\n return extraProps;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.getSaveContent.extraProps',\n 'awp\/cover-apply-class',\n coverApplyExtraClass\n);<\/code><\/pre>\nT\u00e4m\u00e4 koodi on melko itsest\u00e4\u00e4n selv\u00e4. Rivill\u00e4 #4<\/code>tarkistamme, onko attribuutti hideOnMobile<\/code>olemassa ja onko se true<\/code>. Jos n\u00e4in on, lis\u00e4\u00e4mme className<\/code>merkkijonoon mukautetun luokan.<\/p>\nKaikilla yll\u00e4 olevilla kolmella suodattimella meid\u00e4n pit\u00e4isi nyt saada mukautettu luokka "piilota matkapuhelimessa" Cover-lohkoon aina, kun asetus otetaan k\u00e4ytt\u00f6\u00f6n.<\/p>\n
![\"Lis\u00e4\u00e4](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70343817.png\")
<\/a><\/p>\nJ\u00e4ljelle j\u00e4\u00e4 vain CSS:n lis\u00e4\u00e4minen teemasi k\u00e4ytt\u00f6liittym\u00e4n tyylitaulukkoon. Jotain t\u00e4llaista;<\/p>\n
.wp-block-cover.hide-on-mobile { display: none; }\n@media (min-width: 480px) {\n .wp-block-cover.hide-on-mobile { display: block; }\n}<\/code><\/pre>\nEsimerkki 2: Lis\u00e4\u00e4 Inspector-paneeli mukautetulla taustav\u00e4riasetuksella v\u00e4likappaleelle<\/h2>\n
Toisessa k\u00e4ytt\u00f6tapauksessa haluamme lis\u00e4t\u00e4 mukautettuja v\u00e4riasetuksia Spacer-lohkoon. Spacer-lohkolla ei ole oletuksena muita asetuksia kuin sen korkeus. Oletetaan, ett\u00e4 haluamme lis\u00e4t\u00e4 taustav\u00e4rin, joka v\u00e4ritt\u00e4\u00e4 v\u00e4likappaleen t\u00e4yden korkeuden. N\u00e4in k\u00e4ytt\u00e4j\u00e4 voi lis\u00e4t\u00e4 tyhji\u00e4, v\u00e4rillisi\u00e4 "raitoja" sis\u00e4lt\u00f6\u00f6ns\u00e4. T\u00e4ss\u00e4 tapauksessa haluamme lis\u00e4t\u00e4 v\u00e4riasetukset omaan erilliseen paneeliinsa Inspectorissa tavallisen v\u00e4riasetusten odotetun k\u00e4ytt\u00e4ytymisen mukaisesti.<\/p>\n
Huomautus: V\u00e4rien k\u00e4sittely on hieman monimutkaisempaa, koska meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 (toista) korkeamman asteen komponenttia withColors<\/code>. Koska meid\u00e4n on jo otettava k\u00e4ytt\u00f6\u00f6n korkeamman asteen komponentti, editor.BlockEdit<\/code>meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 compose<\/code>useita komponentteja. Lis\u00e4ksi jokaiselle v\u00e4riasetukselle on lis\u00e4tt\u00e4v\u00e4 kaksi attribuuttia. Yksi sis\u00e4lt\u00e4\u00e4 v\u00e4ripaletin slug ja toinen sis\u00e4lt\u00e4\u00e4 hex v\u00e4rikoodi – vain jos k\u00e4ytt\u00e4j\u00e4 on valinnut mukautetun v\u00e4rin (k\u00e4ytti v\u00e4rivalitsin). T\u00e4m\u00e4 kaikki on yleist\u00e4, kun ty\u00f6skentelet withColors<\/code>. Minulla on <a href="https:\/\/wordpress.mediadoma.com\/fi\/kuinka-lisaetae-vaeriasetuksia-mukautettuun-gutenberg-lohkoon\/" title="viesti, joka selitt\u00e4\u00e4 v\u00e4riasetusten lis\u00e4\u00e4misen ja withColors<\/code>yksityiskohtaisesti,” >viesti, joka selitt\u00e4\u00e4 v\u00e4riasetusten lis\u00e4\u00e4misen ja withColors<\/code>yksityiskohtaisesti,<\/a> jos olet h\u00e4mmentynyt.<\/p>\nToiseksi t\u00f6rm\u00e4\u00e4mme t\u00e4ss\u00e4 tapauksessa edell\u00e4 selostettuun asiaan; jossa emme voi lis\u00e4t\u00e4 sopivaa sis\u00e4ist\u00e4 tyyli\u00e4 editoriin. Ratkaisu, jonka olen valinnut t\u00e4ss\u00e4 tapauksessa, on k\u00e4\u00e4ri\u00e4 v\u00e4likappale div<\/code>editorissa a:n sis\u00e4\u00e4n ja soveltaa rivitykseen oikeita luokkia ja rivityyli\u00e4 div<\/code>. T\u00e4m\u00e4 tekee valitusta v\u00e4rist\u00e4 n\u00e4kyv\u00e4n editorissa, kun lohkoa ei ole valittu. Lohkon valinnan j\u00e4lkeen WordPress lis\u00e4\u00e4 kuitenkin oman mukautetun vaaleanharmaan taustansa lohkoon peitt\u00e4en mukautetun taustav\u00e4rimme. Yksi CSS editorille korjaa t\u00e4m\u00e4n. Selit\u00e4n lis\u00e4\u00e4 lopussa.<\/p>\nVaiheet ovat samat kuin yll\u00e4 olevassa esimerkiss\u00e4. Asetamme skriptimme ensin editoriin PHP:ll\u00e4. Sitten Javascriptiss\u00e4 attributes<\/code>suodatamme objektin, Spacerin edit<\/code>komponentin ja lopuksi Spacerin save<\/code>komponentin.<\/p>\nLis\u00e4\u00e4mme skriptimme editoriin<\/h3>\n
Yhdist\u00e4mme toimintaan funktion [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Toimintomme sis\u00e4ll\u00e4 laitamme skriptin jonoon, aivan kuten tavallisesti teemme wp_enqueue_scripts<\/code>hookissa.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\nMuista s\u00e4\u00e4t\u00e4\u00e4 polku skriptiisi. Haluan lis\u00e4t\u00e4 wp-edit-post<\/code>komentosarjan riippuvuudeksi merkin, jotta se latautuu riitt\u00e4v\u00e4n my\u00f6h\u00e4\u00e4n.<\/p>\nSiin\u00e4 kaikki PHP, joka meid\u00e4n on teht\u00e4v\u00e4. Loput on kirjoitettu Javascript-tiedostoomme.<\/p>\n
Lis\u00e4\u00e4 mukautettuja m\u00e4\u00e4ritteit\u00e4<\/h3>\n
Kuten yll\u00e4 olevassa esimerkiss\u00e4, lis\u00e4\u00e4mme suodattimen blocks.registerBlockType<\/code>, jotta voimme lis\u00e4t\u00e4 objektikohteita lohkon attributes<\/code>objektiin.<\/p>\nKun ty\u00f6skentelemme kanssa, withColors<\/code>meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 kaksi attribuuttia jokaiselle v\u00e4rille. Taustav\u00e4rim\u00e4\u00e4ritteemme nimi on backgroundColor<\/code>, mik\u00e4 tarkoittaa, ett\u00e4 toinen m\u00e4\u00e4rite on nimett\u00e4v\u00e4 customBackgroundColor<\/code>. T\u00e4m\u00e4 kaikki on selitetty viestiss\u00e4ni v\u00e4riasetusten k\u00e4sittelyst\u00e4 Gutenbergiss\u00e4<\/a>. Molempien tulee olla merkkijonotyyppi\u00e4, ja niit\u00e4 tulee soveltaa vain v\u00e4likappaleen tyyppisiin lohkoihin.<\/p>\nfunction addSpacerAttributes(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/spacer') {\n settings.attributes = Object.assign(settings.attributes, {\n backgroundColor: {\n type: 'string',\n },\n customBackgroundColor: {\n type: 'string'\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/spacer-background-attribute',\n addSpacerAttributes\n);<\/code><\/pre>\nLis\u00e4\u00e4 ColorSettings-paneeli Inspectoriin<\/h3>\n
Toinen vaihe on v\u00e4riasetuspaneelin lis\u00e4\u00e4minen Inspector for the Spacer -lohkoon suodattamalla editor.BlockEdit<\/code>.<\/p>\nconst spacerInspectorControls = wp.compose.compose(\n wp.blockEditor.withColors({backgroundColor: 'background-color'}),\n\u00a0\n wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n\u00a0\n if (props.name !== 'core\/spacer') {\n return(<BlockEdit {...props} \/>);\n }\n\u00a0\n const { Fragment } = wp.element;\n const { InspectorControls, PanelColorSettings } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n const { backgroundColor, setBackgroundColor } = props;\n\u00a0\n let newClassName = (attributes.className != undefined)? attributes.className: '';\n let newStyles = {...props.style};\n if (backgroundColor != undefined) {\n if (backgroundColor.class == undefined) {\n newStyles.backgroundColor = backgroundColor.color;\n } else {\n newClassName += ' ' + backgroundColor.class;\n }\n }\n const newProps = {\n ...props,\n attributes: {\n ...attributes,\n className: newClassName\n },\n style: newStyles\n }\n\u00a0\n return (<Fragment>\n <div style={newStyles} className={newClassName}>\n <BlockEdit {...newProps} \/>\n {isSelected && (props.name == 'core\/spacer') && \n <InspectorControls>\n <PanelColorSettings \n title={wp.i18n.__('Color Settings', 'awp')}\n colorSettings={[\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: wp.i18n.__('Background color', 'awp')\n }\n ]}\n \/>\n <\/InspectorControls>\n }\n <\/div>\n <\/Fragment>\n );\n };\n}, 'spacerInspectorControls'));\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/spacer-inspector-control',\n spacerInspectorControls\n);<\/code><\/pre>\nMeid\u00e4n on k\u00e4ytett\u00e4v\u00e4 compose<\/code>yhdist\u00e4m\u00e4\u00e4n t\u00e4st\u00e4 suodattimesta palautettu korkeamman asteen komponentti ja withColors<\/code>. Toisin sanoen yksinkertaisesti k\u00e4\u00e4rimme palautetun komponentin withColors<\/code>. Parametrina withColors<\/code>annamme attribuuttimme backgroundColor<\/code>.<\/p>\nK\u00e4\u00e4rityn komponentin sis\u00e4ll\u00e4 varmistamme, ett\u00e4 palaamme aina BlockEdit<\/code>(linja #9<\/code>ja #39<\/code>v\u00e4likappaleille). Spacer-tyyppisille lohkoille kiinnit\u00e4mme my\u00f6s koukun InspectorControls<\/code>lis\u00e4t\u00e4ksemme PanelColorSettings<\/code>v\u00e4rivalintaamme. T\u00e4m\u00e4 on vakiomenettely v\u00e4riasetusten lis\u00e4\u00e4miseksi.<\/p>\nLinjalla #17 - 34<\/code>luomme manuaalisesti tarvittavan luokan ja\/tai rivin tyylin. Sitten riville #38<\/code>lis\u00e4\u00e4mme rivitysdiv BlockEdit<\/code>:n n\u00e4iden luokkien ja sis\u00e4isten tyylien kanssa.<\/p>\nTuloksena on uusi v\u00e4riasetuspaneeli Inspector for Spacer blocksissa, t\u00e4ysin toimiva.<\/p>\n
![\"Lis\u00e4\u00e4](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7041a66b.png\")
<\/a><\/p>\n![\"Lis\u00e4\u00e4](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7052e0c9.gif\")
<\/a><\/p>\n