9 Trucos para dominar el editor de bloques de WordPress

Publicada en WordPress.

El editor de bloques de WordPress es muy intuitivo. Sí. Pero incluso siendo un usuario del editor de bloques desde el día cero, como nosotros, es posible que aún haya trucos y cosillas en las que no te has fijado y que te pueden facilitar parte del trabajo como escritor.

Y por eso que creo que vale la pena que le dediques unos minutos de tu tiempo a leer esta entrada que te ayudará a dominar el editor de bloques.

Si todavía estás con el editor clásico de WordPress y no sabes cómo empezar con el editor de bloques, te recomiendo que leas este artículo de introducción a Gutenberg de David.

Asumiendo que ya estás familiarizado con el nuevo editor, te comento a continuación una lista de nuevas funcionalidades o trucos que quizá desconoces.

Empezaré comentándote algunos nuevos bloques con los que es mucho más fácil crear contenido y, luego, algunos trucos que puedes usar en el editor que pueden serte prácticos.

#1 Añadir un botón

Con el editor clásico de WordPress, si querías añadir un botón en medio de una entrada o una página básicamente tenías dos opciones: o cambiar a modo HTML y escribir el código, o usar algún plugin que te creara un shortcode para el botón en cuestión.

El editor de bloques ya incorpora el bloque botón que te permite rápidamente crear un botón en medio de una entrada:

Elementos de diseño de Gutenberg.
Bloques de elementos de diseño de Gutenberg.

El bloque Botón te permite crear un botón en el que defines su aspecto, el color de fondo y de la letra e incluso puedes añadirle una clase CSS.

Crear un botón con el editor de bloques
Crear un botón es facilísimo con el editor de bloques.

Ya ves que rápido. Aquí tienes el botón que acabo de crear. Ahora sólo tienes que hacer clic y subscribirte a Nelio Content 😉.

#2 Añadir una tabla

Al igual que con el botón, añadir una simple tabla con el editor clásico también implicaba hacerlo con HTML y CSS o con algún plugin. De hecho, muchas veces era más fácil crear la tabla con cualquier otro editor e insertarlo luego en una entrada como una imagen.

Ahora dispones del bloque Tabla que encontrarás en el conjunto de bloques de Formatos.

Bloques de formatos
Bloques de formatos que tienes disponibles por defecto en el editor.

Tras seleccionar el bloque Tabla, te pide que indiques el número de filas y columnas que por defecto quieres crear. Pero tranquilo, luego tienes la opción de añadir o eliminar filas y columnas. Y también puedes indicar el estilo de la tabla.

Creando una tabla con el nuevo editor.
Creando una tabla con el nuevo editor.

De esta forma, se puede crear la siguiente tabla con algunas características de Nelio A/B Testing de forma muy sencilla.

BasicProfessionalEnterprise
$29 /mo$89 /mo$259 /mo
5,000 tested page views35,000 tested page views200,000 tested page views
1 site5 sites10 sites
For IndividualsFor Small BusinessFor Large Businesses

#3 Incrustar un elemento externo con sólo copiar y pegar

Otros bloques que te pueden ser muy útiles son los de tipo incrustado que te permiten incrustar elementos externos como vídeos, publicaciones de Facebook, Twitter, etc.

Blocs de inscrutados de Gutenberg.
Bloques de incrustados de Gutenberg.

Pero también puedes, en vez de crear un bloque de este tipo, directamente copiar y pegar la URL que quieres incrustar y automáticamente ya te inserta el elemento en cuestión. Aquí tienes el vídeo que acabo de incrustar al copiar la dirección del vídeo de youtube de Nelio Content: https://youtu.be/RstwyyAZ97k

#4 Usa el bloque espaciador para incrementar el espacio entre bloques

Este es uno de los bloques que quizás tampoco sabías que existían: el bloque espaciador. Su función, como bien indica su nombre, es el de incrementar el espaciado entre bloques.

El bloque espaciador tiene por defecto exactamente 100 píxeles pero puedes personalizar la altura del mismo como quieras. Tan sólo debes posicionar el cursor encima del punto azul que hay debajo del bloque e incrementar el tamaño arrastrando el punto azul a la distancia que quieras.

Bloque espaciador
Personaliza el tamaño del bloque espaciador subiendo o bajando el punto azul.

Además, también puedes utilizar una clase CSS adicional para definir cómo quieres que sea el bloque espaciador. Esto te puede ser muy útil en la creación de páginas.

#5 Información sobre el número de palabras y estructura

En el editor clásico seleccionabas una entrada y, automáticamente, te aparecía el número de palabras que tenía dicha entrada. Y ahora, ¿dónde tengo esta información?

Tranquilo, que en la barra de herramientas tienes esta información en todo momento muy a mano haciendo clic en el icono de un círculo con una i.

Y no solo te cuenta las palabras, si no que también te informa de la estructura de toda la entrada o página que estás editando.

Información sobre entrada de Gutenberg
En la barra de herramientas superior encuentras el icono de información sobre el número de palabras y estructura de tu entrada o página.

