Πώς να προσαρμόσετε την προσθήκη σας για το Gutenberg: Μέρος 1 (Block API)

Πώς να προσαρμόσετε την προσθήκη σας για το Gutenberg: Μέρος 1 (Block API)

Πώς να προσαρμόσετε την προσθήκη σας για το Gutenberg: Μέρος 1 (Block API)
СОДЕРЖАНИЕ
02 июня 2020

"Έχω ένα πρόσθετο," σου λέει, "πώς μπορώ να το κάνω Gutenberg-ready?"


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

Ποιος επηρεάζεται?

Σχεδόν όλα τα πρόσθετα που έχουν να κάνουν με το πρόγραμμα επεξεργασίας δημοσιεύσεων θα επηρεαστούν από τον Gutenberg. Για παράδειγμα, εάν η προσθήκη σας προσθέσει ένα κουμπί στο TinyMCE για να τοποθετήσετε έναν σύντομο κώδικα στον επεξεργαστή, άσχημα νέα. θα είναι το τέλος του.
Προσαρμόστε την προσθήκη σας για το Gutenberg: Μέρος 1 (Block API)

"Πρέπει να προσαρμόσω τις προσθήκες μου για το Gutenberg?"

Λοιπόν, ποια πρόσθετα χρειάζονται ενημέρωση για το Gutenberg; Τυχόν προσθήκες που λειτουργούν με:

  • Προσαρμοσμένα μετα-κουτιά
  • Σύντομοι κωδικοί
  • Κουμπιά TinyMCE
  • ή οποιαδήποτε δυνατότητα επεξεργασίας

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

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

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

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

(σι)Feedzy RSS Feeds - ένα πρόσθετο Gutenberg-ready

Μη φοβάσαι! Είμαστε εδώ για να σας βοηθήσουμε να φτιάξετε τα πρόσθετα σας Gutenberg-ready. Υπάρχουν πολλοί τρόποι ενσωμάτωσης της προσθήκης σας στο Gutenberg, ανάλογα με τον τρόπο λειτουργίας της προσθήκης σας, τους οποίους θα συζητήσουμε σε αυτό το άρθρο.

Πράγματα που αξίζει να γνωρίζετε εκ των προτέρων Ο Γκότενμπεργκ γράφεται στο React. Και τα πρόσθετα Gutenberg κωδικοποιούνται σε JavaScript, η οποία μπορεί επίσης να είναι μια πρόχειρη μετάβαση για προγραμματιστές που κωδικοποιούν μόνο στην PHP. Αν και δεν χρειάζεται να έχετε γνώση του React για να δημιουργήσετε προσθήκες για το Gutenberg, θα χρειαστείτε κάποια βασική κατανόηση της JavaScript. Εάν έχετε εργαστεί στο παρελθόν στο React και στο JSX τότε θα είναι παρόμοιος λόγος για εσάς.

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

Πώς να προσαρμόσετε το plugin σας για το Gutenberg

Το API του Gutenberg μας παρέχει πολλούς τρόπους για την επέκταση του προγράμματος επεξεργασίας, όπως το Block API, το Shortcode API και πολλά άλλα. Το API που θα χρησιμοποιηθεί εξαρτάται από τον τύπο του plugin που δημιουργούμε.

Εάν η προσθήκη σας είναι μια απλή σύντομη προσθήκη, τότε το Block API μπορεί να χρησιμοποιηθεί για να δημιουργήσει ένα όμορφο μπλοκ για τον επεξεργαστή. Αλλά αν η προσθήκη σας χρησιμοποιεί πολύπλοκα μετα-πλαίσια όπου ένα μπλοκ δεν είναι αρκετό, μπορούμε να χρησιμοποιήσουμε το Sidebar API.

Επίσης, θα χρησιμοποιήσουμε μια σύγχρονη στοίβα εργαλείων ανάπτυξης JavaScript, όπως NodeJS, NPM, webpack και ESNext. Θα σας παρέχουμε παραδείγματα αρχείων, επομένως δεν χρειάζεται να ανησυχείτε για τη ρύθμιση του περιβάλλοντος ανάπτυξης.

Σε αυτήν την ανάρτηση, θα εξετάσουμε πώς να κάνετε το plugin σας συμβατό με το Gutenberg χρησιμοποιώντας το Block API. Θα βρούμε τις άλλες μεθόδους (Sidebar API, Publish Panel, Status Bar & παρόμοια API) στο δεύτερο μέρος, εάν χρειάζεται.

Μπορείτε να βρείτε όλα τα αναφερόμενα παραδείγματα στο αυτό το αποθετήριο GitHub.

Περιβάλλον ανάπτυξης Gutenberg

Η ανάπτυξη για το Gutenberg απαιτεί από εσάς να ρυθμίσετε πολλά εργαλεία, όπως NPM, webpack, Babel και JSX. Χρειάζεται πολύς χρόνος και προσπάθεια, επομένως έχουμε προετοιμάσει το περιβάλλον για εσάς.

Το Gutenberg Boilerplate είναι ένα πρόσθετο με ελάχιστες ρυθμίσεις ανάπτυξης και παραδείγματα Gutenberg. Περιέχει ένα παράδειγμα μπλοκ και πλευρικής γραμμής. Μπορείτε να το χρησιμοποιήσετε για να επεκταθείτε στο προσαρμοσμένο μπλοκ σας.

Γκατένμπεργκ

Μπορείτε να πιρούνι ή να κλωνοποιήσετε Αποθήκη Gutenberg Boilerplate στο δικό σου / wp-content / plugins / και χρησιμοποιήστε το ως περιβάλλον ανάπτυξης.

Μετά από αυτό, πρέπει να εγκαταστήσετε το NodeJS στο μηχάνημά σας για να ξεκινήσετε. Μεταβείτε στο φάκελο Gutenberg Boilerplate και εκτελέστε την εγκατάσταση npm

Από εδώ και πέρα, πρέπει να γνωρίζετε τρεις εντολές που θα χρησιμοποιείτε κατά τη διαδικασία ανάπτυξης:

  • εγκατάσταση npm – Εγκαταστήστε εξαρτήσεις έργου όταν κλωνοποιείτε το έργο.
  • npm run dev – Μεταγλώττιση κώδικα κατά τη διαδικασία ανάπτυξης. Πρέπει να το εκτελέσετε μία φορά και θα συνεχίσει να παρακολουθεί τις αλλαγές.
  • npm run build – Μεταγλώττιση κώδικα για μια βελτιστοποιημένη έκδοση μόλις ολοκληρωθεί η διαδικασία ανάπτυξης.

Αποκλεισμός API

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

Η διαδικασία βασίζεται σε μια υπάρχουσα προσθήκη

Στο παράδειγμά μας, θα υιοθετήσουμε έναν σύντομο κωδικό “Κλικ σε Tweet” σε ένα μπλοκ Gutenberg. Αυτός ο σύντομος κωδικός Click to Tweet καθιστά ένα πλαίσιο Tweet με το κείμενό σας και ένα κουμπί για να κάνετε tweet αυτού του κειμένου. Σαν αυτό:

Κάντε κλικ στο Tweet Layout

Ο σύντομος κώδικάς μας μοιάζει με αυτό:

[tweet clicktotweet ="Κείμενο προς εμφάνιση" tweetsent ="Κείμενο προς tweet" κουμπί ="Τιτίβισμα" θέμα ="κάντε κλικ για να κάνετε tweet"]

Ο σύντομος κώδικας μας έχει τέσσερις παραμέτρους:

  • tweet: Κείμενο που εμφανίζεται στον ιστότοπό σας.
  • tweetsent: Κείμενο που πηγαίνει στο Twitter.
  • κουμπί: Κείμενο κουμπιού tweet.
  • θέμα: Είτε θέμα πλαισίου κάντε κλικ για tweet είτε κάντε κλικ για tweet-alt.

