Κατασκευάστηκε για το Gutenberg: Πώς οι συγγραφείς Plugin και Theme αντιμετωπίζουν τη μετάβαση στο Gutenberg

Κατασκευάστηκε για το Gutenberg: Πώς οι συγγραφείς Plugin και Theme αντιμετωπίζουν τη μετάβαση στο Gutenberg

Κατασκευάστηκε για το Gutenberg: Πώς οι συγγραφείς Plugin και Theme αντιμετωπίζουν τη μετάβαση στο Gutenberg
СОДЕРЖАНИЕ
02 июня 2020

Δημιουργία για το Gutenberg: Πώς οι συγγραφείς προσθηκών και θεμάτων αντιμετωπίζουν τη μετάβαση


Στο WordCamp Europe 2018, ο Matt Mullenweg παρουσίασε έναν σκληρό χάρτη πορείας για τον Gutenberg τους επόμενους μήνες. Τον Ιούλιο, θα υπάρξει μεγάλη ώθηση για την αύξηση της υιοθέτησης του Gutenberg, με 5,0 beta στο παιχνίδι για τον Αύγουστο (ή πέραν, στην πραγματικότητα, μάλλον πέρα ​​από). Η επικείμενη ενσωμάτωση μπορεί να σας κάνει να αναρωτιέστε πώς σκοπεύουν να δημιουργήσουν οι προγραμματιστές του WordPress για το Gutenberg.

Δηλαδή, ποιοι είναι οι διάφοροι τρόποι με τους οποίους οι προγραμματιστές προετοιμάζουν τις προσφορές τους για το Gutenberg; Και οι άνθρωποι κάνουν κάτι νέο και ενδιαφέρον για τον Γκούτενμπεργκ?

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

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

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

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

Contents

Έξι παραδείγματα του τρόπου με τον οποίο τα υπάρχοντα πρόσθετα αντιμετωπίζουν τη μετάβαση στο Gutenberg

Ο τρόπος που δημιουργούν οι συντάκτες plugin για το Gutenberg εξαρτάται κυρίως από τη λειτουργία του plugin.

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

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

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

  • Έντυπα Ninja
  • Δίνω
  • WooCommerce

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

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

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

1. Το Ninja Forms προσθέτει ένα νέο μπλοκ Gutenberg

Έντυπα Ninja είναι ένα από τα πιο δημοφιλή πρόσθετα φόρμας στο WordPress.org repo. Μέχρι στιγμής, απευθύνεται στο Gutenberg προσθέτοντας ένα απλό Έντυπα Ninja ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.

Εισάγετε το μπλοκ όπως οποιοδήποτε άλλο μπλοκ Gutenberg:

πώς η ninja σχηματίζει devs build για τον Gutenberg

Στη συνέχεια, μπορείτε να επιλέξετε τη φόρμα σας από το αναπτυσσόμενο μενού:

ninja μορφές μπλοκ

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

ζωντανή προεπισκόπηση της φόρμας

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

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

Τα επόμενα δύο πρόσθετα θα βασιστούν σε αυτό με μερικές βαθύτερες επιλογές στυλ / ελέγχου.

2. Το Give προσθέτει δύο μπλοκ Gutenberg με επιλογές διάταξης

