Ένα μάθημα Gutenberg για αρχάριους προγραμματιστές: Δημιουργήστε την πρώτη σας προσθήκη μπλοκ

Ένα μάθημα Gutenberg για αρχάριους προγραμματιστές: Δημιουργήστε την πρώτη σας προσθήκη μπλοκ

Ένα μάθημα Gutenberg για αρχάριους προγραμματιστές: Δημιουργήστε την πρώτη σας προσθήκη μπλοκ
СОДЕРЖАНИЕ
02 июня 2020

Tutorial Gutenberg για αρχάριους


Εάν σκέφτεστε να αναπτύξετε οτιδήποτε για το WordPress το 2020, η παράβλεψη του Gutenberg δεν είναι απλώς επιλογή. Όλα τα πρόσθετα και τα θέματα πρέπει να συνεργαστούν όμορφα με τον Gutenberg και να προσφέρουν μια εμπειρία χρήστη που είναι συνεπής σε όλα όσα μπορεί να δει ένας χρήστης στον πίνακα ελέγχου του WordPress. Και ειδικά επειδή το Gutenberg είναι πλέον αναπόσπαστο μέρος του WordPress – απλά αναφέρεται ως πρόγραμμα επεξεργασίας μπλοκ.

Τούτου λεχθέντος, το να ξεκινήσετε με το Gutenberg δεν είναι τόσο απλό. Ενώ πριν από μερικά χρόνια θα μπορούσατε να γράψετε μια ποιοτική προσθήκη WordPress χρησιμοποιώντας τίποτα άλλο εκτός από το Σημειωματάριο, η διαδικασία έχει γίνει πολύ πιο δύσκολη τώρα.

Το Gutenberg χρησιμοποιεί τεχνολογίες όπως το WordPress REST API, το JavaScript και το React. Έτσι, απαιτήθηκαν νέες απαιτήσεις για προσθήκες και θέματα για να συνεργαστούν με το Gutenberg.

Τα καλά νέα είναι ότι θα μιλήσουμε για όλα αυτά σήμερα! Αυτή η ανάρτηση χρησιμεύει ως σεμινάριο Gutenberg για αρχάριους, που αναζητούν να δημιουργήσουν μια προσθήκη για το Gutenberg για πρώτη φορά.

Εστιάζουμε πρωτίστως στις διάφορες πτυχές της δημιουργίας ενός πρόσθετου για το Gutenberg – τη ρύθμιση του περιβάλλοντος ανάπτυξης, τη δημιουργία ενός βασικού πρόσθετου και μερικές αποχρώσεις εργασίας με μπλοκ.

1. Ρυθμίστε το περιβάλλον ανάπτυξης του Gutenberg

Για να ξεκινήσετε με την ανάπτυξη του Gutenberg, χρειάζεστε βασικές γνώσεις για το JavaScript και το React. Εδώ είναι ένα σεμινάριο για το JavaScript για έναν προγραμματιστή WordPress. Επιπλέον, πρόσθετα πακέτα στο Gutenberg ενδέχεται να χρειαστούν τη χρήση ενός διαχειριστή πακέτων NodeJS, npm.

Μπορείτε να εγκαταστήσετε την τελευταία σταθερή έκδοση του NodeJS σε Windows ή MacOS χρησιμοποιώντας τα προγράμματα εγκατάστασης στον επίσημο ιστότοπο. Εάν διαθέτετε διακομιστή Linux, μπορείτε είτε να μεταγλωττίσετε τον πηγαίο κώδικα είτε να χρησιμοποιήσετε τον αντίστοιχο διαχειριστή πακέτων (όπως apt και yum). Για παράδειγμα, εάν χρησιμοποιείτε το Ubuntu, εκτελέστε τις ακόλουθες εντολές στο τερματικό.

sudo apt ενημέρωση
sudo apt εγκατάσταση nodejs npm

Μετά την επιτυχή εγκατάσταση, μπορείτε να εκτελέσετε την ακόλουθη εντολή για να επαληθεύσετε την έκδοση του NodeJS.

nodejs – μετατροπή

Αφού σημειώσετε αυτά τα πλαίσια, είναι καλή ιδέα να δημιουργήσετε τον δοκιμαστικό ιστότοπό σας στο WordPress με μια παρουσία του τρέχοντος πρόσθετου Gutenberg (το αυτόνομο πρόσθετο) ή ακόμα και την έκδοση ανάπτυξης του – μπορείτε να το αποκτήσετε από το GitHub.

Note️ Σημείωση; ενώ το Gutenberg είναι πλέον ενσωματωμένο στο WordPress, αυτή η έκδοση δεν είναι η πιο πρόσφατη. Η ανάπτυξη του Gutenberg εξακολουθεί να συμβαίνει αρκετά ξεχωριστά και όλα αυτά είναι καινούργια περιλαμβάνονται πρώτα στο αυτόνομο πρόσθετο Gutenberg. Η πραγματική έκδοση του Gutenberg στον πυρήνα δεν έχει λάβει καμία σημαντική ενημέρωση από την ένταξή της στο WordPress 5.0. Θέλετε πάντα να εργάζεστε με την τελευταία έκδοση του Gutenberg, καθώς σας δίνει μια καλύτερη ευκαιρία να δοκιμάσετε το έργο σας στο μέλλον και να βεβαιωθείτε ότι η δημιουργία σας θα είναι συμβατή με όλα όσα έρχονται στον πυρήνα του WordPress αργότερα.

Σε μια άλλη σημείωση, εάν σκοπεύετε να συνεισφέρετε στο βασικό πρόσθετο Gutenberg, το αποθετήριο έχει συμβάλλοντας οδηγίες σχετικά με τον τρόπο ρύθμισης του τοπικού σας περιβάλλοντος και τη ρύθμιση αλλαγών για έλεγχο.

�� Τέλος, εάν θέλετε να προσαρμόσετε τις υπάρχουσες προσθήκες σας στο Gutenberg, ακολουθεί ένας αναλυτικός οδηγός για το πώς να το επιτύχετε αυτό: μέρος 1 και μέρος 2.

Για να ξεκινήσετε με έναν κατάλογο προσθηκών προτύπων που είναι ήδη έτοιμος να συνεργαστεί με το Gutenberg, μπορείτε να χρησιμοποιήσετε το πρόσθετο Gutenberg boilerplate. Μια τέτοια λύση σάς βοηθά με τη βασική δομή αρχείων, ώστε να μπορείτε να εστιάσετε στο περιεχόμενο της προσθήκης. Για να χρησιμοποιήσετε το boilerplate, κατεβάστε και εγκαταστήστε την προσθήκη από εδώ (φερμουάρ). Η εγκατάσταση και ενεργοποίηση του πρόσθετου boilerplate ενεργοποιεί τα μπλοκ δείγματος, τα οποία θα διερευνήσουμε σε αυτό το σεμινάριο. Μπορείτε να βρείτε τον κωδικό για κάθε μπλοκ στον αντίστοιχο κατάλογό του στη θέση προσθήκης του boilerplate.

2. Αρχική διαμόρφωση

Για να σας υπενθυμίσω, ο Gutenberg παρουσιάζει την έννοια των μπλοκ, τα οποία αντικαθιστούν τον τυπικό καμβά του TinyMCE. Σε ορισμένες περιπτώσεις, τα μπλοκ μπορούν επίσης να αντικαταστήσουν τους συντομότερους κωδικούς και άλλα πρόσθετα στοιχεία περιεχομένου που τα πρόσθετα χρησιμοποίησαν για να προσθέσουν στο περιεχόμενο WordPress με διάφορους τρόπους.

Αν σας ενδιαφέρει να δημιουργήσετε το Gutenberg, η πιο συνηθισμένη προσέγγιση είναι να δημιουργήσετε ένα πρόσθετο που δημιουργεί νέα μπλοκ και τα καθιστά διαθέσιμα στον χρήστη. Αυτό ακριβώς θα κάνουμε σε αυτό το σεμινάριο Gutenberg.

Οι ακόλουθες ενότητες περιγράφουν τη διαδικασία από την αρχή έως το τέλος.

