El nuevo editor de bloques que WordPress 5 ha lanzado al público, está diseñado para ser intuitivo y flexible. Con un aspecto totalmente diferente al antiguo editor de WordPress, hace todas las cosas que podías hacer en el editor clásico y mucho más.
Creando una nueva entrada para el blog o una página para el sitio web

Empezamos como lo hacemos normalmente desde el escritorio y se ejecutará el nuevo editor de bloques.

Nueva entrada: nos dirigimos al Entradas / Añadir nueva.

Nueva página: vamos a Páginas / Agregar nueva

Agregar un nuevo bloque

El primer bloque de cada publicación que podemos observar es el título, para editarlo lo único que se debe hacer dar clic sobre el campo y escribimos el título que deseamos.

Con la tecla de tabulación de nuestro teclado, nos desplazamos hacia abajo al siguiente campo para empezar a escribir o damos clic sobre este campo, es el bloque de párrafo que te permite empezar a escribir el contenido de la publicación.

También podemos insertar nuevos bloques y posteriormente personalizarlos, esto lo hacemos dando clic en el botón ubicado en la parte superior izquierda del editor en forma de círculo y con un signo más en el centro.

Al hacer clic en el botón, mostrará una caja con una lista tipo menú los bloques más utilizados, con las opciones disponibles para agregar los nuevos, también encontrarás arriba de este menú, una caja de búsqueda.

Personalizando bloques con el nuevo editor Gutenberg

Cada bloque posee su propia barra de herramientas que aparece en la parte superior. Los botones en la barra de herramientas cambian dependiendo del bloque que se esté editando.

Por ejemplo, en un bloque de párrafo, muestra botones de formato básico como: alineación de texto, negrita, cursiva, inserción de enlace y enlaces tachados.

Además, cada bloque también tiene sus propios ajustes que se pueden ver en la columna derecha de la pantalla de edición.

Podemos mover los bloques hacia arriba y hacia abajo simplemente arrastrando y soltando o haciendo clic en los botones arriba y abajo al lado de cada bloque.

Guardando y reutilizando bloques en Gutenberg

Una de las mejores opciones de los bloques es que se pueden guardar y reutilizar individualmente.

Para hacer uso de esta función, haz clic en el botón de menú ubicado en la esquina derecha de la barra de herramientas de cada bloque; en el menú, seleccione la opción ‘Agregar a bloques reutilizables’.

Una vez hecha esta acción, pedirá otorgar un nombre para el bloque reutilizable, asignamos el nombre y lo guardamos.

Ahora que está guardado, veamos cómo agregar el bloque reutilizable a otras publicaciones y páginas de WordPress en su sitio.

Simplemente edite la publicación o la página donde desea agregar el bloque reutilizable. Desde la pantalla de edición posterior, haga clic en el botón “Agregar bloque”.

Encontrará su bloque guardado en la pestaña “Reutilizable”, también puede encontrarlo escribiendo su nombre en la barra de búsqueda.

Puede posicionar el ratón sobre el bloque para tener una vista previa de él y para insertarlo simplemente haga clic.

Todos los bloques reutilizables se almacenan en su base de datos de WordPress, y se pueden administrar haciendo clic en el enlace “Administrar todos los bloques reutilizables”.

Opciones de publicación y gestión en Gutenberg

Cada publicación contiene muchos metadatos, esto incluye información como la fecha de publicación, categorías, etiquetas, imágenes destacadas, extracto y más.

Todas estas opciones están ubicadas en la columna derecha en la pantalla del editor.

Agregar bloques comunes en el nuevo editor

El nuevo editor Gutenberg, puede hacer todo lo que hacía el editor clásico. Sin embargo, estarás haciendo las cosas mucho más rápido y elegante que antes.

1. Agregar una imagen en el nuevo editor de WordPress

Este editor posee un bloque de imagen listo para usar. El bloque de imagen es muy sencillo de implementar, simplemente agregue el bloque y luego cargue un archivo de imagen o selecciónelo de la biblioteca de medios. También permite seleccionar un elemento de nuestro equipo arrastrarlo y cargarlo. En el panel ubicado a la derecha se muestran los campos para establecer el texto alternativo y la descripción del archivo

2. Agregando un enlace en el nuevo editor de bloques

Para esto vamos a usar un bloque de párrafo que viene con un botón de enlace de inserción en la barra de herramientas.

También puede insertar un enlace seleccionando el texto y utilizando el método abreviado de teclado, que es “Command + K” para Mac y “CTRL + K” en computadoras con Windows.

3. Añadiendo una galería de imágenes

El bloque de la galería funciona como el bloque de la imagen. Lo agrega y luego carga o selecciona los archivos de imagen para la galería.

4. Agregar códigos cortos en las publicaciones

Funciona igual que el editor antiguo, se inserta el código corto (shortcode) en un bloque de párrafo o también se puede usar un bloque de código abreviado.

5. Agregando un botón en las publicaciones y páginas

Agregar un botón en el editor clásico sí que era un dolor de cabeza, debíamos generarlo por medio de un código corto o cambiar a modo HTML y escribir el código, ahora el editor Gutenberg incluye un bloque de botón el cual nos permite agregar de forma rápida un botón a nuestra entrada o página, podemos elegir entre estilos, establecer el enlace, sus propiedades y cambiarle el color.

6. Agregar hermosas imágenes de portada en publicaciones de blog y páginas de destino

Una característica importante que podemos probar es el bloque fondo, que nos permite agregar imágenes de portada a nuestras entradas y páginas.

Una imagen de portada es una imagen de anchura completa posicionada en la parte principal de la página. Se ven muy bien y te permiten crear diseños de contenido atractivos.

Simplemente agregue un bloque de fondo y luego cargue la imagen que desea usar. Puede elegir un color de superposición para la portada o convertirla en una imagen de fondo fija para crear un efecto de paralaje cuando los usuarios se desplazan hacia abajo en la página.

7. Creación de tablas dentro de artículos

Con el editor clásico era necesario usar complementos (plugins) para poder insertar tablas, ahora Gutenberg trae un bloque predeterminado para insertar tablas, lo que hace nuestro trabajo mucho más fácil teniendo la opción de seleccionar la cantidad de filas y columnas necesarias.

8. Creando contenido multi-columna

Esto era otro problema, ahora con el editor Gutenberg y su bloque de columna es mucho más fácil, ya que cumple con la función de generar dos columnas de bloques de párrafos.

Consejos extra para usar Gutenberg de forma profesional

El nuevo editor es increíblemente rápido, hace que nuestro trabajo sea más productivo y ahorremos tiempo; incluso, usándolo de forma básica durante unos minutos, permitirá agregar bloques al instante.

Para usuarios avanzados, aquí hay algunos consejos adicionales para trabajar aún más rápido con el nuevo editor de WordPress.

→ Usa atajos de teclado

Gutenberg viene con varios atajos útiles que harán que nuestro flujo de trabajo sea aún mejor.

Para obtener accesos directos, haga clic en el menú de tres puntos ubicados en la esquina superior derecha de la pantalla y luego seleccione “Métodos abreviados de teclado”.

Aparecerá una ventana emergente con la lista de todos los métodos abreviados de teclado que puede utilizar. La lista tendrá diferentes accesos directos para usuarios de Windows y Mac.

→ Arrastra y suelta los medios para crear automáticamente bloques de medios

Gutenberg le permite arrastrar y soltar archivos en cualquier lugar de la pantalla y automáticamente creará un bloque.

Puede soltar una sola imagen o archivo de video y creará el bloque. También puede colocar varios archivos de imagen para crear un bloque de galería.

→ Agregar redes como YouTube, Twitter, Facebook, Vimeo y otras incrustaciones

Gutenberg introduce nuevos bloques de inserción en el editor de bloques, permitiendo seleccionar la red social que se quiere incluir, luego se escribe la URL de la cuenta o perfil y dando clic en “incrustar” quedará publicado.

Siguenos