Hieman vähemmän tunnettu ominaisuus Gutenbergissä on mahdollisuus määrittää erilaisia tyylejä lohkoille. Voit rekisteröidä niin monta eri tyyliä minkä tahansa tyyppiselle lohkolle antaaksesi samalle lohkolle erilaisia kuvioita. Lohkojen mahdolliset tyylit näkyvät osiona editorin oikealla puolella. Jokainen tyyli saa oman esikatselunsa. Jos käsittelet tyylejä oikein, tyylien välillä vaihtamisen pitäisi päivittää ulkoasu välittömästi editorin sisällä sekä käyttöliittymässä.
WordPressin tämän ominaisuuden dokumentaatio ei ole tällä hetkellä niin kattava ja informatiivinen kuin se voisi olla. Joten tässä viestissä tarkastelemme yksityiskohtaisesti, kuinka voit lisätä mukautettuja lohkotyylejäsi ja kuinka sinun tulisi käsitellä niiden tyyliä.
Tämä ominaisuus toimii siten, että aina kun Gutenberg havaitsee, että lohkotyyppi on rekisteröity vähintään yhdeksi tyyliksi, "Tyylit"-ruutu tulee automaattisesti näkyviin editorin oikealle puolelle, jonka sisällä editori voi valita oletustyylin tai minkä tahansa muun tyylin välillä. lohkotyyli, joka on lisätty.
Aiemmissa versioissa (ainakin ennen WordPress 5.3:a) mukautetun tyylin rekisteröinti edellytti myös oletustyylin ("ei tyyliä") rekisteröintiä. Onneksi tämä korjattiin WordPressin uusimmissa versioissa, joten nyt sinun tarvitsee vain rekisteröidä mukautetut tyylisi ja WordPress lisää oletustyylin automaattisesti.
Voit rekisteröidä mukautettuja lohkotyylejä kahdella tavalla; PHP:llä tai Javascriptillä. Tarkastellaan molempia. Mutta ensin muutama a-ha-lause tyylien käsittelystä.
Huomautus Gutenbergin tyylien jonottamisesta
Saattaa olla epäselvyyttä siitä, miten ja minne tyylit lisätään (CSS-tiedostot); vain editoriin, käyttöliittymään tai yksi tyylisivu molemmille. Yksi Gutenberg-editorin päätavoitteista on varmistaa, että voit esikatsella oikein, miltä viestisi sisältö näyttää editorissa. Siksi on suositeltavaa varmistaa, että mukautettuja tyylejäsi käytetään editorissa sekä käyttöliittymässä.
Se, miten käsittelet tätä, riippuu todella projektistasi ja olemassa olevista tyylitaulukon asetuksista. Jos olet kehittämässä kokonaista teemaa, sisällytät todennäköisesti jo lohkotyylin käyttöliittymän tyylitaulukkoon. Sinun kannattaa harkita erillisen tyylitaulukon lisäämistä, joka tulee jonoon vain editoria varten. Mutta tätä voi olla vaikea ylläpitää, jos lisäät paljon erilaisia tyylejä. Sinun on päivitettävä tyylisi kahdessa paikassa ja varmistettava, että niiden tulokset ovat samat. Ratkaisu tähän olisi säilyttää yksi tyylitaulukko, jonka asetat jonoon sekä editorille että käyttöliittymälle. Mutta silloin käyttöliittymäsi pitäisi ladata vähintään kaksi erillistä tyylitaulukkoa, mikä ei ehkä ole ihanteellinen.
Toinen ratkaisu on esim. SCSS:n tai LESS:n käyttö ja asetukset @importssiten, että lohkotyylit tarvitsee kirjoittaa vain kerran, ja sitä sovelletaan sekä editoriin että käyttöliittymään. Kuten alla näet, kun käytät PHP:tä mukautettujen lohkotyylien rekisteröintiin, sinulla on vielä toinen vaihtoehto; lisätäksesi upotettuja tyylejä. Näitä tyylejä käytetään sekä editorissa että käyttöliittymässä. Käyttöliittymässä WordPress lisää ne mukautetuksi upotettuna <style type="text/css">...</style>otsikon sisään.
Kuinka päätätkin ratkaista sen, tiedä, että Gutenbergille on olemassa pari uutta koukkua rekisterityyleille (ja skripteille). Jos haluat lisätä tyylitaulukon jonoon sekä käyttöliittymälle että editorille, käytä koukkua enqueue_block_assets. Jos haluat lisätä tyylitaulukon vain editoria varten, aseta se jonoon koukkuun enqueue_block_editor_assets.
Kuinka käyttää tyyliä mukautetuissa lohkotyyleissä
Mukautetut lohkotyylit lisätään tietyn mallin luokkana lohkon uloimpaan HTML-tunnisteeseen.
Lohkotyylien CSS-luokka lisätään muodossa " is-style-<stylename>". Jos esimerkiksi nimeät tyylisi " outline", lohko saa luokan " is-style-outline".
Saatat kuitenkin kokea, että Gutenberg-editori ohittaa joissain tapauksissa tyylisi. Suosittelen editorin tyylin etuliitettä valitsimella editor-styles-wrappervarmistaaksesi, että tyylisi "voittavat". Muista, että tätä luokkaa ei ole käyttöliittymässä, joten varmuuden vuoksi saatat joutua lisäämään kaksi valitsinta (jos käytät samaa tyylitaulukkoa sekä editorissa että käyttöliittymässä):
.is-style-colored-bottom-border,
.editor-styles-wrapper .is-style-colored-bottom-border {
border-bottom: 2px solid purple;
}Mukautettujen lohkotyylien lisääminen PHP:llä
Mukautetun lohkotyypin lisäämiseen PHP:n avulla käytämme funktiota [register_block_style](https://developer.wordpress.org/reference/functions/register_block_style/)(). Dokumentaatiosta ei valitettavasti ole tietoa, mitä koukkua meidän pitäisi käyttää, mutta minulla on ollut onnea koukun kanssa init.
Sinun on tiedettävä lohkotyyppisi Gutenberg-nimiavaruusnimi, jotta voit lisätä siihen mukautetun tyylin. Kaikilla tavallisilla WordPress-lohkoilla on nimiavaruus " core", jota seuraa a /ja niiden nimen slug-versio. Esimerkiksi Gutenbergin nimi vakiokappalelohkolle on core/paragraph.
Mukautetun lohkotyylin rekisteröinti tapahtuu yksinkertaisimmassa muodossaan seuraavasti:
Yllä oleva koodi lisää mukautetun lohkotyylin Otsikkolohkotyyppiin, mikä johtaisi luokan is-style-colored-bottom-bordermihin tahansa otsikkoon, joka on valinnut tämän tyylin.
Tämä toiminto tarjoaa kaksi tapaa lisätä CSS:si (jos et ole lisännyt sitä jollain muulla tavalla); joko antamalla tekstin sisäinen CSS merkkijonona tai antamalla rekisteröidyn tyylisivun kahvan, jonka WordPress jonoittaa sinulle tarvittaessa.
Jos haluat lisätä upotetun tyylin (muista, että tämä vaikuttaa sekä editoriin että käyttöliittymään), lisää elementti " inline_style" funktiokutsuun ja kirjoita koko CSS merkkijonona sen arvoksi:
Jos haluat mieluummin tehdä funktiosta jonon tyylitaulukon, anna sen kahva elementille " style_handle".
Säädä tyylisivusi sijainti projektiisi sopivaksi. Tyylitaulukkoa käytetään sekä editorissa että käyttöliittymässä, mutta tällä kertaa käyttöliittymä pyytää erillisen pyynnön sisällyttää tämä tyylitaulukko. Tätä menetelmää ei suositella, jos lisäät useita lohkotyylejä. Käyttöliittymä hidastuu huomattavasti, kun pyydetään koko joukko erillisiä tyylisivuja.
Mukautettujen lohkotyylien lisääminen Javascriptillä
Jos haluat mieluummin lisätä lohkotyylisi Javascriptin avulla, tämä on yhtä helppoa kuin PHP:n kanssa.
Sinun on lisättävä Javascript-tiedosto editorin vain koukkuun: enqueue_block_editor_assets. Skriptisi ei luultavasti tarvitse riippuvuuksia, mutta lisään mieluummin ainakin ‘ wp-blocks‘ riippuvuudeksi.
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script(
'myguten-script',
get_template_directory_uri(). '/assets/js/myguten.js',
['wp-blocks']
);
});Säädä tiedostonimi ja sijainti projektiisi sopivaksi.
Javascript-tiedostossasi käytät objektin funktiota registerBlockStyle()mukautettujen wp.blockslohkotyylien rekisteröimiseen. Saman lohkotyylin lisääminen kuin yllä PHP:ssä näyttäisi tältä:
wp.blocks.registerBlockStyle('core/heading', {
name: 'colored-bottom-border',
label: 'Colored bottom border'
});Ja siinä se! Helppo nakki.
Lohkotyylien rekisteröinti poistetaan
Aivan kuten voit rekisteröidä lohkotyylin, myös lohkotyyli voidaan peruuttaa. Ehkä haluat poistaa joitain WordPressin oletuslohkotyylejä? Kuten lohkotyylien rekisteröinnin yhteydessä, voit myös poistaa lohkotyylien rekisteröinnin joko PHP:llä tai Javascriptillä. Mutta valinta näiden kahden menetelmän välillä ei ole enää etusija.
Et voi poistaa lohkon rekisteröintiä PHP:llä, jos se on rekisteröity Javascriptillä ja päinvastoin. Joten sinun on selvitettävä, kuinka poistettava tyyli rekisteröitiin, ja sovitettava se joko PHP:n tai Javascriptin kanssa. Uskon, että kaikki WordPressin lohkotyylit on lisätty Javascriptillä (älä lainaa minua tässä!). Joten jos haluat poistaa osan niistä, sinun on valittava Javascript-reitti.
Lohkotyylin rekisteröinnin poistaminen PHP:llä tehdään kutsumalla funktio unregister_block_style(), antamalla poistettavan lohkotyypin ja tyylin nimi. Esimerkiksi yllä tähän viestiin lisätyn tyylin rekisteröinnin poistaminen (olettaen, että se on rekisteröity PHP:lle) näyttäisi tältä:
add_action('init', function() {
unregister_block_style('core/heading', 'colored-bottom-border');
});Lohkotyylin rekisteröinnin poistaminen Javascriptillä tapahtuu samalla tavalla objektin unregisterBlockStyle()sisällä olevan funktion kanssa. wp.blocksJavascriptin kanssa on kuitenkin kysymys siitä, mikä komentosarja käynnistyy ensin, ja saatat kohdata ongelmia, kun komentosarjasi suoritetaan ennen rekisteröintiä. Tämän ratkaisemiseksi käytämme Gutenbergin vastinetta jQueryn "dokumentti valmiiksi" (jQuery(document).ready(function() { ... });), ja lisäämme myös toisen riippuvuuden skriptiisi.
Aloitetaan lisäämällä uusi komentosarjariippuvuus Javascript-tiedostoosi jonoon " 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 kääri Javascript-tiedostosi sisään rekisteröinnin poistamiskutsu sisään wp.domReady(function() { ... })seuraavasti:
wp.domReady(function() {
wp.blocks.unregisterBlockStyle('core/quote', 'large');
});Kuten yllä oleva koodi osoittaa, Javascriptin avulla voimme nyt poistaa WordPressin "Large" -tyylin lainauslohkosta. Jos kokeilisit tehdä samaa PHP:llä, se ei toimisi.
Sivuhuomautus lohkotyylien rekisteröinnin poistamisesta
Saatat huomata, että vaikka olet onnistuneesti poistanut kaikki mukautetut lohkotyylit lohkosta, editorin "Tyylit"-ruutu ei poistu. Se pysyy paikallaan, ja sen sisällä on vain valinta "Oletus". Jos haluat poistaa "Tyylit"-ruudun kokonaan, jotta editorit eivät hämmennä, voit yksinkertaisesti poistaa myös oletustyylin rekisteröinnin (esim wp.blocks.unregisterBlockStyle('core/quote', 'large'). ). Tämä poistaa Tyylit-ruudun kokonaan Gutenberg-editorista.