Εάν χρησιμοποιείτε το WordPress^(WordPress) για αρκετά χρόνια, τότε θυμάστε όταν οι άνθρωποι στο WordPress κυκλοφόρησαν τον επεξεργαστή Gutenberg στο WordPress 5.0 το 2018.

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

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

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

Τι να περιμένετε στο WordPress Gutenberg

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

• Παράγραφος
• Επί κεφαλής
• Εικόνα
• Λίστα
• Παραθέτω, αναφορά
• Κώδικας
• Προδιαμορφωμένο
• Pullquote
• Τραπέζι

Υπάρχουν επίσης μερικά άλλα προηγμένα μπλοκ που χρησιμοποιούνται σπάνια. Ενδέχεται να δείτε επιπλέον μπλοκ εάν εγκαταστήσετε νέες προσθήκες WordPress^{(new WordPress plugins)} στο πρόγραμμα επεξεργασίας.

Η προσθήκη μπλοκ είναι τόσο απλή όσο η επιλογή του εικονιδίου + στα δεξιά κάτω από το πιο πρόσφατο μπλοκ που έχετε προσθέσει.

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

Πριν φτάσουμε σε αυτά τα μπλοκ, ας ξεκινήσουμε από την αρχή και ας δημιουργήσουμε μια νέα ανάρτηση χρησιμοποιώντας το Gutenberg στο WordPress .

Δημιουργία αναρτήσεων και προσθήκη μπλοκ

Η προσθήκη μιας ανάρτησης παραμένει αμετάβλητη από την τελευταία έκδοση του WordPress . Απλώς^(Just) επιλέξτε Αναρτήσεις^(Posts) από την αριστερή γραμμή πλοήγησης και επιλέξτε Προσθήκη νέου^{(Add New)} από κάτω. 

Αυτό θα ανοίξει το παράθυρο επεξεργασίας αναρτήσεων. Εδώ είναι επίσης όπου όλα είναι διαφορετικά. Θα δείτε τον προεπιλεγμένο επεξεργαστή του WordPress Gutenberg^{(Gutenberg WordPress)} . 

Προσθήκη στοιχείων μπλοκ^{(Block Items)} στον επεξεργαστή Gutenberg^{(Gutenberg Editor)}

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

Μπλοκ παραγράφων^{(Paragraph Blocks)}

Το πιο συνηθισμένο πρώτο μπλοκ που προσθέτουν οι άνθρωποι μετά τον τίτλο είναι ένα μπλοκ παραγράφου. Για να το κάνετε αυτό, επιλέξτε Παράγραφος^(Paragraph) από το αναδυόμενο παράθυρο. 

Αυτό θα εισαγάγει ένα πεδίο μπλοκ όπου μπορείτε να ξεκινήσετε να πληκτρολογείτε την πρώτη παράγραφο της ανάρτησής σας. Η μορφοποίηση για το μπλοκ παραγράφου^(Paragraph) ακολουθεί την προεπιλεγμένη γραμματοσειρά^{(the default font)} για τα μπλοκ παραγράφων του ιστότοπού σας. 

Ακολουθούν μερικές συμβουλές για την προσθήκη μπλοκ παραγράφων στον επεξεργαστή Gutenberg .

• Η παράγραφός σας μπορεί να είναι όσο μεγάλη θέλετε. Το κείμενο θα αναδιπλωθεί αυτόματα στην επόμενη γραμμή, όπως και στον κλασικό επεξεργαστή.
• Εάν πατήσετε Enter , ο επεξεργαστής Gutenberg δημιουργεί αυτόματα ένα νέο μπλοκ παραγράφου, ωστόσο μοιάζει απλώς με μια δεύτερη παράγραφο με μια αλλαγή παραγράφου.
• Η επισήμανση οποιουδήποτε κειμένου στην παράγραφο θα εμφανίσει ένα παράθυρο μορφοποίησης όπου μπορείτε να αλλάξετε τη μορφοποίηση αυτού του κειμένου ή να τροποποιήσετε το μπλοκ σε λίστα ή σε κάποιον άλλο τύπο μπλοκ.
• Επιλέξτε τις τρεις τελείες και επιλέξτε Κατάργηση μπλοκ^{(Remove block)} για να διαγράψετε ένα μπλοκ παραγράφου και να το αντικαταστήσετε με κάτι άλλο.

Μπλοκ εικόνας^{(Image Blocks)}

Εάν επιλέξετε το μπλοκ Εικόνα^(Image) , θα δείτε ένα πλαίσιο Εικόνα^(Image) όπου μπορείτε να επιλέξετε ένα κουμπί Μεταφόρτωση^(Upload) για να ανεβάσετε μια εικόνα στην ανάρτησή σας από τον υπολογιστή σας. Επιλέξτε το σύνδεσμο Βιβλιοθήκη πολυμέσων^{(Media Library)} για να χρησιμοποιήσετε μια εικόνα από την υπάρχουσα βιβλιοθήκη πολυμέσων σας ή Εισαγάγετε από τη διεύθυνση URL^{(Insert from URL)} για να συνδέσετε μια εικόνα από άλλη τοποθεσία.

Αυτό θα εισαγάγει την εικόνα στο άρθρο όπου προσθέσατε το νέο μπλοκ εικόνας . ^(Image)Θα παρατηρήσετε ότι μπορείτε να πληκτρολογήσετε τη λεζάντα για την εικόνα ακριβώς κάτω από την ίδια την εικόνα.

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

