Πώς να κάνετε το Plugin σας συμβατό με το Gutenberg: Part 2 (Sidebar API)

Πώς να κάνετε το Plugin σας συμβατό με το Gutenberg: Part 2 (Sidebar API)

Πώς να κάνετε το Plugin σας συμβατό με το Gutenberg: Part 2 (Sidebar API)
СОДЕРЖАНИЕ
02 июня 2020

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


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

Για να βεβαιωθούμε ότι βρισκόμαστε στην ίδια σελίδα, μια γρήγορη εξήγηση:

  • Το API μπλοκ του Gutenberg είναι πολύ εκτεταμένο και σας επιτρέπει να δημιουργήσετε σχεδόν τα πάντα ως μπλοκ, αλλά, μερικές φορές, δεν αρκεί.
  • Το Sidebar API, από την άλλη πλευρά, επιτρέπει στα plugins να καταχωρούν μια πλαϊνή γραμμή όπου μπορούν να κάνουν τη λειτουργικότητά τους πέρα ​​από τα μπλοκ. Η πλευρική γραμμή είναι παρόμοια με το Block Inspector.

Κάντε το Plugin σας συμβατό με το Gutenberg - Sidebar API

Για παράδειγμα, το Gutenberg Sidebar API χρησιμοποιείται όπως αποδεικνύεται από το Yoast SEO:

API πλευρικής γραμμής Gutenberg

Εργαστήκαμε πρόσφατα στην κατασκευή της προσθήκης μας – Αναθεώρηση προϊόντων WP – έτοιμο για το Gutenberg. Το WP Product Review χρησιμοποίησε μετα-πεδία για την προσθήκη δεδομένων κριτικής στην ανάρτηση και δεν μπορέσαμε να μετατραπούν σε μπλοκ για διάφορους λόγους συμβατότητας προς τα πίσω. Ως εκ τούτου, χρησιμοποιήσαμε το Sidebar API.

Δείτε πώς ενσωματώσαμε το WP Product Review στον επεξεργαστή Gutenberg:Αναθεώρηση προϊόντων WP Gutenberg

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

Το WP Product Review είναι ένα από τα παραδείγματα όπου το Sidebar API μπορεί να είναι χρήσιμο. Ένα άλλο μεγάλο παράδειγμα είναι το Πέτα το plugin, το οποίο επιτρέπει στους χρήστες να εισάγουν εικόνες από Unsplash και Giphy χρησιμοποιώντας την πλευρική γραμμή.

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

Τα μετα-κουτιά είναι από προεπιλογή έτοιμα για το Gutenberg, αλλά όχι αρκετά

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

Αυτό μπορεί να μοιάζει με το ακόλουθο στο Classic Editor:

Meta Box στο Classic Editor

Μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα για να δημιουργήσετε ένα τέτοιο μετα-πλαίσιο – είναι επίσης διαθέσιμο στο Γεια σας Γκούτενμπεργκ αποθήκη:

/ **
* Εγγραφείτε Hello Gutenbert Meta Box
* /
συνάρτηση hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (“Hello Gutenberg Meta Box”, “hello-gutenberg”), “hello_gutenberg_metabox_callback”, “post”);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Γεια σας, Gutenberg Metabox Callback
* /
function hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ ανάρτηση->Αναγνωριστικό, “_hello_gutenberg_field”, true);
?>
<?php _e (“Ποιο είναι το όνομά σας;”, “hello-gutenberg”) ?>

<?php
}

