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.
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!
Hola Ruth;
Estoy creando una página con el tema Astra y quiero poder eliminar el espacio entre bloques. Me ha ocurrido en algún caso, pero no consigo ver cómo. Comentas que se puede hacer desde personalizar CSS, pero desconozco cómo hacer esto.
Otra cosa que me gustaría hacer es modificar el tamaño (altura) de algunos bloques. Desplazando con el punto azul no consigo controlarlo. ¿Se puede hacer de alguna otra manera?
Por último, el título de cada página me queda muy pegado a la parte superior de la página. No consigo reubicarlo desplazándolo hacia abajo, ¿alguna sugerencia?
Muchísimas gracias por tu ayuda,
Hola Marco,
El tema Astra te permite modificar el espaciado entre párrafos. Desde el escritorio, ves a Apariencia»Personalizar ves a la opción Global»Typography»Base Typography y encontrarás la característica Paragraph Margin Bottom donde puedes indicar que el espaciado es 0 o la cifra que quieras.
Sobre la modificación del tamaño de algunos bloques, las imágenes por ejemplo, las puedes modificar desplazando el punto azul o indicando directamente las dimensiones de la misma en las propiedades del bloque que se muestran en la barra lateral derecha.
Para modificar la cabecera y añadir más espaciado, te recomiendo el siguiente artículo en qué te explican varias opciones de cómo hacerlo: How to Customize Headers.
Gracias por leernos y un saludo.
hola qué tal
no puedo separar un bloque que esta hecho de varios parrafos, me puedes ayudar?
Hola Julio, al inicio de cada nuevo párrafo, automáticamente debería separarlo y crearse un nuevo bloque.
Supongo que si visualizas esa entrada o página con el visualizador de código, seguramente verás que tienes los párrafos separados con
. Si lo quieres separados en bloques, haciendo click en la tecla
Un saludo
Muy bueno el truco de los tres «###» para poner un h3.
Me parece fantástico este truco, pero me gustaría sabe si hay alguna forma de poner por defecto el h3 y no el h2 que es como viene «de fábrica».
Muy bueno el artículo y muchas gracias por compartir.
Hola Jose,
No me suena que lo puedas hacer de forma fácil. Si el motivo de este cambio es porque te gusta más el estilo de h3 que el de h2. Yo te recomendaría que personalizaras el estilo de h2 para que se vea exactamente como quieres. Por supuesto, también podrías crear un bloque reutilizable que lo llames título3 y que tenga el estilo h3.
Un saludo y gracias por leernos.
Hola, Muchas gracias por el artículo, ayuda mucho.
Pero me gustaría saber si es posible poner dos bloques uno al lado del otro. Por ejemplo, tengo un bloque de botones con cuatro botones en modo de menú en el lado superior derecho de la página, y me gustaría poner un texto en el lado izquierdo superior de la página. Esto es posible? ya que para conseguir los botones a la derecha he tenido que ‘justificar’ el contenido del fondo a la derecha….
Hola Marta,
Una posibilidad es crear un bloque de dos columnas, en una insertas los 4 botones y en la otra el texto.
Gracias por leernos y un saludo.
Buenos días, muy bueno este post, me fue muy útil e interesante.
Tengo una duda que igual la sabes solucionar: a la hora de insertar una tabla con el editor de gutemberg me queda un espacio inferior para la leyenda «Escribe la leyenda….». Aunque se deje este espacio en blanco sigue apareciendo en la web.
¿Hay alguna manera de eliminar el espacio de la leyenda?
Muchas gracias, y enhorabuena por el blog
Hola Gumer,
Si efectivamente has eliminado la leyenda como comentas y sigue habiendo el espacio, seguramente es un espacio definido en el tema que estés utilizando y la forma para eliminarlo sea modificando el estilo de ese tema o añadiendo alguna clase CSS que lo modifique.
Un saludo
Hola
Es posible en el bloque de 2 columnas cambiar el tamaño de las columnas, el ancho?
Gracias por el contenido útil.
Hola Ceci,
En las propiedades del bloque columna, tienes la opción, en Ajustes de columna, indicar el ancho de la misma.
Un saludo y gracias a tí por leernos.