WordPress

Como Usar el Nuevo WordPress Gutenberg Editor: Una Guía Completa para Principiantes

Mientras escribo y tú lees esto, el equipo central de WordPress está en desarrollando un editor de contenido completamente nuevo para WordPress: Gutenberg. Y actualmente está programado para su lanzamiento en algún momento del 2018 como parte de WordPress 5.0.

Cuando eso suceda, la forma en que escribas las entradas de tu blog en WordPress cambiará drásticamente (aunque podrás instalar un plugin para seguir usando el editor actual, si lo deseas).

Te mostraremos exactamente cómo puedes usar el nuevo editor para escribir una entrada en tu blog para que estés listo para la transición cuando se publiquen WordPress 5.0 y Gutenberg.

Una introducción a la interfaz de WordPress Editor Gutenberg

Cuando vayas por primera vez a crear una nueva entrada o página con Gutenberg, así será como lo que verás:

Es algo similar al editor actual de WordPress TinyMCE, pero la mayor diferencia para tí sería la ausencia de un solo cuadro de texto, el cual usas actualmente para escribir y dar formato a todo tu contenido.

En su lugar, tendrás una gran área blanca que comienza con “Write your story” (Escribe tu historia). En esta versión, WordPress Gutenberg usa “bloques” para ayudarte a crear tu contenido, en lugar de un área de entrada de texto.

Un bloque puede ser básicamente cualquier cosa. Puede ser:

  • Un párrafo regular de texto
  • Una imagen
  • Un botón CTA (botón de llamada a la acción)
  • Un vídeo incrustado

Los desarrolladores externos también podrán codificar sus propios bloques para añadir más funcionalidad. Ya puedes ver un ejemplo de esto con BlocksWP Social Share Block.

Cómo usar la interfaz del editor Gutenberg

He aquí lo que te permiten las distintas áreas de la interfaz de Gutenberg:

  1. Haz clic en este botón para agregar un nuevo bloque.
  2. Los botones Deshacer/Rehacer te permiten avanzar o retroceder para editar fácilmente, al igual que Microsoft Word.
  3. Esta área de configuración incluye muchas de las mismas opciones que la barra lateral actual del editor de WordPress. Es donde agregas categorías/etiquetas, estableces la imagen destacada, elige la fecha de publicación, etc.
  4. Al seleccionar un bloque individual, esta área de parametrizaciones incluye opciones específicas para ese bloque. Es donde puede elegir colores, estilos y otros detalles importantes específicos del bloque.
  5. Estos dos botones te permiten previsualizar o publicar tu entrada.

Si hace clic en el botón (+) Plus para insertar un bloque, se abrirá una ventana que te permitirá navegar por todos los bloques disponibles que puedas utilizar en tu contenido:

Las pestañas Recientes (Recent) y Guardadas (Saved) te permiten acceder a los bloques que usas con frecuencia, mientras que las pestañas Bloques (Blocks) e incrustaciones (Embeds) te permiten examinar todos los bloques disponibles.

También puedes utilizar el cuadro de búsqueda para encontrar rápidamente un bloque específico escribiendo el nombre del bloque.

Cómo escribir una entrada en tu blog usando el editor de Gutenberg de WordPress

Ahora que ya sabes cómo funciona la interfaz, bueno, hasta cierto punto, te mostraré cómo puedes usar Gutenberg para escribir una entrada en tu blog.

Por ejemplo, digamos que quieres escribir una entrada que incluya:

  • Mucho texto normal
  • Una imagen
  • Un vídeo incrustado de YouTube
  • Una tabla
  • Un botón CTA

Anteriormente, podría haber necesitado algunos plugins separados o CSS personalizados para manejar la creación de una tabla y un botón CTA, pero ahora puede hacerlo todo con Gutenberg.

Paso 1: Escribe tu texto usando bloques de párrafo

Para escribir el texto de la entrada de tu blog, Gutenberg no requiere que agregues un nuevo bloque. En vez de eso, puedes hacer clic en la página y empezar a escribir así:

Muy fácil hasta ahora, ¿verdad?

Todo lo que haces es mecanografiar. Y cada vez que pulse enter para iniciar un nuevo párrafo, Gutenberg creará automáticamente un nuevo bloque.

Si desea agregar un enlace, cambiar la alineación o dar formato al texto con negrita o cursiva, simplemente haz clic en el bloque de texto y utiliza la barra de menú flotante:

Paso 2: Añadir un bloque de imagen

Para añadir una imagen en cualquier parte de tu entrada, todo lo que tienes que hacer es pasar el ratón por encima del lugar donde quieres insertar la imagen.

Al hacerlo, aparecerá el icono (+) Plus. Al hacer clic en él se abrirá la lista de bloques, que te ayudará a elegir el bloque Imagen.

Cuando lo hagas, podrás cargar una nueva imagen o seleccionar una imagen de su biblioteca multimedia, del mismo modo que lo haces normalmente con el editor de WordPress actual:

Una vez que insertes el bloque de imagen, verás la imagen real justo ahí en el editor.

Paso 3: Añadir un bloque de inserción de YouTube

Para incrustar un vídeo de YouTube, sigues un proceso casi idéntico:

  • Pasa el ratón por encima del lugar donde desee incrustar el vídeo de YouTube
  • Haga clic en el icono (+) Plus
  • Vé a la pestaña Embeds (Incrustaciones)
  • Selecciona YouTube

A continuación, todo lo que necesitas hacer es pegar la URL del vídeo, hacer clic en Incrustar y verás el vídeo incrustado en tu publicación:

Paso 3: Añadir un bloque de tabla

El bloque de tabla te permite insertar y manipular fácilmente una tabla en cualquier parte de tu contenido.

Para ello, deberás seguir el mismo proceso que el anterior. Y una vez que lo agregues, puedes agregar o quitar filas y columnas usando la barra de menú flotante:

Paso 4: Agregar y aplicar estilo al bloque de botones

El bloque de botones es una de mis adiciones favoritas al editor de Gutenberg porque los botones son algo que antes era difícil de agregar sin conocer el uso de CSS personalizado. Pero con Gutenberg, usar botones es sencillo.

En primer lugar, puede insertar un botón siguiendo el mismo proceso similar a otros bloques. Para editar el texto del botón, basta con hacer clic y escribir:

También puedes ir a la pestaña Bloque para cambiar los colores de tu botón:

¡Y eso es todo! Acabas de escribir un artículo entero del blog usando el nuevo editor de WordPress Gutenberg. Es así de simple.

Algunas otras cosas útiles que puedes hacer con el editor de WordPress Gutenberg

Aparte de lo que he demostrado anteriormente, hay también algunas otras cosas útiles que puedes hacer con Gutenberg.

Una característica que es útil es la capacidad de añadir un color de fondo único a cualquier bloque de párrafo en tu publicación:

También puedes utilizar los botones arriba y abajo junto a cada bloque para cambiar rápidamente el posicionamiento del bloque, es decir, sin el antiguo método de copiar y pegar:

Y por último, si quieres ahorrar algo de tiempo al insertar nuevos bloques, me gusta la función de autosugestión rápida. En lugar de tener que utilizar el icono (+) Plus cada vez que desee insertar un nuevo bloque, puede empezar a escribir y usar este formato/nombre de bloque.

A medida que escriba, Gutenberg sugerirá automáticamente los bloques que coincidan:

Con esta función, puedes agregar bloques con sólo usar el teclado, lo que te ayuda a mantener tu flujo.

¿Qué piensas del nuevo editor de Gutenberg?

Ahora que has tenido la oportunidad de ver más sobre cómo funciona el nuevo editor de Gutenberg, queremos saber lo que piensas al respecto.

¿Cree que eso facilitará tu blogging? ¿O aún prefiere el editor de WordPress actual?

Háganos saber en los comentarios!

Acerca del Autor

Dyanfield

1 Comentario

Clic Aqui para Publicar un Comentario

  • Hola

    He estado buscando una página de contacto pero no veo nada que esté disponible así que espero que no te importe que te escriba por aquí

    Me gustaría saber si existe la posibilidad de patrocinar mi web en tu blog, ya sea creando un artículo de invitado para ti o directamente comprando un enlace en algún post que ya esté redactado.

    Te dejo mi correo en los datos del comentario.
    Espero podamos llegar a un acuerdo

    gracias por tu tiempo

Publicidad

Síguenos en Facebook