Εισαγωγή στον 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 έχει

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

 

 

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

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

gutenberg-editor

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

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

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

 

Editor Bar

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

gutenberg-editor-add-block

 

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

utenberg-editor-content-structure

Η επιλογή Block Navigation ανοίγει ένα πτυσσόμενο μενού με το οποίο μπορούμε να πλοηγηθούμε κατευθείαν σε συγκεκριμένο block/σημείο του εγγράφου.

gutenberg-editor-block-navigation

 

Με τα κουμπιά Preview, Publish/Update κάνουμε τις γνωστές λειτουργίες όπως και σε έναν απλό editor.

gutenberg-editor-publish-buttons

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

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

gutenberg-editor-more-options

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

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

 

Content Area

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

gutenberg-editor-content-area-no-focus

Πηγαίνοντας τον δείκτη πάνω από ένα block βλέπουμε τα όρια του με ένα περίγραμμα καθώς και τον τύπο του πάνω-δεξιά π.χ paragraph:

gutenberg-editor-content-area-focus

Τέλος, κάνοντας κλικ μέσα σε ένα block εμφανίζονται επιλογές διαχείρισης του ίδιου, quick toolbar, και σε κάποιες περιπτώσεις και του περιεχομένου του:

gutenberg-editor-content-area-focus2

 

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

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

gutenberg-editor-content-area-more

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

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

gutenberg-editor-content-area-block-type

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

gutenberg-editor-content-area-transform-blockΣτην αριστερή πλευρά του επιλεγμένου block υπάρχουν επιλογές κατακόρυφης μετακίνησης του οι οποίες δεν είναι αναγκαίο να το έχουμε επιλέξει για να εμφανιστούν:

gutenberg-editor-content-area-move-block

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

 

Εισαγωγή block

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

gutenberg-editor-content-area-insert-block

Η ενέργεια αυτή θα προσθέσει στο πάνω μέρος του τρέχοντος block μια κενή θέση:

gutenberg-editor-content-area-insert-block2

Στο σημείο αυτό κάνουμε κλικ στο (+) στην αριστερή πλευρά του block ώστε να ανοίξει το μενού επιλογών και να επιλέξουμε τον τύπο του block το οποίο θέλουμε. Τα blocks ομαδοποιούνται σε κατηγορίες. Ανοίγουμε την κατηγορία την οποία θέλουμε και κάνουμε κλικ στο επιθυμητό block.  Στην συνέχεια προσθέτουμε και διαχειριζόμαστε το περιεχόμενο μας. Η ίδια δυνατότητα επιλογών υπάρχει πάλι με το ίδιο σύμβολο add block  (+) πάνω αριστερά στο Editor Bar.

 

Settings Bar

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

gutenberg-editor-document-settings

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

gutenberg-editor-block-settings

 

 

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