Objetos para viajar (agenda, prismáticos, brújula...) sobre una mesa

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

24 respuestas a «9 Trucos para dominar el editor de bloques de WordPress»

  1. Avatar de Pako garcia

    Excelente tutorial muy bien explicado y me ayudó a resolver algunas dudas que tenía con Gutenberg, felicidades.

    1. Avatar de Ruth Raventós

      Gracias Pako por leernos y me alegro de que te haya sido útil.

  2. Avatar de Eduardo Torres
    Eduardo Torres

    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

    1. Avatar de Ruth Raventós

      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!

  3. Avatar de Fabiola
    Fabiola

    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.

    1. Avatar de Ruth Raventós

      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.

  4. Avatar de Berenice
    Berenice

    Hola, excelete artículo mil gracias. ¿Hay alguna forma de eliminar el espacio entre bloques? Saludos

    1. Avatar de Ruth Raventós

      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!

      1. Avatar de Marco
        Marco

        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,

        1. Avatar de Ruth Raventós

          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.

  5. Avatar de Julio García
    Julio García

    hola qué tal
    no puedo separar un bloque que esta hecho de varios parrafos, me puedes ayudar?

    1. Avatar de Ruth Raventós

      Hola Julio,
      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 al inicio de cada nuevo párrafo, automáticamente debería separarlo y crearse un nuevo bloque.
      Un saludo

  6. Avatar de JoseSalva
    JoseSalva

    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.

    1. Avatar de Ruth Raventós

      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.

  7. Avatar de Marta
    Marta

    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….

    1. Avatar de Ruth Raventós

      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.

  8. Avatar de Gumer
    Gumer

    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

    1. Avatar de Nelio

      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

  9. Avatar de ceci
    ceci

    Hola

    Es posible en el bloque de 2 columnas cambiar el tamaño de las columnas, el ancho?

    Gracias por el contenido útil.

    1. Avatar de Ruth Raventós

      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.

  10. Avatar de Fer
    Fer

    Hola!
    Excelente información. ¿Como puedo hacer para ordenar mis bloques? Me he puesto a diseñar sin previa experiencia y al final me he dado cuenta que tengo contenedores dentro de contenedores dentro de contenedores y algunos de ellos están sin orden. ¿Debería volver a empezar?

    1. Avatar de Ruth Raventós

      Hola Fer,
      En todo momento puedes ver la estructura de cualquier página haciendo clic en el icono con 3 rallas («Estructura del documento») que se encuentra en el menú superior de la misma página, a la izquierda. Allí verás dos vistas: la Vista de lista y la de Contorno que muestran la organización de los bloques en la página.
      Gracias por leernos y un saludo.

  11. Avatar de Yennt
    Yennt

    Hola, excelente artículo mil gracias. ¿Hay alguna forma de eliminar el espacio entre bloques? Hice una actualización del wordpress 4.8 al 6.2.2 y en las entradas anteriores quedaron los espacios entre párrafos muy muy grandes. Agregue el código siguiente código en la personalización del tema Hueman en opciones avanzadas css adicional pero no funcionó
    .wp-block-group {
    padding-top: 0em !important;
    }
    Saludos y muchas gracias

    1. Avatar de Ruth Raventós

      Hola Yennt,
      Aquí tienes la respuesta a tu pregunta. Si te surgen más preguntas de este tipo, te recomiendo que utilices el Foro de Soporte de WordPress que siempre hay alguién echándote una mano.
      Muchas gracias por leernos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.