Προσαρμογή προσθηκών για το Gutenberg με Block API

Υπάρχουν δύο τρόποι για να το κάνετε με το Gutenberg, είτε μπορούμε να αποδώσουμε το HTML στο front-end, είτε μπορούμε να χρησιμοποιήσουμε το μπλοκ Gutenberg για να μετατρέψουμε το συντομότερο σε front-end. Για αυτό το άρθρο, θα κάνουμε το τελευταίο.

Όλος ο κωδικός είναι διαθέσιμος σε Γεια σας Gutenberg plugin αποθετήριο στο GitHub. Μπορείτε να κλωνοποιήσετε το αποθετήριο για να δείτε την προσθήκη σε δράση ή για να τροποποιήσετε τον κώδικα.

Enqueue σενάρια / στυλ για το Gutenberg

Πρώτον, πρέπει να ενσωματώσουμε τα σενάρια και τα στυλ μας στον επεξεργαστή Gutenberg χρησιμοποιώντας το enqueue_block_assets:

/ **
* Enqueue front end και JavaScript editor και CSS
* /
συνάρτηση hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Τοποθετήστε το αρχείο δέσμευσης μπλοκ JS
wp_enqueue_script (
«γεια-gutenberg-block-js»,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
)

// Enqueue frontend και editor block στυλ
wp_enqueue_style (
«γεια-gutenberg-block-css»,
plugins_url ($ stylePath, __FILE__),
»,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
)

}

// Τα σενάρια γάντζου λειτουργούν στο άγκιστρο επεξεργασίας μπλοκ
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

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

Το wp-i18n είναι η έκδοση των λειτουργιών διεθνοποίησης του Gutenberg, όπως __ (). Το wp-blocks χρησιμοποιείται για τη συνάρτηση registerBlockType που καταγράφει το μπλοκ σας. Χρησιμοποιούμε σενάρια wp-editor και wp-components για διάφορα στοιχεία στο μπλοκ μας.

Τώρα που έχουμε εκκενώσει τα στοιχεία σας, μπορούμε να αρχίσουμε να γράφουμε το μπλοκ μας /src/block.js αρχείο.

Εισαγωγή εξαρτήσεων

Εάν χρησιμοποιείτε το Gutenberg Boilerplate τότε το δικό σας block.js Το αρχείο πρέπει να έχει μια βασική δομή μπλοκ που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε προσθήκες για το Gutenberg:

/ **
* Εσωτερικές μπλοκ βιβλιοθηκών
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Εγγραφή μπλοκ
* /
εξαγωγή προεπιλεγμένου μητρώουBlockType (‘gutenberg-boilerplate / block’, {
// Τίτλος αποκλεισμού
τίτλος: __ (‘Gutenberg Boilerplate’),
// Περιγραφή μπλοκ
περιγραφή: __ (“Ένα παράδειγμα μπλοκ.”),
// Κατηγορία αποκλεισμού
κατηγορία: «κοινό»,
// Εικονίδιο αποκλεισμού
εικονίδιο: ‘admin-site’,
// Αποκλεισμός λέξεων-κλειδιών
λέξεις-κλειδιά: [
__ («Boilerplate»),
__( ‘Γειά σου Κόσμε’ ),
__ (“Παράδειγμα”),
],
χαρακτηριστικά: {
},
// Καθορισμός της διεπαφής επεξεργασίας
επεξεργασία: props => {
ΕΠΙΣΤΡΟΦΗ (

{__ (“Γεια σας Backend”)}

)
},
// Καθορισμός διεπαφής διεπαφής
αποθήκευση: στηρίγματα => {
ΕΠΙΣΤΡΟΦΗ (

{__ (“Γεια σας Frontend”)}

)
},
});

Μπορείτε να εκτελέσετε το npm run dev για να ξεκινήσετε τη σύνταξη του κωδικού μας σε πραγματικό χρόνο.

