Tässä osassa kirjoitamme Javascriptin rekisteröidäksemme ja määrittääksemme mukautetun lohkomme. Lopuksi rekisteröimme skriptin PHP:llä ja teemme tarvittavan PHP-koodin, jotta WordPress tunnistaa sen uudeksi lohkoksi.
Ensin lyhyt huomautus WordPress Gutenbergin toimintojen ja komponenttien käyttämisestä.
Globaali wppaketti ja tuhoutuminen
Kun olemme Javascript-tiedostossa, joka on jonossa Gutenberg-editorissa, meillä on pääsy globaaliin objektiin/pakettiin: wp. Tämä on hyvin, vaihteleva suuri Javascript-objekti ja se sisältää koko joukon hyödyllisiä komponentteja ja toimintoja, joita käytämme lohkojen luomiseen. Kun kirjoitat Javascriptiä mukautetuille lohkoille, viittaat wpmelko paljon.
Siksi on yleistä, sekä nykyaikaisessa Javascriptissä että Reactissa, tuhota se, mitä haluamme käyttää siitä. Pohjimmiltaan se tarkoittaa vain sitä, että määrittelemme paikalliset muuttujat suuremman rakenteen osista. Esimerkiksi ensimmäinen käyttämämme funktio registerBlockType()on sisällä wp.blocks. Voisimme kutsua funktion seuraavasti:
wp.blocks.registerBlockType();Mutta se on helpompi tuhota näin:
const { registerBlockType } = wp.blocks;
registerBlockType();Nyt voit viitata funktioon suoraan ilman sen rakenteen etuliitettä. Siitä tulee paljon hyödyllisempää, kun viitataan toimintoihin tai komponentteihin, joita toistamme usein.
Teemme tässä sarjassa uudelleenjärjestelyjä, ja kun etenemme opetusohjelmassa, näemme kuinka paljon luettavampaa ja lyhyempää koodimme tulee.
Uuden lohkon rekisteröinti
Uuden mukautetun lohkon rekisteröintitoiminto on registerBlockType()saatavilla wp.blockspaketissa. Se hyväksyy kaksi parametria; ensin merkkijono, jossa on lohkon nimiavaruus ja nimi, ja toiseksi objekti täydellä lohkokokoonpanolla.
Gutenberg odottaa, että kaikilla lohkoilla on nimiavaruus ja nimi, joiden välissä on kauttaviiva. Nimiavaruuden tarkoituksena on varmistaa, että lohkosi nimi ei ole ristiriidassa muiden samaa nimeä käyttävien lohkojen kanssa. Kaikki WordPressin lohkot käyttävät nimiavaruutta core. Esimerkiksi WordPressin vakiokappalelohkolla on nimi core/paragraph. Jos valitset toisen nimitilan, voit myös luoda lohkon nimeltä kappale ilman ongelmia.
Valitse sinulle ainutlaatuinen slug-version nimiavaruus. Käytän awptässä sarjassa nimiavaruutta (lyhyt versio A White Pixelistä).
Avaa lähdetiedosto, jonka loimme viimeisessä vaiheessa; src/block-awhitepixel-myfirstblock.js, editorissa. Ensin soitetaan registerBlockTypedestructuredista wp.blocksnimellä awp/firstblock. Säädä nimeäsi ja nimiavaruuttasi.
const { registerBlockType } = wp.blocks;
registerBlockType('awp/firstblock', {
// Your block configuration and code here
});Toisessa parametrissa, lohkokonfiguraatioobjektissa, meidän on määritettävä muutama ominaisuus, jotta se rekisteröidään onnistuneesti. Muista, että lohkokokoonpano on objekti, mikä tarkoittaa, että sinun on kirjoitettava kaikki avain + arvo -pareina pilkulla erotettuina. Mahdollisia konfigurointiominaisuuksia on melko vähän, joten käydään nämä läpi ja näemme lopullisen koodin lopussa.
Pakollinen: otsikko
Ensimmäinen vaadittu ominaisuus on title. Tämä on nimi, joka tulee näkyviin, kun valitset lohkojen välillä. Aseta tämä ominaisuus minkä tahansa nimen mukaan merkkijonossa.
Lisäämme otsikoksi seuraavaa:
title: 'My first block',PS: Tarkastellaan uudelleen, kuinka kirjoitamme kaikki lohkomme merkkijonot varmistaaksemme, että ne voidaan kääntää osassa 8. Mutta toistaiseksi pidämme sen yksinkertaisena ja kirjoitamme vain merkkijonoja.
Pakollinen: luokka
Ominaisuus categorymäärittää, missä lohkokategoriassa lohkosi näkyy, kun valitset lohkoja lisättäväksi editorissa. Mahdolliset arvot ovat common, formatting, layout, widgets, embed.
Laitetaan se commonensimmäiseen lohkoluokkaan.
category: 'common',Valinnainen: kuvake
Jos olet käyttänyt Gutenbergiä, olet todennäköisesti huomannut, että kaikissa lohkoissa on kuvakkeet. Voit lisätä lohkoosi kuvakkeen joko merkkijonolla, joka viittaa mihin tahansa WordPressin Dashiconiin, tai voit tarjota mukautetun svgelementin.
Valitsen vain yhden WordPressin dashiconeista, hymiön – mutta voit valita minkä tahansa. Huomaa, että ohitat "dashicons-":n lisäämisen kuvakeluokkasi nimeen.
icon: 'smiley',Valinnainen: kuvaus
Voit antaa kuvauksen, joka näkyy Asetukset-sivupalkissa (oikealla), kun esto on aktiivinen.
Lisään vain lyhyen tekstin esimerkkinä:
description: 'Learning in progress',Valinnainen: avainsanat
Gutenberg tukee hakutoimintoa valittaessa lohkotyyppejä. Voit tarjota joukon mahdollisia osumia kiinteistössä keywords. Ilman keywordssitä löytäisit lohkon vain etsimällä sen nimeä.
Lisään exampleja test, jotta voimme helposti löytää mukautetun lohkomme, kun alamme kirjoittaa jotakin näistä avainsanoista.
keywords: ['example', 'test'],Valinnainen: attribuutit
Kiinteistö attributeson erittäin tärkeä ominaisuus, johon palaamme melko usein tässä opetusohjelmasarjassa. Tänne tallennat lohkosi jäsennellyt tiedot ja käyttäjän syöttämät tiedot. Voit kuvitella sen muuttujina. Emme lisää sitä toistaiseksi, mutta palaamme tähän varmasti pian.
(Tyylikäs) pakollinen: muokkaa ja valinnainen: tallenna
Sisältö editja saveominaisuudet on itse asiassa paikka, jossa lisäät kaiken koodisi sekä editorin tulostukseen että käyttöliittymän hahmonnukseen. Molemmat ominaisuudet odottavat funktion, jonka pitäisi palauttaa jonkin verran tulosta.
Ominaisuus editkuvaa lohkosi rakennetta editorissa. Kiinteistö savekäsittelee pohjimmiltaan kahta asiaa; lohkotulostuksesi käyttöliittymässä, mutta myös rakenne siitä, kuinka lohkosi tallennetaan tietokantaan. Työskentelet enimmäkseen, editkoska tänne lisäät syötteitä asioiden syöttämiseen tai valitsemiseen sekä lohkon tietojen päivittämiseen. Funktio saveei saa päivittää tai muokata tietoja millään tavalla, sen pitäisi vain tulostaa.
Gutenbergin täytyy pystyä rakentamaan uudelleen lohkosi kaikkine asetuksineen editorissa savefunktion (ja attribuuttien) tulosten perusteella. Jos Gutenberg avaa joskus viestin, jossa aiemmin tallennettu lohkotulos poikkeaa (jopa hieman) tallennuksen määrittämisestä, lohkosi mitätöityy.
Voin taata, että kohtaat tämän paljon kehittäessäsi mukautettuja lohkoja. Kun näin tapahtuu, sinun on poistettava lohko (työkalupalkin pisteistä) ja lisättävä se uudelleen. Suosittelen myös selaimen päivittämistä (F5 tai CTRL+R).
WordPressillä on oma dokumentaatiosivu lohkon muokkaus- ja tallennustoimintoja varten, jos haluat lisätietoja.
Mitä tulee ensimmäiseen lohkoomme, tuotetaan jotain perustietoa. Palautamme saman molemmille editja save; ":)" käärittynä <div>. Lohkon kuvake on loppujen lopuksi hymiö.
Muut ominaisuudet
Kohdalle registerBlockType; parent, supports, transforms, example, ja styles. Ohitamme nämä toistaiseksi, koska useimmat ovat edistyneempää tai räätälöityä lohkorakennusta varten. Jos olet kiinnostunut lukemaan näistä lisää, tutustu WordPressin dokumentaatioon.
Lopullinen rekisterilohkokoodi
Koodimme näyttää nyt suunnilleen tältä.
Tällä meillä on tarpeeksi, jotta lohkomme rekisteröidään onnistuneesti mukautetuksi lohkoksi. Katsotaanpa sitä käytännössä Gutenberg-editorissa.
Muistitko kääntää Javascriptin? Edellisessä vaiheessa opimme, että emme voi ladata tätä Javascript-tiedostoa Gutenbergiin; tarvitsemme käännetyn version. Yleensä kehität npm run startjuoksemalla taustalla tai voit juosta npm run buildnyt kerran. Sen pitäisi kääntää lähde-Javascript ja sijoittaa se minne tahansa määritit sen sijoitettavaksi ja nimettäväksi webpack.config.js.
Lohkon rekisteröinnin PHP-osa
Jokaista lohkoa varten sinun on rekisteröitävä Javascript-tiedosto, ja tämä on aivan sama kuin minkä tahansa muun WordPressin skriptin rekisteröiminen – käyttämällä [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)(). Huomaa, että rekisteröimme skriptin, emme aseta sitä jonoon. Tämä johtuu siitä, että meidän on myös kutsuttava PHP-funktio rekisteröimään jokainen mukautettu lohko, ja tämä toiminto vastaa komentosarjan jonosta, kun sitä tarvitaan.
Pidän Gutenbergiin liittyvää koodia mieluummin erillisessä tiedostossa teemoissani. Mutta voit, ja me aiomme tässä opetusohjelmassa, yksinkertaisesti kirjoittaa kaiken PHP-koodin suoraan teeman sisään functions.phpyksinkertaisuuden vuoksi.
Suosittelen käyttämään initkoukkua toimintoasi varten, ei enqueue_block_assets. Voimme yhdistää sekä skriptin että lohkon rekisteröinnin.
PHP-funktio, jota käytämme uuden lohkon rekisteröintiin, on [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Samoin kuin Javascriptin registerBlockType()se hyväksyy kaksi parametria; lohkon nimiavaruus ja nimi sekä taulukko argumenteilla. Varmista, että annat täsmälleen saman nimiavaruuden ja nimen PHP:ssä kuin Javascriptissä.
Toisessa argumentissa on muutamia mahdollisia argumentteja (joihin palaamme myöhemmin tässä sarjassa). Mutta tärkein on se editor_script, missä annat wp_register_script()rekisteröidyn skriptin kahvan (ensimmäinen parametri).
Ja siinä se!
Meidän lohkomme Gutenberg-editorissa
Nyt kun päivität editorin jossain viestissä, sinun pitäisi löytää lohkomme – joko avaamalla yhteinen luokka tai etsimällä mitä tahansa antamaasi avainsanoja tai nimeä.
Lohkomme tekee yksinkertaisen ":)"-merkin sekä editorissa että käyttöliittymässä. Toistaiseksi et voi muokata mitään lohkossa, mutta sen opimme seuraavissa vaiheissa!