Tutorial de WordPress Gutenberg: cómo utilizar el nuevo editor de bloques en WordPress 5.0

Tutorial de WordPress Gutenberg: cómo utilizar el nuevo editor de bloques en WordPress 5.0

Con WordPress 5.0, WordPress se enfrenta a uno de los mayores cambios en mucho, mucho tiempo.

¿La nueva función? Un nuevo editor de contenido estándar llamado Gutenberg.t

El editor de bloques de Gutenberg hará el. reemplazar completamente previamente Editor estándar de TinyMCE que ha estado usando durante años. Por lo tanto, la forma en que crea contenido en su sitio de WordPress cambiará por completo.

Para que esta transición sea lo más fluida posible, creamos este tutorial de WordPress Gutenberg para que pueda comenzar de inmediato cuando actualice su sitio web a WordPress 5.0.

¿En qué se diferencia el editor de bloques Gutenberg de WordPress?

Ok, en caso de que esté un poco confundido acerca de lo que quiero decir, así es como se ve el editor de TinyMCE (¡Debería parecerle bastante familiar!):

Editor de TinyMCE

Y así es como se ve el nuevo editor de bloques de Gutenberg:

Editor de WordPress Gutenberg

Entonces … ¿cuál es la diferencia?

Bueno, lo más importante es esa palabra: «bloquear».

En lugar de utilizar un solo campo para todo su contenido como el editor de TinyMCE, cada «cosa» en Gutenberg es un bloque separado.

Entonces:

  • Cada párrafo es un bloque separado
  • Una imagen es un bloque separado
  • Una cotización es un bloque separado
  • Un video incrustado es un bloque separado
  • … tienes la idea! Todo lo que podrías usar es un bloque propio

Siguiente pregunta: ¿por qué son beneficiosos los bloques? ¿Por qué cambiar la forma en que eran las cosas?

Bueno, el editor de bloques de Gutenberg hace que sea mucho más fácil crear diseños más complicados y usar tipos de contenido más interesantes. Además de eso, también es mucho más visual, ya que puedes ver exactamente cómo se verá cada bloque.

Digamos que desea agregar un botón a su publicación.

Con el editor TinyMCE tienes que usar el texto tab para agregar una clase CSS o usar un código corto de un complemento de botón. Con Gutenberg solo los agregas botón cuadra y puedes ver el botón allí mismo en el editor:

Botón de Gutenberg

La otra gran ventaja de Gutenberg y Blocks se refiere a los códigos cortos mencionados anteriormente.

Los códigos cortos no son una forma muy intuitiva o visual de agregar contenido. Con Gutenberg, los desarrolladores de complementos pueden crear sus propios bloques en lugar de depender de códigos cortos, lo que facilita mucho la adición de contenido de complementos.

Tutorial de WordPress Gutenberg: uso del nuevo editor

Ahora que ha recopilado información básica sobre el nuevo editor, llegamos a la parte real de este manual.

Voy a dividir este tutorial del editor de Gutenberg en dos partes.

Primero, mostraré cómo usar Gutenberg para hacer las mismas cosas que tú. ya que ver con el editor TinyMCE. El objetivo de esta primera sección es que puedas seguir creando el mismo tipo de contenido que ya estás creando sin interrupciones.

Después de eso, profundizaré un poco más y le mostraré consejos avanzados de productividad, así como algunos de los Nuevo Cosas que Gutenberg te obliga a hacer.

Cómo crear una publicación o una página de blog simple con Gutenberg

Agregar texto normal a Gutenberg es fácil. Al igual que antes, haga clic y toque. La única diferencia es que Gutenberg ahora crea un nuevo bloque de párrafos cada vez que presiona Enter.

Para formatear su texto (negrita, justificado, etc.), verá una barra de herramientas flotante que aparece tan pronto como deje de escribir:

Escribe

A muchas personas no les gusta este enfoque de «barra de herramientas flotante». Entonces, si prefiere el enfoque de barra de herramientas fija del editor TinyMCE, puede usar el menú desplegable en la esquina superior derecha para «fijar» la barra de herramientas en la parte superior del editor. Simplemente seleccione la opción para Barra de herramientas superior:

barra de herramientas fija

Cómo insertar un nuevo bloque

Cuando está escribiendo, puede crear automáticamente nuevos bloques tocando.

Para todo lo demás (imágenes, videos, títulos, etc.), deberá agregar un nuevo bloque.

Hay varias formas de agregar nuevos bloques:

  1. Para agregar un nuevo bloque en la parte inferior del editor, puede hacer clic en el icono más en la esquina superior izquierda del editor.
  2. Para agregar un nuevo bloque entre bloques existentes, puede mover el mouse sobre el lugar donde desea insertar el bloque y hacer clic en el símbolo más allí.