Πρώτον, θα εισαγάγουμε όλα τα στοιχεία και τις βιβλιοθήκες που χρειαζόμαστε για το μπλοκ στην κορυφή:

/ **
* Αποκλεισμός εξαρτήσεων
* /

εισαγωγή ονομάτων κλάσεων από «ονόματα κλάσης» ·

/ **
* Εσωτερικές μπλοκ βιβλιοθηκών
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

σταθερός {
Πλούσιο κείμενο,
Επιθεωρητές,
BlockControls,
} = wp.editor;

σταθερός {
PanelBody,
TextareaControl,
Έλεγχος κειμένου,
Dashicon,
Γραμμή εργαλείων,
Κουμπί,
Επεξήγηση εργαλείου,
} = wp.components;

Οι πρώτες εισαγωγές ονόματα τάξεων την οποία εγκαταστήσαμε χρησιμοποιώντας npm για να χρησιμοποιήσουμε πολλές κλάσεις στον κώδικα μας, καθώς το JSX δεν επιτρέπει πολλές κλάσεις σε στοιχεία.

Θα μάθουμε για άλλα στοιχεία που έχουμε εισαγάγει καθώς τα χρησιμοποιούμε.

Ορίστε χαρακτηριστικά

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

χαρακτηριστικά: {
tweet: {
τύπος: ‘string’,
},
tweetsent: {
τύπος: ‘string’,
},
κουμπί: {
τύπος: ‘string’,
προεπιλογή: __ (‘Tweet’),
},
θέμα: {
τύπος: ‘boolean’,
προεπιλογή: false,
},
},

Όπως μπορείτε να δείτε, όλα τα χαρακτηριστικά είναι ίδια με τον σύντομο κωδικό μας. Όλα τα χαρακτηριστικά έχουν ένα κλειδί τύπου, το οποίο λέει στον Gutenberg τον τύπο δεδομένων του. Μπορείτε να χρησιμοποιήσετε συμβολοσειρά, αριθμό, boolean & αντικείμενο ως αποδεκτούς τύπους.

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

Επεξεργασία διεπαφής

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

Για να αποκτήσουμε μια βασική ιδέα, μπορούμε πρώτα να κάνουμε σκληρό κώδικα το μπλοκ μας και να το χτίσουμε αντικαθιστώντας την ακόλουθη περιοχή στον κώδικά μας:

// Καθορισμός της διεπαφής επεξεργασίας
επεξεργασία: props => {
ΕΠΙΣΤΡΟΦΗ (

{__ (“Γεια σας Backend”)}

)
},

Με τον ακόλουθο κωδικό:

// Καθορισμός της διεπαφής επεξεργασίας
επεξεργασία: props => {
ΕΠΙΣΤΡΟΦΗ [

Κολοκύθες και πιγκουίνοι

Τιτίβισμα

];
},

Αυτό θα σας δώσει μια ιδέα για το τελικό μας αποτέλεσμα. Θα μοιάζει με αυτό:

Πρόσθετα για το Gutenberg

Το πρώτο στοιχείο του μπλοκ είναι η περιοχή κειμένου tweet. Θα το αντικαταστήσουμε με ένα επεξεργάσιμο πεδίο κειμένου, παρόμοιο με το μπλοκ επικεφαλίδων του Gutenberg.

Θα το χρησιμοποιησουμε Πλούσιο κείμενο στοιχείο που είχαμε εισαγάγει στο παρελθόν για να αντικαταστήσει το κείμενο με σκληρό κώδικα.

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

Το RichText έχει ορισμένες επιλογές μορφοποίησης από προεπιλογή, όπως έντονη και πλάγια γραφή, τις οποίες έχουμε απενεργοποιήσει μεταβιβάζοντας έναν κενό πίνακα στο όρισμα formattingControls.

