Ας αναγνωρίσουμε ότι η ανάπτυξη για WordPress είναι περίεργη αυτή τη στιγμή. Είτε είστε νέοι στο WordPress είτε έχετε εργαστεί με αυτό για αιώνες, η εισαγωγή των λειτουργιών "Πλήρης Επεξεργασία ιστότοπου" (FSE), συμπεριλαμβανομένων των Block Editor (WordPress 5.0) και το Επεξεργαστής ιστότοπου (WordPress 5.9), έχουν αναβαθμίσει τον παραδοσιακό τρόπο δημιουργίας θεμάτων και προσθηκών WordPress.
Παρόλο που έχουν περάσει πέντε χρόνια από τότε που συναντήσαμε το Block Editor για πρώτη φορά, η ανάπτυξή του είναι δύσκολη επειδή η τεκμηρίωση είτε λείπει είτε είναι ξεπερασμένη. Αυτό είναι περισσότερο μια δήλωση σχετικά με το πόσο γρήγορα κινούνται τα χαρακτηριστικά του FSE, κάτι Ο Geoff θρηνούσε σε πρόσφατη ανάρτησή του.
Ενδεικτική περίπτωση: Το 2018, αν εισαγωγική σειρά σχετικά με την είσοδο στην ανάπτυξη του Gutenberg δημοσιεύτηκε ακριβώς εδώ στα CSS-tricks. Οι καιροί έχουν αλλάξει από τότε, και, ενώ αυτό το στυλ ανάπτυξης εξακολουθεί να λειτουργεί, είναι δεν προτείνεται πλέον (άλλωστε το create-guten-block το έργο στο οποίο βασίζεται επίσης δεν διατηρείται πλέον).
Σε αυτό το άρθρο, σκοπεύω να σας βοηθήσω να ξεκινήσετε την ανάπτυξη μπλοκ WordPress με τρόπο που ακολουθεί την τρέχουσα μεθοδολογία. Οπότε, ναι, τα πράγματα θα μπορούσαν κάλλιστα να αλλάξουν μετά τη δημοσίευση αυτού. Αλλά θα προσπαθήσω να εστιάσω σε αυτό με τρόπο που ελπίζω να αποτυπώνει την ουσία της ανάπτυξης μπλοκ, γιατί παρόλο που τα εργαλεία μπορεί να εξελιχθούν με την πάροδο του χρόνου, οι βασικές ιδέες είναι πιθανό να παραμείνουν οι ίδιες.
Ο επεξεργαστής Gutenberg: (1) Ο εισαγωγέας μπλοκ, (2) η περιοχή περιεχομένου και (3) η πλαϊνή γραμμή ρυθμίσεων πίστωσης: Εγχειρίδιο WordPress Block Editor
Τι είναι ακριβώς τα μπλοκ WordPress;
Ας ξεκινήσουμε εκθέτοντας κάποια σύγχυση με το τι εννοούμε με όρους όπως μπλοκ. Όλη η ανάπτυξη που προέκυψε σε αυτά τα χαρακτηριστικά που οδήγησαν στο WordPress 5.0 είχε την κωδική ονομασία "Gutenberg” — ξέρετε, ο εφευρέτης του πιεστήριο.
Έκτοτε, το "Gutenberg" χρησιμοποιείται για να περιγράψει οτιδήποτε σχετίζεται με μπλοκ, συμπεριλαμβανομένου του Επεξεργαστή Αποκλεισμών και του Επεξεργαστή ιστότοπου, επομένως έχει γίνει περίπλοκο σε βαθμό που ορισμένοι καταφρονούν το όνομα. Επιπροσθέτως, υπάρχει ένα Πρόσθετο Gutenberg όπου τα πειραματικά χαρακτηριστικά ελέγχονται για πιθανή συμπερίληψη. Και αν πιστεύετε ότι η κλήση όλης αυτής της "Πλήρης Επεξεργασία ιστότοπου" θα έλυνε το πρόβλημα, υπάρχουν ανησυχίες και για αυτό.
Έτσι, όταν αναφερόμαστε σε «μπλοκ» σε αυτό το άρθρο, αυτό που εννοούμε είναι στοιχεία για τη δημιουργία περιεχομένου στον Επεξεργαστή αποκλεισμού του WordPress. Τα μπλοκ εισάγονται σε μια σελίδα ή μια ανάρτηση και παρέχουν τη δομή για έναν συγκεκριμένο τύπο περιεχομένου. Το WordPress συνοδεύεται από μια χούφτα μπλοκ "πυρήνα" για κοινούς τύπους περιεχομένου, όπως Παράγραφος, Λίστα, Εικόνα, Βίντεο και Ήχος, για να αναφέρουμε μερικά.
Εκτός από αυτά τα βασικά μπλοκ, μπορούμε επίσης να δημιουργήσουμε προσαρμοσμένα μπλοκ. Αυτός είναι ο σκοπός της ανάπτυξης μπλοκ WordPress (υπάρχει επίσης φιλτράρισμα βασικών μπλοκ για την τροποποίηση της λειτουργικότητάς τους, αλλά πιθανότατα δεν θα το χρειαστείτε ακόμα).
Τι κάνουν τα μπλοκ
Πριν ξεκινήσουμε τη δημιουργία μπλοκ, πρέπει πρώτα να καταλάβουμε πώς λειτουργούν εσωτερικά τα μπλοκ. Αυτό σίγουρα θα μας σώσει έναν τόνο απογοήτευσης αργότερα.
Ο τρόπος που μου αρέσει να σκέφτομαι ένα μπλοκ είναι μάλλον αφηρημένος: για μένα, ένα μπλοκ είναι μια οντότητα, με κάποιες ιδιότητες (που ονομάζονται χαρακτηριστικά), που αντιπροσωπεύει κάποιο περιεχόμενο. Ξέρω ότι αυτό ακούγεται αρκετά ασαφές, αλλά μείνετε μαζί μου. Ένα μπλοκ ουσιαστικά εκδηλώνεται με δύο τρόπους: ως γραφική διεπαφή στον επεξεργαστή μπλοκ ή ως ένα κομμάτι δεδομένων στη βάση δεδομένων.
Όταν ανοίγετε το WordPress Block Editor και εισάγετε ένα μπλοκ, ας πούμε ένα μπλοκ Pullquote, έχετε μια ωραία διεπαφή. Μπορείτε να κάνετε κλικ σε αυτήν τη διεπαφή και να επεξεργαστείτε το κείμενο που αναφέρεται. Ο πίνακας Ρυθμίσεις στη δεξιά πλευρά της διεπαφής χρήστη του Block Editor παρέχει επιλογές για την προσαρμογή του κειμένου και τη ρύθμιση της εμφάνισης του μπλοκ.
Η Μπλοκ pullquote που περιλαμβάνεται στον πυρήνα του WordPress
Όταν ολοκληρώσετε τη δημιουργία του φανταχτερού pullquote σας και πατήσετε Δημοσίευση, ολόκληρη η ανάρτηση αποθηκεύεται στη βάση δεδομένων στο wp_posts τραπέζι. Αυτό δεν είναι κάτι καινούργιο λόγω του Gutenberg. Έτσι λειτουργούσαν πάντα τα πράγματα — το WordPress αποθηκεύει περιεχόμενο αναρτήσεων σε καθορισμένο πίνακα στη βάση δεδομένων. Αλλά το νέο είναι αυτό μια αναπαράσταση του μπλοκ Pullquote είναι μέρος του περιεχομένου που αποθηκεύεται post_content πεδίο του wp_posts πίνακα.
Πώς μοιάζει αυτή η αναπαράσταση; Κοίτα:
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
The Encyclopedia of world peas
Μοιάζει με απλό HTML, σωστά;! Αυτό, στην τεχνική γλώσσα, είναι το «σειριακό» μπλοκ. Παρατηρήστε τα δεδομένα JSON στο σχόλιο HTML, "textAlign": "right". Αυτό είναι ένα Χαρακτηριστικό - μια ιδιότητα που σχετίζεται με το μπλοκ.
Ας υποθέσουμε ότι κλείνεις τον Επεξεργαστή Αποκλεισμού και, στη συνέχεια, λίγο αργότερα, τον ανοίγεις ξανά. Το περιεχόμενο από το σχετικό post_content Το πεδίο ανακτάται από το Block Editor. Στη συνέχεια, ο επεξεργαστής αναλύει το ανακτηθέν περιεχόμενο και όπου συναντά αυτό:
...
…λέει δυνατά από μόνος του:
Εντάξει, αυτό μου φαίνεται σαν μπλοκ Pullquote. Χμ.. έχει και ένα χαρακτηριστικό... Έχω ένα αρχείο JavaScript που μου λέει πώς να κατασκευάσω τη γραφική διεπαφή για ένα μπλοκ Pullquote στο πρόγραμμα επεξεργασίας από τα χαρακτηριστικά του. Θα έπρεπε να το κάνω τώρα για να αποδώσω αυτό το μπλοκ σε όλο του το μεγαλείο.
Ως προγραμματιστής μπλοκ, η δουλειά σας είναι να:
Πείτε στο WordPress ότι θέλετε να καταχωρίσετε έναν συγκεκριμένο τύπο μπλοκ, με λεπτομέρειες για το και το άλλο.
Παρέχετε το αρχείο JavaScript στο Block Editor που θα το βοηθήσει να αποδώσει το μπλοκ στον επεξεργαστή ενώ ταυτόχρονα θα το "σειρώσει" για να το αποθηκεύσει στη βάση δεδομένων.
Παρέχετε τυχόν πρόσθετους πόρους που χρειάζεται το μπλοκ για τη σωστή λειτουργία του, π.χ. στυλ και γραμματοσειρές.
Ένα πράγμα που πρέπει να σημειωθεί είναι ότι όλη αυτή η μετατροπή από σειριακά δεδομένα σε γραφική διεπαφή — και αντίστροφα — πραγματοποιείται μόνο στον Επεξεργαστή μπλοκ. Στο μπροστινό μέρος, το περιεχόμενο εμφανίζεται ακριβώς όπως είναι αποθηκευμένο. Επομένως, κατά μία έννοια, τα μπλοκ είναι ένας φανταχτερός τρόπος τοποθέτησης δεδομένων στη βάση δεδομένων.
Ας ελπίσουμε ότι αυτό σας δίνει κάποια σαφήνεια ως προς το πώς λειτουργεί ένα μπλοκ.
Ξεκινώντας με την Ανάπτυξη Block WordPress
Τα μπλοκ είναι απλώς πρόσθετα
Τα μπλοκ είναι απλώς πρόσθετα. Λοιπόν, τεχνικά, εσύ κουτί βάλτε μπλοκ σε θέματα και εσείς κουτί τοποθετήστε πολλά μπλοκ σε ένα πρόσθετο. Αλλά, τις περισσότερες φορές, εάν θέλετε να δημιουργήσετε ένα μπλοκ, θα δημιουργήσετε ένα πρόσθετο. Έτσι, εάν έχετε δημιουργήσει ποτέ μια προσθήκη WordPress, τότε είστε ήδη εν μέρει εκεί για να μπορέσετε να δημιουργήσετε ένα μπλοκ WordPress.
Αλλά ας υποθέσουμε για λίγο ότι δεν έχετε δημιουργήσει ποτέ μια προσθήκη WordPress, πόσο μάλλον ένα μπλοκ. Από πού ξεκινάς;
Ρύθμιση μπλοκ
Έχουμε καλύψει τι είναι τα μπλοκ. Ας αρχίσουμε να ρυθμίζουμε τα πράγματα για να φτιάξουμε ένα.
Βεβαιωθείτε ότι έχετε εγκαταστήσει το Node
Αυτό θα σας δώσει πρόσβαση σε npm και npx εντολές, όπου npm εγκαθιστά τις εξαρτήσεις του μπλοκ σας και βοηθά στη μεταγλώττιση στοιχείων, ενώ npx εκτελεί εντολές σε πακέτα χωρίς να τα εγκαταστήσει. Εάν χρησιμοποιείτε macOS, πιθανότατα έχετε ήδη το Node και μπορείτε να το χρησιμοποιήσετε nvm για ενημέρωση εκδόσεων. Εάν χρησιμοποιείτε Windows, θα χρειαστεί κατεβάστε και εγκαταστήστε το Node.
Δημιουργήστε έναν φάκελο έργου
Τώρα, μπορεί να συναντήσετε άλλα σεμινάρια που μεταπηδούν κατευθείαν στη γραμμή εντολών και σας καθοδηγούν να εγκαταστήσετε ένα πακέτο που ονομάζεται @wordpress/create-block. Αυτό το πακέτο είναι εξαιρετικό γιατί βγάζει έναν πλήρως διαμορφωμένο φάκελο έργου με όλες τις εξαρτήσεις και τα εργαλεία που χρειάζεστε για να ξεκινήσετε να αναπτύσσετε.
Προσωπικά ακολουθώ αυτόν τον δρόμο όταν στήνω τα δικά μου μπλοκ, αλλά μου χιούμορ για μια στιγμή γιατί θέλω να περικόψω τις απόψεις που εισάγει και να επικεντρωθώ μόνο στα απαιτούμενα κομμάτια για να κατανοήσω το βασικό περιβάλλον ανάπτυξης.
Αυτά είναι τα αρχεία που θα ήθελα να αναφέρω συγκεκριμένα:
readme.txt: Αυτό μοιάζει με την μπροστινή όψη του καταλόγου της προσθήκης, που χρησιμοποιείται συνήθως για την περιγραφή της προσθήκης και την παροχή πρόσθετων λεπτομερειών σχετικά με τη χρήση και την εγκατάσταση. Εάν υποβάλετε το μπλοκ σας στο WordPress Plugin Directory, αυτό το αρχείο βοηθά στη συμπλήρωση της σελίδας της προσθήκης. Εάν σκοπεύετε να δημιουργήσετε ένα αποθετήριο GitHub για την προσθήκη μπλοκ σας, τότε μπορείτε επίσης να εξετάσετε ένα README.md αρχείο με τις ίδιες πληροφορίες, ώστε να εμφανίζεται όμορφα εκεί.
package.json: Αυτό καθορίζει τα πακέτα Node που απαιτούνται για την ανάπτυξη. Θα το ανοίξουμε όταν φτάσουμε στην εγκατάσταση. Στην κλασική ανάπτυξη προσθηκών WordPress, ίσως έχετε συνηθίσει να εργάζεστε με το Composer και a composer.json αντ' αυτού. Αυτό είναι το ισοδύναμο αυτού.
plugin.php: Αυτό είναι το κύριο αρχείο plugin και, ναι, είναι κλασική PHP! Θα βάλουμε την κεφαλίδα της προσθήκης και τα μεταδεδομένα μας εδώ και θα τα χρησιμοποιήσουμε για να καταχωρήσουμε την προσθήκη.
Εκτός από αυτά τα αρχεία, υπάρχει επίσης το src κατάλογο, ο οποίος υποτίθεται ότι περιέχει τον πηγαίο κώδικα του μπλοκ μας.
Έχοντας αυτά τα αρχεία και το src κατάλογος είναι το μόνο που χρειάζεστε για να ξεκινήσετε. Από αυτήν την ομάδα, προσέξτε το τεχνικά χρειαζόμαστε μόνο ένα αρχείο (plugin.php) για να φτιάξετε το πρόσθετο. Τα υπόλοιπα είτε παρέχουν πληροφορίες είτε χρησιμοποιούνται για τη διαχείριση του περιβάλλοντος ανάπτυξης.
Η προαναφερθείσα @wordpress/create-block πακέτο σκαλωσιών αυτά τα αρχεία (και άλλα) για εμάς. Μπορείτε να το σκεφτείτε ως εργαλείο αυτοματισμού αντί για ανάγκη. Ανεξάρτητα από αυτό, κάνει τη δουλειά πιο εύκολη, ώστε να μπορείτε να βάλετε σκαλωσιές μαζί του με ένα τετράγωνο τρέχοντας:
npx @wordpress/create-block
Εγκαταστήστε εξαρτήσεις μπλοκ
Υποθέτοντας ότι έχετε έτοιμα τα τρία αρχεία που αναφέρονται στην προηγούμενη ενότητα, ήρθε η ώρα να εγκαταστήσετε τις εξαρτήσεις. Αρχικά, πρέπει να προσδιορίσουμε τις εξαρτήσεις που θα χρειαστούμε. Αυτό το κάνουμε επεξεργαζόμενοι το package.json. Κατά τη χρήση του @wordpress/create-block βοηθητικό πρόγραμμα, δημιουργούνται τα ακόλουθα για εμάς (προστέθηκαν σχόλια. Το JSON δεν υποστηρίζει σχόλια, επομένως αφαιρέστε τα σχόλια εάν αντιγράφετε τον κώδικα):
{
// Defines the name of the project
"name": "block-example",
// Sets the project version number using semantic versioning
"version": "0.1.0",
// A brief description of the project
"description": "Example block scaffolded with Create Block tool.",
// You could replace this with yourself
"author": "The WordPress Contributors",
// Standard licensing information
"license": "GPL-2.0-or-later",
// Defines the main JavaScript file
"main": "build/index.js",
// Everything we need for building and compiling the plugin during development
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
// Defines which version of the scripts packages are used (24.1.0 at time of writing)
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}
Η @wordpress/scripts Το πακέτο είναι η κύρια εξάρτηση εδώ. Όπως μπορείτε να δείτε, είναι ένα devDependency που σημαίνει ότι βοηθά στην ανάπτυξη. Πως και έτσι? Εκθέτει το wp-scripts δυαδικό που μπορούμε να χρησιμοποιήσουμε για να μεταγλωττίσουμε τον κώδικά μας, από το src στον κατάλογο build κατάλογο, μεταξύ άλλων.
Υπάρχει μια σειρά από άλλα πακέτα που διατηρεί το WordPress για διάφορους σκοπούς. Για παράδειγμα, το @wordpress/components πακέτο παρέχει αρκετά προκατασκευασμένα UI εξαρτήματα για το WordPress Block Editor που μπορεί να χρησιμοποιηθεί για τη δημιουργία συνεπών εμπειριών χρήστη για το μπλοκ σας που ευθυγραμμίζονται με τα πρότυπα σχεδίασης του WordPress.
Στην πραγματικότητα δεν το κάνεις ανάγκη για να εγκαταστήσετε αυτά τα πακέτα, ακόμα κι αν θέλετε να τα χρησιμοποιήσετε. Αυτό συμβαίνει γιατί αυτά @wordpress Οι εξαρτήσεις δεν συνδυάζονται με τον κωδικό μπλοκ σας. Αντίθετα, οποιαδήποτε import δηλώσεις που αναφέρονται σε κώδικα από πακέτα βοηθητικών προγραμμάτων — όπως @wordpress/components — χρησιμοποιούνται για την κατασκευή ενός αρχείου «περιουσιακών στοιχείων», κατά τη μεταγλώττιση. Επιπλέον, αυτές οι δηλώσεις εισαγωγής μετατρέπονται σε δηλώσεις που αντιστοιχίζουν τις εισαγωγές σε ιδιότητες ενός καθολικού αντικειμένου. Για παράδειγμα, import { __ } from "@wordpress/i18n" μετατρέπεται σε ελαχιστοποιημένη έκδοση του const __ = window.wp.i18n.__. (window.wp.i18n είναι ένα αντικείμενο που είναι εγγυημένο ότι είναι διαθέσιμο σε παγκόσμια εμβέλεια, μόλις το αντίστοιχο i18n το αρχείο πακέτου βρίσκεται στην ουρά).
Κατά την εγγραφή του μπλοκ στο αρχείο προσθήκης, το αρχείο «στοιχεία» χρησιμοποιείται σιωπηρά για να ενημερώσει το WordPress τις εξαρτήσεις του πακέτου για το μπλοκ. Αυτές οι εξαρτήσεις μπαίνουν αυτόματα στην ουρά. Όλα αυτά φροντίζονται στα παρασκήνια, δεδομένου ότι χρησιμοποιείτε το scripts πακέτο. Τούτου λεχθέντος, μπορείτε ακόμα να επιλέξετε να εγκαταστήσετε τοπικά εξαρτήσεις για τη συμπλήρωση κώδικα και τις πληροφορίες παραμέτρων στο package.json αρχείο:
Τώρα που package.json έχει ρυθμιστεί, θα πρέπει να μπορούμε να εγκαταστήσουμε όλες αυτές τις εξαρτήσεις πλοηγώντας στον φάκελο του έργου στη γραμμή εντολών και εκτελώντας npm install.
Ξεκινώντας με την Ανάπτυξη Block WordPress
Προσθέστε την κεφαλίδα της προσθήκης
Εάν προέρχεστε από την ανάπτυξη κλασικών προσθηκών WordPress, τότε πιθανότατα γνωρίζετε ότι όλες οι προσθήκες έχουν ένα μπλοκ πληροφοριών στο κύριο αρχείο προσθήκης που βοηθά το WordPress να αναγνωρίζει την προσθήκη και να εμφανίζει πληροφορίες σχετικά με αυτήν στην οθόνη Προσθηκών του διαχειριστή του WordPress.
Εδώ είναι τι @wordpress/create-block δημιουργήθηκε για μένα σε μια προσθήκη που ονομάζεται δημιουργικά "Hello World":
<?php
/**
* Plugin Name: Block Example
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 5.9
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*
* @package create-block
*/
Αυτό βρίσκεται στο κύριο αρχείο προσθήκης, το οποίο μπορείτε να ονομάσετε όπως θέλετε. Μπορείτε να το ονομάσετε κάτι γενικό όπως index.php or plugin.php. ο create-block Το πακέτο το καλεί αυτόματα ό,τι παρέχετε ως όνομα έργου κατά την εγκατάστασή του. Εφόσον ονόμασα αυτό το παράδειγμα "Παράδειγμα αποκλεισμού", το πακέτο μας έδωσε ένα block-example.php αρχείο με όλα αυτά τα πράγματα.
Θα θέλετε να αλλάξετε κάποιες από τις λεπτομέρειες, όπως να κάνετε τον εαυτό σας συγγραφέα και οτιδήποτε άλλο. Και δεν είναι όλα αυτά απαραίτητα. Αν το έβαζα από το μηδέν, τότε μπορεί να μοιάζει πιο κοντά σε αυτό:
<?php
/**
* Plugin Name: Block Example
* Plugin URI: https://css-tricks.com
* Description: An example plugin for learning WordPress block development.
* Version: 1.0.0
* Author: Arjun Singh
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*/
Έχουμε ήδη εξετάσει τα απαιτούμενα αρχεία για το μπλοκ μας. Αλλά αν χρησιμοποιείτε @wordpress/create-block, θα δείτε ένα σωρό άλλα αρχεία στον φάκελο του έργου.
build/: Αυτός ο φάκελος έλαβε τα μεταγλωττισμένα στοιχεία κατά την επεξεργασία των αρχείων για χρήση παραγωγής.
node_modules: Αυτό κρατά όλες τις εξαρτήσεις ανάπτυξης που εγκαταστήσαμε κατά την εκτέλεση npm install.
src/: Αυτός ο φάκελος περιέχει τον πηγαίο κώδικα της προσθήκης που μεταγλωττίζεται και αποστέλλεται στο build Ευρετήριο. Θα εξετάσουμε κάθε ένα από τα αρχεία εδώ σε λίγο.
.editorconfig: Περιλαμβάνει διαμορφώσεις για να προσαρμόσετε το πρόγραμμα επεξεργασίας κώδικα για συνοχή κώδικα.
.gitignore: Αυτό είναι ένα τυπικό αρχείο repo που προσδιορίζει τοπικά αρχεία που θα πρέπει να εξαιρεθούν από την παρακολούθηση ελέγχου έκδοσης. Τα δικα σου node_modules πρέπει οπωσδήποτε να συμπεριληφθεί εδώ.
package-lock.json: Αυτό είναι ένα αρχείο που δημιουργείται αυτόματα και περιέχει για παρακολούθηση ενημερώσεων στα απαιτούμενα πακέτα που εγκαταστήσαμε npm install.
Αποκλεισμός μεταδεδομένων
Θέλω να σκάψω στο src κατάλογο μαζί σας, αλλά θα επικεντρωθεί πρώτα σε ένα μόνο αρχείο σε αυτόν: block.jsonΤο Εάν έχετε χρησιμοποιήσει create-block , είναι ήδη εκεί για εσάς. αν όχι, προχωρήστε και δημιουργήστε το. Το WordPress κλίνει σκληρά για να καταστήσει αυτόν τον τυπικό, κανονικό τρόπο εγγραφής ενός μπλοκ παρέχοντας μεταδεδομένα που παρέχουν περιβάλλον WordPress τόσο για την αναγνώριση του μπλοκ όσο και για την απόδοση του στον Επεξεργαστή μπλοκ.
Εδώ είναι τι @wordpress/create-block δημιουργήθηκε για μένα:
Υπάρχει πραγματικά α ένα σωρό διαφορετικές πληροφορίες μπορούμε να συμπεριλάβουμε εδώ, αλλά το μόνο που πραγματικά απαιτείται είναι name και title. Μια σούπερ μίνιμαλ έκδοση μπορεί να μοιάζει με αυτό:
$schema ορίζει τη μορφοποίηση σχήματος που χρησιμοποιείται για την επικύρωση του περιεχομένου στο αρχείο. Ακούγεται σαν κάτι απαραίτητο, αλλά είναι εντελώς προαιρετικό, καθώς επιτρέπει στους υποστηρικτικούς επεξεργαστές κώδικα να επικυρώνουν τη σύνταξη και να παρέχουν άλλες πρόσθετες δυνατότητες, όπως συμβουλές συμβουλών εργαλείων και αυτόματη συμπλήρωση.
apiVersion αναφέρεται σε ποια έκδοση του Αποκλεισμός API χρησιμοποιεί το πρόσθετο. Σήμερα, η έκδοση 2 είναι η πιο πρόσφατη.
name είναι μια απαιτούμενη μοναδική συμβολοσειρά που βοηθά στην αναγνώριση της προσθήκης. Παρατηρήστε ότι το έχω βάλει πρόθεμα με css-tricks/ που χρησιμοποιώ ως χώρο ονομάτων για να αποφύγω διενέξεις με άλλες προσθήκες που μπορεί να έχουν το ίδιο όνομα. Μπορείτε να επιλέξετε να χρησιμοποιήσετε κάτι σαν τα αρχικά σας (π.χ as/block-example).
version είναι κάτι Το WordPress προτείνει τη χρήση ως μηχανισμός εξάλειψης της κρυφής μνήμης όταν κυκλοφορούν νέες εκδόσεις.
title είναι το άλλο υποχρεωτικό πεδίο και ορίζει το όνομα που χρησιμοποιείται οπουδήποτε εμφανίζεται η προσθήκη.
category ομαδοποιεί το μπλοκ με άλλα μπλοκ και τα εμφανίζει μαζί στον Επεξεργαστή μπλοκ. Οι τρέχουσες υπάρχουσες κατηγορίες περιλαμβάνουν text, media, design, widgets, theme, να embed, και μπορείτε ακόμη και να δημιουργήσετε προσαρμοσμένες κατηγορίες.
icon σας επιτρέπει να επιλέξετε κάτι από το Βιβλιοθήκη Dashicons για να αναπαραστήσετε οπτικά το μπλοκ σας στο πρόγραμμα επεξεργασίας μπλοκ. Χρησιμοποιώ το format-quote εικονίδιο](https://developer.wordpress.org/resource/dashicons/#format-quote) αφού φτιάχνουμε το δικό μας pullquote σε αυτό το παράδειγμα. Είναι ωραίο που μπορούμε να αξιοποιήσουμε τα υπάρχοντα εικονίδια αντί να χρειάζεται να δημιουργήσουμε τα δικά μας, αν και αυτό είναι σίγουρα δυνατό.
editorScript είναι το κύριο αρχείο JavaScript, index.js, ζει.
Καταχωρίστε το μπλοκ
Ένα τελευταίο πράγμα πριν χτυπήσουμε τον πραγματικό κώδικα, και αυτό είναι να καταχωρήσουμε το πρόσθετο. Απλώς ρυθμίσαμε όλα αυτά τα μεταδεδομένα και χρειαζόμαστε έναν τρόπο για να τα καταναλώσει το WordPress. Με αυτόν τον τρόπο, το WordPress γνωρίζει πού να βρει όλα τα στοιχεία της προσθήκης, ώστε να μπορούν να μπουν στην ουρά για χρήση στο Block Editor.
Η εγγραφή του μπλοκ είναι μια διττή διαδικασία. Πρέπει να το καταχωρήσουμε τόσο σε PHP όσο και σε JavaScript. Για την πλευρά της PHP, ανοίξτε το κύριο αρχείο προσθήκης (block-example.php σε αυτήν την περίπτωση) και προσθέστε τα ακόλουθα αμέσως μετά την κεφαλίδα της προσθήκης:
Αυτό είναι το create-block βοηθητικό πρόγραμμα που δημιουργήθηκε για μένα, γι' αυτό η συνάρτηση ονομάζεται έτσι όπως είναι. Μπορούμε να χρησιμοποιήσουμε διαφορετικό όνομα. Το κλειδί, πάλι, είναι η αποφυγή διενέξεων με άλλες προσθήκες, επομένως είναι καλή ιδέα να χρησιμοποιήσετε τον χώρο ονομάτων σας εδώ για να τον κάνετε όσο το δυνατόν πιο μοναδικό:
Γιατί υποδεικνύουμε το build κατάλογο εάν το block.json με όλα τα μεταδεδομένα μπλοκ που είναι μέσα src? Αυτό οφείλεται στο γεγονός ότι ο κώδικάς μας χρειάζεται ακόμα μεταγλώττιση. ο scripts Το πακέτο επεξεργάζεται τον κώδικα από αρχεία στο src κατάλογο και τοποθετεί τα μεταγλωττισμένα αρχεία που χρησιμοποιούνται στην παραγωγή στο build καταλόγου, ενώ επίσης αντιγράφοντας τοblock.jsonφιλέτο κατά τη διάρκεια.
Εντάξει, ας περάσουμε στην πλευρά JavaScript της εγγραφής του μπλοκ. Ανοίγω src/index.js και βεβαιωθείτε ότι μοιάζει με αυτό:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Μπαίνουμε στο React και το JSX land! Αυτό λέει στο WordPress να:
Εισαγάγετε το registerBlockType ενότητα από το @wordpress/blocks πακέτο.
Εισαγωγή μεταδεδομένων από block.json.
Εισαγάγετε το Edit και Save στοιχεία από τα αντίστοιχα αρχεία τους. Θα βάλουμε κώδικα σε αυτά τα αρχεία αργότερα.
Καταχωρίστε το μπλοκ και χρησιμοποιήστε το Edit και Save στοιχεία για την απόδοση του μπλοκ και την αποθήκευση του περιεχομένου του στη βάση δεδομένων.
Τι συμβαίνει με το edit και save λειτουργίες; Μία από τις αποχρώσεις της ανάπτυξης μπλοκ WordPress είναι η διαφοροποίηση του "πίσω άκρου" από το "μπροστινό μέρος" και αυτές οι λειτουργίες χρησιμοποιούνται για την απόδοση του περιεχομένου του μπλοκ σε αυτά τα περιβάλλοντα, όπου edit χειρίζεται την απόδοση του back-end και save εγγράφει το περιεχόμενο από το Block Editor στη βάση δεδομένων για την απόδοση του περιεχομένου στο μπροστινό μέρος του ιστότοπου.
Ένα γρήγορο τεστ
Μπορούμε να κάνουμε κάποια γρήγορη δουλειά για να δούμε το μπλοκ μας να λειτουργεί στο Block Editor και να αποδίδεται στο μπροστινό μέρος. Ας ανοίξουμε index.js ξανά και χρησιμοποιήστε το edit και save λειτουργίες για την επιστροφή κάποιου βασικού περιεχομένου που επεξηγεί τον τρόπο λειτουργίας τους:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
const { name } = metadata;
registerBlockType(name, {
edit: () => {
return (
"Hello from the Block Editor"
);
},
save: () => {
return (
"Hello from the front end"
);
}
});
Αυτή είναι βασικά μια απογυμνωμένη έκδοση του ίδιου κώδικα που είχαμε πριν, μόνο που υποδεικνύουμε απευθείας τα μεταδεδομένα στο block.json για να ανακτήσετε το όνομα του μπλοκ και άφησε έξω το Edit και Save στοιχεία αφού εκτελούμε τις λειτουργίες απευθείας από εδώ.
Μπορούμε να το μεταγλωττίσουμε τρέχοντας npm run build στη γραμμή εντολών. Μετά από αυτό, έχουμε πρόσβαση σε ένα μπλοκ που ονομάζεται "Παράδειγμα αποκλεισμού" στον Επεξεργαστή μπλοκ:
Εάν ρίξουμε το μπλοκ στην περιοχή περιεχομένου, λαμβάνουμε το μήνυμα που επιστρέφουμε από το edit λειτουργία:
Ξεκινώντας με την Ανάπτυξη Block WordPress
Εάν αποθηκεύσουμε και δημοσιεύσουμε την ανάρτηση, θα λάβουμε το μήνυμα που επιστρέφουμε από το save λειτουργεί κατά την προβολή του στο μπροστινό μέρος:
Ξεκινώντας με την Ανάπτυξη Block WordPress
Δημιουργία μπλοκ
Φαίνεται ότι όλα είναι συνδεδεμένα! Μπορούμε να επιστρέψουμε σε αυτό που είχαμε index.js πριν από τη δοκιμή τώρα που έχουμε επιβεβαιώσει ότι τα πράγματα λειτουργούν:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Παρατηρήστε ότι το edit και save οι λειτουργίες συνδέονται με δύο υπάρχοντα αρχεία στο src κατάλογο που @wordpress/create-block δημιουργήθηκε για εμάς και περιλαμβάνει όλες τις πρόσθετες εισαγωγές που χρειαζόμαστε σε κάθε αρχείο. Το πιο σημαντικό, όμως, αυτά τα αρχεία καθορίζουν το Edit και Save στοιχεία που περιέχουν τη σήμανση του μπλοκ.
Σήμανση πίσω άκρου (src/edit.js)
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Edit() {
return (
{__("Hello from the Block Editor", "block-example")}
);
}
Βλέπετε τι κάναμε εκεί; Εισάγουμε στηρίγματα από το @wordpress/block-editor πακέτο που μας επιτρέπει να δημιουργήσουμε τάξεις που μπορούμε να χρησιμοποιήσουμε αργότερα για styling. Εισάγουμε επίσης το __ λειτουργία διεθνοποίησης, για την αντιμετώπιση μεταφράσεων.
Ξεκινώντας με την Ανάπτυξη Block WordPress
Σήμανση διεπαφής (src/save.js)
Αυτό δημιουργεί ένα Save συστατικό και θα χρησιμοποιήσουμε σχεδόν το ίδιο πράγμα με src/edit.js με λίγο διαφορετικό κείμενο:
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Save() {
return (
{__("Hello from the front end", "block-example")}
);
}
Και πάλι, έχουμε μια ωραία τάξη που μπορούμε να χρησιμοποιήσουμε στο CSS μας:
Ξεκινώντας με την Ανάπτυξη Block WordPress
Μπλοκ styling
Απλώς καλύψαμε πώς να χρησιμοποιήσουμε τα στηρίγματα μπλοκ για τη δημιουργία κλάσεων. Διαβάζετε αυτό το άρθρο σε έναν ιστότοπο σχετικά με το CSS, οπότε αισθάνομαι ότι θα μου έλειπε κάτι αν δεν εξετάζαμε συγκεκριμένα τον τρόπο σύνταξης στυλ μπλοκ.
Διαφοροποίηση εμπρός και πίσω στυλ
Εάν ρίξετε μια ματιά στο block.json στο src κατάλογο θα βρείτε δύο πεδία που σχετίζονται με στυλ:
editorStyle παρέχει τη διαδρομή προς τα στυλ που εφαρμόζονται στο πίσω μέρος.
style είναι η διαδρομή για κοινόχρηστα στυλ που εφαρμόζονται τόσο στο μπροστινό όσο και στο πίσω μέρος.
Ο Kev Quirk έχει ένα λεπτομερές άρθρο Αυτό δείχνει την προσέγγισή του για να κάνει το πρόγραμμα επεξεργασίας back-end να μοιάζει με το διεπαφή χρήστη του μπροστινού άκρου.
Θυμηθείτε ότι το @wordpress/scripts το πακέτο αντιγράφει το block.json αρχείο όταν επεξεργάζεται τον κώδικα στο /src κατάλογο και τοποθετεί μεταγλωττισμένα στοιχεία στο /build Ευρετήριο. Είναι το build/block.json αρχείο που χρησιμοποιείται για την εγγραφή του μπλοκ. Αυτό σημαίνει οποιονδήποτε δρόμο παρέχουμε src/block.json πρέπει να γράφεται σε σχέση με build/block.json.
Χρήση Sass
Θα μπορούσαμε να ρίξουμε μερικά αρχεία CSS στο build κατάλογο, αναφέρετε τις διαδρομές μέσα src/block.json, εκτελέστε την κατασκευή και ονομάστε την ημέρα. Αλλά αυτό δεν αξιοποιεί την πλήρη ισχύ του @wordpress/scripts διαδικασία μεταγλώττισης, η οποία είναι ικανή να μεταγλωττίσει το Sass σε CSS. Αντίθετα, τοποθετούμε τα αρχεία στυλ μας στο src κατάλογο και να τα εισαγάγετε σε JavaScript.
Ενώ το κάνουμε αυτό, πρέπει να προσέχουμε πώς @wordpress/scripts στυλ διεργασιών:
Ένα αρχείο με όνομα style.css or style.scss or style.sass, που εισάγεται στον κώδικα JavaScript, γίνεται μεταγλώττιση στο style-index.css.
Όλα τα άλλα αρχεία στυλ μεταγλωττίζονται και ομαδοποιούνται index.css.
Η @wordpress/scripts χρήσεις πακέτων webpack για ομαδοποίηση και @wordpress/scripts χρησιμοποιεί το Πρόσθετο PostCSS για εργασία για στυλ επεξεργασίας. Το PostCSS μπορεί να επεκταθεί με πρόσθετα πρόσθετα. ο scripts Το πακέτο χρησιμοποιεί αυτά για Sass, SCSS και Autoprefixer, τα οποία είναι όλα διαθέσιμα για χρήση χωρίς εγκατάσταση πρόσθετων πακέτων.
Στην πραγματικότητα, όταν περιστρέφετε το αρχικό σας μπλοκ με @wordpress/create-block, έχετε ένα καλό ξεκίνημα με αρχεία SCSS που μπορείτε να χρησιμοποιήσετε για να πατήσετε στο έδαφος:
editor.scss περιέχει όλα τα στυλ που εφαρμόζονται στον επεξεργαστή back-end.
style.scss περιέχει όλα τα στυλ που μοιράζονται τόσο το μπροστινό όσο και το πίσω μέρος.
Ας δούμε τώρα αυτή την προσέγγιση σε δράση γράφοντας ένα μικρό Sass που θα μεταγλωττίσουμε στο CSS για το μπλοκ μας. Παρόλο που τα παραδείγματα δεν πρόκειται να είναι πολύ εύστοχα, εξακολουθώ να τα γράφω στα αρχεία SCSS για να δείξω τη διαδικασία μεταγλώττισης.
Εμπρός και στυλ back-end
Εντάξει, ας ξεκινήσουμε με στυλ που εφαρμόζονται τόσο στο μπροστινό όσο και στο πίσω μέρος. Πρώτα πρέπει να δημιουργήσουμε src/style.scss (είναι ήδη εκεί αν χρησιμοποιείτε @wordpress/create-block) και βεβαιωθείτε ότι το εισάγουμε, κάτι που μπορούμε να κάνουμε index.js:
import "./style.scss";
Ανοίξτε src/style.scss και αποθέστε μερικά βασικά στυλ εκεί χρησιμοποιώντας την κλάση που δημιουργήθηκε για εμάς από τα στηρίγματα μπλοκ:
Αυτό είναι προς το παρόν! Όταν εκτελούμε το build, αυτό μεταγλωττίζεται build/style.css και αναφέρεται τόσο από το Block Editor όσο και από το front end.
Στυλ back-end
Ίσως χρειαστεί να γράψετε στυλ που είναι ειδικά για το Block Editor. Για αυτό, δημιουργήστε src/editor.scss (πάλι, @wordpress/create-block το κάνει αυτό για εσάς) και ρίξτε μερικά στυλ εκεί:
Στη συνέχεια, εισάγετέ το edit.js, το οποίο είναι το αρχείο που περιέχει το δικό μας Edit στοιχείο (μπορούμε να το εισαγάγουμε οπουδήποτε θέλουμε, αλλά επειδή αυτά τα στυλ προορίζονται για τον επεξεργαστή, είναι πιο λογικό να εισαγάγετε το στοιχείο εδώ):
import "./editor.scss";
Τώρα που τρέχουμε npm run build, τα στυλ εφαρμόζονται στο μπλοκ και στα δύο περιβάλλοντα:
Ξεκινώντας με την Ανάπτυξη Block WordPressΞεκινώντας με την Ανάπτυξη Block WordPress
Αναφορά στυλ σε block.json
Εισαγάγαμε τα αρχεία styling στο edit.js και index.js, αλλά θυμηθείτε ότι το βήμα μεταγλώττισης δημιουργεί δύο αρχεία CSS για εμάς στο build Ευρετήριο: index.css και style-index.css αντίστοιχα. Πρέπει να αναφέρουμε αυτά τα αρχεία που δημιουργούνται στα μεταδεδομένα μπλοκ.
Ας προσθέσουμε μερικές δηλώσεις στο block.json μεταδεδομένα:
τρέξιμο npm run build Για άλλη μια φορά, εγκαταστήστε και ενεργοποιήστε το πρόσθετο στον ιστότοπό σας στο WordPress και είστε έτοιμοι να το χρησιμοποιήσετε!
Μπορείς να χρησιμοποιήσεις npm run start για να εκτελέσετε το build σας σε λειτουργία παρακολούθησης, με αυτόματη μεταγλώττιση του κώδικά σας κάθε φορά που κάνετε μια αλλαγή στον κώδικά σας και αποθηκεύετε.
Ξύνουμε την επιφάνεια
Τα πραγματικά μπλοκ χρησιμοποιούν την πλαϊνή γραμμή ρυθμίσεων του προγράμματος επεξεργασίας μπλοκ και άλλες δυνατότητες που παρέχει το WordPress για να δημιουργήσετε πλούσιες εμπειρίες χρήστη. Επιπλέον, το γεγονός ότι υπάρχουν ουσιαστικά δύο εκδόσεις του μπλοκ μας — edit και save — πρέπει επίσης να σκεφτείτε πώς οργανώνετε τον κώδικά σας για να αποφύγετε την επανάληψη κώδικα.
Αλλά ελπίζουμε ότι αυτό βοηθά στην απομυθοποίηση της γενικής διαδικασίας για τη δημιουργία μπλοκ WordPress. Αυτή είναι πραγματικά μια νέα εποχή στην ανάπτυξη του WordPress. Είναι δύσκολο να μαθαίνεις νέους τρόπους να κάνεις πράγματα, αλλά ανυπομονώ να δω πώς θα εξελιχθεί. Εργαλεία όπως @wordpress/create-block βοήθεια, αλλά ακόμα και τότε είναι ωραίο να γνωρίζεις ακριβώς τι κάνει και γιατί.
Θα αλλάξουν τα πράγματα που καλύψαμε εδώ; Πιθανότατα! Αλλά τουλάχιστον έχετε μια βασική γραμμή για να δουλέψετε καθώς συνεχίζουμε να παρακολουθούμε τα μπλοκ WordPress να ωριμάζουν, συμπεριλαμβανομένων των βέλτιστων πρακτικών για τη δημιουργία τους.
αναφορές
Και πάλι, ο στόχος μου εδώ είναι να χαράξω μια αποτελεσματική διαδρομή για να μπείτε στην ανάπτυξη μπλοκ αυτή τη σεζόν όπου τα πράγματα εξελίσσονται γρήγορα και η τεκμηρίωση του WordPress δυσκολεύεται λίγο να καλυφθεί. Εδώ είναι μερικοί πόροι που χρησιμοποίησα για να το συνδυάσω:
