WordPressi loomisploki skripti ülevaade

Ametlik WordPressi redigeerija (Gutenberg) meeskond on pakkunud teile korraliku väikese skripti, et saaksite oma npm-skriptiga plokkpluginat luua .@wordpress/create-block

See artikkel annab ülevaate WordPressi loomisplokkskriptist ja selle väljastatavate üksikasjadest.

MÄRKUS. See artikkel on mõeldud ploki skripti loomise vanemale versioonile

Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga ühilduda. Meie uuendatud plokiskripti loomise juhendit saate vaadata siit .

Blokeerimisskripti loomise käivitamine

Ametlik dokumentatsioon annab teile npm init @wordpress/blockkäsule edastamiseks mõned erinevad parameetrid.

Seadistuse jaoks käivitasin selle interaktiivses režiimis, jättes parameetrid välja. Sisestasin oma terminali (samal ajal kui cdoma wp-content/pluginskausta) järgmise käsu:

npm init @wordpress/block

Skript esitas mulle paar küsimust, et aidata mul oma plokki üles ehitada.

Soovides luua oma pluginaidee jaoks stardiplokki (‘tervislikud märkmed’), vastasin küsimustele järgmiselt:

• Identifitseerimiseks kasutatav plokk (ka pistikprogrammi ja väljundkausta nimi): Ma tahan, et minu ploki nimi oleks Wholesome Notes, seega sisestasin wholesome-notes.

• Ploki nime sisemine nimeruum (midagi teie toodete jaoks ainulaadset): kuna see peaks olema unikaalne kõigi minu sisestatud toodete jaoks wholesome-code, kuna see on minu ettevõtte nimi. Tagantjärele mõeldes oleks parem lühistada wcvõi wcltd.

• Teie ploki kuvatav pealkiri: Sisestasin pistikprogrammi pealkirja Wholesome Notes.

• WordPressi loomisploki skripti ülevaade Ma polnud 100% kindel, mida siia kirjutada tahan, seega sisestasin lihtsalt teksti, mida kavatsen hiljem muuta.

• Armatuurlaud ploki tuvastamise hõlbustamiseks (valikuline): WordPressi Dashiconsi ressursi kiire avamine valisin selle, admin-commentskuna sellel on märkmelaadi ikoon.

• Kategooria nimi, mis aitab kasutajatel teie plokki sirvida ja avastada (kasutage nooleklahve): Valisin layout, kuigi ausalt öeldes vajaks seda tüüpi plokid ilmselt oma kategooriat. See on midagi, mida saan hiljem muuta.

Jooksminenpm init @wordpress/block

Seejärel läks skript edasi ja installis kõik vajalikud sõltuvused npm-i kaudu (praegu installib see lihtsalt wp-scriptsnpm-paketi sõltuvusena).

Väljundi kontrollimine

Ülaltoodud käskudega annab WordPressi loomisploki skript teile järgmise väljundi:

• tervislikud-märkmed
  • ehitada
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • src
    • index.js
  • .editorconfig
  • .gitignoreeri
  • toimetaja.css
  • package.json
  • stiil.css
  • terved-märkmed.php

@wordpress /blokeeri väljund

Järgmine on kõigi nende failide ja kaustade jaotus.

wholesome-notes

See on pistikprogrammi juurkaust, sellel on sama nimi, mis ma seadistusküsimustes ‘nälkja’ jaoks sisestasin.

/build

See on ehitamise kaust. /srcSee sisaldab kõiki kaustast loodud JavaScripti ja PHP varasid. Need pannakse järjekorda pealaadurifaili kaudu wholesome-notes.php.

/build/index.assets.php

See PHP-fail genereeritakse automaatselt /srckausta kompileerimisel. See sisaldab massiivi kõigist WordPressi redigeerija (Gutenberg) JavaScripti sündsustest, mida teie pistikprogramm kasutab. See pannakse järjekorda põhilaadurifaili kaudu wholesome-notes.php.

/build/index.js

See on peamine kompileeritud JavaScripti fail ja see asetatakse järjekorda peamise wholesome-notes.phplaadimisfaili kaudu.

/build/index.js.map