placeholder είναι το κείμενο placeholder όταν δεν υπάρχει κείμενο στο πεδίο και το onChange θα ενεργοποιήσει τη λειτουργία onChangeTweet όταν λαμβάνει χώρα ένα συμβάν αλλαγής.

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

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

// Καθορισμός της διεπαφής επεξεργασίας
επεξεργασία: props => {
const onChangeTweet = τιμή => {
props.setAttributes ({tweet: value});
};
ΕΠΙΣΤΡΟΦΗ [
…υπόλοιπος κωδικός

Μεταβιβάζουμε την τιμή του πεδίου RichText στη συνάρτηση onChangeTweet, η οποία χρησιμοποιεί props.setAttributes λειτουργία για την ενημέρωση της τιμής του χαρακτηριστικού tweet.

Θα δείτε τη δύναμη του Gutenberg τώρα όταν χρησιμοποιείτε το μπλοκ σας.

RichField στο Gutenberg

Δεν είναι φοβερό?

Επιθεωρητής μπλοκ

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

Ομοίως με το στοιχείο RichText, το στοιχείο InspectorControls προσθέτει μια πλευρική γραμμή όταν επιλέγεται το μπλοκ. Κάτι σαν αυτό:

Έλεγχοι επιθεωρητή Gutenberg

Θα χρησιμοποιήσουμε επίσης TextareaControl και TextControl για να προσθέσουμε ένα πεδίο κειμένου και εισαγωγής κειμένου στην περιοχή επιθεωρητών μας.

Θα προσθέσουμε τον ακόλουθο κωδικό στη δήλωση επιστροφής σας:

!! props.isΕπιλέχθηκε && (

),

props.isΕπιλεγμένοι έλεγχοι για να βεβαιωθείτε ότι ο Επιθεωρητής εμφανίζεται μόνο όταν είναι επιλεγμένο το μπλοκ.

Τα στοιχεία TextareaControl και TextControl, παρόμοια με το RichText, έχουν μια τιμή και μέθοδο onChange.

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

Μπορείτε να αντικαταστήσετε τον υπερσύνδεσμο στον αρχικό μας κώδικα με τα εξής:


{props.attributes.button}

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

Gutenberg Κάντε κλικ για να κάνετε Tweet Επιθεωρητικά στοιχεία ελέγχου

Το Block Inspector μπορεί να είναι ένα ισχυρό εργαλείο για το μπλοκ σας. Εάν η προσθήκη σας διαθέτει σύνθετες επιλογές που είναι πολύ περίπλοκες για την περιοχή επεξεργασίας, τότε μπορείτε να τις τοποθετήσετε στην περιοχή Inspector.

Θα προσθέσουμε μια τελευταία επιλογή στο μπλοκ μας για να ολοκληρώσουμε το τμήμα JavaScript στην επόμενη ενότητα.

Αποκλεισμός γραμμής εργαλείων

Το Block Toolbar είναι ένα άλλο προεγκατεστημένο στοιχείο διεπαφής χρήστη που μπορούμε να χρησιμοποιήσουμε για να προσθέσουμε περισσότερες επιλογές στο μπλοκ μας. Θα εμφανιστεί πάνω από το μπλοκ σας όταν το επιλέξετε. Παράδειγμα:

Γραμμή εργαλείων μπλοκ Gutenberg

Στην ιδανική περίπτωση, το Block Toolbar πρέπει να περιέχει τα κύρια στοιχεία ελέγχου του μπλοκ σας, με το Inspector να φιλοξενεί τα δευτερεύοντα στοιχεία ελέγχου. Ωστόσο, αυτό είναι συζητήσιμο και εξαρτάται από το μπλοκ σας.

Θα χρησιμοποιήσουμε την περιοχή Block Toolbar για να φιλοξενήσουμε τον εναλλακτικό έλεγχο στυλ.

Παρόμοια με το Block Inspector, πρέπει να προσθέσουμε τον ακόλουθο κώδικα στη δήλωση επιστροφής για να προσθέσουμε το Block Toolbar στο μπλοκ μας:

!! props.isΕπιλέχθηκε && (

),

Χρησιμοποιούμε στοιχεία BlockControls και Toolbar για να προσθέσουμε μια γραμμή εργαλείων στο μπλοκ μας. Παρόμοια με το Block Inspector, το props.isSelected διασφαλίζει ότι η γραμμή εργαλείων μας εμφανίζεται μόνο όταν εστιάζουμε στο μπλοκ μας.

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

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

Η λειτουργία onChange εναλλάσσει το χαρακτηριστικό θέματος σε true / false. Στο τέλος, τα στοιχεία Dashicon χρησιμοποιούνται για την εμφάνιση ενός εικονιδίου για τον έλεγχό μας.

Θα πρέπει επίσης να αλλάξουμε τον μπλοκ κώδικα για να λειτουργεί με τις αλλαγές. Πρέπει να αντικαταστήσουμε την ακόλουθη γραμμή:

Με:

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

Τώρα το μπλοκ σας θα πρέπει να μοιάζει με αυτό:

Κάντε κλικ στο Tweet Toolbar

Ολοκληρώσαμε το τμήμα με το JavaScript του μπλοκ Gutenberg. Μπορείτε να βρείτε ολόκληρο τον πηγαίο κώδικα του αρχείου εδώ.

Τώρα θα ολοκληρώσουμε το μπλοκ χειρίζοντας την έξοδο από την πλευρά του διακομιστή.

Απόδοση διακομιστή

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

Κατ ‘αρχάς, θα κάνουμε τη μέθοδο αποθήκευσης για να επιστρέψουμε μηδέν αντικαθιστώντας την με τον ακόλουθο κωδικό:

// Καθορισμός διεπαφής διεπαφής
σώσει() {
// Απόδοση σε PHP
επιστροφή μηδέν;
},

Θα χρησιμοποιήσουμε τη λειτουργία register_block_type PHP για να καταχωρήσουμε τον τύπο μπλοκ μας στο PHP:

εάν (function_exists (‘register_block_type’)) {
// Αγκιστρώστε την απόδοση του διακομιστή σε απόδοση επιστροφής κλήσης
register_block_type (τύπου
«hello-gutenberg / click-to-tweet», [
‘render_callback’ => “hello_gutenberg_block_callback”,
“χαρακτηριστικά” => πίνακας(
‘tweet’ => πίνακας(
«τύπος» => ‘σειρά’,
),
‘tweetsent’ => πίνακας(
«τύπος» => ‘σειρά’,
),
“κουμπί” => πίνακας(
«τύπος» => ‘σειρά’,
«προεπιλογή» => ‘Τιτίβισμα’,
),
“θέμα” => πίνακας(
«τύπος» => «boolean»,
«προεπιλογή» => ψευδής,
),
),
]
)
}

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

Το πρώτο όρισμα είναι η συνάρτηση render_callback, η οποία καλεί τη συνάρτηση hello_gutenberg_block_callback για απόδοση από διακομιστή.

Μετά την επιστροφή κλήσης απόδοσης, μεταβιβάζουμε χαρακτηριστικά ως πίνακα, παρόμοια με το αρχείο block.js, τα οποία χρησιμοποιούμε στη λειτουργία επιστροφής κλήσης απόδοσης.

Η λειτουργία επιστροφής κλήσης απόδοσης μοιάζει με αυτήν:

συνάρτηση hello_gutenberg_block_callback ($ attr) {
απόσπασμα ($ attr);
εάν (isset ($ tweet)) {
$ theme = ($ theme === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="%μικρό" tweetsent ="%μικρό" κουμπί ="%μικρό" θέμα ="%μικρό"] ‘;
επιστροφή sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}
}

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

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

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

Εάν έχετε οποιεσδήποτε ερωτήσεις σχετικά με τον τρόπο προσαρμογής της προσθήκης σας για το Gutenberg, ρωτήστε τους στα σχόλια!

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

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