Για να δημιουργήσετε μπλοκ προσθήκες για WordPress χρησιμοποιώντας το Node.js, ακολουθήστε τα εξής βήματα:
1. Εγκαταστήστε το Node.js και το npm:
- Βεβαιωθείτε ότι έχετε εγκαταστήσει το Node.js στον υπολογιστή σας. Εάν όχι, κάντε λήψη και εγκαταστήστε το από τον επίσημο ιστότοπο του Node.js[1][2].
2. Ρύθμιση μιας προσθήκης μπλοκ εκκίνησης:
- Πλοηγηθείτε στον κατάλογο `wp-content/plugins` της εγκατάστασης τοπικής ανάπτυξης. Στη συνέχεια, εκτελέστε την εντολή «npx @wordpress/create-block» για να δημιουργήσετε ένα πρόσθετο μπλοκ. Αυτή η εντολή δημιουργεί όλο τον απαραίτητο κώδικα για την εκκίνηση ενός έργου και ενσωματώνει μια σύγχρονη εγκατάσταση JavaScript χωρίς να απαιτείται διαμόρφωση[3][4].
3. Διαμορφώστε το Block Plugin:
- Η εντολή "create-block" σάς ζητά εισόδους βήμα προς βήμα. Μπορείτε επίσης να χρησιμοποιήσετε τη λειτουργία γρήγορης εκκίνησης για να μεταβιβάσετε συγκεκριμένες επιλογές απευθείας στη γραμμή εντολών, εξαλείφοντας την ανάγκη για διαδραστικά μηνύματα[4].
4. Δημιουργία και εκτέλεση της προσθήκης Block:
- Εκτελέστε το `npm start` για να ξεκινήσετε έναν διακομιστή ανάπτυξης και να δημιουργήσετε αυτόματα το μπλοκ κάθε φορά που εντοπίζεται οποιαδήποτε αλλαγή κώδικα. Όταν είστε έτοιμοι να αναπτύξετε το μπλοκ σας, χρησιμοποιήστε το «npm run build» για να βελτιστοποιήσετε τον κώδικά σας και να τον καταστήσετε έτοιμο για παραγωγή[4].
5. Ενσωμάτωση με το WordPress:
- Ενεργοποιήστε το πρόσθετο που δημιουργήθηκε στο WordPress. Αυτό θα κάνει το μπλοκ διαθέσιμο στον Επεξεργαστή[4].
6. Προσαρμογή και επέκταση του μπλοκ:
- Τροποποιήστε τον κωδικό της πλάκας λέβητα για να προσαρμόσετε και να επεκτείνετε το μπλοκ όπως απαιτείται. Αυτό περιλαμβάνει τη χρήση σύγχρονης JavaScript (ESNext και JSX) και τη μόχλευση του πακέτου «wp-scripts» για εργασίες build και linting[4].
Ακολουθώντας αυτά τα βήματα, μπορείτε να δημιουργήσετε και να διαχειριστείτε προσαρμοσμένες προσθήκες αποκλεισμού για WordPress χρησιμοποιώντας το Node.js και το πακέτο «@wordpress/create-block».
Αναφορές:[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