Εισαγωγή στον Gutenberg του WordPress

gutenberg-editor-featured-image

Πίνακας Περιεχομένων

Εισαγωγή

Το όνομα Gutenberg έχει οριστεί από το WordPress. Πρόκειται για ένα νέο χαρακτηριστικό το οποίο αποσκοπεί στον εμπλουτισμό της εμπειρίας επεξεργασίας κειμένου. Πρόκειται για έναν page builder. Το νέο αυτό χαρακτηριστικό είναι προαιρετικό στην έκδοση 4.9 του WordPress, ενώ θα ενσωματωθεί στην έκδοση 4.5.

Μέχρι και την έκδοση 4.9 η επεξεργασία του περιεχομένου μιας σελίδας γινόταν από έναν απλό κειμενογράφο. Ο κειμενογράφος αυτός είναι ένας λευκός καμβάς στον οποίον εισάγουμε κείμενο, εικόνα, συνδέσμους, βίντεο με σκοπό να εμπλουτίσουμε το περιεχόμενο της σελίδας  και κατά συνέπεια την εμπειρία ανάγνωσης της από τον χρήστη. Στην διαδικασία αυτή όμως, ο απλός χρήστης θα έπρεπε σε κάποιες περιπτώσεις να μάθει πώς να βάζει κάποια κομμάτια κώδικα όπως short codes με συγκεκριμένη λειτουργία. Επιπλέον, ανάλογα με το theme σε κάποιες περιπτώσεις μπορεί να μην ήταν εφικτό η ακριβής εμφάνιση του περιεχομένου όπως θα ήθελε ο χρήστης.

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

Τι γινεται στην εκδοση 4.9.8

Στην έκδοση 4.9.8 του WordPress υπάρχει η προαιρετική επιλογή εγκατάστασης του plugin Gutenberg προκειμένου να το δοκιμάσουμε.

gutenberg-editor

Εάν εγκαταστήσουμε το Gutenberg Editor τότε εγκαθίσταται το Gutenberg plugin.

Εάν εγκαταστήσουμε τον κλασικό editor τότε εγκαθίσταται το Classic Editor plugin ενώ στα Settings Writing υπάρχει η δυνατότητα εναλλαγής επιλογής editor.

gutenberg-editor

Blocks

gutenberg-editor

Το βασικό δομικό στοιχείο είναι το block. Ο χρήστης μπορεί να τοποθετήσει όσα blocks με περιεχόμενο θέλει και με οποιαδήποτε σειρά μετακινώντας τα.

Κάθε block εκτελεί μια συγκεκριμένη λειτουργία.

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

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

Το περιβάλλον διαχείρισης του κειμενογράφου

Όταν ξεκινάμε ένα νέο άρθρο/σελίδα βλέπουμε την ακόλουθη οθόνη

Η οθόνη χωρίζεται σε 3 βασικά μέρη.

  • Η πάνω μπάρα, editor bar, η οποία περιέχει επιλογές ελέγχου του εγγράφου όπως η δημοσίευση του.
  • Η περιοχή περιεχομένου, content area η οποία καταλαμβάνει τον περισσότερο χώρο στον οποίον μπορούμε να προσθέσουμε περιεχόμενο και
  • Η περιοχή των ρυθμίσεων settings bar στα δεξιά με επιλογές ανάλογα με το τι έχουμε επιλέξει.

Εξ’ ορισμού όταν ξεκινάμε ένα νέο έγγραφο, υπάρχει ένα έτοιμο block για την εισαγωγή του τίτλου του άρθρου και την επεξεργασία του συνδέσμου αυτού. Επιπλέον πάνω-αριστερά υπάρχει ένα εικονίδιο W το οποίο όταν το πατήσουμε επιστρέφουμε στην σελίδα των άρθρων/σελίδων.

Editor Bar

Με επιλογή add block (+) ανοίγει το ακόλουθο πλαίσιο στο οποίο υπάρχουν ομαδοποιημένες οι επιλογές των blocks. Για κάθε μια επιλογή, βλέπουμε την προ επισκόπηση δεξιά με την περιγραφή της.

Μπορούμε να αναζητήσουμε ένα block στο πλαίσιο Search for a block και να επιλέξουμε ένα έτοιμο σύνολο, patern, από blocks στο διπλανό πλαίσιο Patterns.

Η επιλογή Content Structure δείχνει στατιστικά και την δομή των στοιχείων τα οποία υπάρχουν στο κείμενο όπως ο αριθμός των επικεφαλίδων, των blocks κ.λ.π.

