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

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

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

Τι είναι το Gutenberg;

Με λίγα λόγια, το Gutenberg είναι η επερχόμενη αντικατάσταση του WordPress TinyMCE editor (του τρέχοντος επεξεργαστή κειμένου WYSIWYG όπου γράφετε τις αναρτήσεις και τις σελίδες σας). Δείτε στις παρακάτω εικόνες την διαφορά οπτικής στην εμφάνιση των επεξεργαστών κειμένου.

Είναι όμως κάτι περισσότερο από μια αισθητική ενημέρωση. Το Gutenberg πρόκειται να αλλάξει εντελώς την εμπειρία επεξεργασίας, μεταβαίνοντας σε μια προσέγγιση βασισμένη σε block στο περιεχόμενο.

Πώς λειτουργεί ο επεξεργαστής WordPress Gutenberg

Πριν από λίγο, σας είπα ότι το Gutenberg είναι συντάκτης βασισμένος σε block. Πολλοί από εσάς ίσως να μην ξέρετε τι είναι αυτό.

Ουσιαστικά, το Gutenberg αντικαθιστά το ενιαίο πεδίο επεξεργασίας του τρέχοντος επεξεργαστή WordPress TinyMCE με πολλά μεμονωμένα “μπλοκ”.

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

Λοιπόν, τι είναι ένα μπλοκ;

Ένα μπλοκ μπορεί να είναι σχεδόν τίποτα. Για παράδειγμα, μπορείτε να έχετε μπλοκ για:

Κανονικό κείμενο
Εικόνες
Ενσωμάτωση βίντεο
Κουμπιά
Widgets (ναι, τα ίδια widget που χρησιμοποιείτε στην πλαϊνή σας μπάρα)
Πίνακες
Και τα λοιπα.

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

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

2 μπλοκ κειμένου
1 μπλοκ εικόνας

Παρακολουθήστε πόσο εύκολα μπορώ να αναδιατάξω τα μπλοκ αυτά μόνο με τη μεταφορά τους:

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

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

Σε επιφανειακό επίπεδο, το Gutenberg στερείται ήδη δύο βασικά πράγματα:

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

Drag and Drop – Η νεότερη έκδοση του Gutenberg σάς επιτρέπει να αναδιατάξετε τα μπλοκ με Drand and Drop, αλλά εξακολουθεί να μην είναι ελεύθερό όπως τα περισσότερα page builders.

Το Gutenberg είναι έτοιμο να εξαλείψει την ανάγκη για page builders για το πιο “πρότυπο” περιεχόμενο, και δημιουργεί επίσης μια ενιαία ενοποιημένη μέθοδο για τη δημιουργία πιο σύνθετων post layouts στο WordPress.

Χρησιμοποιήστε ένα θέμα Gutenberg για τα καλύτερα αποτελέσματα

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

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

Δημιουργώντας την πρώτη σας διάταξη με τον επεξεργαστή WordPress Gutenberg

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

Με αυτόν τον τρόπο, θα είστε λίγο πιο έτοιμοι να το χειριστείτε.

Μια γρήγορη περιήγηση στο Gutenberg interface

Πριν ξεκινήσετε να προσθέτετε κάποια μπλοκ, ας δούμε κάποια πράγματα:

(A) – σας επιτρέπει να προσθέσετε νέα μπλοκ.
(B) – κουμπιά αναίρεσης / επαναφοράς
(C) – σας δίνει πρόσβαση στις ρυθμίσεις του εγγράφου, καλύπτοντας πράγματα όπως κατηγορίες και ετικέτες, εμφανιζόμενες εικόνες κλπ. Αυτό είναι παρόμοιο με την τρέχουσα πλαϊνή γραμμή του επεξεργαστή WordPress
(D) – όταν έχετε επιλέξει μεμονωμένο μπλοκ, αυτό σας δίνει πρόσβαση σε ρυθμίσεις που είναι συγκεκριμένες σε αυτό το μπλοκ
(E) – σας επιτρέπει να έχετε πρόσβαση σε μια ζωντανή προεπισκόπηση της ανάρτησής σας ή να δημοσιεύσετε / ενημερώσετε την ανάρτησή σας
(F) – μόλις προσθέσετε μερικά μπλοκ, αυτό θα είναι το σημείο όπου θα εργαστείτε με το περιεχόμενο της ανάρτησής σας