Agregar un nuevo bloque

Tan pronto como haga clic en uno de los más Aparece una ventana emergente con los iconos que enumera todos los bloques disponibles.

En la parte superior de la ventana emergente, obtendrá una lista de los bloques que usa con más frecuencia:

Bloques comunes

Pero también puedes:

  1. Use el cuadro de búsqueda para buscar un bloque por nombre
  2. Desplácese hacia abajo para ver las pestañas de acordeón para todas las categorías de bloques disponibles

Tutorial de WordPress Gutenberg nuevos bloques

Repasemos algunos ejemplos …

Si desea insertar una imagen …

Tu agregarias imagen Cuadra. Luego, puede usar las opciones para elegir de dónde desea obtener la imagen:

Bloque de imagen

Si desea incrustar un video de YouTube …

Tu agregarias YouTube Cuadra. Luego, simplemente pegue la URL en el video y verá una vista previa en vivo:

Si desea insertar un encabezado (h2, h3, etc.)

Puedes agregar eso Bóveda Bloquear y seleccionar el nivel de encabezado de la barra de herramientas:

O también puede seleccionar un bloque de párrafo existente y «convertirlo» en un bloque de encabezado usando la barra de herramientas (o algún otro tipo de bloque, como una cita):

Cómo configurar un bloque

Para cosas básicas como negrita, cursiva, alineación, etc., use la barra de herramientas.

Para otras configuraciones de bloque, sin embargo, use el cuadra Pestaña de la barra lateral a la derecha.

Por ejemplo, si a. Agregar botón Bloque, puede usar la barra lateral de la derecha para cambiar sus colores:

Reorganizar el contenido

En el editor de TinyMCE, tenía que usar cortar y pegar siempre que quisiera reorganizar el contenido.

En Gutenberg tienes dos opciones:

  • Flechas arriba / abajo que mueven un bloque hacia arriba o hacia abajo un espacio
  • Función de arrastrar y soltar que le permite arrastrar un bloque a cualquier lugar

Para activar estos controles, mueva el puntero del mouse sobre el bloque que desea mover.

Si desea utilizar la función de arrastrar y soltar, deberá colocar el cursor sobre el seis puntos entre las flechas. Entonces puedes arrastrar y soltar así:

Cómo configurar la información básica de la publicación (categorías, slug, etc.)

Los pasos anteriores deberían brindarle todo lo que necesita para comenzar a crear algunas publicaciones y páginas básicas.

Pero, ¿qué pasa con la información detrás de escena como:

  • Slug de URL
  • Categorías
  • Palabras clave
  • Etc.

Para configurar toda esta información, puede Documento La pestaña de la barra lateral es muy similar a la barra lateral del editor TinyMCE:

¿Qué pasa con los complementos como Yoast SEO?

Probablemente tenga otros complementos que necesite configurar uno por uno. Los ejemplos comunes serían complementos de SEO, complementos de redes sociales, etc.

Entonces, ¿cómo funcionan estos?

Bueno, algunos complementos, como Yoast SEO, ya tienen el soporte de Gutenberg integrado. Para acceder a la configuración de Yoast SEO u otros complementos con dicho soporte, puede haga clic en el icono en la esquina superior derecha. Luego puede configurar el complemento en la barra lateral:

Para otros complementos, aún puede usar «Metaboxes», que se muestran en el editor de texto como antes:

Cinco consejos más avanzados para usar el editor de bloques de Gutenberg

El tutorial del editor de Gutenberg anterior lo ayudará a crear el mismo tipo de contenido que ya ha creado con el editor TinyMCE.

Ahora veamos algunos consejos avanzados para sacar más provecho del editor de Gutenberg.

1. Aprenda los atajos de teclado para mejorar la productividad

Dado que todo es un bloque separado en Gutenberg, hay muchos más «clics del mouse» para hacer las cosas. Eso significa trabajar más lentamente, especialmente al principio.

La mejor manera de deshacerse de este problema es aprender los atajos de teclado del editor de Gutenberg. Esto le permite agregar o eliminar bloques rápidamente según sea necesario.

Para abrir la lista completa de accesos directos, utilice el Mayús + Alt + H Atajo:

2. Inserción rápida de bloques de barra

En lugar de usar la ventana emergente para insertar un bloque cada vez que desee agregar un bloque, un método más rápido es simplemente escribir «/» en un bloque vacío y buscar el bloque por su nombre.

Aquí hay un ejemplo:

3. Arrastra imágenes desde tu escritorio a Gutenberg

Para agilizar la adición de imágenes, puede arrastrarlas directamente desde su escritorio a una ubicación específica en el editor. Gutenberg los carga automáticamente a su biblioteca de medios:

4. Utilice el bloque de columnas para diseños más complicados

Si desea crear diseños más complicados, Gutenberg incluye un columnas Cuadra. Una vez que haya agregado el bloque de columna, estará listo para agregarlo otros bloques en esto:

Para obtener más flexibilidad con los diseños, puede instalar el complemento Kadence Blocks. Hablando de …

5. Utilice complementos de bloqueo de terceros

Una de las mejores cosas de Gutenberg es que puede usar complementos de terceros para agregar nuevos bloques. Muchos desarrolladores están trabajando en la creación de nuevos bloques de contenido y diseño que puedan ayudar a expandir la funcionalidad de Gutenberg. Algunos buenos para empezar son:

  • Bloques atómicos
  • Complementos definitivos para Gutenberg
  • Apilable
  • Gutenberg para estudiantes avanzados

El complemento Gutenberg Cloud también es un proyecto interesante que te permite instalar ciertos bloques de diferentes desarrolladores.

Además, algunos complementos que ya está utilizando agregan bloques para reemplazar códigos cortos. Por ejemplo, si tiene una tienda WooCommerce, puede agregar productos WooCommerce a su contenido usando un nuevo bloque.

¿Qué sucede con su contenido anterior después de actualizar a WordPress 5.0?

Por supuesto, si ya tiene un sitio de WordPress, se pregunta qué va a pasar con todo el contenido que ya ha creado con el editor TinyMCE.

No se preocupe, el equipo central no ha olvidado su contenido anterior.

Así es como funcionará.

Por ejemplo, supongamos que ha creado una publicación con el editor TinyMCE que se ve así:

pequeña contribución

Si se cambia a WordPress 5.0 y al editor de bloques de Gutenberg, WordPress consolidará todo el contenido antiguo en uno solo. Clásico Cuadra. El bloque Classic es básicamente el editor TinyMCE … directamente en la interfaz de usuario de Gutenberg.

Entonces, en lugar de que cada elemento sea un bloque separado, todo está solo en ese bloque clásico. Se parece a esto:

bloque clásico

Si necesita editar el contenido, puede editarlo en el bloque Clásico como en el editor TinyMCE:

Convertir bloques

O también puede seleccionar la opción para Convertir a bloques. Una vez que elija esta opción, Gutenberg dividirá todo su contenido anterior en bloques separados y podrá trabajar con él como si hubiera creado la publicación con Gutenberg desde cero.

¿Necesita utilizar el editor de Gutenberg? ¿Todavía puedes usar el editor TinyMCE?

ellas hacen No necesita utilizar el nuevo editor de bloques de Gutenberg. Aunque se convertirá en el editor predeterminado en WordPress 5.0, también hay un complemento oficial de Classic Editor que le permite seguir usando el editor TinyMCE original con el que ya está familiarizado. Además, el equipo central de WordPress apoyará oficialmente al editor TinyMCE hasta al menos finales de 2021.

Todo lo que tiene que hacer es instalar el complemento de WordPress.org. Una vez que lo habilite, el editor de bloques de Gutenberg se deshabilitará y estará creando contenido tal como lo hacía antes de WordPress 5.0.

Si lo desea, el complemento también ofrece otra opción que puede usar con ambas cosas el editor de TinyMCE y el editor de bloques de Gutenberg y cambiar entre ellos según el contenido.

Para habilitar esta configuración, vaya a Configuración → Escribir y seleccione la opción para Utilice el editor de bloques de forma predeterminada y agregue enlaces opcionales al editor clásico:

Desactivar el editor de Gutenberg

¡Ahí está su tutorial de WordPress Gutenberg Editor!

Ha habido mucha discusión en la comunidad de WordPress sobre el nuevo editor de bloques de Gutenberg.

No estamos tratando de sopesar si es algo bueno o malo. Todo lo que queremos hacer es asegurarnos de que después del lanzamiento de WordPress 5.0, aún tenga una excelente experiencia con WordPress. Esperamos que este tutorial del editor de Gutenberg le ayude.

Y si está buscando un tipo diferente de editor que pueda ayudarlo a crear contenido más complicado, debe consultar nuestra publicación sobre los mejores creadores de páginas de WordPress para arrastrar y soltar.

¿Tiene más preguntas sobre el nuevo editor de bloques de Gutenberg? ¡Deja un comentario e intentaremos ayudarte!

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad