Se utilizzi WordPress da diversi anni, ti ricordi quando la gente di WordPress ha lanciato l' editor Gutenberg in ^(Gutenberg)WordPress 5.0 nel 2018.

Questo nuovo editor predefinito è stato un'importante revisione per la modifica sia dei post che delle pagine del tuo sito. Ha trasformato la grande casella di testo a cui erano abituati i proprietari di siti Web in una piattaforma di modifica basata su blocchi molto diversa.

Alcuni proprietari di siti Web lo odiavano così tanto che hanno evitato l'aggiornamento a WordPress 5.0 e sono rimasti con il classico editor predefinito il più a lungo possibile. Altri proprietari di siti Web hanno abbracciato il cambiamento per la sua semplicità e facilità d'uso.

Se stai effettuando la transizione e sei curioso di sapere cosa aspettarti, questo tutorial di WordPress Gutenberg ti guiderà attraverso le funzionalità principali che devi conoscere e comprendere. Questo dovrebbe rendere la tua transizione il più semplice possibile.

Cosa aspettarsi da WordPress Gutenberg

La cosa principale da sapere sull'editor di Gutenberg è che è basato su blocchi. Ciò significa che tutto ciò che devi aggiungere viene gestito tramite blocchi. I blocchi a Gutenberg includono (ma non sono limitati a):

• Paragrafo
• Intestazione
• Immagine
• Elenco
• Citazione
• Codice
• preformattato
• Pullquote
• Tavolo

Ci sono anche alcuni altri blocchi avanzati che vengono usati raramente. Potresti vedere blocchi aggiuntivi se installi nuovi plugin^{(new WordPress plugins)} di WordPress nell'editor.

L'aggiunta di blocchi è semplice come selezionare l'icona + a destra sotto il blocco più recente che hai aggiunto.

Selezionando uno qualsiasi dei blocchi dalla finestra pop-up si aggiunge quel blocco come sezione successiva nella tua pagina o post. 

Prima di arrivare a questi blocchi, iniziamo dall'inizio e creiamo un nuovo post usando Gutenberg in WordPress .

Creazione di post e aggiunta di blocchi

L'aggiunta di un post rimane invariata rispetto all'ultima versione di WordPress . Basta^(Just) selezionare Post^(Posts) dalla barra di navigazione a sinistra e selezionare Aggiungi nuovo^{(Add New)} sotto di essa. 

Si aprirà la finestra dell'editor di post. Anche qui è tutto diverso. Vedrai l' editor  WordPress Gutenberg predefinito.^{(Gutenberg WordPress)}

Aggiunta di elementi di blocco^{(Block Items)} nell'editor Gutenberg^{(Gutenberg Editor)}

Puoi digitare il titolo del tuo post nel campo del titolo. Quindi seleziona l' icona + a destra per aggiungere il primo blocco.

Blocchi di paragrafo^{(Paragraph Blocks)}

Il primo blocco più comune che le persone aggiungono dopo il titolo è un blocco di paragrafo. Per fare ciò, seleziona Paragrafo^(Paragraph) dalla finestra pop-up. 

Questo inserirà un campo di blocco in cui puoi iniziare a digitare il primo paragrafo del tuo post. La formattazione per il blocco di paragrafo^(Paragraph) segue il carattere predefinito^{(the default font)} per i blocchi di paragrafo del tuo sito. 

Ecco alcuni suggerimenti per aggiungere blocchi di paragrafo nell'editor Gutenberg .

• Il tuo paragrafo può essere lungo quanto vuoi. Il testo andrà automaticamente a capo nella riga successiva, proprio come nell'editor classico.
• Se premi Invio^(Enter) , l' editor Gutenberg crea automaticamente un nuovo blocco di paragrafo, tuttavia sembra solo un secondo paragrafo con un'interruzione di paragrafo.
• Evidenziando qualsiasi testo nel paragrafo verrà visualizzata una finestra di formattazione in cui è possibile modificare la formattazione di quel testo o modificare il blocco in un elenco o in un altro tipo di blocco.
• Seleziona i tre punti e seleziona Rimuovi blocco^{(Remove block)} per eliminare un blocco di paragrafo e sostituirlo con qualcos'altro.

Blocchi immagine^{(Image Blocks)}

Se selezioni il Blocco immagine^(Image) , vedrai una casella Immagine^(Image) in cui puoi selezionare un pulsante Carica^(Upload) per caricare un'immagine nel tuo post dal tuo computer. Selezionare il collegamento Libreria multimediale^{(Media Library)} per utilizzare un'immagine dalla libreria multimediale esistente o Inserisci da URL^{(Insert from URL)} per collegare un'immagine da un altro sito.

Questo inserirà l'immagine nell'articolo in cui hai aggiunto il nuovo blocco immagine . ^(Image)Noterai che puoi digitare la didascalia per l'immagine direttamente sotto l'immagine stessa.

Puoi utilizzare le stesse opzioni di formattazione sul testo della didascalia che puoi utilizzare sul normale testo del paragrafo.

Elenca blocchi^{(List Blocks)}

Quando aggiungi un nuovo blocco e selezioni Elenco^(List) , verrà inserito il blocco elenco in quel punto dell'articolo.

Mostrerà un punto elenco, ma mentre digiti e premi Invio^(Enter) , ogni nuovo punto elenco apparirà quando ne hai bisogno.

La formattazione dell'elenco segue anche lo stile e la dimensione del carattere definiti dal tuo tema^{(your theme)} , quindi non sorprenderti se il carattere nell'elenco ha un aspetto diverso dai blocchi di paragrafo.

Puoi evidenziare il testo nel blocco elenco e vedrai le opzioni di formattazione per questo testo se vuoi cambiarlo. Non puoi modificare lo stile del carattere qui, ma puoi aggiungere grassetto, corsivo, aggiungere un collegamento ipertestuale o modificare completamente il tipo di blocco.

Altri blocchi^{(Other Blocks)}

Se desideri visualizzare tutti i blocchi disponibili, seleziona + per aggiungere un blocco, quindi seleziona Sfoglia tutto^{(Browse all)} per visualizzare l'intero elenco.

Questa lista è in realtà piuttosto lunga. Tutto ciò che ricordi essere disponibile nell'editor classico tramite il suo sistema di menu sarà incluso qui. Questi includono altri blocchi comunemente usati come:

• Tabelle
• File e media
• Video
• Il tag "Altro".
• Interruzioni di pagina e separatori
• Widget come icone social, tag cloud, calendario^(calendar) e widget di plugin di WordPress
• Incorpora^(Embed) codice per siti social, siti multimediali come YouTube e Spotify e altro ancora

Altre caratteristiche di Gutenberg

Non devi rimanere con i blocchi che hai aggiunto ovunque li hai aggiunti. Puoi scorrere indietro nel tuo post e selezionare l' icona + tra uno qualsiasi dei blocchi esistenti. Questo ti permetterà di inserire nuovi blocchi tra quelli esistenti.

Inoltre, non sei bloccato nemmeno con il posizionamento dei tuoi blocchi. Nel classico editor di WordPress , non è stato sempre facile spostare cose come le immagini in altre sezioni del tuo post senza a volte rovinare la codifica in background.

In Gutenberg , spostare elementi come le immagini è semplice come selezionare il blocco e quindi selezionare le frecce su o giù nella barra dei menu a comparsa per spostare il blocco su o giù nel post.

Ogni volta che selezioni la freccia, il blocco scorrerà di una posizione in qualsiasi direzione tu abbia selezionato.

Utilizzo dell'editor Glutenberg^{(Glutenberg Editor)} in WordPress

L'area post non è l'unico posto dove aggiungere nuovi blocchi. Noterai che c'è un menu di icone molto semplice nella parte superiore dell'editor in cui puoi utilizzare l' icona + anche per aggiungere blocchi.

Le altre icone in questo menu ti danno un rapido accesso ad altre funzioni di Gutenberg .

• L'icona Modifica^(Edit) penna consente di passare alla modalità di selezione per selezionare più facilmente i blocchi. Fare doppio clic su^{(Double-click)} un blocco per tornare alla modalità Modifica^(Edit) .
• Le icone Annulla^(Undo) o Ripristina^(Redo) (frecce curve sinistra e destra) annullano o ripristinano l'ultima modifica.
• L' icona i (Dettagli) mostra il numero di caratteri, parole, titoli, paragrafi e blocchi nel tuo post.
• L' icona Struttura^(Outline) ti consente di navigare rapidamente tra i blocchi nel tuo post in base al loro ordine nella struttura del tuo post.

Per molte persone, l' editor Gutenberg in ^(Gutenberg)WordPress richiede un po' di tempo per abituarsi. Ma dopo aver sperimentato quanto sia facile creare, modificare e manipolare blocchi di elementi nei tuoi post, scoprirai che il tuo processo di creazione di post e pagine è più veloce e produttivo.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a few years, then you remembеr when the fоlkѕ at WordPrеss 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 Plugin indispensabili per le nuove installazioni di WordPress

• Come passare dal classico editor di WordPress a Gutenberg

• Come nascondere Quick Links su una pagina New tab in Edge usando Registry Editor

• Come spostarsi WordPress site da un host a un altro

• Come installare e configurazione WordPress su Microsoft Azure

• Come velocizzare un sito WordPress in 11 passaggi

• WordPress Jetpack: cos'è e vale la pena installarlo?

• Che cos'è AMP per WordPress e come installarlo

• Come rimuovere malware dal tuo sito WordPress

• Come controllare se un sito Web è bannato da AdSense

• 10 plugin WordPress essenziali per un sito Web per piccole imprese

• Come eseguire il backup del tuo sito WordPress

• Come configurare manualmente WordPress su un dominio

• Protect e WordPress website al sicuro da hacker

• I 3 migliori plugin SEO per WordPress

• Come aggiornare PHP in WordPress

• 8 Temi gratuiti Premium WordPress da installare

• Squarespace Vs WordPress: qual è la migliore piattaforma del sito?

• Come fare uno WordPress Site Secure

• Come duplicare una pagina in WordPress