Προσθήκη μπλοκ στο Gutenberg

Όπως ανέφερα στην εισαγωγή, θα χρησιμοποιήσετε ξεχωριστά “μπλοκ” για να δημιουργήσετε τις διατάξεις σας με το Gutenberg.

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

Στην κορυφή, βλέπετε μια λίστα με τα πιο χρησιμοποιημένα μπλοκ. Αν όμως μετακινηθείτε προς τα κάτω, θα δείτε επίσης τμήματα για Κοινά Μπλοκ, Μορφοποίηση, Στοιχεία διάταξης, Widget και Ενσωμάτωση:

Inline Elements – περιέχει μόνο ένα μπλοκ για μια εσωτερική εικόνα.
Κοινά μπλοκ – περιέχει βασικές δομικές μονάδες όπως εικόνες, παραγράφους (κανονικό κείμενο), επικεφαλίδες, εισαγωγικά κτλ.
Μορφοποίηση – σας επιτρέπει να προσθέσετε περισσότερο μορφοποιημένο περιεχόμενο, όπως pull quotations, πίνακες ή τον κλασικό επεξεργαστή κειμένου WordPress
Στοιχεία διάταξης – μπορείτε να διαιρέσετε το κείμενο σε δύο στήλες, να συμπεριλάβετε κουμπιά, διαχωριστικά ή την ετικέτα “Περισσότερα”
Widgets – σας επιτρέπουν να προσθέσετε shortcodes, τελευταίες αναρτήσεις ή κατηγορίες. Είναι ακόμη δυνατή η εμφάνιση γραφικών στοιχείων στην πλαϊνή μπάρα ακριβώς στο Gutenberg.
Ενσωμάτωση – σας βοηθά να ενσωματώσετε περιεχόμενο από εξωτερικές πηγές όπως το Twitter, το YouTube, το Facebook, το Instagram και πολλά άλλα.

Δημιουργία βασικής διάταξης με το Gutenberg

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

Κανονικό κείμενο
Μια εικόνα
Ένα απόσπασμα
Ένα ενσωματωμένο βίντεο YouTube

Δείτε πώς θα το κάνατε με το Gutenberg:

Αρχικά, θα γράψετε ολόκληρη την ανάρτησή σας στον επεξεργαστή. Εναλλακτικά, αν προτιμάτε να γράφετε σε Word , μπορείτε να τα επικολλήσετε όλα και στη συνέχεια το Gutenberg θα τα μετατρέψει αυτόματα σε μπλοκ.

Προσθήκη των non-text blocks

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

Αυτό θα σας επιτρέψει να εισαγάγετε ένα μπλοκ εικόνας, από το οποίο μπορείτε να μεταφορτώσετε ή να επιλέξετε εικόνες με παρόμοιο τρόπο με τον τρέχοντα επεξεργαστή WordPress:

Μόλις επιλέξετε την εικόνα σας, πρέπει να την δείτε ακριβώς στη διάταξη της σελίδας σας:

Στη συνέχεια, τοποθετήστε το δείκτη του ποντικιού πάνω από το σημείο στο οποίο θέλετε να εισαγάγετε το απόσπασμα και χρησιμοποιήστε την ίδια προσέγγιση για να εισαγάγετε άλλο μπλοκ. Μπορείτε είτε να αναζητήσετε “quote” είτε να μεταβείτε στην ενότητα Common Blocks:

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

Πώς να προσαρμόσετε μεμονωμένα μπλοκ στο Gutenberg

Επειδή ο επεξεργαστής WordPress Gutenberg περιλαμβάνει μεγάλη γκάμα διαφορετικών μπλοκ, δεν μπορώ να σας δείξω πώς να χρησιμοποιείτε κάθε μεμονωμένο μπλοκ.

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