utenberg-editor-content-structure

Η επιλογή Block Navigation ανοίγει ένα πτυσσόμενο μενού με το οποίο μπορούμε να πλοηγηθούμε κατευθείαν σε συγκεκριμένο block/σημείο του εγγράφου. Σε ορισμένα blocks, όπως το Media & Text, δίνεται η δυνατότητα πλοήγησης μέσα στα υπό blocks από τα οποία αποτελείται το συγκεκριμένο block.

gutenberg-editor-block-navigation-5-5

Με το κουμπί-σύνδεσμο Preview και τα κουμπιά Publish/Update κάνουμε τις γνωστές λειτουργίες όπως και σε έναν απλό editor. Με την επιλογή publish ορίζουμε παραμέτρους δημοσίευσης όπως ημερομηνία, ορατότητα και ώρα.

gutenberg-editor-tools-5-5

Με το κουμπί tools ανοίγει ένα αναδυόμενο μενού με δύο επιλογές:

  • Με την edit επιλέγουμε ένα block. Μπορούμε να επεξεργαστούμε το περιεχόμενο του και να διαγράψουμε το blok,
  • Με την select απλά επιλέγουμε το block βλέποντας τον τύπο του.

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

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

Οι επιλογές αυτές εμφανίζονται μόνο όταν είναι ενεργό το πλαίσιο ‘Always show pre-publish checks’.

Εάν το παραπάνω πλαίσιο είναι ανενεργό, τότε από το πλαίσιο ‘Show more tools & options’ και την επιλογή ‘Options’, παλαιό screen options, μπορούμε να ενεργοποιήσουμε τις παραπάνω επιλογές δημοσίευσης.

Όταν έχουμε εγκαταστήσει ένα plugin, για παράδειγμα το yoast seo, τότε δεξιά από την επιλογή settings εμφανίζεται ένα κουμπί με τις ρυθμίσεις του αντίστοιχου plugin. Σε κάποια plugins οι ρυθμίσεις του εμφανίζονται στο κάτω μέρος.

Η τελευταία επιλογή More  (3 κατακόρυφες τελείες) είναι επιλογές λειτουργίας του κειμενογράφου.

gutenberg-editor-more-options

Μερικές από αυτές είναι:

  • Top Toolbar: Εμφανίζει μια μπάρα με στοιχειώδεις επιλογές επεξεργασίας του τρέχοντος block στο πάνω μέρος.
  • Spotlight Mode: Κάνει αμυδρό όλο το υπόλοιπο περιεχόμενο και αφήνει έντονο μόνο το ενεργό block στο οποίο έχουμε κάνει κλικ.
  • Fullscreen mode: Κρύβει το πλαϊνό μενού και το admin bar.
  • Options: Ανοίγει το πλαίσιο επιλογών εμφάνισης screen options του κλασικού κειμενογράφου.

Εάν έχουμε εγκατεστημένα και αλλά plugins, π.χ. yoast, τότε θα δούμε δυνατότητα επιλογής των ιδιοτήτων αυτού του plugin.

Content Area

Πρόκειται για την κύρια περιοχή του άρθρου στην οποία προσθέτουμε περιεχόμενο, blocks. Σε κάθε block το περιεχόμενο εμφανίζεται με μεγάλη ακρίβεια όπως θα φαίνεται και online:

Κάνοντας κλικ μέσα σε ένα block εμφανίζεται πάνω-αριστερά στο περιεχόμενο του, ένα πλαίσιο το οποίο ονομάζεται quick toolbar:

Διαχείριση του block

Έχοντας κάνει ενεργό ένα block, click σε αυτό, εμφανίζεται όπως αναφέρθηκε ένα μικρό μενού επιλογών, quick toolbar, με ορισμένες ποικίλες επιλογές ανάλογα με το block. Κάνοντας click στο κουμπί more, 3 κατακόρυφες τελείες, εμφανίζονται οι ακόλουθες επιλογές:

  • Show/Hide block settings: Κρύβει/εμφανίζει την πλαϊνή μπάρα η settings bar.
  • Copy: Αντιγράφει το block.
  • Duplicate: Δημιουργεί ένα διπλότυπο του επιλεγμένου block κάτω από αυτό.
  • Insert Before: Εισάγει ένα κενό block πριν από το επιλεγμένο.
  • Insert After: Εισάγει ένα κενό block μετά από το επιλεγμένο.
  • Move to: Μετακίνηση block
  • Edit as HTML: Ανοίξει τον code editor για το τρέχων block
  • Add to Reusable Blocks: Προσθέτει το τρέχων block σε μια περιοχή προκειμένου να μπορέσουμε να το επαναχρησιμοποιήσουμε.
  • Group: Ομαδοποιεί τα στοιχεία του block.
  • Remove Block: Αφαιρεί το τρέχων block και τα περιεχόμενα του.

