Πίνακας Περιεχομένων
Εισαγωγή
Το όνομα 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 plugin.
Εάν εγκαταστήσουμε τον κλασικό editor τότε εγκαθίσταται το Classic Editor plugin ενώ στα Settings Writing υπάρχει η δυνατότητα εναλλαγής επιλογής editor.
Blocks
Το βασικό δομικό στοιχείο είναι το block. Ο χρήστης μπορεί να τοποθετήσει όσα blocks με περιεχόμενο θέλει και με οποιαδήποτε σειρά μετακινώντας τα.
Κάθε block εκτελεί μια συγκεκριμένη λειτουργία.
Δηλαδή ένα block μας επιτρέπει να εισάγουμε κείμενο, ένα άλλο μια επικεφαλίδα, ένα άλλο μια λίστα, ένα άλλο μια εικόνα κ.ο.κ. Κάθε block έχει
- τις ίδιες επιλογές με τις οποίες μπορούμε να το διαχειριστούμε όπως μετακίνηση, διαγραφή και μετατροπή του περιεχομένου του σε κάτι άλλο,
- Επιλογές/ιδιότητες διαχείρισης της συγκεκριμένης λειτουργίας που εκτελεί.
Το περιβάλλον διαχείρισης του κειμενογράφου
Όταν ξεκινάμε ένα νέο άρθρο/σελίδα βλέπουμε την ακόλουθη οθόνη
Η οθόνη χωρίζεται σε 3 βασικά μέρη.
- Η πάνω μπάρα, editor bar, η οποία περιέχει επιλογές ελέγχου του εγγράφου όπως η δημοσίευση του.
- Η περιοχή περιεχομένου, content area η οποία καταλαμβάνει τον περισσότερο χώρο στον οποίον μπορούμε να προσθέσουμε περιεχόμενο και
- Η περιοχή των ρυθμίσεων settings bar στα δεξιά με επιλογές ανάλογα με το τι έχουμε επιλέξει.
Εξ’ ορισμού όταν ξεκινάμε ένα νέο έγγραφο, υπάρχει ένα έτοιμο block για την εισαγωγή του τίτλου του άρθρου και την επεξεργασία του συνδέσμου αυτού. Επιπλέον πάνω-αριστερά υπάρχει ένα εικονίδιο W το οποίο όταν το πατήσουμε επιστρέφουμε στην σελίδα των άρθρων/σελίδων.
Μπορείτε να ενημερωθείτε εκτενώς για τον Gutenberg Editor στον παρακάτω σύνδεσμο…
WordPress blog editor
Editor Bar
Με επιλογή add block (+) ανοίγει το ακόλουθο πλαίσιο στο οποίο υπάρχουν ομαδοποιημένες οι επιλογές των blocks. Για κάθε μια επιλογή, βλέπουμε την προ επισκόπηση δεξιά με την περιγραφή της.
Μπορούμε να αναζητήσουμε ένα block στο πλαίσιο Search for a block και να επιλέξουμε ένα έτοιμο σύνολο, patern, από blocks στην διπλανή καρτέλα Patterns. Σε αυτή την καρτέλα τα έτοιμα σύνολα ομαδοποιούνται σε ομάδες η οποίες επιλέγονται από το ομόνυμο drop down menu.
Η επιλογή Content Structure δείχνει στατιστικά και την δομή των στοιχείων τα οποία υπάρχουν στο κείμενο όπως ο αριθμός των επικεφαλίδων, των blocks κ.λ.π.
Η επιλογή List View ανοίγει μια πτυσσόμενη πλαϊνή μπάρα η οποία δείχνει την δομή του εγγράφου και στην οποία μπορούμε να πλοηγηθούμε κατευθείαν σε συγκεκριμένο block/σημείο που θέλουμε. Σε ορισμένα blocks, όπως το Columns, δίνεται η δυνατότητα πλοήγησης μέσα στα υπό blocks από τα οποία αποτελείται το συγκεκριμένο block.
Με το κουμπί-σύνδεσμο Preview και τα κουμπιά Publish/Update κάνουμε τις γνωστές λειτουργίες όπως και σε έναν απλό editor. Με την επιλογή publish ορίζουμε παραμέτρους δημοσίευσης όπως ημερομηνία, ορατότητα και ώρα.
Με το κουμπί 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 κατακόρυφες τελείες) είναι επιλογές λειτουργίας του κειμενογράφου.
Αυτές είναι είναι:
- VIEW
- Top Toolbar: Εμφανίζει μια μπάρα με στοιχειώδεις επιλογές επεξεργασίας του τρέχοντος block στο πάνω μέρος.
- Spotlight Mode: Κάνει αμυδρό όλο το υπόλοιπο περιεχόμενο και αφήνει έντονο μόνο το ενεργό block στο οποίο έχουμε κάνει κλικ.
- Fullscreen mode: Κρύβει το πλαϊνό μενού και το admin bar.
- EDITOR
- Visual Editor: Διαχείριση των blocks με οπτικό τρόπο.
- Code Editor: Διαχείριση των blocks μέσω κώδικα
- TOOLS
- Block Manager: Εμφάνιση/απόκρυψη των διαθέσιμων blocks του πλαισίου add block.
- Manage all reusable blocks: Διαχείριση αποθηκευμένων συνόλων blocks.
- Keyboard shortcuts: Εμφάνιση παραθύρου πλήκτρων συντόμευσης του block editor.
- Welcome guide: Εμφάνιση σύντομου οδηγού του blog editor.
- Copy all content: Αντιγραφή όλων των blogs, του περιεχομένου δηλαδή.
- Help: Ανοίγει σε νέο παράθυρο ο επίσημος οδηγός του blog editor.
- Preferences: Ανοίγει το πλαίσιο επιλογών εμφάνισης και ρυθμίσεων, 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 προς τα κάτω κατά μια θέση
- Drag (το τετράγωνο αριστερά): Μετακινούμε καταφόρυφα το block με drag and drop.
Όταν κάνουμε κλικ σε ένα από τα παραπάνω δύο εικονίδια της μετακίνησης, μπορούμε στην συνέχεια να πατήσουμε το πλήκτρο Enter του πληκτρολογίου και με τον τρόπο αυτόν να μετακινούμε συνεχόμενα το επιλεγμένο block. Στην διαδικασία της μετακίνησης εμφανίζεται ένα γαλάζιο περίγραμμα γύρω από το επιλεγμένο block.
Εισαγωγή block
Σε οποιοδήποτε block μπορούμε να κάνουμε click στο σύμβολο + το οποίο βρίσκεται κεντρικά στην κάτω πλευρά του, και το οποίο εμφανίζεται όταν φέρουμε το ποντίκι στην μέση της κάτω πλευράς:
Η ενέργεια αυτή θα εμφανίσει ένα πλαίσιο αναζήτησης block. Σε αυτό γράφουμε τον όρο αναζήτησης. Εάν δεν το βλέπουμε τότε μπορούμε να κάνουμε κλικ στο Browse all.
Στην περίπτωση αυτή θα ανοίξει το Add block του editor bar πάνω αριστερά.
Στο πλαίσιο blocks επιλέγουμε τον τύπο του block το οποίο θέλουμε.
Τα blocks ομαδοποιούνται σε κατηγορίες. Ανοίγουμε την κατηγορία την οποία θέλουμε και κάνουμε κλικ στο επιθυμητό block. Στην συνέχεια προσθέτουμε και διαχειριζόμαστε το περιεχόμενο μας.
Στο πλαίσιο Patterns έχουμε την δυνατότητα να επιλέξουμε έτοιμα σύνολα, patterns, από blocks και να τα εισάγουμε.
Settings Bar
Πρόκειται για την πλαϊνή μπάρα στα δεξιά.
Εάν έχουμε κάνει κλικ σε ένα block και κάνουμε κλικ έξω από αυτό, τότε στην δεξιά μπάρα βλέπουμε τις ιδιότητες του εγγράφου. Παρατηρούμε ότι υπάρχουν όλες οι ιδιότητες του εγγράφου ανάλογα με τον τύπο του, δηλαδή άρθρο ή σελίδα ή ένα άλλο post type. Επιπλέον βλέπουμε και επιλογές για τυχών plugins τα οποία έχουμε εγκαταστήσει όπως το yoast.
Εάν κάνουμε κλικ σε ένα block, θα δούμε τις ιδιότητες του ανάλογα με τον τύπο του. Μπορούμε να μεταβάλουμε βασικές ιδιότητες του block.
Resusable blocks
Είναι blocks με περιεχόμενο το οποίο θέλουμε να επαναχρησιμοποιήσουμε και να μοιραστούμε.
Στην επιλογή More Options του block το οποίο θέλουμε, επιλέγουμε Add to Reusable Blocks
Δίνουμε ένα όνομα και το αποθηκεύουμε
Για να χρησιμοποιήσουμε ένα reusable block:
Πηγαίνουμε στο Add Block (+) και στην ομάδα Reusable επιλέγουμε το block που θέλουμε
Για να επεξεργαστούμε ένα reusable block πηγαίνουμε στο Add Block (+) και στην ομάδα Reusable επιλέγουμε Manage all reusable blocks,
Ανοίγει η ακόλουθη οθόνη στην οποία μπορούμε το κάθε block να:
- επεξεργαστούμε,
- εξάγουμε σε αρχείο JSON προκειμένου να το μοιραστούμε με άλλους χρήστες,
- εισάγουμε αρχείο JSON που έχουν φτιάξει άλλοι χρήστες,
- διαγράψουμε,
δημιουργήσουμε νέο block σε περιβάλλον Gutenberg editor.
Χρήσιμα links για το Gutemberg
- Δοκιμάστε τον Editor: https://wordpress.org/gutenberg/
- F.A.Q.: https://wordpress.org/gutenberg/handbook/reference/faq/
- Γιατί Gutenberg: https://wordpress.org/gutenberg/handbook/reference/design-principles/