See fail luuakse ainult siis, kui kompileerite varasid arendusrežiimi jaoks (IE käitate, npm startmitte npm run buildvarade kompileerimisel. See on kasulik fail JavaScripti siluritele, mis aitab vigade ilmnemisel tuvastada failinimesid ja reanumbreid.

/node_modules

See on kaust, kuhu on installitud kõik teie pistikprogrammi JavaScripti sõltuvused.

/src

See on kaust, mis sisaldab kõiki teie pistikprogrammi kompileerimata varasid.

/src/index.js

See on teie WordPressi redaktori (Gutenbergi) ploki peamine kompileerimata JavaScripti fail. See sisaldab algselt kogu ploki loogikat.

/.editorconfig

See fail sisaldab teie IDE (integreeritud arenduskeskkonna) jaoks kasulikke eelseadeid, näiteks Visual Studio koodi.

/.gitignore

See fail käsib gitil teatud faile ignoreerida, kui kasutate git-hoidlat (nt GitHub).

/editor.css

Selle faili stiilid väljastatakse ainult redaktoris, see lisatakse järjekorda peamise wholesome-notes.phplaadimisfaili kaudu.

/package.json

See fail sisaldab kõiki pistikprogrammi npm-i sõltuvusi ja käske, mida saate käivitada. Pange tähele, et pistikprogramm kasutab wp-scripts( @wordpress/scripts) baasina, nii et algselt on laaditud sõltuvused selle paketi jaoks.

/style.css

Selle faili stiilid väljastatakse redaktoris ja saidi esiosas, need pannakse järjekorda peamise wholesome-notes.phplaadimisfaili kaudu.

/wholesome-notes.php

See on pistikprogrammi peamine laadimisfail. Selle nimi määrati ‘nälkja’ kaudu, mille sisestasime esialgsesse häälestusskripti. See paneb järjekorda kõik pistikprogrammi jaoks vajalikud JavaScripti varad.

Plugina uurimine

Kui olete pärast plugina loomist selle aktiveerinud ja redaktorisse sisestanud, näeb see välja nagu järgmised ekraanipildid (esi- ja taustaprogramm).

Loo plokiskript – vaikeliides

Loo plokiskript – vaikimisi tagaosa

Nagu näete, pakub plokk meile mõnda põhiväljundit, mida saame oma ploki rakendamiseks hõlpsasti muuta.

Blokeeri CSS

Nagu näete ekraanipiltidelt, editor.cssrakendab näitekood redigeerijas punase piiri, samas kui näidete stiilid styles.cssrakendatakse nii esi- kui ka tagaprogrammile.

JavaScripti blokeerimine

Sisendpunkt vastloodud ploki kohandamiseks on /src/index.jsfail.

Selles failis on palju tekstisisest dokumentatsiooni, mis selgitab, miks teatud funktsioone imporditakse, näiteks registerBlockTypeploki registreerimine ja __i18n tekstitõlke tugi.

Looge Block index.js tekstisisesed kommentaarid

See annab teile ka väga lihtsa väljundi ploki registreerimisse edastatavatele editja funktsioonidele.save

Märkus. Skripti hilisemates versioonides on need eraldi failidesse ekstraheeritud ja lisatud sellesse faili moodulitena.

Looge Block index.js Redigeeri ja salvesta

Bloki ehitamine

Loomisploki npm dokumentatsiooni kohaselt saate oma terminalis (plugina juurkaustast) kasutada mitmeid käske, et teha näiteks koodi kvaliteeti või värskendada pakette.

Peamised käsud, mida ploki koostamiseks vajate, on npm startarendamiseks mõeldud plugina npm run buildkompileerimine ja lõpliku versiooni kompileerimine.

wp-scripts( @wordpress/scriptsnpm-paketist) on teie pistikprogrammi peamine sõltuvus. See sõltuvus võtab kogu teie bloki jaoks vajaliku tööriista ära, nii et saate keskenduda ainult JavaScripti loomisele.

Kulisside taga wp-scriptskasutab webpackkogu teie vara /build/index.jsfaili kompileerimiseks.

Lisateavet saate wp-scriptsplokiredaktori käsiraamatust ja veebipaketi koostamise seadistamise kohta leiate käsiraamatu jaotisest „JavaScripti järgu seadistamine".

Veebipaketi loomise ploki seadistuse laiendamine

Teie ploki koodibaas võib hõlmata mitut faili või isegi sisaldada mitut alamplokki või sisaldada keerulisi stiile. Sellistel aegadel võite soovida laiendada veebipaketi sisseehitatud seadistust wp-scripts.

Lisateabe saamiseks vaadake minu artiklit veebipaketi konfiguratsiooni laiendamise kohtawp-scripts või vaadake juhiseid plokiredaktori käsiraamatu jaotisest Paketiskriptid .