Gutenbergin opetusohjelma aloittelijoille: Luo ensimmäinen lohkon laajennus

Gutenbergin opetusohjelma aloittelijoille


Jos aiot kehittää jotain WordPressille vuonna 2020, Gutenbergin sivuuttaminen ei yksinkertaisesti ole vaihtoehto. Laajennusten ja teemojen on kaikkien oltava yhteistyössä Gutenbergin kanssa ja tarjottava käyttökokemus, joka on yhdenmukainen kaikessa, mitä käyttäjä voi nähdä WordPress-kojetaulussa. Ja etenkin koska Gutenberg on nyt olennainen osa WordPressiä – kutsutaan yksinkertaisesti lohkoeditoriksi.

Gutenbergin kanssa aloittaminen ei ole kuitenkaan yhtä helppoa. Kun muutama vuosi sitten voit kirjoittaa laadukkaan WordPress-laajennuksen käyttämällä vain Notepadia, prosessi on nyt tullut paljon vaikeammaksi..

Gutenberg käyttää tekniikoita, kuten WordPress REST API, JavaScript ja React. Gutenbergin kanssa työskentelemiseen tarvittiin siis uusia vaatimuksia laajennuksille ja teemoille.

Hyvä uutinen on, että aiomme puhua kaikesta tästä tänään! Tämä viesti on Gutenbergin opetusohjelma aloittelijoille, jotka haluavat luoda laajennuksen Gutenbergille ensimmäistä kertaa.

Keskitymme ensisijaisesti Gutenbergin laajennuksen luomiseen liittyviin eri näkökohtiin – kehitysympäristön luomiseen, peruslaajennuksen luomiseen ja joihinkin lohkojen työskentelyn vivahteisiin.

1. Aseta Gutenbergin kehitysympäristösi

Gutenbergin kehittämisen aloittamiseksi tarvitset perustiedot JavaScripistä ja Reaktista. Tässä on JavaScriptin opetusohjelma WordPress-kehittäjälle. Lisäksi lisäpaketit Gutenbergissä voivat tarvita NodeJS-paketinhallinnan, npm.

Voit asentaa viimeisimmän vakaan version NodeJS -sovelluksesta Windows- tai MacOS-järjestelmään asennusohjelmien avulla virallisella sivustolla. Jos sinulla on Linux-palvelin, voit joko kääntää lähdekoodin tai käyttää vastaavaa paketinhallintaa (kuten apt ja yum). Jos esimerkiksi käytät Ubuntua, suorita seuraavat komennot terminaalissa.

sudo apt päivitys
sudo apt install nodejs npm

Kun asennus on onnistunut, voit suorittaa seuraavan komennon tarkistaaksesi NodeJS: n version.

nodejs – käännös

Kun olet valinnut nämä ruudut, on hyvä idea asettaa testattava WordPress-verkkosivusto verkkosivustollesi nykyisen Gutenberg-laajennuksen (itsenäinen laajennus) tai jopa sen kehitysversion avulla – voit hankkia sen GitHubilta.

⚠️ Huomaa; Vaikka Gutenberg on nyt rakennettu WordPressiin, kyseinen versio ei ole uusin. Gutenbergin kehitys tapahtuu edelleen melko erikseen, ja kaikki uusi sisältyy ensin Gutenbergin itsenäiseen laajennukseen. Ytimen varsinainen Gutenberg-versio ei ole vielä saanut merkittäviä päivityksiä sen jälkeen, kun se on sisällytetty WordPress 5.0: een. Haluat aina työskennellä Gutenbergin uusimman version kanssa, koska se antaa sinulle paremmat mahdollisuudet varmistaa tulevaisuutesi työstäsi ja varmistaa, että luomuksesi on kaiken sopusoinnussa sen kanssa, mitä myöhemmin tulee WordPress-ytimeen.

Toisessa huomautuksessa, jos aiot osallistua Gutenbergin ytimen laajennukseen, arkistolla on avustavat ohjeet kuinka määrittää paikallinen ympäristö ja asettaa muutokset tarkistettavaksi.

