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:
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.
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.
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.
De esta forma, se puede crear la siguiente tabla con algunas características de Nelio A/B Testing de forma muy sencilla.
| Basic | Professional | Enterprise |
| $29 /mo | $89 /mo | $259 /mo |
| 5,000 tested page views | 35,000 tested page views | 200,000 tested page views |
| 1 site | 5 sites | 10 sites |
| For Individuals | For Small Business | For 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.
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.
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.
#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.
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.
Una vez marcado, ya tienes la barra de herramientas fija en la parte superior de tu 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:
#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:
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 globales | Atajo en Mac | Atajo en Windows |
| Muestra esta ayuda | ctrl ⌥ H | ⇧ Alt H |
| Guarda tus cambios | ⌘ S | Ctrl S |
| Deshace tus últimos cambios | ⌘ Z | Ctrl Z |
| Rehace tu último deshacer | ⇧ ⌘ Z | Ctrl ⇧ Z |
| Muestra u oculta la barra lateral de ajustes | ⇧ ⌘ , | Ctrl ⇧ , |
| Abre el menú de navegación de bloques | ctrl ⌥ O | ⇧ Alt O |
| Cambia entre el editor visual y el editor de código | ⇧ ⌥ ⌘ M | Ctrl ⇧ Alt M |
| Acciones de bloques | Atajo en Mac | Atajo en Windows |
| Duplica el/los bloques(s) seleccionados | ⇧ ⌘ D | Ctrl ⇧ D |
| Quita el/los bloque(s) seleccionados | ctrl ⌥ o | ⇧ Alt Z |
| Inserta un nuevo bloque antes de/los bloque(s) selecciona(s). | ⌥ ⌘ T | Ctrl Alt T |
| Inserta un nuevo bloque después de/los bloque(s) selecciona(s). | ⌥ ⌘ Y | Ctrl Alt Y |
| Cambia el tipo de bloque después de agregar un nuevo párrafo | / | / |
| Formatos de texto | Atajo en Mac | Atajo en Windows |
| Cambia el texto seleccionado a negrita | ⌘ B | Ctrl B |
| Cambia el texto seleccionado a cursiva | ⌘ I | Ctrl I |
| Subraya el texto seleccionado | ⌘ U | Ctrl U |
| Convierte el texto seleccionado en un enlace | ⌘ K | Ctrl K |
| Quita el enlace | ⇧ ⌘⌘ K | Ctrl ⇧ K |
| Añade un tachado al texto | ctrl ⌥ D | ⇧ Alt D |
Muestra el texto seleccionado en fuente monoespacio | ctrl ⌥ 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. Y no te pierdas nuestro curso práctico de creación de contenidos y diseño de páginas con Guterberg con el que completarás tu formación para dominar el editor de WordPress.
Imágen destacada de Rana Sawalha en Unsplash
Excelente tutorial muy bien explicado y me ayudó a resolver algunas dudas que tenía con Gutenberg, felicidades.
Gracias Pako por leernos y me alegro de que te haya sido útil.
Buenos días! Cómo puedo agregar espacio entre los bloques, para que al ir a la vista previa de la página o bien a la página (Resultado final), en el segmento de inicio; los caracteres no estén tan unidos.
Es decir, quiero hacer una mayor separación entre bloques, para diferenciar párrafos o ideas.
Agradecido por la información que me puedan suministrar.
Salaudos
Hola Eduardo,
Tal y como comento en la entrada, para ello puedes usar el bloque espaciador (truco #4).
Fíjate que puedes personalizar el tamaño del mismo.
Gracias por leernos y un saludo!
Hola como se hace para que el botón quede en el centro? he añadido un botón y me lo deja a lado izquierdo, pero lo quiero dejar al medio.
Hola Fabiola, el bloque botón, por defecto, no tiene la opción de cambiar su alineación. Sin embargo, si te vas a Apariencia»Personalizar»CSS Adicional puedes añadir el siguiente código:
.entry-content .wp-block-buttons {
text-align: center;
}
y verás cómo ya tienes la opción de alinear los botones en el centro.
Eso sí, ten en cuenta que cualquier CSS que hayas añadido es específico del tema. Por lo tanto, si cambias de tema, perderás el CSS que hayas añadido.
Otra opción es instalarte algún plugin de bloques que te permita añadir botones distintos a los que vienen por defecto con el editor de bloques.
Gracias por leernos, Fabiola.
Hola, excelete artículo mil gracias. ¿Hay alguna forma de eliminar el espacio entre bloques? Saludos
Hola Benerice,
El espacio entre bloques depende del tema que tengas seleccionado y la manera de eliminarlo es mediante la personalización con CSS y modificar el margin-botton.
Un saludo!