Cómo utilizar el editor de bloques de WordPress (tutorial de Gutenberg)

El editor de bloques en WordPress es la herramienta predeterminada que ahora usamos para escribir contenido y editar sitios. Se lanzó en 2019 y se le conoce cariñosamente como "Gutenberg". Este nuevo editor sustituye al antiguo editor clásico que le precedía. El editor de bloques es excepcionalmente sencillo e intuitivo de usar, y es capaz de crear contenido y editar sitios de WordPress.

¿Cuál es la diferencia entre el editor de bloques (Gutenberg) y el editor clásico?

Antes de sumergirnos en el editor de bloques, vamos a comparar y entender las diferencias entre el editor de bloques Gutenberg y el antiguo editor clásico.El editor clásico de WordPress se muestra a continuación:

Tiene una caja de editor de texto con algunas opciones básicas de formato. El editor de bloques de WordPress se muestra a continuación:

Como puede ver, son dos editores completamente diferentes para crear contenido en WordPress. El antiguo editor clásico es un editor de texto con botones de formato similar a Microsoft Word. El nuevo editor utiliza un enfoque diferente llamado "bloques" (de ahí el nombre "Editor de bloques").

Los bloques son elementos de contenido que pueden añadirse a las pantallas de edición para crear diseños. Cada elemento añadido a una entrada o página es un bloque. Por ejemplo, se pueden añadir bloques para párrafos, imágenes, vídeos, galerías, audio, listas y más. Todos los elementos de contenido comunes tienen bloques y se pueden añadir más a través de los plugins de WordPress.

¿Cuáles son las ventajas del editor de bloques de WordPress sobre el editor clásico?

El editor de bloques de WordPress proporciona una forma sencilla de añadir diferentes tipos de contenido a las entradas y páginas. Por ejemplo, antes, si querías añadir tablas al contenido utilizando el editor clásico, necesitabas un plugin de tablas aparte. Con el editor de bloques, basta con añadir un bloque de tabla, seleccionar las columnas y filas, y empezar a añadir contenido.

Los elementos de contenido pueden moverse hacia arriba y hacia abajo, editarse como bloques individuales y crear contenido multimedia enriquecido con facilidad. Lo mejor de todo es que el editor de bloques de WordPress es fácil de usar y aprender. Esto ofrece una gran ventaja para todos los principiantes de WordPress que están empezando su primer blog o la construcción de un sitio web de negocios de bricolaje.

Dicho esto, vamos a ver cómo utilizar el editor de bloques de WordPress para crear un gran contenido como un profesional.

Uso de Gutenberg - Editor de bloques de WordPress

El editor de bloques está diseñado para ser intuitivo y flexible. Aunque tiene un aspecto diferente del antiguo editor de WordPress, sigue haciendo todo lo que se puede hacer en el editor clásico.

Crear una nueva entrada de blog o página utilizando el editor de bloques

Comience a crear una nueva entrada de blog o página como de costumbre. Simplemente haga clic en el Administrador de WordPress en elEntradas " Añadir nueva entradaMenú. Si desea crear una página, vaya a Página"Añadir nuevoMenú.

Esto inicia el editor de bloques.

Cómo añadir un bloque en el editor de bloques

El primer bloque de cada entrada o página es el título. Puedes utilizar el ratón para desplazarte bajo el título o pulsar la tecla Tab del teclado para mover el cursor hacia abajo y empezar a escribir.

Por defecto, el siguiente bloque es un bloque de párrafo para que el usuario pueda empezar a escribir. Sin embargo, si quieres añadir otro tipo de contenido, es muy fácil. Basta con hacer clic en el botón "Añadir nuevo bloque" [+] en la esquina superior izquierda del editor, o bien hacer clic en este botón debajo o a la derecha de un bloque existente para añadir un nuevo bloque de contenido.

Al hacer clic en este botón, aparecerá el menú Añadir bloque con una barra de búsqueda en la parte superior y los bloques más utilizados en la parte inferior. Puede hacer clic en las pestañas para examinar las categorías de bloques o introducir una palabra clave para buscar rápidamente un bloque específico.

Si no desea utilizar el ratón para hacer clic en los botones, también puede utilizar los métodos abreviados de teclado. En primer lugar, escriba / para buscar un bloque y, a continuación, pulse Intro en el teclado para insertarlo.

Uso de bloques en el nuevo editor

