Mõnevõrra vähem tuntud funktsioon Gutenbergis on võimalus seadistada plokkidele erinevaid stiile. Saate registreerida nii palju erinevaid stiile mis tahes tüüpi plokkidele, et anda samale plokile erinevad kujundused. Plokkide võimalikud stiilid kuvatakse redaktori paremas servas jaotisena. Iga stiil saab oma eelvaate. Kui käsitlete stiile õigesti, peaks stiilide vahel vahetamine viivitamatult värskendama kujundust nii redaktoris kui ka kasutajaliideses.
WordPressi selle funktsiooni dokumentatsioon ei ole praegu nii täielik ja informatiivne, kui see võiks olla. Nii et selles postituses vaatleme üksikasjalikult, kuidas saate oma kohandatud ploki stiile lisada ja kuidas peaksite nende stiilidega hakkama saama.
See funktsioon toimib nii, et kui Gutenberg tuvastab, et ploki tüüp on registreeritud vähemalt ühe stiilina, ilmub redaktori paremasse serva automaatselt kast "Stiilid", mille sees saab redaktor valida vaikestiili või mõne muu stiili vahel. lisatud plokistiil.
Varasemates versioonides (vähemalt enne WordPress 5.3) oli kohandatud stiili registreerimiseks vaja registreerida ka vaikestiil ("ei ole stiil"). Õnneks parandati see WordPressi uusimates versioonides, seega peate nüüd registreerima ainult kohandatud stiilid ja WordPress lisab vaikelaadi automaatselt.
Kohandatud plokistiile saab registreerida kahel viisil; PHP või Javascriptiga. Vaatame mõlemat. Aga kõigepealt mõned a-haavad oma stiilide käsitlemise kohta.
Märkus Gutenbergi stiilide järjestamise kohta
Võib tekkida segadust selle osas, kuidas ja kuhu oma stiile lisada (CSS-failid); ainult redaktorile, esiküljele või mõlemale ühele stiililehele. Gutenbergi toimetaja üks peamisi eesmärke on tagada, et saate redaktoris oma postituse sisu korralikult välja näha. Seetõttu on soovitatav veenduda, et kohandatud stiile rakendatakse nii redaktoris kui ka kasutajaliideses.
Kuidas te sellega tegelete, sõltub teie projektist ja olemasolevast stiilitabeli seadistusest. Kui töötate välja terviklikku teemat, lisate tõenäoliselt juba oma kasutajaliidese stiililehele ploki stiili. Võite kaaluda eraldi laaditabeli lisamist, mille lisate järjekorda ainult redaktori jaoks. Kuid seda võib olla raske säilitada, kui lisate palju erinevaid stiile. Peaksite oma stiile kahes kohas värskendama ja tagama, et nende tulemused oleksid samad. Selle lahenduseks oleks jätta alles üks laaditabel, mille panete järjekorda nii redaktori kui ka kasutajaliidese jaoks. Kuid siis peaks teie kasutajaliides laadima vähemalt kaks erinevat laadilehte ja see ei pruugi olla ideaalne.
Teine lahendus on kasutada nt SCSS-i või LESS-i ja seadistada nii, et plokistiilid @importstuleb kirjutada vaid üks kord ja see rakendub nii redaktorile kui ka kasutajaliidesele. Nagu allpool näete, kui kasutate PHP-d kohandatud plokistiilide registreerimiseks, on teil veel üks võimalus; tekstisiseste stiilide lisamiseks. Neid stiile rakendatakse nii redaktoris kui ka kasutajaliideses. Esiprogrammis lisab WordPress need kohandatud tekstisisesena <style type="text/css">...</style>päisesse.
Ükskõik kui otsustate selle lahendada, teadke, et Gutenbergi jaoks on paar uut konksu registristiilide (ja skriptide) jaoks. Kui soovite laaditabeli järjekorda panna nii kasutajaliidese kui ka redaktori jaoks, kasutage konksu enqueue_block_assets. Kui soovite lisada laaditabeli ainult redaktori jaoks, pange see konksu sisse järjekorda enqueue_block_editor_assets.
Kuidas kohandatud ploki stiilidele stiili rakendada
Kohandatud plokistiilid lisatakse teatud mustri klassina ploki äärepoolseimale HTML-märgendile.
Plokistiilide CSS-klass lisatakse kujul " is-style-<stylename>". Kui panete näiteks oma stiilile nimeks " outline", saab plokk klassiks " is-style-outline".
Siiski võite kogeda, et Gutenbergi redaktor alistab mõnel juhul teie stiili. Soovitan lisada oma redaktori stiil valijaga editor-styles-wrapper, et tagada stiilide "võitmine". Pidage meeles, et seda klassi kasutajaliideses ei eksisteeri, nii et ohutuse tagamiseks peate võib-olla lisama kaks selektorit (kui kasutate sama laaditabelit nii redaktori kui ka kasutajaliidese jaoks):
.is-style-colored-bottom-border,
.editor-styles-wrapper .is-style-colored-bottom-border {
border-bottom: 2px solid purple;
}Kohandatud plokistiilide lisamine PHP-ga
Kohandatud plokitüübi lisamiseks PHP abil kasutame funktsiooni [register_block_style](https://developer.wordpress.org/reference/functions/register_block_style/)(). Kahjuks puudub dokumentatsioonis teave, millist konksu peaksime kasutama, kuid mul on konksuga vedanud init.
Selleks, et lisada sellele kohandatud stiil, peate teadma oma plokitüübi Gutenbergi nimeruumi nime. Kõigil standardsetel WordPressi plokkidel on nimeruum " core", millele järgneb a /ja nende nime versioon. Näiteks Gutenbergi standardse lõiguploki nimi on core/paragraph.
Kohandatud plokistiili registreerimine toimub selle kõige lihtsamal kujul, näiteks järgmiselt:
Ülaltoodud kood lisab pealkirja plokitüübile kohandatud ploki stiili, mille tulemuseks on klass is-style-colored-bottom-bordermis tahes pealkirja, mis on selle stiili valinud.
See funktsioon pakub CSS-i lisamiseks kahte meetodit (kui te pole seda muul viisil lisanud); pakkudes stringina tekstisisese CSS-i või pakkudes registreeritud stiilitabeli käepidet, mille WordPress vajadusel teie jaoks järjekorda loob.
Kui soovite lisada tekstisisese stiili (pidage meeles, et see mõjutab nii redaktorit kui ka esiserva), lisage funktsioonikutsele element " inline_style" ja kirjutage selle väärtuseks stringina välja täielik CSS:
Kui soovite funktsioonist pigem laaditabeli järjekorda, lisage selle pide elemendile " style_handle".
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.
Kohandatud plokistiilide lisamine Javascriptiga
Kui eelistate oma plokistiile lisada Javascripti abil, on see sama lihtne kui PHP-ga.
Peate sisestama Javascripti faili ainult redaktori konksule: enqueue_block_editor_assets. Teie skript ei vaja tõenäoliselt mingeid sõltuvusi, kuid eelistan sõltuvusena lisada vähemalt " wp-blocks".
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script(
'myguten-script',
get_template_directory_uri(). '/assets/js/myguten.js',
['wp-blocks']
);
});Kohandage failinimi ja asukoht oma projektiga sobivaks.
Javascripti failis kasutate kohandatud plokistiilide registreerimiseks objekti registerBlockStyle()funktsiooni. wp.blocksSama plokistiili lisamine nagu ülaltoodud PHP-s näeks välja järgmine:
wp.blocks.registerBlockStyle('core/heading', {
name: 'colored-bottom-border',
label: 'Colored bottom border'
});Ja see ongi kõik! Lihtne.
Plokistiilide registreerimise tühistamine
Nii nagu saate registreerida plokistiili, saab ka plokistiili registreerimist tühistada. Võib-olla soovite eemaldada mõned WordPressi vaikeplokistiilid? Nagu plokistiilide registreerimisel, saate ka plokistiilide registreerimise tühistada kas PHP või Javascripti abil. Kuid valik nende kahe meetodi vahel ei ole enam eelistus.
Te ei saa PHP-ga plokki registreerimist tühistada, kui see on registreeritud Javascriptiga, ja vastupidi. Seega peate välja selgitama, kuidas eemaldatav stiil registreeriti, ja sobitada see PHP või Javascriptiga. Usun, et kõik WordPressi plokistiilid on lisatud Javascriptiga (ära tsiteeri mind selles!). Nii et kui soovite mõnda neist eemaldada, peate kasutama Javascripti marsruuti.
Plokistiili registreerimise tühistamine PHP-ga toimub, kutsudes välja funktsiooni unregister_block_style(), andes ploki tüübi ja stiili nime, mida soovite eemaldada. Näiteks selle postituse ülaltoodud stiili registreerimise tühistamine (eeldusel, et see oli registreeritud PHP-s) näeks välja järgmine:
add_action('init', function() {
unregister_block_style('core/heading', 'colored-bottom-border');
});Plokistiili tühistamine Javascriptiga toimub sarnaselt objekti unregisterBlockStyle()sees oleva funktsiooniga. wp.blocksJavascripti puhul on aga küsimus, milline skript saab esimesena käivituda, ja teil võib tekkida probleeme, kui skripti käitatakse enne registreerimist. Selle lahendamiseks kasutame Gutenbergi ekvivalenti jQuery dokumendile "dokument valmis" (jQuery(document).ready(function() { ... });) ja lisame teie skriptile veel ühe sõltuvuse.
Alustuseks lisame oma Javascripti failile uue skripti sõltuvuse, mis on järjekorda „ wp-edit-post":
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script(
'myguten-script',
get_template_directory_uri(). '/assets/js/myguten.js',
['wp-blocks', 'wp-edit-post']
);
});Ja oma Javascripti faili sees mähitage oma registreerimise tühistamise funktsioonikutse sisse wp.domReady(function() { ... })järgmiselt:
wp.domReady(function() {
wp.blocks.unregisterBlockStyle('core/quote', 'large');
});Nagu ülaltoodud kood näitab, saame Javascripti abil nüüd hinnapakkumise plokist eemaldada WordPressi stiili "Suur". Kui prooviksite sama teha PHP-ga, see ei töötaks.
Vahemärkus plokkide stiilide registreerimise tühistamise kohta
Võite märgata, et kuigi olete blokist kõik kohandatud plokistiilid edukalt eemaldanud, ei kao redaktori kast „Stiilid” kuhugi. See jääb paigale ja selle sees on ainult valik "Vaikimisi". Kui soovite kasti "Stiilid" täielikult eemaldada, et mitte toimetajaid segadusse ajada, võite lihtsalt tühistada ka vaikestiili registreerimise (nt wp.blocks.unregisterBlockStyle('core/quote', 'large')). See eemaldab Gutenbergi redaktorist täielikult kasti "Stiilid".