Selles postituses õpime, kuidas lisada oma plokki WordPressi tööriistaribasid, st joondamiseks ja plokkide joondamiseks. Samuti õpime lisama oma tööriistaribasid oma nuppudega kohandatud toimingute tegemiseks.
Tööriistaribade lisamine
Selleks, et oma ploki tööriistaribale midagi lisada, peame sellesse pakkima selle, mida soovime, komponendi nimega BlockControls(alates wp.blockEditor). Selle komponendi sisse saame lisada kas ühe WordPressi komponendi standardsete tööriistaribade jaoks, mida tunneme teistest plokkidest (näiteks joondamine) või oma tööriistariba.
Vaikimisi on plokil tööriistariba, mis sisaldab ainult ploki ikooni (funktsiooni teisendamiseks) ja plokkide menüüd näiteks ploki eemaldamiseks. Me ei saa neid eemaldada, kuid saame nende vahele lisada oma nuppe ja tööriistaribasid.
Mõned WordPressi komponendid lisavad aga ise oma tööriistaribad. Praeguse seisuga näitab meie plokk tekstivormingu tööriistariba, mis pärineb RichTextlisatud komponendist.
Plokkide joondamise tööriistariba lisamine
Plokkide joondamise tööriistariba on olemas praktiliselt kõikidel WordPressi plokitüüpidel, seega lisame selle ka meie plokki. Kulisside taga on komponent BlockAlignmentToolbar, mille võiksime lisada, kuid ma soovitan seda mitte teha. Selle kasutamine nõuab plokkide joondamise klasside käsitsi haldamist ja ploki laiuse suurendamist redaktoris, kui valite „Wide Width" või „Full Width”. Õnneks on WordPress teinud selle rakendamise väga lihtsaks, täisautomaatseks.
PS: aktiivsele teemale peab nende kahe ploki joonduse jaoks olema aktiivselt lisatud teematugi. Saate lisada neile tuge, kui olete add_theme_support('align-wide')konksus after_setup_theme.
Saame lisada oma objekti konfiguratsioonile uue omaduse registerBlockType()nimega supports. On veel mõned funktsioonid, kuid see, mis meid siin huvitab, on align. Võime seada alignlisama truekõik võimalikud joondused või pakkuda massiivi täpselt, milliseid joondusi me oma ploki jaoks lubame.
Mis annab meile redaktoris selle:
Kui soovite näiteks keelata, et keegi kasutaks funktsiooni Wide Width või Full Width, saate esitada massiivi ja need kaks välistada. Plokkide joonduste nimed on järgmised: left, right, center, wide, ja full.
supports: {
align: ['left', 'right', 'center']
},Kas vajate vaikejoondust?
Vaikimisi ei saa plokk ploki joondust. Kui soovite, saate määrata vaikeväärtuse, tehes atribuudi võtmega align, määrake tüübiks stringja määrake vaikeväärtus seal. WordPress ühendab selle atribuudi automaatselt ploki joondusega.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},Sellega iga kord, kui luuakse uus meie tüüpi plokk, tsentreeritakse vaikeplokkide joondus.
Kas blokeerida joonduse kujundamise segadus? Pole meie süü
Märkus. WordPressi ploki vaikestiil ajab teie postituse sisu voolu sassi, kui kasutate plokkide vasakut ja paremat joondust. Sama asi juhtub ka teiste WordPressi plokitüüpidega ja see pole ainult meie ploki probleem. Selle põhjuseks on elemendile ujuki lisamine, mis ahendab põhielemendi. Uskuge mind, selle probleemi vältimiseks olen proovinud plokki konstrueerida. Ainus asi, mille avastasin, et töötab korralikult, ilma teiste plokkide joondustega segamini ajamata, on redaktorisse stiilide lisamine ja ujukistiili reguleerimine.
Sellest hoolimata on WordPress teinud plokkide joondamise rakendamise üsna lihtsaks. Vaatame nüüd teisi tööriistaribasid, mida saame kasutada.
Teksti joondamise tööriistariba lisamine
Kui soovite pigem tööriistariba teksti joondamiseks, saate seda teha ploki joondamise asemel – sellel tööriistaribal on meil ainult vasakule, keskele ja paremale joondamine. Tegelikult saate koos kasutada nii teksti joondamist kui ka ploki joondamist – need töötavad eraldi. Et kasutajaid mitte segadusse ajada, võite lisada näiteks laia ja täislaiuse plokkide joondamise toe ning kasutada teksti joondamise tööriistariba vasakule, keskele või paremale joondamise juhtimiseks. Seda tehes väldite ülalmainitud probleemi redaktoris plokkide vooluga. Teie otsustada, kuidas soovite, et teie plokk toimiks.
WordPressil on komponent teksti joondamise tööriistariba väljastamiseks, kuid sisu reaalseks joondamiseks pole õigete klasside lisamise automaatset käitlemist – nii redaktoris kui ka esiservas (vähemalt nii palju, kui ma olen leidnud!). Peame teksti joondamise atribuudi käsitsi lisama ja värskendama.
Lisades BlockControlsjaAlignmentToolbar
Lisame lõpuks BlockControlsoma editfunktsiooni tööriistariba väljundi jaoks. Teksti joondamise komponent on AlignmentToolbarpaketist wp.blockEditor.
Pange tähele, et olen InspectorControlskoodi lühendamiseks välistanud eelmises etapis loodud sisu.
Rea vahele #37jääb #42kogu meie tööriistariba sisu (peale atribuudi automaatselt lisatud ploki joonduse ja meie komponentide supportslisatud tekstivormingu ). RichTextMe kasutame BlockControlstööriistaribale juurdepääsu saamiseks ja sees lisame AlignmentToolbarkomponendi.
Nagu oleme sisenditega mitu korda teinud, pakume valuerekvisiidi salvestatud väärtuse kuvamiseks ja onChangerekvisiitri komponendi atribuudi värskendamiseks AlignmentToolbar. Atribuut, mida me valitud teksti joonduse salvestamiseks kasutame, on määratletud kujul textAlignmentja see peab olema tüüp string. Nagu tavaliselt, saate lisada a default, et tagada vastloodud plokkide vaikejoondus.
Tagamaks, et plokk väljastaks joondusteabe ja saaks ka õige stiili (nii näeme tegelikult teksti joondamist) nii redaktoris kui ka eesmises, peame mähisevagunis käsitsi seadistama õige klassi. Mõlemas editja saveI defineerime muutuja, mis kontrollib, kas attributes.textAlignmentsee on seatud. Kui see on nii, koostan klassi nime järgides WordPressi teksti joondamise standardeid, mis on "has-text-align-(left|center|right)". Selle klassiga rakendab WordPress meie ploki stiili ja veendub, et meie plokk oleks visuaalselt õigesti joondatud nii redaktoris kui ka kasutajaliideses.
Kohandatud tööriistaribade lisamine meie enda nuppudega
Samuti saate tööriistaribale lisada oma nuppe, et neil klõpsates teha mida iganes soovite. Selleks soovite lisada komponendi Toolbarja selle elemendi sisse lisada IconButton(mõlemad wp.componentspakendis). Kõik sees BlockControlsmuidugi.
Märkus: WordPressi andmetel on Gutenbergi muudatuste logi IconButtonkasutusest loobutud Button. Siiski tundub, et ma ei saa seda komponenti kasutades kuvada ikooni, Buttonhoolimata sellest, mida ma teen, kuigi see peaks seda toetama. Nii et praeguse seisuga kasutan IconButton.
Ilmselgelt saate rakenduses kombineerida mitu tööriistariba komponenti BlockControls. Alloleva koodiga lisame teksti joondamise tööriistariba ja kohandatud tööriistariba ühe nupuga pärast seda.
IconButtoni komponent aktsepteerib rekvisiidile WordPressi dashiconi ikooni või SVG- d icon. Saame pakkuda ka muid rekvisiite, näiteks classNameja label(kuvatakse kohtspikris, kui hõljutate kursorit nupu kohal). Rekvisiit, mis meid kõige rohkem huvitab, on ilmselgelt onClickrekvisiit, mis vallandub nupu klõpsamisel. Siin saame pakkuda funktsiooni ja teha põhimõtteliselt kõike, mida tahame. Võimalused on lõputud ja sõltuvad sellest, mida soovite teha. Ülaltoodud koodis lihtsalt konsooli login midagi, kui nuppu klõpsate. Selle õpetuste seeria edenedes saate tõenäoliselt ideid, kuidas panna oma kohandatud nupp tegema seda, mida soovite.
Seda oleme siiani teinud. Sarja järgmises etapis hakkame uurima keerukamaid asju ja õpime, kuidas luua oma komponente oleku- ja muude eeliste kasutamiseks.