#6 Mover la barra de herramientas de bloque a la parte superior

Esto va a gustos, pero por defecto, cuando estás editando un bloque tienes la barra de herramientas del bloque flotando en la parte superior del propio bloque. La gran ventaja de que sea así es que lo tienes más a mano pero el problema con las barras de herramientas flotantes es que pueden tapar parte del bloque anterior.

Barra de herramientas flotante en Gutenberg.
Barra de herramientas flotante en Gutenberg.

Como puedes ver en la imagen, la barra de herramientas me está tapando parte del título anterior. Si esto lo encuentras poco práctico o molesto, lo puedes cambiar fácilmente. Haz clic en los tres puntitos de más herramientas y opciones y marca la opción Barra de herramientas superior.

Barra de herramientas de Gutenberg
Selecciona si quieres la barra de herramientas de Gutenberg en la parte superior del editor.

Una vez marcado, ya tienes la barra de herramientas fija en la parte superior de tu editor.

Barra de herramientas fija en la parte superior del editor.
Barra de herramientas fija en la parte superior del editor.

#7 Usa la barra (/) como atajo

El editor de bloques te proporciona unos atajos para que puedas ser más eficiente editando tus entradas. El primero que deberías usar es la barra, /. Tan fácil como empezar a escribir el nombre de un bloque con la barra y te mostrará los tipos de bloques que puedes añadir:

Atajo de Gutenberg
Empieza un bloque con / y escoge el tipo de bloque que quieras.

#8 Conoce otros atajos de teclado

Una de las características que ha incorporado el nuevo editor es que dispongas de muchos otros atajos de teclado que pueden ayudarte a ser mucho más rápido escribiendo. Para conocerlos todos, haz clic en los tres puntitos de más herramientas y opciones:

Atajos de teclado del editor de WrodPress
Mira los atajos de teclado que tienes disponibles en el editor.

Alternativamente, también puedes acceder a esta ayuda con el atajo o ctrl  H (en caso de Mac) o Alt H (en caso de Windows). Y a continuación te muestro los atajos que creo que te pueden resultar más útiles.

Acciones globalesAtajo en MacAtajo en Windows
Muestra esta ayudactrl  H  Alt H
Guarda tus cambios SCtrl S
Deshace tus últimos cambios ZCtrl Z
Rehace tu último deshacer ZCtrl  Z
Muestra u oculta la barra lateral de ajustes ,Ctrl  ,
Abre el menú de navegación de bloquesctrl  O  Alt O
Cambia entre el editor visual y el editor de código    MCtrl  Alt M
Acciones de bloquesAtajo en MacAtajo en Windows
Duplica el/los bloques(s) seleccionados D Ctrl D
Quita el/los bloque(s) seleccionadosctrl  o  Alt Z
Inserta un nuevo bloque antes de/los bloque(s) selecciona(s).  TCtrl Alt T
Inserta un nuevo bloque después de/los bloque(s) selecciona(s).  YCtrl Alt Y
Cambia el tipo de bloque después de agregar un nuevo párrafo/ /
Formatos de textoAtajo en MacAtajo en Windows
Cambia el texto seleccionado a negrita B Ctrl B
Cambia el texto seleccionado a cursiva I Ctrl I
Subraya el texto seleccionado UCtrl U
Convierte el texto seleccionado en un enlace KCtrl K
Quita el enlace  K Ctrl K
Añade un tachado al texto seleccionadoctrl  D  Alt D
Muestra el texto seleccionado en fuente monoespacioctrl  x  Alt X

#9 Convierte un bloque en encabezado con almohadilla (#)

Esto lo podrías considerar como un atajo de teclado. El editor de bloques de Gutenberg soporta tres tipos de encabezados: H2, H3y H4. Cuando estás escribiendo el bloque por defecto es de tipo párrafo. Pero puedes convertirlo en encabezado muy fácilmente: empieza a escribir el nuevo párrafo con ## para H2, ### para H3y #### para H4. Pruébalo y verás qué fácil es.

Conclusión

La primera experiencia que tienes con el nuevo editor de bloques tras haber estado años usando el editor clásico de WordPress puede que no sea precisamente la más agradable que esperabas encontrarte. Pero es normal, los cambios cuestan.

Al principio hay cosas que no sabes donde están y otras que no te funcionan como antes o van más lentas… sí. Es cierto: el editor de bloques todavía necesita mejorar en bastantes aspectos. Pero si vas aprendiendo a dominarlo, poco a poco le irás viendo sus ventajas y verás que hay cosas que antes no podías hacer fácilmente que ahora ya puedes hacer.

¿Nuestra recomendación? Anímate a cambiar al nuevo editor y verás que muy pronto te habrás olvidado de cómo funcionaba el clásico.

Imágen destacada de Rana Sawalha en Unsplash

FlojaNo está malBienMuy bien¡Impecable! (2 votos, promedio: 5,00 de 5)
Cargando…

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.