{"id":233733,"date":"2023-02-21T13:07:00","date_gmt":"2023-02-21T10:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233733"},"modified":"2022-11-11T12:06:36","modified_gmt":"2022-11-11T09:06:36","slug":"kuinka-lisaetae-mukautettuja-lohkotyylejae-wordpress-gutenberg-lohkoihin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-lisaetae-mukautettuja-lohkotyylejae-wordpress-gutenberg-lohkoihin\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 mukautettuja lohkotyylej\u00e4 WordPress Gutenberg -lohkoihin"},"content":{"rendered":"\n

Hieman v\u00e4hemm\u00e4n tunnettu ominaisuus Gutenbergiss\u00e4 on mahdollisuus m\u00e4\u00e4ritt\u00e4\u00e4 erilaisia \u200b\u200btyylej\u00e4 lohkoille. Voit rekister\u00f6id\u00e4 niin monta eri tyyli\u00e4 mink\u00e4 tahansa tyyppiselle lohkolle antaaksesi samalle lohkolle erilaisia \u200b\u200bkuvioita. Lohkojen mahdolliset tyylit n\u00e4kyv\u00e4t osiona editorin oikealla puolella. Jokainen tyyli saa oman esikatselunsa. Jos k\u00e4sittelet tyylej\u00e4 oikein, tyylien v\u00e4lill\u00e4 vaihtamisen pit\u00e4isi p\u00e4ivitt\u00e4\u00e4 ulkoasu v\u00e4litt\u00f6m\u00e4sti editorin sis\u00e4ll\u00e4 sek\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n

WordPressin t\u00e4m\u00e4n ominaisuuden dokumentaatio<\/a> ei ole t\u00e4ll\u00e4 hetkell\u00e4 niin kattava ja informatiivinen kuin se voisi olla. Joten t\u00e4ss\u00e4 viestiss\u00e4 tarkastelemme yksityiskohtaisesti, kuinka voit lis\u00e4t\u00e4 mukautettuja lohkotyylej\u00e4si ja kuinka sinun tulisi k\u00e4sitell\u00e4 niiden tyyli\u00e4.<\/p>\n

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

T\u00e4m\u00e4 ominaisuus toimii siten, ett\u00e4 aina kun Gutenberg havaitsee, ett\u00e4 lohkotyyppi on rekister\u00f6ity v\u00e4hint\u00e4\u00e4n yhdeksi tyyliksi, "Tyylit"-ruutu tulee automaattisesti n\u00e4kyviin editorin oikealle puolelle, jonka sis\u00e4ll\u00e4 editori voi valita oletustyylin tai mink\u00e4 tahansa muun tyylin v\u00e4lill\u00e4. lohkotyyli, joka on lis\u00e4tty.<\/p>\n

Aiemmissa versioissa (ainakin ennen WordPress 5.3:a) mukautetun tyylin rekister\u00f6inti edellytti my\u00f6s oletustyylin ("ei tyyli\u00e4") rekister\u00f6inti\u00e4. Onneksi t\u00e4m\u00e4 korjattiin WordPressin uusimmissa versioissa, joten nyt sinun tarvitsee vain rekister\u00f6id\u00e4 mukautetut tyylisi ja WordPress lis\u00e4\u00e4 oletustyylin automaattisesti.<\/p>\n

Voit rekister\u00f6id\u00e4 mukautettuja lohkotyylej\u00e4 kahdella tavalla; PHP:ll\u00e4 tai Javascriptill\u00e4. Tarkastellaan molempia. Mutta ensin muutama a-ha-lause tyylien k\u00e4sittelyst\u00e4.<\/p>\n

Huomautus Gutenbergin tyylien jonottamisesta<\/h2>\n

Saattaa olla ep\u00e4selvyytt\u00e4 siit\u00e4, miten ja minne tyylit lis\u00e4t\u00e4\u00e4n (CSS-tiedostot); vain editoriin, k\u00e4ytt\u00f6liittym\u00e4\u00e4n tai yksi tyylisivu molemmille. Yksi Gutenberg-editorin p\u00e4\u00e4tavoitteista on varmistaa, ett\u00e4 voit esikatsella oikein, milt\u00e4 viestisi sis\u00e4lt\u00f6 n\u00e4ytt\u00e4\u00e4 editorissa. Siksi on suositeltavaa varmistaa, ett\u00e4 mukautettuja tyylej\u00e4si k\u00e4ytet\u00e4\u00e4n editorissa sek\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n

Se, miten k\u00e4sittelet t\u00e4t\u00e4, riippuu todella projektistasi ja olemassa olevista tyylitaulukon asetuksista. Jos olet kehitt\u00e4m\u00e4ss\u00e4 kokonaista teemaa, sis\u00e4llyt\u00e4t todenn\u00e4k\u00f6isesti jo lohkotyylin k\u00e4ytt\u00f6liittym\u00e4n tyylitaulukkoon. Sinun kannattaa harkita erillisen tyylitaulukon lis\u00e4\u00e4mist\u00e4, joka tulee jonoon vain editoria varten. Mutta t\u00e4t\u00e4 voi olla vaikea yll\u00e4pit\u00e4\u00e4, jos lis\u00e4\u00e4t paljon erilaisia \u200b\u200btyylej\u00e4. Sinun on p\u00e4ivitett\u00e4v\u00e4 tyylisi kahdessa paikassa ja varmistettava, ett\u00e4 niiden tulokset ovat samat. Ratkaisu t\u00e4h\u00e4n olisi s\u00e4ilytt\u00e4\u00e4 yksi tyylitaulukko, jonka asetat jonoon sek\u00e4 editorille ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4lle. Mutta silloin k\u00e4ytt\u00f6liittym\u00e4si pit\u00e4isi ladata v\u00e4hint\u00e4\u00e4n kaksi erillist\u00e4 tyylitaulukkoa, mik\u00e4 ei ehk\u00e4 ole ihanteellinen.<\/p>\n

Toinen ratkaisu on esim. SCSS:n tai LESS:n k\u00e4ytt\u00f6 ja asetukset @imports<\/code>siten, ett\u00e4 lohkotyylit tarvitsee kirjoittaa vain kerran, ja sit\u00e4 sovelletaan sek\u00e4 editoriin ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4\u00e4n. Kuten alla n\u00e4et, kun k\u00e4yt\u00e4t PHP:t\u00e4 mukautettujen lohkotyylien rekister\u00f6intiin, sinulla on viel\u00e4 toinen vaihtoehto; lis\u00e4t\u00e4ksesi upotettuja tyylej\u00e4. N\u00e4it\u00e4 tyylej\u00e4 k\u00e4ytet\u00e4\u00e4n sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4. K\u00e4ytt\u00f6liittym\u00e4ss\u00e4 WordPress lis\u00e4\u00e4 ne mukautetuksi upotettuna <style type=\"text\/css\">...<\/style><\/code>otsikon sis\u00e4\u00e4n.<\/p>\n

Kuinka p\u00e4\u00e4t\u00e4tkin ratkaista sen, tied\u00e4, ett\u00e4 Gutenbergille on olemassa pari uutta koukkua rekisterityyleille (ja skripteille). Jos haluat lis\u00e4t\u00e4 tyylitaulukon jonoon sek\u00e4 k\u00e4ytt\u00f6liittym\u00e4lle ett\u00e4 editorille, k\u00e4yt\u00e4 koukkua enqueue_block_assets<\/code>. Jos haluat lis\u00e4t\u00e4 tyylitaulukon vain editoria varten, aseta se jonoon koukkuun enqueue_block_editor_assets<\/code>.<\/p>\n

Kuinka k\u00e4ytt\u00e4\u00e4 tyyli\u00e4 mukautetuissa lohkotyyleiss\u00e4<\/h2>\n

Mukautetut lohkotyylit lis\u00e4t\u00e4\u00e4n tietyn mallin luokkana lohkon uloimpaan HTML-tunnisteeseen.<\/p>\n

Lohkotyylien CSS-luokka lis\u00e4t\u00e4\u00e4n muodossa " is-style-<stylename><\/code>". Jos esimerkiksi nime\u00e4t tyylisi " outline<\/code>", lohko saa luokan " is-style-outline<\/code>".<\/p>\n

Saatat kuitenkin kokea, ett\u00e4 Gutenberg-editori ohittaa joissain tapauksissa tyylisi. Suosittelen editorin tyylin etuliitett\u00e4 valitsimella editor-styles-wrapper<\/code>varmistaaksesi, ett\u00e4 tyylisi "voittavat". Muista, ett\u00e4 t\u00e4t\u00e4 luokkaa ei ole k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, joten varmuuden vuoksi saatat joutua lis\u00e4\u00e4m\u00e4\u00e4n kaksi valitsinta (jos k\u00e4yt\u00e4t samaa tyylitaulukkoa sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
Mukautettujen lohkotyylien lis\u00e4\u00e4minen PHP:ll\u00e4<\/h2>\n
Mukautetun lohkotyypin lis\u00e4\u00e4miseen PHP:n avulla k\u00e4yt\u00e4mme funktiota [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. Dokumentaatiosta ei valitettavasti ole tietoa, mit\u00e4 koukkua meid\u00e4n pit\u00e4isi k\u00e4ytt\u00e4\u00e4, mutta minulla on ollut onnea koukun kanssa init<\/code>.<\/p>\n
Sinun on tiedett\u00e4v\u00e4 lohkotyyppisi Gutenberg-nimiavaruusnimi, jotta voit lis\u00e4t\u00e4 siihen mukautetun tyylin. Kaikilla tavallisilla WordPress-lohkoilla on nimiavaruus " core<\/code>", jota seuraa a \/<\/code>ja niiden nimen slug-versio. Esimerkiksi Gutenbergin nimi vakiokappalelohkolle on core\/paragraph<\/code>.<\/p>\n
Mukautetun lohkotyylin rekister\u00f6inti tapahtuu yksinkertaisimmassa muodossaan seuraavasti:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
Yll\u00e4 oleva koodi lis\u00e4\u00e4 mukautetun lohkotyylin Otsikkolohkotyyppiin, mik\u00e4 johtaisi luokan is-style-colored-bottom-border<\/code>mihin tahansa otsikkoon, joka on valinnut t\u00e4m\u00e4n tyylin.<\/p>\n
T\u00e4m\u00e4 toiminto tarjoaa kaksi tapaa lis\u00e4t\u00e4 CSS:si (jos et ole lis\u00e4nnyt sit\u00e4 jollain muulla tavalla); joko antamalla tekstin sis\u00e4inen CSS merkkijonona tai antamalla rekister\u00f6idyn tyylisivun kahvan, jonka WordPress jonoittaa sinulle tarvittaessa.<\/p>\n
Jos haluat lis\u00e4t\u00e4 upotetun tyylin (muista, ett\u00e4 t\u00e4m\u00e4 vaikuttaa sek\u00e4 editoriin ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4\u00e4n), lis\u00e4\u00e4 elementti " inline_style<\/code>" funktiokutsuun ja kirjoita koko CSS merkkijonona sen arvoksi:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Jos haluat mieluummin tehd\u00e4 funktiosta jonon tyylitaulukon, anna sen kahva elementille " style_handle<\/code>".<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
S\u00e4\u00e4d\u00e4 tyylisivusi sijainti projektiisi sopivaksi. Tyylitaulukkoa k\u00e4ytet\u00e4\u00e4n sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, mutta t\u00e4ll\u00e4 kertaa k\u00e4ytt\u00f6liittym\u00e4 pyyt\u00e4\u00e4 erillisen pyynn\u00f6n sis\u00e4llytt\u00e4\u00e4 t\u00e4m\u00e4 tyylitaulukko. T\u00e4t\u00e4 menetelm\u00e4\u00e4 ei suositella, jos lis\u00e4\u00e4t useita lohkotyylej\u00e4. K\u00e4ytt\u00f6liittym\u00e4 hidastuu huomattavasti, kun pyydet\u00e4\u00e4n koko joukko erillisi\u00e4 tyylisivuja.<\/p>\n
Mukautettujen lohkotyylien lis\u00e4\u00e4minen Javascriptill\u00e4<\/h2>\n
Jos haluat mieluummin lis\u00e4t\u00e4 lohkotyylisi Javascriptin avulla, t\u00e4m\u00e4 on yht\u00e4 helppoa kuin PHP:n kanssa.<\/p>\n
Sinun on lis\u00e4tt\u00e4v\u00e4 Javascript-tiedosto editorin vain koukkuun: enqueue_block_editor_assets<\/code>. Skriptisi ei luultavasti tarvitse riippuvuuksia, mutta lis\u00e4\u00e4n mieluummin ainakin ’ wp-blocks<\/code>’ riippuvuudeksi.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
S\u00e4\u00e4d\u00e4 tiedostonimi ja sijainti projektiisi sopivaksi.<\/p>\n
Javascript-tiedostossasi k\u00e4yt\u00e4t objektin funktiota registerBlockStyle()<\/code>mukautettujen wp.blocks<\/code>lohkotyylien rekister\u00f6imiseen. Saman lohkotyylin lis\u00e4\u00e4minen kuin yll\u00e4 PHP:ss\u00e4 n\u00e4ytt\u00e4isi t\u00e4lt\u00e4:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
Ja siin\u00e4 se! Helppo nakki.<\/p>\n
Lohkotyylien rekister\u00f6inti poistetaan<\/h2>\n
Aivan kuten voit rekister\u00f6id\u00e4 lohkotyylin, my\u00f6s lohkotyyli voidaan peruuttaa. Ehk\u00e4 haluat poistaa joitain WordPressin oletuslohkotyylej\u00e4? Kuten lohkotyylien rekister\u00f6innin yhteydess\u00e4, voit my\u00f6s poistaa lohkotyylien rekister\u00f6innin joko PHP:ll\u00e4 tai Javascriptill\u00e4. Mutta valinta n\u00e4iden kahden menetelm\u00e4n v\u00e4lill\u00e4 ei ole en\u00e4\u00e4 etusija.<\/p>\n
Et voi poistaa lohkon rekister\u00f6inti\u00e4 PHP:ll\u00e4, jos se on rekister\u00f6ity Javascriptill\u00e4 ja p\u00e4invastoin. Joten sinun on selvitett\u00e4v\u00e4, kuinka poistettava tyyli rekister\u00f6itiin, ja sovitettava se joko PHP:n tai Javascriptin kanssa. Uskon, ett\u00e4 kaikki WordPressin lohkotyylit on lis\u00e4tty Javascriptill\u00e4 (\u00e4l\u00e4 lainaa minua t\u00e4ss\u00e4!). Joten jos haluat poistaa osan niist\u00e4, sinun on valittava Javascript-reitti.<\/p>\n
Lohkotyylin rekister\u00f6innin poistaminen PHP:ll\u00e4 tehd\u00e4\u00e4n kutsumalla funktio unregister_block_style()<\/code>, antamalla poistettavan lohkotyypin ja tyylin nimi. Esimerkiksi yll\u00e4 t\u00e4h\u00e4n viestiin lis\u00e4tyn tyylin rekister\u00f6innin poistaminen (olettaen, ett\u00e4 se on rekister\u00f6ity PHP:lle) n\u00e4ytt\u00e4isi t\u00e4lt\u00e4:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
Lohkotyylin rekister\u00f6innin poistaminen Javascriptill\u00e4 tapahtuu samalla tavalla objektin unregisterBlockStyle()<\/code>sis\u00e4ll\u00e4 olevan funktion kanssa. wp.blocks<\/code>Javascriptin kanssa on kuitenkin kysymys siit\u00e4, mik\u00e4 komentosarja k\u00e4ynnistyy ensin, ja saatat kohdata ongelmia, kun komentosarjasi suoritetaan ennen rekister\u00f6inti\u00e4. T\u00e4m\u00e4n ratkaisemiseksi k\u00e4yt\u00e4mme Gutenbergin vastinetta jQueryn "dokumentti valmiiksi" (jQuery(document).ready(function() { ... });<\/code>), ja lis\u00e4\u00e4mme my\u00f6s toisen riippuvuuden skriptiisi.<\/p>\n
Aloitetaan lis\u00e4\u00e4m\u00e4ll\u00e4 uusi komentosarjariippuvuus Javascript-tiedostoosi jonoon " wp-edit-post<\/code>":<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
Ja k\u00e4\u00e4ri Javascript-tiedostosi sis\u00e4\u00e4n rekister\u00f6innin poistamiskutsu sis\u00e4\u00e4n wp.domReady(function() { ... })<\/code>seuraavasti:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Kuten yll\u00e4 oleva koodi osoittaa, Javascriptin avulla voimme nyt poistaa WordPressin "Large" -tyylin lainauslohkosta. Jos kokeilisit tehd\u00e4 samaa PHP:ll\u00e4, se ei toimisi.<\/p>\n
Sivuhuomautus lohkotyylien rekister\u00f6innin poistamisesta<\/h3>\n
Saatat huomata, ett\u00e4 vaikka olet onnistuneesti poistanut kaikki mukautetut lohkotyylit lohkosta, editorin "Tyylit"-ruutu ei poistu. Se pysyy paikallaan, ja sen sis\u00e4ll\u00e4 on vain valinta "Oletus". Jos haluat poistaa "Tyylit"-ruudun kokonaan, jotta editorit eiv\u00e4t h\u00e4mmenn\u00e4, voit yksinkertaisesti poistaa my\u00f6s oletustyylin rekister\u00f6innin (esim wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>. ). T\u00e4m\u00e4 poistaa Tyylit-ruudun kokonaan Gutenberg-editorista.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4 viesti selitt\u00e4\u00e4, kuinka m\u00e4\u00e4ritt\u00e4\u00e4 lohkotyylej\u00e4 Gutenbergiss\u00e4 joko PHP:ll\u00e4 tai Javascriptill\u00e4 – ja k\u00e4sittelee ideoita tyylitaulukoiden ratkaisemiseksi.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,938,938,719,895,813,1110,834,843,803,803,813,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233733","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-laajennuksia","14":"category-n-a","15":"category-opas-aloittelijoille","16":"category-opetusohjelmia","17":"category-php-5","22":"category-wordpress-5","24":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233733","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=233733"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233733\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}