Luo mukautettu Gutenberg-lohko – Osa 1: Kehitysympäristön määrittäminen

Tämän opetussarjan ensimmäisessä osassa, kuinka luodaan mukautettuja Gutenberg-lohkoja, meidän on määritettävä kehitysympäristömme. Tarvitsemme paikan, johon voimme kirjoittaa koodimme ES6/ESNext-syntakseihin ja kääntää sen liikkeellä ollessamme. On mahdollista kirjoittaa mukautettuja Gutenberg-lohkoja käyttämällä ES5-syntaksia ilman Webpackin ja Babelin määrittämistä. Mutta koodin lukeminen ja kirjoittaminen on todella hankalaa. Jos et ole varma, miksi meidän on tehtävä tämä kaikki tai mikä ero on, lue tätä selittävä viestini. Voin taata, että kun palaat takaisin, olet vakuuttunut ottamaan tämän ylimääräisen askeleen kirjoittaaksesi paremman koodin.

Oletan, että sinulla on jo paikallinen WordPress, joka toimii LAMP-pinossa tai vastaavassa. Ja että kirjoitat joko teemaa tai laajennusta. Mitä tulee minuun, laitan koodini kehittämääni teemaan awp-starter-theme, joka sijaitsee WordPress-teemakansiossani. Haluan erottaa Gutenberg-kehitykseni kaikista muista teematiedostoista, joten luon alihakemiston gutenberg-devteemani juurikansioon. Se on projektikansioni ja kansio, johon viittaan opetusohjelmasarjan loppuosassa.

Olen jo kirjoittanut yksityiskohtaisen oppaan kehitysympäristön määrittämisestä Gutenbergille, joten käyn tässä nopeasti läpi vaiheet. Jos et ole koskaan tehnyt tätä ennen, suosittelen lukemaan linkitetyn viestin alla, koska se sisältää enemmän tietoa kuin mitä löydät täältä!

Määritä projekti webpackilla

Käytä päätettä (iOS-pääte tai Windows cmd toimivat molemmat hyvin) navigoi projektikansioosi (minun tapauksessani awp-starter-theme/gutenberg-dev). Aloitamme uuden projektin pyytämällä npm:ää luomaan package.jsonyleisen sisällön.

Luodaan pakettia.json

npm init -y

Seuraavaksi asensen WordPressin skriptejä, jotka auttavat meitä paljon määrityksessä tällä komennolla (joka lisää alikansion node_modulesja package-lock.jsonmyös):

npm install --save-dev --save-exact @wordpress/scripts

Avaa package.jsonprojektikansiossasi oleva tiedosto editorissa ja etsi scriptsominaisuus. Korvaamme sen kahdella skriptillä juuri asentamastamme WordPress-paketista:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

"Build"-skripti kokoaa tiedostoni. Mutta koska se on ajettava manuaalisesti joka kerta kun muutos tehdään, käytämme mieluummin "aloitus"-skriptiä kun kehitämme. Se käynnistää sitten "katselutilan", jossa se kuuntelee mihin tahansa komentosarjatiedostoosi tehtyihin muutoksiin ja kääntää ne uudelleen aina, kun tallennat muutokset.

Verkkopaketin konfigurointi

Seuraava vaihe on verkkopaketin määritystiedoston luominen. Teen tämän, koska en halua käyttää oletuslähdettä ja tulosteen tiedostonimiä ja kansioita. Haluan itse päättää, missä lähdetiedostoni ovat ja mihin käännetyt tiedostot päätyvät.

Asentamamme paketin avulla @wordpress/scriptsvoimme periä WordPressin verkkopaketin konfiguraation ja ohittaa vain ne osat, joita haluamme muuttaa.

Luo projektikansioomme uusi tiedosto nimeltä webpack.config.jsja avaa se editorissa. Lisää tämä sisältö:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Tämä määrittää syöttötiedostoni (tällä hetkellä vain yhden) entryomaisuuteen, joka sijaitsee srcprojektikansioni alikansiossa nimeltä block-awhitepixel-myfirstblock.js. Nimeä tiedostosi luonnollisesti haluamallasi tavalla, mutta muista muuttaa sekä avain että arvo. Koska outputkiinteistössä pyydän webpackia kokoamaan syöttötiedostoni syöttöavaimella tiedostonimenä. Kiinteistössä pathpyydän sijoittamaan kaikki käännetyt tiedostot yhden askeleen päähän projektikansiostani teeman assets/jskansioon. Säädä tiedostonimet ja sijainti projektiisi sopivaksi. Katso yksityiskohtainen opas, jos olet hämmentynyt.

Luo src/projektikansioon alikansio, johon laitamme kaikki lähdetiedostot. (Säädä, jos vaihdoit entrysijaintia kohdassa webpack.config.js). Luo tiedosto block-awhitepixel-myfirstblock.jstähän ja jätä se toistaiseksi tyhjäksi.

On vielä yksi vaihe – ja tämä koskee meitä, jotka haluamme käyttää ESNextin uusimpia ominaisuuksia. WordPress Babel -oletuskokoonpanosta puuttuu tämä valitettavasti. Ja koska haluan käyttää toimintoja, kuten nuolitoimintoja, minun on määritettävä myös Babel.

Asetetaan Babelia

Ensin meidän on asennettava joitain paketteja Babel-kokoonpanollemme kirjoittamalla tämä komento:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Kun tämä on tehty, luo uusi tiedosto .babelrcprojektikansioomme. Tässä laitamme Babel-kokoonpanomme:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

Ja siinä kaikki kehitysympäristömme asetuksissa!

Rakenna komentoja

Koko kehittämisen aikana sinun on käännettävä Javascript-tiedostosi. Lisäsimme package.jsonkaksi skriptiä juuri tätä varten.

Aina kun haluamme kehittää Javascript-tiedostojamme, suoritamme tämän terminaalissa:

npm run build

Tämä komento suorittaa käännöksen aina, kun suoritat tämän terminaalissa. Kokeile, ja sinun pitäisi nähdä, että se luo tiedoston block-awhitepixel-myfirstblock.js(yhdessä yhden tai kahden muun "resurssitiedoston" kanssa) määrittämääsi tulostuskansioon, jonka määritit kohdassa webpack.config.js. Minun tapauksessani se näkyy awp-starter-theme/assets/js/.

Yllä olevan komennon käyttäminen toimii hyvin, mutta se on ärsyttävää toistaa aina, kun teet muutoksia tiedostoihisi. Luultavasti mieluummin suoritat tämän komennon:

npm run start

Tämä asettaa päätelaitteen "katselutilaan", havaitsee kaikki Javascript-tiedostoihisi tallennetut muutokset ja kääntää ne samalla kun menet. Aina kun tiedostosi sisältävät virheitä, pääte lähettää virheilmoitukset ulos. Paina CTRL + C pysäyttääksesi kelloprosessin.

Viitteenä projektikansioni näyttää nyt samalta kuin kuva. Erotan mieluummin kaikki konfigurointitiedostot ja erityisesti alikansion node_modules/(joka sisältää kirjaimellisesti kymmeniä tuhansia tiedostoja) muusta teemakoodistani. Helpottaa ohitussääntöjen määrittämistä – esimerkiksi SCSS-kääntäjät tai git ignore. Olemme jo määrittäneet verkkopaketin konfiguraation kokoamaan lopulliset tiedostot suoraan awp-starter-theme/assets/js/muiden Javascript-tiedostojen kanssa teemalleni.

Olemme nyt valmiita seuraavaan osaan, jossa aloitamme rekisteröimällä ensimmäisen mukautetun lohkomme.