Cada bloque tiene su propia barra de herramientas, que aparece en la parte superior del bloque. Los botones de la barra de herramientas cambiarán en función del bloque que esté editando. Por ejemplo, en la captura de pantalla siguiente, estamos desarrollando un bloque de párrafo que muestra botones de formato básico como alineación de texto, negrita, cursiva, insertar enlace y más opciones disponibles en el menú de tres puntos.

Además de la barra de herramientas, cada bloque puede tener sus propios ajustes de bloque, que se muestran en la columna derecha de la pantalla de edición. Estos ajustes varían en función del bloque que se esté editando. Por ejemplo, el bloque Párrafo permite editar el texto, el fondo, el color del enlace y el diseño.

Es posible mover bloques arriba y abajo y reorganizarlos. Si desea realizar esta operación, sólo tiene que hacer clic en Arrastrar y soltar o en los botones Arriba y Abajo de la barra de herramientas de bloques.

Organizar los bloques por grupos y columnas

El Editor de bloques también incluye prácticas herramientas para gestionar y organizar el diseño del contenido. Puedes seleccionar varios bloques haciendo clic en ellos mientras mantienes pulsada la tecla Mayús del teclado.

A continuación, haz clic en el botón Tipo de bloque de la barra de herramientas para convertir el bloque seleccionado en un grupo o columna. A continuación, se pueden aplicar estilos a todo el grupo de bloques, como cambiar la alineación o el espaciado.

El editor de bloques también puede añadir bloques de grupo o columna vacíos. Pueden rellenarse posteriormente con otros bloques.

Se puede añadir cualquier tipo de bloque a cada columna según sea necesario. Esto le permite crear diseños agradables para diferentes columnas utilizadas.

Conservación y reutilización de bloques en Gutenberg

La mejor ventaja de utilizar bloques es que pueden guardarse y reutilizarse. Esto es especialmente útil para propietarios de sitios web y blogueros que a menudo necesitan añadir piezas específicas de contenido a sus entradas o páginas. Basta con hacer clic en el botón de menú situado en la esquina superior derecha de la barra de herramientas de cada bloque. Selecciona la opción "Crear patrón" del menú.

Atención:También puede guardar grupos y columnas enteros como bloques reutilizables. Esto te permite guardar secciones enteras y utilizarlas rápidamente cuando las necesites más adelante. Para guardar como bloque reutilizable, basta con hacer clic en la opción correspondiente y aparecerá una ventana. En esta ventana, tendrá que dar un nombre al bloque para poder encontrarlo fácilmente cuando lo necesite más adelante. También puede elegir una categoría para guardar el bloque. De este modo, podrá gestionar estos bloques reutilizables de forma más organizada.

A continuación, haga clic en el botón Crear para guardar su patrón. WordPress guardará su patrón y todos los bloques que contenga. Para reutilizar tu patrón, simplemente edita la entrada o página a la que quieras añadirlo. A continuación, haga clic en el botón [+] Añadir bloque o utilice el atajo de teclado /. El patrón se puede encontrar escribiendo el nombre que especificó.

La función de patrones facilita a los propietarios de sitios web la tarea de añadir algunos elementos comunes a los diseños de sus páginas, como banners llamativos, botones para compartir en redes sociales, banners publicitarios y mucho más. El tema o plugin de WordPress que elijas puede venir con algunos patrones, o puedes ir a la biblioteca de patrones de bloques de WordPress para encontrar patrones compartidos por otros y ver si hay alguno que te guste.

Opciones de publicación y gestión en el editor de bloques de Gutenberg

Cada entrada de WordPress contiene muchos metadatos. Esto incluye información como la fecha de publicación, categorías y etiquetas, imágenes destacadas y más. Todas estas opciones están perfectamente ubicadas en la columna derecha de la pantalla del editor.

Opciones de plug-in en Gutenberg

Los plugins de WordPress pueden integrar sus ajustes en las pantallas de edición utilizando la API del Editor de Bloques. Algunos plugins populares vienen con sus propios bloques. Por ejemplo.WPFormsel mejor plugin para crear formularios en WordPress para añadir formularios a tu contenido usando bloques.

Otros plugins de WordPress también pueden añadir sus ajustes a la pantalla del Editor de Bloques. Por ejemploSEO todo en uno para WordPressCómo permitir la edición de la configuración SEO en la parte inferior del editor de bloques:

Del mismo modo, si utilizas WooCommerce para gestionar una tienda online, te darás cuenta de que también tiene sus propios bloques. Estos bloques te permiten añadir productos a cualquier entrada o página de WordPress.

Añadir algunos bloques comunes al editor de bloques