Λίστα μπλοκ^{(List Blocks)}

Όταν προσθέτετε ένα νέο μπλοκ και επιλέγετε Λίστα^(List) , θα εισαγάγει το μπλοκ λίστας σε εκείνο το σημείο του άρθρου.

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

Η μορφοποίηση της λίστας ακολουθεί επίσης το στυλ και το μέγεθος γραμματοσειράς όπως ορίζονται από το θέμα σας^{(your theme)} , επομένως μην εκπλαγείτε αν η γραμματοσειρά στη λίστα σας φαίνεται διαφορετική από τα μπλοκ παραγράφου σας.

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

Άλλα Μπλοκ^{(Other Blocks)}

Εάν θέλετε να δείτε όλα τα μπλοκ που είναι διαθέσιμα, επιλέξτε + για να προσθέσετε ένα μπλοκ και, στη συνέχεια, επιλέξτε Αναζήτηση όλων^{(Browse all)} για να δείτε ολόκληρη τη λίστα.

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

• Πίνακες
• Αρχεία και πολυμέσα
• Βίντεο
• Η ετικέτα "Περισσότερα".
• Αλλαγές σελίδας και διαχωριστικά
• Γραφικά στοιχεία όπως εικονίδια κοινωνικής δικτύωσης, σύννεφα ετικετών, ημερολόγιο^(calendar) και γραφικά στοιχεία προσθήκης WordPress
• Ενσωματώστε^(Embed) κώδικα για ιστότοπους κοινωνικής δικτύωσης, ιστότοπους μέσων όπως το YouTube^(YouTube) και το Spotify και πολλά άλλα

Άλλα χαρακτηριστικά του Gutenberg

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

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

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

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

Χρήση του Επεξεργαστή Glutenberg^{(Glutenberg Editor)} στο WordPress

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

Τα άλλα εικονίδια σε αυτό το μενού σάς δίνουν γρήγορη πρόσβαση σε άλλες λειτουργίες του Gutenberg .

• Το εικονίδιο Επεξεργασία^(Edit) στυλό σάς επιτρέπει να μεταβείτε στη λειτουργία επιλογής για να επιλέξετε πιο εύκολα μπλοκ. Κάντε διπλό κλικ^{(Double-click)} σε ένα μπλοκ για να επιστρέψετε στη λειτουργία επεξεργασίας^(Edit) .
• Τα εικονίδια Αναίρεσης^(Undo) ή Επανάληψης^(Redo) (αριστερό και δεξί κυρτό βέλος) θα αναιρέσουν ή θα επαναλάβουν την τελευταία σας επεξεργασία.
• Το εικονίδιο i (Λεπτομέρειες) σάς δείχνει τον αριθμό των χαρακτήρων, λέξεων, επικεφαλίδων, παραγράφων και μπλοκ στην ανάρτησή σας.
• Το εικονίδιο Περίγραμμα^(Outline) σάς επιτρέπει να πλοηγηθείτε γρήγορα σε μπλοκ στην ανάρτησή σας με βάση τη σειρά τους στο περίγραμμα της ανάρτησής σας.

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

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a few years, then yоυ remember when the folks at WordPress rolled out the Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 Πρόσθετα που πρέπει να έχετε για νέες εγκαταστάσεις WordPress

• Πώς να μεταβείτε από τον κλασικό επεξεργαστή WordPress στο Gutenberg

• Τρόπος απόκρυψης Γρήγορων συνδέσμων σε μια σελίδα νέας καρτέλας στο Edge χρησιμοποιώντας τον Επεξεργαστή Μητρώου

• Πώς να μετακινήσετε ιστότοπο WordPress από έναν κεντρικό υπολογιστή σε άλλο

• Πώς να εγκαταστήσετε και να ρυθμίσετε το WordPress στο Microsoft Azure

• Πώς να παρακολουθείτε κατεστραμμένους συνδέσμους με το Google Webmaster Tool

• Πώς να εγκαταστήσετε ένα θέμα στο WordPress

• Πώς να δημιουργήσετε ένα ιστολόγιο Wix που είναι εξίσου καλό με το WordPress

• Πώς να βρείτε τη σύνδεσή σας διαχειριστή WordPress

• Πώς να δημιουργήσετε το δικό σας αναδυόμενο κουπόνι στο WordPress

• Πώς να κάνετε έναν ιστότοπο WordPress ασφαλή

• 11 καλύτερες προσθήκες για το WordPress Podcast

• Ανακατευθύνετε τους χρήστες από τη σελίδα 404 στο WordPress

• Πώς να αφαιρέσετε όλα τα ίχνη μιας προσθήκης WordPress

• Πώς να ενημερώσετε την PHP στο WordPress

• Πώς να χρησιμοποιήσετε το WP Super Cache στο ιστολόγιο WordPress

• Πώς να ενισχύσετε την απόδοση στο WordPress μέσω καθαρισμού βάσης δεδομένων

• Πώς να ελέγξετε εάν ένας ιστότοπος έχει αποκλειστεί από το AdSense

• Η καλύτερη μορφή γραφής ιστολογίου για να συγκεντρώσετε τους πόντους σας

• Πώς να αντιγράψετε μια σελίδα στο WordPress