Si ha estado usando WordPress durante bastantes años, entonces recordará cuando la gente de WordPress implementó el editor Gutenberg en ^(Gutenberg)WordPress 5.0 en 2018.

Este nuevo editor predeterminado fue una revisión importante para editar publicaciones y páginas en su sitio. Transformó el cuadro de texto grande al que estaban acostumbrados los propietarios de sitios web en una plataforma de edición basada en bloques muy diferente.

Algunos propietarios de sitios web lo odiaron tanto que evitaron actualizar a WordPress 5.0 y se quedaron con el editor predeterminado clásico el mayor tiempo posible. Otros propietarios de sitios web aceptaron el cambio por su simplicidad y facilidad de uso.

Si está haciendo la transición y tiene curiosidad sobre qué esperar, este tutorial de WordPress Gutenberg lo guiará a través de las características principales que necesita conocer y comprender. Esto debería hacer que su transición sea lo más fácil posible.

Qué esperar en WordPress Gutenberg

Lo principal que debe saber sobre el editor de Gutenberg es que está basado en bloques. Esto significa que todo lo que necesita agregar se administra a través de bloques. Los bloques en Gutenberg incluyen (pero no se limitan a):

• Párrafo
• Encabezamiento
• Imagen
• Lista
• Cita
• Código
• preformateado
• comillas
• Mesa

También hay algunos otros bloques avanzados que rara vez se usan. Es posible que vea bloques adicionales si instala nuevos complementos de WordPress^{(new WordPress plugins)} en el editor.

Agregar bloques es tan simple como seleccionar el ícono + a la derecha debajo del bloque más reciente que haya agregado.

Al seleccionar cualquiera de los bloques de la ventana emergente, se agrega ese bloque como la siguiente sección en su página o publicación. 

Antes de llegar a estos bloques, comencemos desde el principio y creemos una nueva publicación usando Gutenberg en WordPress .

Crear publicaciones y agregar bloques

Agregar una publicación permanece sin cambios desde la última versión de WordPress . Simplemente^(Just) seleccione Publicaciones^(Posts) en la barra de navegación izquierda y seleccione Agregar nuevo^{(Add New)} debajo. 

Esto abrirá la ventana del editor de publicaciones. Aquí es también donde todo es diferente. Verás el editor  predeterminado de WordPress de Gutenberg .^{(Gutenberg WordPress)}

Agregar elementos de bloque^{(Block Items)} en el editor de Gutenberg^{(Gutenberg Editor)}

Puede escribir el título de su publicación en el campo de título. Luego seleccione el ícono + a la derecha para agregar el primer bloque.

Bloques de párrafo^{(Paragraph Blocks)}

El primer bloque más común que la gente agrega después del título es un bloque de párrafo. Para ello, seleccione Párrafo^(Paragraph) en la ventana emergente. 

Esto insertará un campo de bloque donde puede comenzar a escribir el primer párrafo de su publicación. El formato del bloque Párrafo^(Paragraph) sigue la fuente predeterminada^{(the default font)} para los bloques de párrafo de su sitio. 

Aquí hay algunos consejos para agregar bloques de párrafo en el editor de Gutenberg .

• Tu párrafo puede ser tan largo como quieras. El texto se ajustará automáticamente a la siguiente línea, como en el editor clásico.
• Si presiona Enter , el editor de Gutenberg crea automáticamente un nuevo bloque de párrafo, sin embargo, solo parece un segundo párrafo con un salto de párrafo.
• Resaltar cualquier texto en el párrafo mostrará una ventana de formato donde puede modificar el formato de ese texto o modificar el bloque en una lista o algún otro tipo de bloque.
• Seleccione los tres puntos y seleccione Eliminar bloque^{(Remove block)} para eliminar un bloque de párrafo y reemplazarlo con otra cosa.

Bloques de imagen^{(Image Blocks)}

Si selecciona el bloque Imagen^(Image) , verá un cuadro Imagen^(Image) donde puede seleccionar un botón Cargar^(Upload) para cargar una imagen en su publicación desde su computadora. Seleccione el enlace Biblioteca de medios^{(Media Library)} para usar una imagen de su biblioteca de medios existente, o Insertar desde URL^{(Insert from URL)} para vincular a una imagen de otro sitio.

Esto insertará la imagen en el artículo donde agregó el nuevo bloque Imagen . ^(Image)Notará que puede escribir el título de la imagen directamente debajo de la imagen misma.

Puede utilizar las mismas opciones de formato en el texto del título que en el texto de párrafo normal.

Bloques de lista^{(List Blocks)}

Cuando agrega un nuevo bloque y selecciona List , insertará el bloque de lista en ese punto del artículo.

Mostrará una viñeta, pero a medida que escriba y presione Entrar^(Enter) , cada nueva viñeta aparecerá cuando las necesite.

El formato de la lista también sigue el estilo y el tamaño de fuente definidos por su tema^{(your theme)} , así que no se sorprenda si la fuente de su lista se ve diferente a los bloques de párrafo.

Puede resaltar texto en el bloque de lista y verá opciones de formato para este texto si desea cambiarlo. No puede cambiar el estilo de fuente aquí, pero puede negrita, cursiva, agregar un hipervínculo o cambiar el tipo de bloque por completo.

Otros bloques^{(Other Blocks)}

Si desea ver todos los bloques que están disponibles, seleccione + para agregar un bloque, luego seleccione Examinar todo^{(Browse all)} para ver la lista completa.

Esta lista es en realidad bastante larga. Todo lo que recuerde que está disponible en el editor clásico a través de su sistema de menús se incluirá aquí. Estos incluyen otros bloques de uso común como:

• Mesas
• archivos y medios
• Vídeos
• La etiqueta "Más"
• Saltos de página y separadores
• Widgets como íconos sociales, nubes de etiquetas, calendario^(calendar) y complementos de WordPress
• Código incrustado^(Embed) para sitios sociales, sitios de medios como YouTube y Spotify , y más

Otras características de Gutenberg

No tienes que quedarte con los bloques que has agregado donde sea que los hayas agregado. Puede desplazarse hacia atrás en su publicación y seleccionar el ícono + entre cualquiera de los bloques existentes. Esto le permitirá insertar nuevos bloques entre los existentes.

Tampoco está atascado con la ubicación de sus bloques. En el editor clásico de WordPress , no siempre fue fácil mover cosas como imágenes a otras secciones de su publicación sin estropear a veces la codificación de fondo.

En Gutenberg , mover elementos como imágenes es tan simple como seleccionar el bloque y luego seleccionar las flechas hacia arriba o hacia abajo en la barra de menú emergente para mover el bloque hacia arriba o hacia abajo en la publicación.

Cada vez que seleccione la flecha, deslizará ese bloque una posición en cualquier dirección que haya seleccionado.

Usando el Editor Glutenberg^{(Glutenberg Editor)} en WordPress

El área de publicación no es el único lugar para agregar nuevos bloques. Notarás que hay un menú de íconos muy simple en la parte superior del editor donde también puedes usar el ícono + para agregar bloques.

Los otros íconos en este menú le brindan acceso rápido a otras funciones de Gutenberg .

• El icono de edición^(Edit) del bolígrafo le permite cambiar al modo de selección para seleccionar bloques más fácilmente. Haga doble clic en^{(Double-click)} un bloque para volver al modo de edición^(Edit) .
• Los iconos Deshacer^(Undo) o Rehacer^(Redo) (flechas curvas izquierda y derecha) deshacen o rehacen su última edición.
• El ícono i (Detalles) le muestra la cantidad de caracteres, palabras, encabezados, párrafos y bloques en su publicación.
• El ícono de Esquema^(Outline) le permite navegar rápidamente a los bloques en su publicación según su orden en el esquema de su publicación.

Para muchas personas, el editor de Gutenberg en ^(Gutenberg)WordPress toma un tiempo para acostumbrarse. Pero después de experimentar lo fácil que es crear, editar y manipular bloques de elementos en sus publicaciones, descubrirá que su proceso de creación de publicaciones y páginas es más rápido y productivo.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WоrdPress for quite a few years, then you 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 complementos imprescindibles para las nuevas instalaciones de WordPress

• Cómo hacer la transición del editor clásico de WordPress a Gutenberg

• Cómo ocultar Quick Links en una página New tab en Edge usando Registry Editor

• Cómo mover WordPress site de un anfitrión a otro

• Cómo instalar y configurar WordPress en Microsoft Azure

• Cómo instalar WordPress en Google Cloud Platform

• Wix Vs WordPress: ¿Cuál es mejor para crear su sitio web?

• Cómo usar WP Super Cache en el blog de WordPress

• Cómo proteger con contraseña las páginas de su sitio web de WordPress

• Cómo rastrear Broken Links con Google Webmaster Tool

• Los 3 mejores complementos de SEO para WordPress

• Redirigir a los usuarios de 404 Página en WordPress

• Los 11 mejores complementos de podcasts de WordPress

• Cómo hacer un WordPress Site Secure

• Cómo eliminar malware de su sitio de WordPress

• Creando Child Theme en WordPress

• Cómo realizar pruebas divididas efectivas en WordPress

• Cómo configurar Privacy en WordPress y por qué es importante

• Cómo acelerar cualquier sitio de WordPress usando .HTACCESS

• Squarespace Vs WordPress: ¿Cuál es la mejor plataforma de sitio?