�� Viimeinkin, jos haluat mukauttaa olemassa olevia laajennuksia Gutenbergiin, tässä on yksityiskohtainen opetusohjelma tämän saavuttamiseksi: 1. ja 2. osa.

Voit harkita käyttöä, jotta pääset alkuun mallilaajennushakemistosta, joka on jo valmis tekemään yhteistyötä Gutenbergin kanssa Gutenbergin kattilalevylaajennus. Tällainen ratkaisu auttaa sinua perustiedostorakenteessa, jotta voit keskittyä laajennuksen sisältöön. Lataa ja asenna laajennus, jotta voit käyttää kattilalevyä täältä (zip). Kattilalevyn laajennuksen asentaminen ja aktivoiminen aktivoi näytelohkot, joita tutkimme tässä opetusohjelmassa. Löydät kunkin lohkon koodin vastaavasta hakemistostaan ​​kattilalevyn laajennuksen sijainnista.

2. Alkuasetukset

Gutenberg esittelee vain lohkojen käsitteen, joka korvaa tavallisen TinyMCE-editorin kankaan. Joissakin tapauksissa lohkot voivat myös korvata lyhyet koodit ja muut ylimääräiset sisältöelementit, joita plugins on käytetty WordPress-sisällön lisäämiseen eri tavoin.

Jos olet kiinnostunut rakentamaan Gutenbergille, yleisin tapa on rakentaa laajennus, joka luo uusia lohkoja ja antaa ne käyttäjän saataville. Juuri tätä aiomme tehdä tässä Gutenbergin opetusohjelmassa.

Seuraavat kohdat kuvaavat prosessia alusta loppuun.

Erityinen laajennus, jota aiomme rakentaa, tulostaa viestin, jolla on tietty tausta, joka on muokattavissa. Vain esimerkki rakennuksesta, mutta voit ottaa tässä esitetyt periaatteet käyttöön ja soveltaa niitä omaan, monimutkaisempaan laajennukseen.

Tällaisen laajennuksen rakentamisen perusteiden tulisi olla tuttuja. Aloitat luomalla uuden hakemiston WordPressin plugins-hakemistoon. Sijoita me siihen neljä tiedostoa:

  • index.php – Tämä tiedosto sisältää metatiedot uudesta Gutenberg-lohkosta.
  • block.js – Tämä JavaScript-tiedosto rekisteröi mukautetun Gutenbergin lohkon.
  • editor.css – Tämä tiedosto sisältää editorin tyylejä.
  • style.css – Tämä tiedosto sisältää lohkon etuosan tyylit.

Luettelon kaksi ensimmäistä tiedostoa huolehtivat lohkon rekisteröinnistä ja kaksi seuraavaa tiedostoa määrittelevät lohkon elementtien visuaaliset tyylit.

3. Lohkon rekisteröinti

Tässä vaiheessa, jossa rekisteröidään lohko Gutenbergiin, käsittelemme laajasti kahta asiaa:

  • liitännäisen metatietojen rekisteröiminen WordPressin PHP-moottorilla,
  • rekisteröinti lohkon React-kehyksellä, jota Gutenberg käyttää.

Index.php-tiedosto sisältää lohkon ja muokkausohjelman enqueue-varat.

  • Rekisteröi ensin mukautetut toiminnot add_action-toiminnolla.
  • Määritä sitten toiminnot, jotka luettelevat JavaScriptin ja CSS-tiedostojen polun lohkolle ja editorille käyttämällä wp_enqueue_style ja wp_enqueue_script funktioita.

Tehdään yhteenveto tästä alla olevan PHP-koodin avulla:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

