Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon „WordPress“ blokinių įskiepių kūrimas naudojant Node.js


„WordPress“ blokinių įskiepių kūrimas naudojant Node.js


Jei norite sukurti blokinius „WordPress“ papildinius naudodami Node.js, atlikite šiuos veiksmus:

1. Įdiekite Node.js ir npm:
– Įsitikinkite, kad jūsų kompiuteryje įdiegtas Node.js. Jei ne, atsisiųskite ir įdiekite jį iš oficialios Node.js svetainės[1][2].

2. Nustatykite „Starter Block“ papildinį:
- Eikite į savo vietinės plėtros diegimo katalogą „wp-content/plugins“. Tada paleiskite komandą „npx @wordpress/create-block“, kad sukurtumėte bloko papildinį. Ši komanda sugeneruoja visą reikalingą kodą projektui pradėti ir integruoja modernią „JavaScript“ kūrimo sąranką be jokios konfigūracijos[3][4].

3. Konfigūruokite blokavimo papildinį:
- Komanda „create-block“ paragina įvestis žingsnis po žingsnio. Taip pat galite naudoti greito paleidimo režimą, norėdami perduoti konkrečias parinktis tiesiai komandinėje eilutėje, todėl nereikia interaktyvių raginimų[4].

4. Sukurkite ir paleiskite blokavimo papildinį:
- Paleiskite „npm start“, kad paleistumėte kūrimo serverį ir automatiškai atkurtumėte bloką, kai aptinkamas bet koks kodo pakeitimas. Kai būsite pasirengę įdiegti bloką, naudokite „npm run build“, kad optimizuotumėte kodą ir paruoštumėte jį gamybai[4].

5. Integruokite su „WordPress“:
- Suaktyvinkite sugeneruotą papildinį „WordPress“. Taip blokas bus pasiekiamas redaktoriuje[4].

6. Tinkinkite ir išplėskite bloką:
- Pakeiskite pagrindinį kodą, kad pritaikytumėte ir prireikus išplėstumėte bloką. Tai apima šiuolaikinio „JavaScript“ (ESNext ir JSX) naudojimą ir „wp-scripts“ paketo panaudojimą kūrimo ir linijavimo užduotims atlikti[4].

Atlikdami šiuos veiksmus, galite sukurti ir tvarkyti pasirinktinius „WordPress“ blokų papildinius naudodami Node.js ir paketą „@wordpress/create-block“.

Citatos:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY