Tässä postauksessa opimme lisäämään WordPressin työkalurivejä lohkoomme eli tasausta ja lohkokohdistusta varten. Opimme myös lisäämään omia työkalurivejä omilla painikkeillamme mukautettuja toimintoja varten.
Työkalurivien lisääminen
Jotta voisimme lisätä jotain lohkomme työkalupalkkiin, meidän on käärittävä se, mitä haluamme siihen komponenttiin nimeltä BlockControls(from wp.blockEditor). Tämän komponentin sisään voimme lisätä joko yhden WordPress-komponenteista muista lohkoista tutuille vakiotyökaluriveille (esim. tasaus) tai voimme lisätä oman työkalurivin.
Lohkolla on oletuksena työkalurivi, joka sisältää vain lohkon kuvakkeen (Muunna toiminnoksi) ja lohkovalikko esim. lohkon poistamista varten. Emme voi poistaa niitä, mutta voimme lisätä omat painikkeemme ja työkalurivit niiden väliin.
Jotkut tietyt WordPress-komponentit lisäävät kuitenkin itse omat työkalurivit. Tällä hetkellä lohkomme näyttää työkalupalkin tekstin muotoilua varten, joka tulee RichTextlisätystä komponentista.
Lohkojen kohdistustyökalurivin lisääminen
Lohkojen kohdistustyökalupalkki on olemassa käytännössä kaikissa WordPress-lohkotyypeissä, joten lisätään se myös lohkoomme. Kulissien takana on komponentti BlockAlignmentToolbar, jonka voisimme lisätä, mutta suosittelen olemaan lisäämättä. Sen käyttäminen edellyttää, että käsittelet manuaalisesti luokkia lohkojen kohdistusta varten ja varmistat, että lohko laajentaa leveyttä editorissa valittaessa “Wide Width" tai “Full Width.” Onneksi WordPress on tehnyt sen toteuttamisesta todella helppoa, täysin automaattista.
PS: Aktiivisella teemalla on oltava aktiivisesti lisätty teematuki näille kahdelle lohkokohdistukselle. Näille voit lisätä tukea pitämällä add_theme_support('align-wide')koukussa after_setup_theme.
Voimme lisätä uuden ominaisuuden kohteen kokoonpanoomme registerBlockType(), nimeltään supports. On olemassa muutamia muita ominaisuuksia, mutta olemme kiinnostuneita tässä align. Voimme joko asettaa alignlisäämään truekaikki mahdolliset kohdistukset tai voimme tarjota joukon tarkasti, mitkä tasaukset sallimme lohkollemme.
Mikä antaa meille tämän editorissa:
Jos haluat esimerkiksi estää ketään käyttämästä Wide Widthiä tai Full Widthiä, voit antaa taulukon ja jättää nämä kaksi pois. Lohkojen kohdistusten nimet ovat seuraavat: left, right, center, wide, ja full.
supports: {
align: ['left', 'right', 'center']
},Tarvitsetko oletuskohdistuksen?
Oletuksena lohko ei saa lohkon kohdistusta. Halutessasi voit asettaa oletusarvon tekemällä attribuutin avaimella align, aseta tyypiksi stringja aseta oletusarvo siellä. WordPress yhdistää tämän määritteen automaattisesti lohkokohdistukseen.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},Tämän avulla aina kun uusi tyyppimme lohko luodaan, oletuslohkokohdistus keskitetään.
Estä kohdistuksen muotoilusotku? Ei meidän vikamme
Huomautus: WordPressin oletuslohkotyyli sotkee viestisi sisällön kulun, kun käytät vasemman ja oikean lohkon kohdistusta. Sama tapahtuu myös muiden WordPressin lohkotyyppien kanssa, eikä se ole pelkästään meidän lohkomme ongelma. Tämä johtuu floatin lisäämisestä elementtiin, mikä kutistaa pääelementin. Usko minua, olen yrittänyt rakentaa lohkon välttääkseni tämän ongelman. Ainoa asia, jonka olen huomannut toimivan kunnolla sekoittamatta muita lohkokohdistuksia, on tyylin lisääminen editoriin ja kelluntatyylin säätäminen.
Siitä huolimatta WordPress on tehnyt lohkojen kohdistuksen toteuttamisesta melko helppoa. Katsotaan nyt muita työkalurivejä, joita voimme käyttää.
Tekstin tasaustyökalurivin lisääminen
Jos haluat mieluummin työkalupalkin tekstin tasaamiseen, voit tehdä tämän lohkotasauksen sijaan – tässä työkalupalkissa on vain tasaus vasemmalle, keskelle ja oikealle. Itse asiassa voit käyttää sekä tekstin tasausta että lohkotasausta yhdessä – ne toimivat erikseen. Jotta käyttäjiä ei hämmennetä, voit esimerkiksi lisätä vain leveän ja täysleveän lohkon tasauksen tuen ja käyttää tekstin tasauksen työkalupalkkia vasemman-, keski- tai oikealle tasauksen ohjaamiseen. Näin vältät yllä mainitun editorin lohkojen virtauksen ongelman. On itsestäsi kiinni, kuinka haluat lohkosi toimivan.
WordPressissä on komponentti, joka tulostaa tekstin tasaustyökalurivin, mutta oikeiden luokkien lisäämistä ei automaattisesti käsitellä sisällön tasaamiseksi – sekä editorin sisällä että käyttöliittymässä (ainakin sikäli kuin olen löytänyt!). Meidän on lisättävä ja päivitettävä manuaalisesti määrite tekstin tasausta varten.
Lisätään BlockControlsjaAlignmentToolbar
Lisätään lopuksi BlockControlstyökalurivin edittulosteemme toimintoon. Tekstin tasauskomponentti on AlignmentToolbarpaketista wp.blockEditor.
Huomaa, että olen sulkenut pois kaiken sisällön, jonka loimme InspectorControlsedellisessä vaiheessa koodin lyhentämiseksi.
Rivien välissä #37on #42työkalurivimme koko sisältö (lukuun ottamatta ominaisuuden automaattisesti lisäämää lohkokohdistusta supportsja komponenttiemme lisäämää tekstin muotoilua RichText). Käytämme BlockControlstyökalupalkkiin pääsyä, ja sisään lisäämme AlignmentToolbarkomponentin.
Kuten olemme tehneet useaan otteeseen syötteiden kanssa, tarjoamme valuerekvisiitin tallennetun arvon näyttämiseen ja onChangerekvisiitin attribuuttimme päivittämiseen AlignmentToolbarkomponenttiin. Attribuutti, jota käytämme valitun tekstin tasauksen tallentamiseen, on määritetty muodossa textAlignmentja sen on oltava tyyppi string. Kuten tavallista, voit antaa a defaultvarmistaaksesi, että äskettäin luodut lohkot saavat oletusasetuksen.
Varmistaaksemme, että lohko tulostaa kohdistustiedot ja myös tyylittyy oikein (joten näemme itse asiassa tekstin muutoksen tasauksen) sekä editorissa että käyttöliittymässä, meidän on asetettava manuaalisesti oikea luokka rivitysdiv:lle. Molemmissa editja saveI määrittelee muuttujan, joka tarkistaa, onko attributes.textAlignmentasetettu. Jos näin on, rakennan luokan nimen WordPressin tekstin tasausstandardien mukaisesti, joka on "has-text-align-(left|center|right)". Tällä luokalla WordPress soveltaa tyyliään lohkoomme ja varmistaa, että lohkomme kohdistuu visuaalisesti oikein sekä editorissa että käyttöliittymässä.
Mukautettujen työkalurivien lisääminen omilla painikkeillamme
Voit myös lisätä omia painikkeita työkalupalkkiin, jotta voit tehdä mitä haluat napsauttaessasi niitä. Voit tehdä tämän lisäämällä komponentin Toolbarja lisäämällä tämän elementin IconButtonsisään (molemmat wp.componentspaketissa). Kaikki BlockControlstietysti sisällä.
Huomautus: WordPressin mukaan Gutenbergin muutosloki IconButtonon vanhentunut Button. En kuitenkaan näytä saavan kuvaketta näkyviin Buttonkomponenttia käyttämällä riippumatta siitä, mitä teen, vaikka sen pitäisi tukea sitä. Joten toistaiseksi käytän IconButton.
Voit tietysti yhdistää useita työkalurivin osia BlockControls. Alla olevalla koodilla lisäämme tekstin tasaustyökalurivin ja mukautetun työkalurivin yhdellä painikkeella sen jälkeen.
IconButton-komponentti hyväksyy WordPressin dashicon- kuvakkeen tai SVG:n ehdotukseen icon. Voimme tarjota joitain muita rekvisiitta, kuten classNameja label(näkyy työkaluvihjeessä, kun viet hiiren painikkeen päälle). Meitä kiinnostaa eniten onClickpotkuri, joka laukeaa, kun nappia painetaan. Täällä voimme tarjota toiminnon ja tehdä periaatteessa mitä haluamme. Mahdollisuudet ovat rajattomat ja riippuvat siitä, mitä haluat tehdä. Yllä olevassa koodissa yksinkertaisesti konsolin lokiin jotain, kun painiketta napsautetaan. Kun etenemme tässä opetusohjelmasarjassa, saat luultavasti ideoita kuinka saada mukautettu painike toimimaan haluamallasi tavalla.
Tätä olemme tehneet tähän mennessä. Sarjan seuraavassa vaiheessa lähdetään katselemaan edistyneempiä juttuja ja opimme luomaan omia komponentteja hyödyntämään valtion ja muita etuja.