{"id":233752,"date":"2023-02-21T13:02:00","date_gmt":"2023-02-21T10:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233752"},"modified":"2022-11-11T12:12:01","modified_gmt":"2022-11-11T09:12:01","slug":"kuidas-lisada-wordpressi-gutenbergi-plokkidele-kohandatud-plokistiile","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-lisada-wordpressi-gutenbergi-plokkidele-kohandatud-plokistiile\/","title":{"rendered":"Kuidas lisada WordPressi Gutenbergi plokkidele kohandatud plokistiile"},"content":{"rendered":"\n

M\u00f5nev\u00f5rra v\u00e4hem tuntud funktsioon Gutenbergis on v\u00f5imalus seadistada plokkidele erinevaid stiile. Saate registreerida nii palju erinevaid stiile mis tahes t\u00fc\u00fcpi plokkidele, et anda samale plokile erinevad kujundused. Plokkide v\u00f5imalikud stiilid kuvatakse redaktori paremas servas jaotisena. Iga stiil saab oma eelvaate. Kui k\u00e4sitlete stiile \u00f5igesti, peaks stiilide vahel vahetamine viivitamatult v\u00e4rskendama kujundust nii redaktoris kui ka kasutajaliideses.<\/p>\n

WordPressi selle funktsiooni dokumentatsioon<\/a> ei ole praegu nii t\u00e4ielik ja informatiivne, kui see v\u00f5iks olla. Nii et selles postituses vaatleme \u00fcksikasjalikult, kuidas saate oma kohandatud ploki stiile lisada ja kuidas peaksite nende stiilidega hakkama saama.<\/p>\n

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

See funktsioon toimib nii, et kui Gutenberg tuvastab, et ploki t\u00fc\u00fcp on registreeritud v\u00e4hemalt \u00fche stiilina, ilmub redaktori paremasse serva automaatselt kast "Stiilid", mille sees saab redaktor valida vaikestiili v\u00f5i m\u00f5ne muu stiili vahel. lisatud plokistiil.<\/p>\n

Varasemates versioonides (v\u00e4hemalt enne WordPress 5.3) oli kohandatud stiili registreerimiseks vaja registreerida ka vaikestiil ("ei ole stiil"). \u00d5nneks parandati see WordPressi uusimates versioonides, seega peate n\u00fc\u00fcd registreerima ainult kohandatud stiilid ja WordPress lisab vaikelaadi automaatselt.<\/p>\n

Kohandatud plokistiile saab registreerida kahel viisil; PHP v\u00f5i Javascriptiga. Vaatame m\u00f5lemat. Aga k\u00f5igepealt m\u00f5ned a-haavad oma stiilide k\u00e4sitlemise kohta.<\/p>\n

M\u00e4rkus Gutenbergi stiilide j\u00e4rjestamise kohta<\/h2>\n

V\u00f5ib tekkida segadust selle osas, kuidas ja kuhu oma stiile lisada (CSS-failid); ainult redaktorile, esik\u00fcljele v\u00f5i m\u00f5lemale \u00fchele stiililehele. Gutenbergi toimetaja \u00fcks peamisi eesm\u00e4rke on tagada, et saate redaktoris oma postituse sisu korralikult v\u00e4lja n\u00e4ha. Seet\u00f5ttu on soovitatav veenduda, et kohandatud stiile rakendatakse nii redaktoris kui ka kasutajaliideses.<\/p>\n

Kuidas te sellega tegelete, s\u00f5ltub teie projektist ja olemasolevast stiilitabeli seadistusest. Kui t\u00f6\u00f6tate v\u00e4lja terviklikku teemat, lisate t\u00f5en\u00e4oliselt juba oma kasutajaliidese stiililehele ploki stiili. V\u00f5ite kaaluda eraldi laaditabeli lisamist, mille lisate j\u00e4rjekorda ainult redaktori jaoks. Kuid seda v\u00f5ib olla raske s\u00e4ilitada, kui lisate palju erinevaid stiile. Peaksite oma stiile kahes kohas v\u00e4rskendama ja tagama, et nende tulemused oleksid samad. Selle lahenduseks oleks j\u00e4tta alles \u00fcks laaditabel, mille panete j\u00e4rjekorda nii redaktori kui ka kasutajaliidese jaoks. Kuid siis peaks teie kasutajaliides laadima v\u00e4hemalt kaks erinevat laadilehte ja see ei pruugi olla ideaalne.<\/p>\n

Teine lahendus on kasutada nt SCSS-i v\u00f5i LESS-i ja seadistada nii, et plokistiilid @imports<\/code>tuleb kirjutada vaid \u00fcks kord ja see rakendub nii redaktorile kui ka kasutajaliidesele. Nagu allpool n\u00e4ete, kui kasutate PHP-d kohandatud plokistiilide registreerimiseks, on teil veel \u00fcks v\u00f5imalus; tekstisiseste stiilide lisamiseks. Neid stiile rakendatakse nii redaktoris kui ka kasutajaliideses. Esiprogrammis lisab WordPress need kohandatud tekstisisesena <style type=\"text\/css\">...<\/style><\/code>p\u00e4isesse.<\/p>\n

\u00dcksk\u00f5ik kui otsustate selle lahendada, teadke, et Gutenbergi jaoks on paar uut konksu registristiilide (ja skriptide) jaoks. Kui soovite laaditabeli j\u00e4rjekorda panna nii kasutajaliidese kui ka redaktori jaoks, kasutage konksu enqueue_block_assets<\/code>. Kui soovite lisada laaditabeli ainult redaktori jaoks, pange see konksu sisse j\u00e4rjekorda enqueue_block_editor_assets<\/code>.<\/p>\n

Kuidas kohandatud ploki stiilidele stiili rakendada<\/h2>\n

Kohandatud plokistiilid lisatakse teatud mustri klassina ploki \u00e4\u00e4repoolseimale HTML-m\u00e4rgendile.<\/p>\n

Plokistiilide CSS-klass lisatakse kujul " is-style-<stylename><\/code>". Kui panete n\u00e4iteks oma stiilile nimeks " outline<\/code>", saab plokk klassiks " is-style-outline<\/code>".<\/p>\n

Siiski v\u00f5ite kogeda, et Gutenbergi redaktor alistab m\u00f5nel juhul teie stiili. Soovitan lisada oma redaktori stiil valijaga editor-styles-wrapper<\/code>, et tagada stiilide "v\u00f5itmine". Pidage meeles, et seda klassi kasutajaliideses ei eksisteeri, nii et ohutuse tagamiseks peate v\u00f5ib-olla lisama kaks selektorit (kui kasutate sama laaditabelit nii redaktori kui ka kasutajaliidese jaoks):<\/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
Kohandatud plokistiilide lisamine PHP-ga<\/h2>\n
Kohandatud plokit\u00fc\u00fcbi lisamiseks PHP abil kasutame funktsiooni [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. Kahjuks puudub dokumentatsioonis teave, millist konksu peaksime kasutama, kuid mul on konksuga vedanud init<\/code>.<\/p>\n
Selleks, et lisada sellele kohandatud stiil, peate teadma oma plokit\u00fc\u00fcbi Gutenbergi nimeruumi nime. K\u00f5igil standardsetel WordPressi plokkidel on nimeruum " core<\/code>", millele j\u00e4rgneb a \/<\/code>ja nende nime versioon. N\u00e4iteks Gutenbergi standardse l\u00f5iguploki nimi on core\/paragraph<\/code>.<\/p>\n
Kohandatud plokistiili registreerimine toimub selle k\u00f5ige lihtsamal kujul, n\u00e4iteks j\u00e4rgmiselt:<\/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
\u00dclaltoodud kood lisab pealkirja plokit\u00fc\u00fcbile kohandatud ploki stiili, mille tulemuseks on klass is-style-colored-bottom-border<\/code>mis tahes pealkirja, mis on selle stiili valinud.<\/p>\n
See funktsioon pakub CSS-i lisamiseks kahte meetodit (kui te pole seda muul viisil lisanud); pakkudes stringina tekstisisese CSS-i v\u00f5i pakkudes registreeritud stiilitabeli k\u00e4epidet, mille WordPress vajadusel teie jaoks j\u00e4rjekorda loob.<\/p>\n
Kui soovite lisada tekstisisese stiili (pidage meeles, et see m\u00f5jutab nii redaktorit kui ka esiserva), lisage funktsioonikutsele element " inline_style<\/code>" ja kirjutage selle v\u00e4\u00e4rtuseks stringina v\u00e4lja t\u00e4ielik CSS:<\/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
Kui soovite funktsioonist pigem laaditabeli j\u00e4rjekorda, lisage selle pide elemendile " 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
Kohandage oma stiilitabeli asukohta, et see sobiks teie projektiga. Stiilitabelit rakendatakse nii redaktorile kui ka kasutajaliidesele, kuid seekord esitab kasutajaliides eraldi taotluse selle laaditabeli lisamiseks. Seda meetodit ei soovitata kasutada, kui lisate mitu plokistiili. Frontend aeglustub oluliselt, kui taotlete terve hulga eraldi laaditabeleid.<\/p>\n
Kohandatud plokistiilide lisamine Javascriptiga<\/h2>\n
Kui eelistate oma plokistiile lisada Javascripti abil, on see sama lihtne kui PHP-ga.<\/p>\n
Peate sisestama Javascripti faili ainult redaktori konksule: enqueue_block_editor_assets<\/code>. Teie skript ei vaja t\u00f5en\u00e4oliselt mingeid s\u00f5ltuvusi, kuid eelistan s\u00f5ltuvusena lisada v\u00e4hemalt " wp-blocks<\/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']\n    );\n});<\/code><\/pre>\n
Kohandage failinimi ja asukoht oma projektiga sobivaks.<\/p>\n
Javascripti failis kasutate kohandatud plokistiilide registreerimiseks objekti registerBlockStyle()<\/code>funktsiooni. wp.blocks<\/code>Sama plokistiili lisamine nagu \u00fclaltoodud PHP-s n\u00e4eks v\u00e4lja j\u00e4rgmine:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
Ja see ongi k\u00f5ik! Lihtne.<\/p>\n
Plokistiilide registreerimise t\u00fchistamine<\/h2>\n
Nii nagu saate registreerida plokistiili, saab ka plokistiili registreerimist t\u00fchistada. V\u00f5ib-olla soovite eemaldada m\u00f5ned WordPressi vaikeplokistiilid? Nagu plokistiilide registreerimisel, saate ka plokistiilide registreerimise t\u00fchistada kas PHP v\u00f5i Javascripti abil. Kuid valik nende kahe meetodi vahel ei ole enam eelistus.<\/p>\n
Te ei saa PHP-ga plokki registreerimist t\u00fchistada, kui see on registreeritud Javascriptiga, ja vastupidi. Seega peate v\u00e4lja selgitama, kuidas eemaldatav stiil registreeriti, ja sobitada see PHP v\u00f5i Javascriptiga. Usun, et k\u00f5ik WordPressi plokistiilid on lisatud Javascriptiga (\u00e4ra tsiteeri mind selles!). Nii et kui soovite m\u00f5nda neist eemaldada, peate kasutama Javascripti marsruuti.<\/p>\n
Plokistiili registreerimise t\u00fchistamine PHP-ga toimub, kutsudes v\u00e4lja funktsiooni unregister_block_style()<\/code>, andes ploki t\u00fc\u00fcbi ja stiili nime, mida soovite eemaldada. N\u00e4iteks selle postituse \u00fclaltoodud stiili registreerimise t\u00fchistamine (eeldusel, et see oli registreeritud PHP-s) n\u00e4eks v\u00e4lja j\u00e4rgmine:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
Plokistiili t\u00fchistamine Javascriptiga toimub sarnaselt objekti unregisterBlockStyle()<\/code>sees oleva funktsiooniga. wp.blocks<\/code>Javascripti puhul on aga k\u00fcsimus, milline skript saab esimesena k\u00e4ivituda, ja teil v\u00f5ib tekkida probleeme, kui skripti k\u00e4itatakse enne registreerimist. Selle lahendamiseks kasutame Gutenbergi ekvivalenti jQuery dokumendile "dokument valmis" (jQuery(document).ready(function() { ... });<\/code>) ja lisame teie skriptile veel \u00fche s\u00f5ltuvuse.<\/p>\n
Alustuseks lisame oma Javascripti failile uue skripti s\u00f5ltuvuse, mis on j\u00e4rjekorda \u201e 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 oma Javascripti faili sees m\u00e4hitage oma registreerimise t\u00fchistamise funktsioonikutse sisse wp.domReady(function() { ... })<\/code>j\u00e4rgmiselt:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Nagu \u00fclaltoodud kood n\u00e4itab, saame Javascripti abil n\u00fc\u00fcd hinnapakkumise plokist eemaldada WordPressi stiili "Suur". Kui prooviksite sama teha PHP-ga, see ei t\u00f6\u00f6taks.<\/p>\n
Vahem\u00e4rkus plokkide stiilide registreerimise t\u00fchistamise kohta<\/h3>\n
V\u00f5ite m\u00e4rgata, et kuigi olete blokist k\u00f5ik kohandatud plokistiilid edukalt eemaldanud, ei kao redaktori kast \u201eStiilid” kuhugi. See j\u00e4\u00e4b paigale ja selle sees on ainult valik "Vaikimisi". Kui soovite kasti "Stiilid" t\u00e4ielikult eemaldada, et mitte toimetajaid segadusse ajada, v\u00f5ite lihtsalt t\u00fchistada ka vaikestiili registreerimise (nt wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>). See eemaldab Gutenbergi redaktorist t\u00e4ielikult kasti "Stiilid".<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
See postitus selgitab, kuidas seadistada Gutenbergi plokkide jaoks plokkide stiile kas PHP v\u00f5i Javascriptiga \u2013 ja puudutab ideid stiilitabelite lahendamiseks.<\/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":[718,894,718,937,937,833,894,1110,842,802,802,812,812,833,842,863,863],"tags":[1165],"class_list":{"0":"post-233752","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-arendaja","8":"category-kood","10":"category-gutenberg-4","12":"category-juhend-algajatele","14":"category-n-a","15":"category-opetused","16":"category-php-4","18":"category-pistikprogrammid","22":"category-wordpress-4","24":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233752","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=233752"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233752\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}