Básicamente, el editor de bloques es potente y totalmente capaz de hacer el trabajo que hacía el antiguo editor clásico. No sólo eso, usándolo, tu trabajo será más rápido y fluido. Lo que es aún más impresionante es que viene con más características nuevas, como proporcionar opciones ricas sin código para diseñar contenido fácilmente. Aquí tienes algunos bloques comunes para utilizarlo fácilmente según tus necesidades.

1. Añadir imágenes al editor de bloques de WordPress

El editor de bloques de WordPress tiene un bloque de imagen listo para usar. Solo tienes que añadir el bloque y, a continuación, subir el archivo de imagen o seleccionarlo de la biblioteca multimedia.

También es posible arrastrar y soltar imágenes desde el ordenador y el editor creará automáticamente bloques de imágenes. Tras añadir una imagen, verás los ajustes del bloque, donde podrás añadir metadatos sobre la imagen, como texto alternativo, tamaño de resolución de la imagen y añadir un enlace a la imagen.

2. Añadir enlaces en el editor de bloques

El editor de bloques viene con varios bloques en los que puede añadir texto. El más utilizado es el bloque de párrafo, que tiene un botón Insertar enlace en la barra de herramientas. Todos los demás bloques de texto de uso común también tienen un botón de enlace en la barra de herramientas.

Los enlaces también pueden insertarse mediante la combinación de teclas Comando + K en un Mac o CTRL + K en un ordenador Windows.

3. Añadir una galería de fotos a Gutenberg

El bloque de galería funciona de forma similar al bloque de imagen. Añádalo y, a continuación, cargue o seleccione un archivo de imagen.

4. Uso de Gutenberg para añadir shortcodes a las entradas de WordPress

Todos los shortcodes utilizados en el Editor clásico también funcionan perfectamente en el Editor de bloques. Se pueden insertar directamente en bloques de párrafos, o puedes optar por utilizar bloques de shortcodes especiales para este fin.

Explorar otros bloques de contenido en el editor de bloques

El editor Gutenberg promete resolver algunos problemas de usabilidad de larga data en WordPress mediante la introducción de algunos bloques nuevos.

1. Añadir imágenes junto a un texto en WordPress

Con los editores antiguos, muchos usuarios no podían colocar imágenes junto al texto. Sin embargo, ahora es posible realizar este paso utilizando bloques multimedia y de texto.

Este sencillo bloque contiene dos bloques colocados uno al lado del otro, lo que le permite añadir fácilmente imágenes con algo de texto junto a ellas.

2. Añadir botones a las entradas y páginas de WordPress

Añadir botones a las entradas o páginas del blog era un verdadero quebradero de cabeza en editores anteriores. Puede que tengas que encontrar un plugin especial para generar el shortcode para el botón, o simplemente cambiar al modo HTML para escribir el código manualmente. Por suerte, el editor Gutenberg tiene un bloque de botones integrado que te permite añadir botones a cualquier entrada o página de forma fácil y rápida, ¡así que ya no tienes que preocuparte por eso!

Puedes añadir enlaces a los botones, cambiar los colores y mucho más.

3. Añadir bonitas imágenes de portada a las entradas del blog y a las páginas de destino

Otra gran característica es el bloque de portada. Te permite añadir fácilmente una imagen de portada o una portada de fondo con colores a entradas y páginas. La imagen de portada suele ser más ancha y suele utilizarse como decoración de una nueva parte de la página o del comienzo de una historia. Tiene un aspecto especialmente bonito y también te ayuda a crear diseños de contenido llamativos.

Es muy fácil de usar: basta con añadir un bloque de portada y subir tu imagen favorita. También existe la opción de añadir un color superpuesto a la portada, o establecerla como imagen de fondo fija, para que los usuarios puedan crear un efecto de paralaje súper chulo al desplazarse por la página.

4. Creación de tablas en los artículos

Añadir tablas a las entradas de WordPress no es una tarea fácil en el editor clásico, uno tiene que crearlas con la ayuda de un plugin, o escribir su propio código CSS y HTML. Pero aquí viene la buena noticia, ahora el editor de bloques tiene un bloque de tabla por defecto incorporado que hace que sea fácil y rápido añadir tablas a los posts y páginas. Simplemente añade este bloque, luego selecciona el número de columnas y filas que quieres insertar, ¡y listo!

Ahora puede empezar a añadir datos a las filas de la tabla. Se pueden añadir más filas y columnas en cualquier momento si es necesario, y hay dos opciones básicas de estilo disponibles.

5. Creación de contenidos multicolumna

