Yleiskatsaus WordPressin luomislohkokomentosarjasta

Virallinen WordPress Editor (Gutenberg) -tiimi on tarjonnut sinulle siistin pienen skriptin, jonka avulla voit luoda lohkolaajennuksen heidän @wordpress/create-blocknpm-skriptillään.

Tämä artikkeli antaa yleiskatsauksen WordPressin luomislohkokomentosarjasta sekä sen tuottamia tietoja.

HUOMAUTUS: Tämä artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota

Vaikka teoriaa voidaan edelleen soveltaa, jotkin tämän artikkelin tiedoista eivät ehkä ole enää yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit tarkastella päivitettyä Luo Block Script -oppaamme täältä.

Luo lohkokomentosarjan suorittaminen

Virallinen dokumentaatio antaa sinulle muutamia erilaisia ​​parametreja, jotka siirretään npm init @wordpress/blockkomentoon.

Asetuksissani suoritin sen interaktiivisessa tilassa jättämällä pois parametrit. Kirjoitin seuraavan komennon päätteeseeni (kun cdedin wp-content/pluginskansioon):

npm init @wordpress/block

Käsikirjoitus kysyi minulta muutaman kysymyksen auttaakseen minua rakentamaan lohkoni.

Haluan luoda aloituslohkon plugin-idealle, joka minulla on (’Wholesome Notes’), vastasin kysymyksiin seuraavasti:

• Tunnistamiseen käytetty lohkoslug (myös liitännäinen ja tuloskansion nimi): Haluan, että lohkoani kutsutaan nimellä Wholesome Notes, joten kirjoitin wholesome-notes.

• Lohkon nimen sisäinen nimiavaruus (jotain ainutlaatuista tuotteillesi): Tämän pitäisi olla yksilöllinen kaikille syöttämilleni tuotteille wholesome-code, koska tämä on yritykseni nimi. Jälkikäteen ajateltuna tämä olisi parempi oikosulussa wctai wcltd.

• Lohkosi näyttöotsikko: Kirjoitin laajennuksen otsikon, Wholesome Notes.

• Yleiskatsaus WordPress Create Block Script En ollut 100% varma, mitä halusin kirjoittaa tänne, joten kirjoitin vain tekstiä, jota aion muuttaa myöhemmin.

• Dashicon, joka helpottaa lohkosi tunnistamista (valinnainen): WordPress Dashicons -resurssin nopeasti esille tuodaessa valitsin sen, admin-commentskoska siinä on muistiinpanotyylikuvake.

• Kategorian nimi, joka auttaa käyttäjiä selaamaan ja löytämään lohkosi (käytä nuolinäppäimiä): Valitsin layout, vaikka rehellisesti sanottuna tämäntyyppinen lohko tarvitsee luultavasti oman kategoriansa. Se on asia, jota voin muuttaa myöhemmin.

Juoksemassanpm init @wordpress/block

Komentosarja meni sitten eteenpäin ja asensi kaikki tarvitsemansa riippuvuudet npm:n kautta (tässä vaiheessa se vain asentaa wp-scriptsnpm-paketin riippuvuutena).

Ulostulon tarkastus

Yllä olevilla komennoilla WordPress Create Block Script antaa sinulle seuraavan tulosteen:

• terveellisiä muistiinpanoja
  • rakentaa
    • index.asset.php
    • index.js
    • index.js.map
  • solmu_moduulit
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • editor.css
  • package.json
  • tyyli.css
  • terveellinen-notes.php

@wordpress /block output

Seuraavassa on erittely kustakin näistä tiedostoista ja kansioista.

wholesome-notes

Tämä on laajennuksen juurikansio, sillä on sama nimi kuin se, jonka annoin ’slug’:lle asennuskysymyksissä.

/build

Tämä on koontikansio. Se sisältää kaikki /srckansiosta luodut JavaScript- ja PHP-resurssit. Nämä asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.

/build/index.assets.php

Tämä PHP-tiedosto luodaan automaattisesti, kun /srckansio käännetään. Se sisältää joukon kaikkia laajennuksen käyttämiä WordPress Editorin (Gutenberg) JavaScript-syvyyksiä. Se asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.

/build/index.js

Tämä on tärkein käännetty JavaScript-tiedosto, ja se asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.

/build/index.js.map