Η συγκεκριμένη προσθήκη που πρόκειται να δημιουργήσουμε εκτυπώνει ένα μήνυμα με συγκεκριμένο φόντο που είναι προσαρμόσιμο. Απλώς δημιουργήστε ένα παράδειγμα, αλλά μπορείτε να πάρετε τις αρχές που παρουσιάζονται εδώ και να τις εφαρμόσετε στη δική σας, πιο περίπλοκη προσθήκη.

Τα βασικά στοιχεία της δημιουργίας ενός τέτοιου πρόσθετου πρέπει να είναι γνωστά. Ξεκινάτε δημιουργώντας έναν νέο κατάλογο στον κατάλογο προσθηκών του WordPress. Σε αυτό, πρόκειται να τοποθετήσουμε τέσσερα αρχεία:

  • index.php – Αυτό το αρχείο περιέχει μεταδεδομένα σχετικά με το νέο μπλοκ Gutenberg.
  • block.js – Αυτό το αρχείο JavaScript καταγράφει το προσαρμοσμένο μπλοκ Gutenberg.
  • editor.css – Αυτό το αρχείο περιέχει στυλ για το πρόγραμμα επεξεργασίας.
  • style.css – Αυτό το αρχείο περιέχει τα στυλ για το μπροστινό άκρο του μπλοκ.

Τα δύο πρώτα αρχεία στη λίστα φροντίζουν για την καταχώριση του μπλοκ και τα επόμενα δύο αρχεία καθορίζουν τα οπτικά στυλ των στοιχείων του μπλοκ.

3. Καταχώριση του μπλοκ

Σε αυτό το βήμα της εγγραφής ενός μπλοκ για το Gutenberg, θα καλύψουμε γενικά δύο πράγματα:

  • καταχώριση μεταδεδομένων της προσθήκης με τη μηχανή PHP του WordPress,
  • εγγραφή του μπλοκ στο πλαίσιο React στο οποίο λειτουργεί ο Gutenberg.

Το αρχείο index.php περιέχει τα στοιχεία enqueue του μπλοκ και του προγράμματος επεξεργασίας.

  • Αρχικά, καταχωρίστε τις προσαρμοσμένες λειτουργίες μέσω του add_action.
  • Στη συνέχεια, ορίστε τις συναρτήσεις που παραθέτουν τη διαδρομή των αρχείων JavaScript και CSS για το μπλοκ και το πρόγραμμα επεξεργασίας χρησιμοποιώντας τις συναρτήσεις wp_enqueue_style και wp_enqueue_script.

Ας το συνοψίσουμε μέσω του κώδικα PHP παρακάτω:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

συνάρτηση gb_block_01_basic_editor_assets () {
// Σενάρια.
wp_enqueue_script (
“gb-block-01-βασικό”,
plugins_url (‘block.js’, __FILE__),
πίνακας (‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
)

// Στυλ.
wp_enqueue_style (
“gb-block-01-basic-editor”,
plugins_url (‘editor.css’, __FILE__),
πίνακας (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
)
}

Αυτό καθορίζει τους πόρους για τον βασικό επεξεργαστή. Για το μπλοκ, απαιτείται μόνο το αρχείο CSS, το οποίο καθορίζεται μέσω της συνάρτησης wp_enqueue_style.

Το αρχείο block.js περιγράφει τις ιδιότητες του μπλοκ στον επεξεργαστή Gutenberg. Ορίζουμε τα ακόλουθα χαρακτηριστικά και ιδιότητες:

  • title – Ο τίτλος του μπλοκ
  • εικονίδιο – Ένα εικονίδιο προς εμφάνιση για το μπλοκ. μπορείτε να επιλέξετε οποιοδήποτε εικονίδιο αυτή η συλλογή dashicons
  • κατηγορία – Η ομάδα στην οποία θα ανήκει το μπλοκ. Παραδείγματα ομάδων μπλοκ είναι "κοινός," "μορφοποίηση," "ενθέτω."
  • επεξεργασία – Μια συνάρτηση JavaScript που επιστρέφει ένα στοιχείο DOM. Χρησιμοποιούμε τη συνάρτηση wp.element.createElement για να δημιουργήσουμε ένα στοιχείο DOM προσαρμοσμένης παραγράφου, σελ, με το προσαρμοσμένο κείμενο να είναι γραμμένο σε αυτό. Ο Gutenberg επικαλείται αυτήν την ιδιότητα όταν ένας χρήστης κάνει κλικ στο μπλοκ από το πρόγραμμα επεξεργασίας.

( λειτουργία() {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
τίτλος: __ (“GB Basic”, “GB”),
εικονίδιο: “ασπίδα-alt”,
κατηγορία: «κοινό»,

επεξεργασία: λειτουργία (στηρίγματα) {
επιστροφή wp.element.createElement (
‘Π’,
{className: props.className},
‘Γειά σου Κόσμε! – από τον συντάκτη (01 Basic Block). “
)
},

});
}) ();