/ **
* Αποθηκεύστε το Hello Gutenberg Metabox
* /
συνάρτηση hello_gutenberg_save_postdata ($ post_id) {
εάν (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

Η ερώτηση λοιπόν εδώ είναι:

Πρέπει πρώτα να κάνουμε αυτό συμβατό με το Gutenberg?

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

Ωστόσο, όταν μιλάμε για συμβατότητα Gutenberg, δεν μιλάμε απλώς για το plugin που λειτουργεί στο περιβάλλον Gutenberg, αλλά το plugin λειτουργεί * όπως το Gutenberg *.

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

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

Τέλος, ας βρώσουμε τα χέρια μας με κάποιο κωδικό!

Θα αρχίσουμε να κωδικοποιούμε το Sidebar στο Gutenberg για να συμπεριλάβουμε το μετα-πεδίο μας. Μπορείτε να συνεχίσετε να χρησιμοποιείτε το Γκατένμπεργκ αποθετήριο ως αφετηρία.

Προετοιμασία του μετα-κουτιού σας για το Gutenberg

Πριν ξεκινήσουμε, πρέπει πρώτα να πούμε στον Gutenberg ότι δεν θα χρησιμοποιούμε το μετα-κουτί μας στο Gutenberg. Μπορείτε να το κάνετε μεταβιβάζοντας το όρισμα __back_compat_meta_box στη συνάρτηση add_meta_box, όπως:

/ **
* Εγγραφείτε Hello Gutenberg Metabox
* /
συνάρτηση hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (“Hello Gutenberg Meta Box”, “hello-gutenberg”), “hello_gutenberg_metabox_callback”, “post”, array (
‘__back_compat_meta_box’ => ψευδής,
))
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Το εγχειρίδιο του Gutenberg έχει περισσότερες λεπτομέρειες σχετικά με το πώς μπορείτε να χειριστείτε τη μεταφορά μετα-κουτιών PHP στο Gutenberg (εδώ).

Αυτό θα διασφαλίσει ότι τα παλιά μας μετα-κουτιά PHP δεν θα εμφανίζονται πλέον στο Gutenberg. Τώρα πρέπει επίσης να προετοιμάσουμε το μετα-πεδίο μας για το Gutenberg προσθέτοντάς το στο WordPress REST API. Μπορείτε να προσθέσετε τον ακόλουθο κώδικα για να καταχωρήσετε το μετα-πεδίο στο REST API:

/ **
* Εγγραφείτε Hello Gutenberg Meta Field to Rest API
* /
συνάρτηση hello_gutenberg_register_meta () {
register_meta (
“post”, “_hello_gutenberg_field”, πίνακας (
«τύπος» => ‘σειρά’,
“μονό” => αληθής,
‘show_in_rest’ => αληθής,
)
)
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Αυτό θα προσθέσει το _hello_gutenberg_field στο μετα αντικείμενο στο REST API.

Αυτή η συνάρτηση θα κάνει μόνο την εμφάνιση της αξίας μας στο REST API. Τώρα πρέπει επίσης να προσθέσουμε μια μέθοδο για να ενημερώσουμε το μετα-πεδίο μας χρησιμοποιώντας το REST API.

Ο παρακάτω κώδικας θα προσθέσει την προσαρμοσμένη διαδρομή μας στο WordPress REST API, το οποίο θα είναι / γεια-gutenberg / v1 / ενημέρωση-μετα /:

/ **
* Εγγραφείτε Hello Gutenberg Metabox to Rest API
* /
συνάρτηση hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, πίνακας (
«μέθοδοι» => ‘ΘΕΣΗ’,
‘callback’ => “hello_gutenberg_update_callback”,
“args” => πίνακας(
‘id’ => πίνακας(
‘sanitize_callback’ => «απουσία»,
),
),
)
)
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Γεια σας Gutenberg REST API Callback για το Gutenberg
* /
συνάρτηση hello_gutenberg_update_callback ($ data) {
return update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

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

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

Προσθήκη μπλοκ πλευρικής μπάρας στο Gutenberg

Ας ξεκινήσουμε με τον κώδικα πλευρικής γραμμής από Γκατένμπεργκ:

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

const {Fragment} = wp.στοιχείο;

σταθερός {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const Συστατικό = () => (

{__ (‘Gutenberg Boilerplate’)}

{ __( ‘Γειά σου Κόσμε!’ ) }

)

registerPlugin («gutenberg-boilerplate», {
εικονίδιο: ‘admin-site’,
απόδοση: Συστατικό,
});

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

Ο κωδικός παραδείγματος προέρχεται από το αποθετήριο Gutenberg Boilerplate και, ως εκ τούτου, πρέπει να αντικαταστήσουμε όλες τις εμφανίσεις "Γκατένμπεργκ" με "Γεια σας Γκούτενμπεργκ".

Εξαρτήματα που χρησιμοποιούνται

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

/ **
* Εσωτερικές μπλοκ βιβλιοθηκών
* /

const {__} = wp.i18n;

σταθερός {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

σταθερός {
PanelBody,
Έλεγχος κειμένου
} = wp.components;

σταθερός {
Συστατικό,
Θραύσμα
} = wp.στοιχείο;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Ας μάθουμε γρήγορα για όλα τα στοιχεία που έχουμε εισαγάγει.

  1. Όπως συζητήθηκε στο προηγούμενο άρθρο, το __ Το στοιχείο χρησιμοποιείται για να μεταφράσει το κείμενό μας.
  2. ο PluginSidebar Το στοιχείο χρησιμοποιείται για την προσθήκη της πλευρικής μας γραμμής στο Gutenberg.
  3. PluginSidebarMoreMenuItem χρησιμοποιείται για την προσθήκη ενός κουμπιού στο μενού Gutenberg, το οποίο αλλάζει την ορατότητα της πλαϊνής γραμμής.
  4. ο PanelBody Το στοιχείο χρησιμοποιείται για την προσθήκη ενός πλαισίου στην πλευρική μας γραμμή.
  5. Έλεγχος κειμένου χρησιμοποιείται για το πεδίο εισαγωγής μας.
  6. Μετά από αυτό, εισαγάγαμε το Συστατικό και Θραύσμα συστατικά. Και τα δύο είναι συστατικά React που χρησιμοποιούμε στην πλαϊνή μας μπάρα.
    • Το στοιχείο Fragment χρησιμοποιείται για την ομαδοποίηση μιας λίστας παιδιών χωρίς την προσθήκη επιπλέον κόμβων στο DOM. Πρέπει να χρησιμοποιήσουμε το στοιχείο Fragment στον κώδικά μας, καθώς το JSX δεν μας επιτρέπει να έχουμε περισσότερους από έναν γονικούς κόμβους.
  7. μεΕπιλέξτε είναι ένα στοιχείο υψηλότερης τάξης. Για να μάθετε ποια είναι τα στοιχεία υψηλότερης τάξης, σας συνιστούμε να διαβάσετε αυτήν την τεκμηρίωση.
  8. Και τέλος, εισάγουμε εγγραφή Plugin, που μοιάζει με το registerBlockType που χρησιμοποιήσαμε στο προηγούμενο άρθρο. Αντί να καταχωρίσετε ένα μπλοκ, το registerPlugin καταγράφει την προσθήκη σας.

Προσθήκη στοιχείων ελέγχου

Μέχρι στιγμής, η πλευρική μας γραμμή είναι απλώς μια συνάρτηση Component, αλλά δεδομένου ότι θα χρησιμοποιούμε μεθόδους κύκλου ζωής του React, θα το μετατρέψουμε σε ένα στοιχείο React, όπως:

Η τάξη Hello_Gutenberg επεκτείνει το στοιχείο {
απόδοση () {
ΕΠΙΣΤΡΟΦΗ (

{__ (“Γεια σας Γκούτενμπεργκ”)}

{ __( ‘Γειά σου Κόσμε!’ ) }

)
}
}

registerPlugin («γεια-gutenberg», {
εικονίδιο: ‘admin-site’,
απόδοση: Γεια σας_Gutenberg,
});

Αυτό θα κάνει την πλευρική σας γραμμή να λειτουργεί με απλό κείμενο.

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

Η τάξη Hello_Gutenberg επεκτείνει το στοιχείο {
απόδοση () {
ΕΠΙΣΤΡΟΦΗ (

{__ (“Γεια σας Γκούτενμπεργκ”)}

)
}
}

Πρώτον, έχουμε ορίσει μια αρχική κατάσταση, η οποία είναι βασικά το κλειδί και η αξία του μετα-πεδίου μας. Μετά από αυτό, χρησιμοποιούμε το apiFetch για να πάρουμε τα δεδομένα από την τρέχουσα ανάρτησή μας.

Περνάμε το αναγνωριστικό της τρέχουσας ανάρτησής μας με τη μεταβλητή $ {this.props.postId}. Θα επιστρέψουμε σε αυτό το σημείο αργότερα.

Μόλις ληφθούν τα δεδομένα, ενημερώνουμε την κατάστασή μας με την τιμή από το REST API.

Τώρα, ας επιστρέψουμε στη μεταβλητή postId. Προς το παρόν δεν γνωρίζουμε το αναγνωριστικό της τρέχουσας ανάρτησής μας, γι ‘αυτό χρησιμοποιούμε το στοιχείο withSelect υψηλότερης τάξης, όπως αυτό:

const HOC = withSelect ((επιλέξτε) => {
const {getCurrentPostId} = select (‘core / editor’);
ΕΠΙΣΤΡΟΦΗ {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin («γεια-gutenberg», {
εικονίδιο: ‘admin-site’,
απόδοση: HOC,
});

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

Ενημερώστε τη μετα-τιμή

Τώρα πρέπει να επιτρέψουμε στην πλαϊνή μπάρα μας να ενημερώσει επίσης τη μετα-τιμή. Παρόμοια με τη λήψη των λεπτομερειών, θα χρησιμοποιήσουμε το wp.apiRequest χρησιμότητα.

Κάθε φορά που αλλάζει η αξία της κατάστασής μας, θα την ενημερώνουμε με το REST API. Για αυτό, πρέπει πρώτα να προσθέσουμε ένα συμβάν onChange στο TextControl μας, όπως αυτό:

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