Δίνω είναι ένα δημοφιλές πρόσθετο δωρεάς με μια ομάδα ανάπτυξης που ήταν πολύ προληπτική για την ενσωμάτωση του Give with the Gutenberg editor (αν σας αρέσει το θέμα αυτής της ανάρτησης, θα απολαύσετε τη σειρά #PlayingWithBlocks στο Δώστε το ιστολόγιο, όπου η ομάδα Give αναφέρει λεπτομερώς τα σχέδιά τους για την κατασκευή του Gutenberg).

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

Δώστε δύο μπλοκ που σας επιτρέπουν να ενσωματώσετε:

  • Μία φόρμα δωρεάς
  • Ένα πλέγμα μορφών δωρεάς

δώστε μπλοκ gutenberg

Όπως τα έντυπα Ninja, λαμβάνετε μια ζωντανή προεπισκόπηση της φόρμας σας. Αλλά παίρνεις επίσης ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ επιλογές επεξεργασίας που σας επιτρέπουν:

  • Επιλέξτε τη μορφή
  • Ενεργοποίηση / απενεργοποίηση του στόχου δωρεάς
  • Επιλέξτε πού θα τοποθετήσετε το περιεχόμενο

επιλογές διάταξης μπλοκ

Και αν τοποθετήσετε το δείκτη του ποντικιού πάνω από τη φόρμα σας, θα λάβετε έναν άμεσο σύνδεσμο για να επεξεργαστείτε αυτήν τη φόρμα:

επεξεργασία μπλοκ

Υπάρχει λοιπόν μια ματιά στο πώς τα μπλοκ μπορούν να φτάσουν λίγο βαθύτερα από την τρέχουσα εφαρμογή των Ninja Forms. Αλλά το WooCommerce προχωρά ένα βήμα παραπέρα…

3. Το WooCommerce προσθέτει ένα μπλοκ προϊόντων με έλεγχο στήλης

Ενώ το WooCommerce πιθανότατα θα προσθέσει περισσότερες ενσωματώσεις Gutenberg καθώς το WordPress 5.0 κινείται πιο κοντά (μερικές ιδέες για τον τρόπο προσθήκης προϊόντων εδώ), η ομάδα έχει ήδη βυθίσει τα δάχτυλά του στο Gutenberg με τον επίσημο Πρόσθετο αποκλεισμού προϊόντων WooCommerce Gutenberg.

Ναι – αυτή τη στιγμή αυτό είναι ένα ξεχωριστό πρόσθετο. Αλλά μόλις το εγκαταστήσετε, μπορείτε να εισαγάγετε τα υπάρχοντα προϊόντα WooCommerce ως μπλοκ στο περιεχόμενό σας στο Gutenberg.

Όταν προσθέτετε το Προϊόντα μπλοκ, μπορείτε να επιλέξετε ποια προϊόντα θα εμφανίζονται:

μπλοκ woocommerce gutenberg

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τις επιλογές επεξεργασίας μπλοκ για να αλλάξετε τη διάταξη:

αλλαγή της διάταξης woocommerce στο gutenberg

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

4. Το Beaver Builder προσθέτει ένα "Μετατροπή σε Beaver Builder" επιλογή

Έχουν γίνει πολλές συζητήσεις για το πώς θα αντιμετωπίσουν οι δημιουργοί σελίδων το Gutenberg. Δεν υπάρχει ακόμη πολύ συγκεκριμένο, αλλά το Beaver Builder έχει προσθέσει μια δυνατότητα στο Beaver Builder 2.1 που σας επιτρέπει να μετατρέψετε μια διάταξη Gutenberg σε Beaver Builder:

οικοδόμος κάστορας gutenberg

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

5. Τα μετα-κουτιά θα πρέπει να λειτουργούν – το Yoast SEO είναι ένα καλό παράδειγμα

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

Όπως μπορείτε να δείτε, το κύριο μετα-κουτί Yoast SEO έρχεται μέσα από το χωρίς γκάμα με το Gutenberg:

gutenberg yoast seo meta κουτί

Ωστόσο, χάνετε τις βαθμολογίες SEO και ανάλυσης περιεχομένου που παλιότερα βρίσκονταν στην πλευρική γραμμή.

Λοιπόν, πώς θα μπορούσε η Yoast να δημιουργήσει για τον Gutenberg να το αντιμετωπίσει αυτό? Εδώ είναι μερικά κοροϊδεύω για πιθανούς τρόπους με τους οποίους η Yoast μπορεί να ενσωματώσει την ανάλυσή της στην πραγματική διεπαφή Gutenberg:

Κοροϊδεύω Βyoast seo προειδοποίηση
Κοροϊδεύω Γyoast seo in-content ανάλυση

6. Πώς αντιμετωπίζουμε τα μετα-κουτιά στο WP Product Review

Μας Πρόσθετο WP Product Review είναι ένα από αυτά τα πρόσθετα που χρησιμοποιεί ένα μετα-πλαίσιο για τον έλεγχο της εξόδου στο front-end (ένα πλαίσιο ελέγχου σε αυτήν την περίπτωση).

Δείτε πώς εργαζόμαστε για την ενσωμάτωση του WP Product Review στον επεξεργαστή Gutenberg:

wp κριτική προϊόντος gutenberg

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

wp κριτική pro gutenberg εναλλαγή

Προγραμματιστές – εδώ είναι ένας εξαιρετικός πόρος για να προετοιμάσετε την προσθήκη σας για το Gutenberg

Εάν είστε πραγματικός προγραμματιστής προσθηκών, ίσως αναρωτιέστε πώς πρέπει να δημιουργήσετε το Gutenberg για τη συγκεκριμένη προσθήκη σας. Λοιπόν … δεν μπορώ να σας πω αυτό. Αλλά μπορώ να σας δείξω σε αυτήν την καταπληκτική ανάρτηση από το δικό μας Hardeep Asrani. Η Hardeep παρουσιάζει μερικές χρήσιμες συμβουλές για την προετοιμασία της προσθήκης σας για το Gutenberg.

Οι προγραμματιστές μπορούν να δημιουργήσουν και για το Gutenberg με νέα πρόσθετα

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

Το νέο Gutenberg εμποδίζει την αφθονία

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

  • Πίνακες τιμών
  • Μαρτυρίες
  • Μέλη ομάδας
  • Και τα λοιπά.

Για παράδειγμα, εδώ είναι ένα μπλοκ πίνακα τιμών από το Πρόσθετο Stackable – Ultimate Gutenberg Blocks. Δείτε πόσο λεπτομερείς είναι οι επιλογές επεξεργασίας μπλοκ:

νέα μπλοκ gutenberg

Υπάρχουν ήδη πολλά από αυτά τα πρόσθετα στο WordPress.org. Αλλά πέρα ​​από το προαναφερθέν πρόσθετο Stackable, άλλες δημοφιλείς προσφορές φαίνεται να είναι:

Υπάρχει επίσης μια προσφορά που ονομάζεται Συμπλοκή που εμπορεύεται ως "Μπλοκ Gutenberg για εμπόρους περιεχομένου".

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

ο Μπλοκ κριτικής βιβλίου Το plugin είναι ένα άλλο μικρό παράδειγμα για το πώς τα εξειδικευμένα μπλοκ Gutenberg θα μπορούσαν να γίνουν πράγματι.

Ένα παράδειγμα για το πώς μπορούν να λειτουργούν προσαρμοσμένα πεδία με το Gutenberg

Προσαρμοσμένα πεδία Gutenberg είναι ένα άλλο ενδιαφέρον plugin που φαίνεται να έχει κάποια έλξη.

Διευκολύνει τη ρύθμιση προσαρμοσμένων πεδίων ή ομάδων πεδίων που σχετίζονται με έναν συγκεκριμένο τύπο προσαρμοσμένης ανάρτησης:

προσαρμοσμένα πεδία επεξεργαστή gutenberg

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

Παράδειγμα προσαρμοσμένου πεδίου gutenberg

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

Τρία παραδείγματα για το πώς αντιμετωπίζουν οι προγραμματιστές θεμάτων τη μετάβαση στο Gutenberg

Μόλις είδατε μερικά παραδείγματα για το πώς μπορούν να δημιουργήσουν οι προγραμματιστές plugin για το Gutenberg, αλλά τι γίνεται με τα θέματα?

Οι προγραμματιστές θεμάτων φαίνεται να ακολουθούν δύο κύριους δρόμους για την αντιμετώπιση της μετάβασης:

  • Κάνοντας θέματα έτοιμα για Gutenberg προσθέτοντας στυλ για μπλοκ και υποστηρίζοντας επιλογές διάταξης Gutenberg
  • Χρήση μπλοκ Gutenberg για τη δημιουργία περιεχομένου θεμάτων

Εδώ είναι μερικά παραδείγματα για να βάψετε την εικόνα…

1. Προσθήκη προσαρμοσμένων στυλ στον επεξεργαστή Gutenberg

Ένα πολύ τακτοποιημένο πράγμα που βλέπουμε να κάνουν οι προγραμματιστές είναι να προσθέσουν στυλ θέματος στην πραγματική διεπαφή Gutenberg. Αυτό ανοίγει τις πόρτες για να δημιουργήσει μια πραγματικά εμπειρία WYSIWYG, αν και ο Spencer από το BigBox WooCommerce περιγράφει ορισμένα ζητήματα με το στυλ μπλοκ τρίτων.

Για παράδειγμα, δείτε πώς το θέμα Ohana του ThemeShaper αναδιαμορφώνει πλήρως όλο το περιεχόμενο του Gutenberg, συμπεριλαμβανομένου του τίτλου της ανάρτησης:

Στυλ στο ταμπλό του gutenberg

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

2. Προσθήκη νέων επιλογών ευθυγράμμισης πλήρους πλάτους

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

Και πάλι, μπορείτε να το δείτε σε ισχύ με το θέμα Ohana:

ευρεία διάταξη gutenberg

Για να λειτουργήσει αυτή η ευθυγράμμιση, οι συγγραφείς θεμάτων πρέπει να δηλώσουν ρητά την υποστήριξη.

3. Δημιουργία θεματικού περιεχομένου επίδειξης με μπλοκ – π.χ. Το θέμα μπλοκ

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

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

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

Πέρα από το θέμα The Block, το Array Themes έχει επίσης ένα Θέμα ατομικών μπλοκ που έχει σχεδιαστεί ειδικά για ενσωμάτωση με την προσθήκη Atomic Blocks που αναφέρεται παραπάνω.

Προγραμματιστές – δείτε πώς να προετοιμάσετε το θέμα σας για το Gutenberg

Εάν είστε προγραμματιστής θέματος αναρωτιέστε πώς να κάνετε το υπάρχον θέμα σας συμβατό με το Gutenberg, Ο Bill Erickson έχει έναν εξαιρετικό οδηγό στα υψηλά σημεία. Και το Υποστήριξη θεμάτων ενότητα του εγχειριδίου Gutenberg είναι ένας άλλος καλός πόρος.

Σίγουρα θα υπάρξουν πιο ωραία πράγματα που θα έρθουν

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

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

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

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

Τώρα σε εσάς – έχετε σκοντάψει κάποια υπέροχα παραδείγματα προσθηκών ή συγγραφέων θεμάτων που βρίσκουν ενδιαφέροντες τρόπους δημιουργίας για το Gutenberg; Ενημερώστε μας στα σχόλια!

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

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