toiminto gb_block_01_basic_editor_assets () {
// Skriptit.
wp_enqueue_script (
‘Gb-block-01-basic’,
plugins_url (‘block.js’, __FILE__),
taulukko (‘wp-lohkot’, ‘wp-i18n’, ‘wp-elementti’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Tyylit.
wp_enqueue_style (
‘Gb-block-01-perus-editori’,
plugins_url (‘editor.css’, __FILE__),
taulukko (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Tämä määrittelee peruseditorin resurssit. Lohkoon tarvitaan vain CSS-tiedosto, joka määritetään wp_enqueue_style-toiminnon kautta.

Block.js-tiedosto kuvaa lohkon ominaisuuksia Gutenberg-editorissa. Määrittelemme seuraavat määritteet ja ominaisuudet:

  • otsikko – lohkon otsikko
  • kuvake – kuvake, joka näkyy lohkolle; voit valita minkä tahansa kuvakkeen tämä dashicons-kokoelma
  • luokka – ryhmä, johon lohko kuuluu. Esimerkkejä ryhmistä lohkoja ovat "yhteinen," "alustus," "upottaa."
  • edit – JavaScript-toiminto, joka palauttaa DOM-elementin. Käytä wp.element.createElement-toimintoa luodaksesi mukautetun kappaleen DOM-elementin p, johon muokattu teksti kirjoitetaan. Gutenberg vetoaa tähän ominaisuuteen, kun käyttäjä napsauttaa lohkoa editorista.

(toiminto () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
otsikko: __ (‘GB Basic’, ‘GB’),
kuvake: ‘kilpi-alt’,
luokka: ‘yleinen’,

muokkaa: toiminto (rekvisiitta) {
return wp.element.createElement (
‘P’,
{className: props.className},
‘Hei maailma! – toimittajalta (01 Basic Block). ‘
);
},

});
}) ();

Samoin voit luoda tallennusominaisuuden, joka otetaan käyttöön, kun lohko valitaan käyttöliittymästä.

Yllä olevassa koodissa määrittelimme p-elementin luokan nimen props.className, joka luo luokan nimen, joka alkaa wp-lohkolla, jota seuraa lohkon nimi. Tämän Gutenberg-opetusohjelman seuraavassa osassa määritellään tämän luokan tyylit.

4. Lohkon mukauttaminen

Kuten edellisessä osassa keskusteltiin, tämän oppaan seuraava askel on määritellä lohkoelementtien ominaisuudet. Määritetään taustaväri, tekstin väri ja reunus.

.wp-block-gb-basic-01 {
väri: # 000;
tausta: mistyrose;
reuna: 0,2rem kiinteä punainen;
}

CSS-tiedostojen sijasta voit lisätä myös SCSS-tiedostoja ja kääntää ne Solmulla. Edelleen, tässä on opetusohjelma Gutenbergin elementtien muotoilusta CSS-temppuilta.

Ensimmäisen Gutenberg-opetusohjelman tulokset

Olemme vihdoin valmiita testaamaan luomaamme lohkoa. Jos Gutenberg-laajennus on aktivoitu, siirry kohtaan + -kuvaketta ja tarkista, näkyykö uusi lohko siellä.

uusi Gutenbergin lohko

Seuraavaksi, kun napsautat lohkoa, huomaat, että ylhäältä tuleva viesti näkyy taustan värin ja reunan kanssa CSS-tiedostosta:

estää toiminnassa

johtopäätös

Olemme tulossa ensimmäisen Gutenbergin opetusohjelman loppuun. Toivon, että tästä on ollut apua. Myönnettäköön, että mitä olemme rakentaneet täällä, se ei ole erittäin monimutkainen, mutta sen pitäisi antaa sinulle kuvan perusrakenteista, kun työskentelet Gutenbergin kanssa, ja kuinka suunnitella seuraavaa liitännäistäsi.

Ensin keskustelimme vaiheista Gutenbergin kehitysympäristön perustamiseksi. Seuraavaksi esittelemme kattilalevyn laajennuksen, joka auttaa jatkokehityksessä. Sitten keskustelun painopiste siirtyi eri vaiheisiin uuden lohkon rekisteröinnissä ja muotoilussa.

Toivon, että tämä Gutenberg-opetusohjelma on auttanut sinua luomaan ensimmäisen Gutenberg-laajennuksesi!

Jos sinulla on kysyttävää, ampua alla olevat kommentit.

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map