El editor clásico no es realmente muy potente a la hora de crear contenido en varias columnas, lo que da quebraderos de cabeza a mucha gente. Es bueno que el editor de bloques nos proporcione la función de bloque de columnas, con la que podemos obtener fácilmente dos columnas de bloques de párrafos con una simple adición, lo que nos da más variedad y flexibilidad en la presentación del contenido.

Este bloque de columnas es muy flexible. Puede añadir hasta 6 columnas seguidas e incluso utilizar otros bloques en cada columna.

Consejos adicionales para un uso profesional de Gutenberg

Puede que te preocupe que usar el editor de bloques no te lleve más tiempo añadir y retocar bloques que crear contenido realmente. En realidad, no te preocupes en absoluto, el editor de bloques es súper rápido. Con un poco de familiaridad, es fácil añadir todo tipo de bloques sin tener que pensar demasiado. Estoy seguro de que pronto descubrirás que utilizar el editor de bloques agiliza y facilita tu flujo de trabajo.

Estos son algunos consejos adicionales para usuarios avanzados que le ayudarán a ponerse en marcha con el Editor de Bloques de WordPress más rápidamente.

1. Mueva la barra de herramientas de bloque a la parte superior

Es posible que haya notado en la captura de pantalla anterior que hay una barra de herramientas en la parte superior de cada bloque. Puede mover esta barra de herramientas a la parte superior del editor. Basta con hacer clic en el botón de tres puntos situado en la esquina superior derecha de la pantalla y seleccionar la opción "Barra de herramientas superior".

2. Utilizar atajos de teclado

Gutenberg viene con un par de atajos útiles para hacer su flujo de trabajo más rápido y más fácil. El primero es /. Simplemente escriba /, empiece a escribir y el editor le mostrará los bloques coincidentes que puede añadir inmediatamente. Para más atajos, haz clic en el menú de tres puntos en la esquina superior derecha de la pantalla y selecciona Atajos de teclado.

Aparecerá una ventana emergente con una lista de todos los atajos de teclado que puedes utilizar. Esta lista tendrá diferentes atajos para los usuarios de Windows y Mac.

3. Arrastre y suelte los medios para crear bloques de medios automáticamente

Gutenberg permite arrastrar y soltar archivos en cualquier lugar de la pantalla y creará automáticamente un bloque por ti. Por ejemplo, se puede colocar un único archivo de imagen o vídeo y creará el bloque por ti. O se pueden eliminar varios archivos de imagen para crear un bloque de galería.

4. Añade YouTube, Twitter, Vimeo y otros contenidos incrustados

El editor de bloques facilita la incrustación de contenidos de terceros en el contenido de WordPress. Todos los servicios populares de terceros tienen bloques.

Puedes copiar y pegar la URL incrustada y se creará automáticamente un bloque para ti. Por ejemplo, si añades la URL de un vídeo de YouTube, se creará automáticamente un bloque de incrustación de YouTube y se mostrará el vídeo.

Las opciones de incrustación por defecto no se aplican a las incrustaciones de Facebook e Instagram, pero hay una solución para eso, que te contaré más adelante.

Cómo añadir más bloques al editor de bloques de Gutenberg en WordPress

Los desarrolladores de editores de bloques en WordPress pueden crear sus propios bloques. Hay algunos excelentes plugins de WordPress que ofrecen paquetes de bloques para los nuevos editores.

He aquí algunas:

1. Bloque Spectra WordPress Gutenberg

Spectra WordPress Gutenberg Bloqueses una biblioteca de bloques que contiene muchos bloques avanzados para añadir más elementos de diseño al contenido.

Spectra por Popular Astra Temas de WordPressfue creado por un equipo de desarrolladores que pueden ayudarle a crear hermosos diseños sin escribir ningún código.

2. Bloques PublishPress

Bloques PublishPresses otra potente biblioteca de bloques con bloques adicionales para ampliar el editor de bloques Gutenberg. Incluye bonitas opciones de diseño, deslizadores, botones, iconos, galería de imágenes, mapas, pestañas, recomendaciones, acordeones (acordeones) y mucho más.

3. Apilables - Bloques Gutenberg

Apilables - Bloques Gutenberges una colección de bloques Gutenberg bellamente diseñados para usarlos en tu sitio web. Incluye bloques para contenedores, entradas, cuadrículas de características, acordeones, cajas de imágenes, listas de iconos, frases de llamada a la acción y mucho más.

Esperemos que este tutorial de Gutenberg te ayude a aprender a usar el editor de bloques de WordPress.