Βασικά, ελέγχετε το περιεχόμενο στο Body του προγράμματος επεξεργασίας:

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

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

Πώς να αναδιατάξετε μεμονωμένα μπλοκ Gutenberg

Για να αναδιατάξετε τα μπλοκ, έχετε δύο επιλογές. Μπορείτε να χρησιμοποιήσετε το βέλος “Πάνω” ή “Κάτω” όταν τοποθετείτε το ποντίκι πάνω από ένα μπλοκ για να μετακινήσετε το μπλοκ προς την αντίστοιχη κατεύθυνση:

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

Ορισμένα κομψά, αλλά πιο προχωρημένα κόλπα Gutenberg

Καθώς εξοικειώνεστε περισσότερο με τον επεξεργαστή του WordPress Gutenberg, ίσως βρείτε κάποια από αυτά τα κόλπα για να εξοικονομήσετε χρόνο.

Γρήγορη δημιουργία νέου μπλοκ με πληκτρολόγηση

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

/ BLOCK-NAME

Θα εμφανιστεί ένα πλαίσιο αυτόματων προτάσεων που θα σας βοηθήσει να βρείτε το σχετικό μπλοκ.

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

Πολύ βολικό και μεγάλο big time-saver!

Επεξεργασία πηγαίου κώδικα άμεσα

Σε οποιοδήποτε σημείο, μπορείτε να επεξεργαστείτε τον πηγαίο κώδικα για ολόκληρη την ανάρτησή σας κάνοντας κλικ στις τρεις τελείες στην επάνω δεξιά γωνία και επιλέγοντας τον Code Editor:

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

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

Προσθέστε μια σταθερή γραμμή εργαλείων όπως ο επεξεργαστής TinyMCE
Πηγαίνετε σε πλήρη οθόνη
Τοποθετήστε ένα “φως στο προσκήνιο” στο ενεργό μπλοκ
Για να χρησιμοποιήσετε αυτές τις “Προβολές”, κάντε κλικ στο εικονίδιο των τριών τελειών στην επάνω δεξιά γωνία.

Χρησιμοποιήστε συντομεύσεις πληκτρολογίου Gutenberg για εξοικονόμηση χρόνου

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

Τοποθετήστε νέα μπλοκ πάνω ή κάτω από το επιλεγμένο μπλοκ
Διαγράψτε ένα μπλοκ
Διπλασιάστε ένα μπλοκ
Για να ανοίξετε την πλήρη λίστα των συντομεύσεων πληκτρολογίου, χρησιμοποιήστε τη συντόμευση Shift + Alt + H.

Τι συμβαίνει με όλο το παλιό σας περιεχόμενο;

Πριν ολοκληρώσω, επιτρέψτε μου να καλύψω γρήγορα τι θα συμβεί σε όλο σας το παλιό περιεχόμενο μόλις μπει το WordPress 5.0.

Μην ανησυχείτε – δεν θα εξαφανιστούν! Αλλά η εμπειρία είναι λίγο διαφορετική:

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

Για να δουλέψετε με το παλιό σας περιεχόμενο, μπορείτε είτε:

Αφήστε το στο Classic block και επεξεργαστείτε το όπως θα κάνατε με τον παλιό επεξεργαστή WordPress.
Χρησιμοποιήστε το εικονίδιο των τριών κουκκίδων και επιλέξτε Μετατροπή σε μπλοκ. Αυτό θα σπάσει τα πάντα σε μεμονωμένα μπλοκ. Στη συνέχεια, μπορείτε να εργαστείτε με το περιεχόμενό σας σαν να το δημιουργούσατε αρχικά με το Gutenberg.

Συνοψίζοντας

Ενώ το Gutenberg έχει τους επικριτές του, εξακολουθεί να έρχεται στο WordPress 5.0.

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

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

Ασχολούμαι με το WordPress από τα πρώτα του βήματα και θα είναι χαρά μου να μοιραστείτε σκέψεις σας και εμπειρίες για το νέο update στα σχόλια.