Στα αριστερά του quick toolbar του block υπάρχει η επιλογή Change Block Type:

Με την επιλογή αυτή μπορούμε μετατρέψουμε το τρέχων block σε άλλο παρεμφερές.

Στο quick toolbar το 2ο εικονίδιο από αριστερά, δεξιά από το change block type αφορά την μετακίνηση του block. Πρόκειται για 2 εικονίδια με βέλη ένα πάνω και ένα κάτω:

  • Move Up: Μετακινεί το block προς τα πάνω κατά μια θέση.
  • Move Down: Μετακινεί το block προς τα κάτω κατά μια θέση

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

Εισαγωγή block

Σε οποιοδήποτε block μπορούμε να κάνουμε click στο σύμβολο + το οποίο βρίσκεται κεντρικά στην κάτω πλευρά του, και το οποίο εμφανίζεται όταν φέρουμε το ποντίκι στην μέση της κάτω πλευράς:

Η ενέργεια αυτή θα εμφανίσει ένα πλαίσιο αναζήτησης block. Σε αυτό γράφουμε τον όρο αναζήτησης. Εάν δεν το βλέπουμε τότε μπορούμε να κάνουμε κλικ στο Browse all.

Στην περίπτωση αυτή θα ανοίξει το Add block του editor bar πάνω αριστερά.

Στο πλαίσιο blocks επιλέγουμε τον τύπο του block το οποίο θέλουμε.

Τα blocks ομαδοποιούνται σε κατηγορίες. Ανοίγουμε την κατηγορία την οποία θέλουμε και κάνουμε κλικ στο επιθυμητό block.  Στην συνέχεια προσθέτουμε και διαχειριζόμαστε το περιεχόμενο μας.

Στο πλαίσιο Patterns έχουμε την δυνατότητα να επιλέξουμε έτοιμα σύνολα, patterns, από blocks και να τα εισάγουμε.

Settings Bar

Πρόκειται για την πλαϊνή μπάρα στα δεξιά.

gutenberg-editor-document-settings

Εάν έχουμε κάνει κλικ σε ένα block και κάνουμε κλικ έξω από αυτό, τότε στην δεξιά μπάρα βλέπουμε τις ιδιότητες του εγγράφου.  Παρατηρούμε ότι υπάρχουν όλες οι ιδιότητες του εγγράφου ανάλογα με τον τύπο του, δηλαδή άρθρο ή σελίδα ή ένα άλλο post type.   Επιπλέον βλέπουμε και επιλογές για τυχών plugins τα οποία έχουμε εγκαταστήσει όπως το yoast.

Εάν κάνουμε κλικ σε ένα block, θα δούμε τις ιδιότητες του ανάλογα με τον τύπο του.  Μπορούμε να μεταβάλουμε βασικές ιδιότητες του block.

Resusable blocks

Είναι blocks με περιεχόμενο το οποίο θέλουμε να επαναχρησιμοποιήσουμε και να μοιραστούμε.  

Στην επιλογή More Options του block το οποίο θέλουμε, επιλέγουμε Add to Reusable Blocks

resuable blocks option

Δίνουμε ένα όνομα και το αποθηκεύουμε

gutenberg-editor-reusable-blocks-name

Για να χρησιμοποιήσουμε ένα reusable block:

Πηγαίνουμε στο Add Block (+) και στην ομάδα Reusable επιλέγουμε το block που θέλουμε

Για να επεξεργαστούμε ένα reusable block πηγαίνουμε στο Add Block (+) και στην ομάδα Reusable επιλέγουμε Manage all reusable blocks,

gutenberg-editor-reusable-blocks-insert-window

Ανοίγει η ακόλουθη οθόνη στην  οποία μπορούμε το κάθε block να:

  • επεξεργαστούμε,
  • εξάγουμε σε αρχείο JSON προκειμένου να το μοιραστούμε με άλλους χρήστες,
  • εισάγουμε αρχείο JSON που έχουν φτιάξει άλλοι χρήστες,
  • διαγράψουμε,

δημιουργήσουμε νέο block σε περιβάλλον Gutenberg editor.

Χρήσιμα links για το Gutemberg