Tämä tiedosto luodaan vain, kun käännät resursseja kehitystilaa varten (IE käytät, npm startetkä npm run buildkäännettäessäsi resursseja. Se on hyödyllinen tiedosto JavaScript-virheenkorjajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot virheiden sattuessa.

/node_modules

Tämä on kansio, johon kaikki laajennuksen JavaScript-riippuvuudet on asennettu.

/src

Tämä on kansio, joka sisältää kaikki liitännäisesi kääntämättömät resurssit.

/src/index.js

Tämä on tärkein kääntämätön JavaScript-tiedosto WordPress Editor (Gutenberg) -lohkollesi. Se sisältää aluksi kaiken lohkon logiikan.

/.editorconfig

Tämä tiedosto sisältää hyödyllisiä esiasetuksia IDE:lle (Integrated Development Environment), kuten Visual Studio Code.

/.gitignore

Tämä tiedosto käskee gitiä ohittamaan tietyt tiedostot, kun sitoudut git-tietovarastoon (kuten GitHubiin).

/editor.css

Tämän tiedoston tyylit tulostetaan vain editorissa, se asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.

/package.json

Tämä tiedosto sisältää kaikki laajennuksen npm-riippuvuudet ja komennot, jotka voit suorittaa. Huomaa, että laajennus käyttää wp-scripts( @wordpress/scripts) pohjanaan, joten alun perin ladatut riippuvuudet ovat tälle paketille.

/style.css

Tämän tiedoston tyylit tulostetaan editorissa ja sivuston etupäässä ne asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.

/wholesome-notes.php

Tämä on laajennuksen päälataustiedosto. Sen nimi asetettiin "slugin" kautta, jonka syötimme alkuperäiseen asennusohjelmaan. Se asettaa jonoon kaikki laajennuksen tarvitsemat JavaScript-omaisuudet.

Pluginin tutkiminen

Kun olet luonut laajennuksen, aktivoit sen ja lisäät sen editoriin, se näyttää seuraavilta kuvakaappauksilta (etuosa ja tausta).

Luo lohkokomentosarja – oletuskäyttöliittymä

Luo lohkokomentosarja – oletustakaosa

Kuten näette, lohko tarjoaa meille perustulosteen, jota voimme helposti muokata toteuttamaan oman lohkomme.

Estä CSS

Kuten kuvakaappauksista näet, esimerkkikoodi editor.csssovelluksessa toteuttaa red boarderin editorissa, kun taas esimerkkityylejä styles.csssovelletaan sekä etu- että taustajärjestelmään.

Estä JavaScript

Aloituskohta juuri luodun lohkon mukauttamiseen on /src/index.jstiedosto.

Tässä tiedostossa on runsaasti sisäistä dokumentaatiota, joka selittää, miksi tiettyjä toimintoja tuodaan, kuten registerBlockTypelohkon rekisteröintiä ja __i18n-tekstin käännöstukea varten.

Luo Block index.js upotetut kommentit

Se tarjoaa myös joitain hyvin peruslähtöjä editja savefunktioille, jotka siirretään lohkorekisteröintiin.

Huomautus: Skriptin myöhemmissä versioissa ne on purettu omiin tiedostoihinsa ja sisällytetty moduuleina tähän tiedostoon.

Luo Block index.js Muokkaa ja tallenna

Blockin rakentaminen

Luontilohkon npm-dokumentaation mukaan voit käyttää useita komentoja päätteessäsi (laajennuksen juurikansiosta) esimerkiksi koodin laadun tarkistamiseen tai pakettien päivittämiseen.

Tärkeimmät komennot, joita tarvitset lohkon rakentamiseen, ovat npm startlaajennuksen kääntäminen kehitystä varten ja npm run buildlopullisen version kääntäminen.

wp-scripts( @wordpress/scriptsnpm-paketista) on laajennuksen pääasiallinen riippuvuus. Tämä riippuvuus tiivistää kaikki lohkosi työkalut, joten voit keskittyä JavaScriptin rakentamiseen.

Kulissien takana kokoaa kaikki resurssit wp-scriptstiedostoon .webpack``/build/index.js

Voit lukea lisää wp-scriptsLohkoeditorin käsikirjasta ja lisätietoja verkkopaketin koontimäärityksestä käsikirjan "JavaScript Build Setup" -osiosta.

Luo lohkon verkkopaketin asennuksen laajentaminen

Lohkosi koodikanta voi kattaa useita tiedostoja tai jopa sisältää useita alilohkoja tai sisältää monimutkaisia ​​tyylejä. Tällaisina aikoina saatat haluta laajentaa verkkopaketin asetuksia, jotka on sisäänrakennettu wp-scripts.

Lisätietoja on artikkelissani verkkopaketin määrityksen laajentamisestawp-scripts tai lohkoeditorin käsikirjan Package Scripts -osiosta.