Ομοίως, μπορείτε να δημιουργήσετε μια ιδιότητα αποθήκευσης που επικαλείται όταν το μπλοκ είναι επιλεγμένο από τη διεπαφή.

Στον παραπάνω κώδικα, ορίσαμε το className του στοιχείου p με το props.className, το οποίο θα δημιουργήσει ένα όνομα κλάσης ξεκινώντας με το wp-block, ακολουθούμενο από το όνομα του μπλοκ. Στην επόμενη ενότητα αυτού του σεμιναρίου Gutenberg, ορίζουμε τα στυλ αυτής της τάξης.

4. Προσαρμογή του μπλοκ

Όπως συζητήθηκε στην προηγούμενη ενότητα, το επόμενο βήμα σε αυτό το σεμινάριο είναι ο καθορισμός των ιδιοτήτων των στοιχείων μπλοκ. Ας καθορίσουμε ένα χρώμα φόντου, ένα χρώμα κειμένου και ένα περίγραμμα.

.wp-block-gb-basic-01 {
χρώμα: # 000;
ιστορικό: mistyrose;
περίγραμμα: 0,2rem στερεό κόκκινο;
}

Στη θέση των αρχείων CSS, μπορείτε επίσης να προσθέσετε αρχεία SCSS και να τα μεταγλωττίσετε με το Node. Περαιτέρω, εδώ είναι ένα σεμινάριο για το στυλ των στοιχείων Gutenberg από CSS Tricks.

Αποτελέσματα του πρώτου σας μαθήματος Gutenberg

Είμαστε τελικά έτοιμοι να δοκιμάσουμε το μπλοκ που έχουμε δημιουργήσει. Εάν το πρόσθετο Gutenberg είναι ενεργοποιημένο, κατευθυνθείτε προς το + εικονίδιο και ελέγξτε αν το νέο μπλοκ εμφανίζεται εκεί.

νέο μπλοκ Gutenberg

Στη συνέχεια, εάν κάνετε κλικ στο μπλοκ, θα παρατηρήσετε ότι εμφανίζεται το μήνυμα από ψηλά, με χρώμα φόντου και περίγραμμα από το αρχείο CSS:

μπλοκ σε δράση

συμπέρασμα

Φτάνουμε στο τέλος του πρώτου σας οδηγού Gutenberg. Ελπίζω ότι αυτό ήταν χρήσιμο. Βεβαίως, αυτό που δημιουργήσαμε εδώ δεν είναι εξαιρετικά περίπλοκο, αλλά θα πρέπει να σας δώσει μια ιδέα για τις βασικές δομές όταν εργάζεστε με τον Gutenberg και πώς να σχεδιάσετε την επόμενη προσθήκη σας.

Πρώτα, συζητήσαμε τα βήματα για τη δημιουργία του περιβάλλοντος ανάπτυξης του Gutenberg. Στη συνέχεια, παρουσιάσαμε ένα πρόσθετο boilerplate για να βοηθήσουμε στην περαιτέρω ανάπτυξη. Στη συνέχεια, το επίκεντρο της συζήτησης μετατοπίστηκε σε διάφορα βήματα για την εγγραφή και το στυλ ενός νέου μπλοκ.

Ελπίζω ότι αυτό το σεμινάριο Gutenberg σας βοήθησε να δημιουργήσετε το πρώτο σας πρόσθετο Gutenberg!

Εάν έχετε οποιεσδήποτε ερωτήσεις, απομακρύνετε τα παρακάτω σχόλια.

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector