Tutorial WordPress Gutenberg: Cómo usar el nuevo editor de bloque en WordPress 5.0

Con WordPress 5.0, WordPress está a punto de sufrir uno de los mayores cambios, largo. La nueva característica? Un nuevo editor de contenido predeterminado, apodado Gutenberg.T Block Gutenberg Editor reemplazará por completo el editor predeterminado anterior que ha utilizado durante años. Como tal, la forma en que crea contenido en su sitio de WordPress cambiará por completo. Para que esta transición sea lo más indolora posible, hemos creado este tutorial de WordPress Gutenberg para que pueda trabajar tan pronto como actualice su sitio en WordPress 5.0. ¿Qué es diferente en el editor de bloques de WordPress Gutenberg? Ok, si estuvieras un poco confundido sobre lo que estoy hablando, así es como se ve el editor de Tinymce (¡deberías estar bastante familiarizado!):

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

Entonces … ¿Cuál es la diferencia? Bueno, lo más grande es esa palabra: “bloque”. En lugar de usar un solo campo para todo su contenido, como el editor de Tinymce, cada “cosa” en Gutenberg es un bloque separado. Asi que:
Cada párrafo es un bloque separado
Una imagen es un bloque separado
Una cita es un bloque separado
Un video construido es un bloque separado
… ¡Tienes la idea! Todo lo que puedes usar es tu propio bloque
Siguiente pregunta: ¿por qué los bloques son beneficiosos? ¿Por qué cambiar cómo estaban las cosas? Bueno, el editor de Block Gutenberg hace la creación de modelos más complicados y el uso de contenidos más interesantes. Más allá de eso, también es mucho más visual, porque puedes ver exactamente cómo se verá cada bloque.
Por ejemplo, suponga que desea agregar un botón a su publicación con TinyMce Publisher, deberá usar la pestaña de texto para agregar una clase CSS o usar un código corto desde un complemento de botones. Con Gutenberg, solo tiene que agregar el bloque de botones y puede ver el botón allí mismo en el editor: el otro gran beneficio de Gutenberg y los bloques se refieren a los códigos cortos que mencionamos anteriormente. Los códigos cortos no son una forma muy intuitiva o visual de agregar contenido. Con Gutenberg, los desarrolladores de Plough pueden crear sus propios bloques en lugar de depender de códigos cortos, lo que hace que el contenido del complemento sea mucho más fácil.

Tutorial de WordPress Gutenberg: el uso del nuevo editor ahora, que tiene información básica sobre el nuevo editor, para ingresar a la parte actual “Cómo” de esta guía. Dividiré este tutorial del editor de Gutenberg en dos partes. En primer lugar, mostraré cómo usar Gutenberg para hacer los mismos tipos de cosas que ya puede hacer con el editor de Tinymce. El propósito de esta primera sección es continuar creando el mismo tipo de contenido que ya crea sin interrupción. Después de eso, profundizaré un poco y te mostraré un consejo avanzado de productividad, así como algunas de las cosas nuevas que Gutenberg te dejará hacer.
Cómo crear una publicación de blog o una página básica con Gutenberg agregar texto regular a Gutenberg es simple. Al igual que antes, haga clic y escriba. La única diferencia es que cada vez que acceda a ingresar, Gutenberg ahora creará un nuevo bloque de párrafo. Para formatear su texto (Aldin, alineación, etc.), verá una barra de herramientas flotante que aparece después de dejar de escribir: a muchas personas no les gusta este enfoque de la “barra de herramientas flotantes”. Por lo tanto, si prefiere el enfoque fijo de la barra de herramientas de TinyMce Editor, puede usar el menú de caída en la esquina superior derecha para “reparar” la barra de herramientas en la parte superior del editor. Simplemente seleccione la opción para la barra de herramientas superior:
Cómo ingresar un nuevo bloque Al escribir solo, puede crear nuevos bloques automáticamente escribiendo. Para cualquier otra cosa: imágenes, videos, títulos, etc. – Deberá agregar un nuevo bloque. Hay algunas formas de agregar nuevos bloques:

Para agregar un nuevo bloque a la parte inferior del editor, puede hacer clic en el icono más desde la esquina superior izquierda.

Para agregar un nuevo bloque entre los bloques existentes, puede cruzar el mouse sobre donde desea insertar el bloque y hacer clic en el icono más.
Después de hacer clic en cualquiera de los iconos más, aparecerá una ventana emergente que enumere todos los bloques disponibles.
En la parte superior de la ventana emergente, obtendrá una lista de los bloques que usa con más frecuencia:

Pero también puedes:
Use el cuadro de búsqueda para buscar un bloque por nombre

Desplácese hacia abajo para ver las pestañas de acordeón para todas las categorías de bloques disponibles
Pasemos algunos ejemplos … si desea insertar una imagen … agregaría el bloque de imágenes. Luego puede usar las opciones para elegir dónde obtener la imagen: si desea incorporar un video de YouTube … agregaría el bloque de YouTube. Entonces simplemente pegue la URL del video y verá una vista previa en vivo:
Si desea insertar un título (H2, H3, etc.), puede agregar el bloque de encabezado y elegir el nivel de encabezado en la barra de herramientas:

O bien, también puede elegir un bloque de párrafo existente y usar la barra de herramientas para “convertirlo” en un bloque de título (u otro tipo de bloque como una cita):

Cómo configurar un bloque para cosas básicas como audaz, cursiva, alineación, etc., usará la barra de herramientas. Sin embargo, para otras configuraciones de bloqueo, utilizará la pestaña Bloqueo de la barra de bloqueo. Por ejemplo, si agrega un bloque de botones, puede usar la barra lateral derecha para cambiar sus colores:

Cómo reorganizar el contenido en el editor de TinyMce, tenía que usar el corte y la vinculación si desea reorganizar el contenido. Con Gutenberg, obtendrá dos opciones:

Las flechas hacia arriba / hacia abajo que mueven un bloque hacia arriba o hacia abajo de un lugar

Función deslizante y de ubicación que le permite deslizar un bloque en cualquier lugar

Para activar estos cheques, vaya con el mouse sobre el bloque que desea mover.
Si desea usar la función de deslizamiento y colocación, debe colocar el mouse sobre los seis puntos entre las flechas. Entonces podrás deslizar y abrocharte de la siguiente manera:
Cómo configurar la información básica sobre la publicación (categorías, Slug, etc.) Los pasos anteriores deben darle todo lo que necesita para crear algunas publicaciones y páginas básicas. Pero qué pasa con la información de detrás del escenario, como:
URL Slug


Categorías

Etiquetas
Y así
Para configurar toda esta información, puede usar la pestaña del documento en la barra lateral, que actúa muy similar a la barra lateral en el editor Tinymce:
¿Qué les sucede a los complementos como Yoast SEO? Probablemente tenga otros complementos que necesitará para configurar después de With. Ejemplos comunes serían complementos de SEO, redes sociales, etc. Asique, como trabajan? Bueno, algunos complementos, como Yoast SEO, ya han incorporado a Gutenberg. Para acceder al SEO Yoast u otros complementos con tal soporte, puede hacer clic en el icono en la esquina superior derecha. Entonces podrá configurar el complemento en la barra lateral:
Para otros complementos, podrá continuar utilizando “meta-curvas” que aparecen bajo el editor de texto, como antes:
Otros cinco consejos avanzados para usar el editor de bloques de Gutenberg, el tutorial del editor de Gutenberg lo ayudará a crear el mismo tipo de contenido que ya ha creado con el editor Tinymce. Ahora, cubramos algunos consejos más avanzados para obtener más del editor de Gutenberg. 1. Aprenda los atajos de teclado para una mejor productividad porque todo es un bloque separado en Gutenberg, hay muchos más “clics del mouse” para hacer las cosas. Eso significa un trabajo más lento, especialmente al principio. La mejor manera de eliminar este problema es aprender los atajos de teclado del teclado. Le permitirán agregar o eliminar rápidamente los bloques según sea necesario. Para abrir la lista completa de accesos directos, use el orden Shift + Alt + H: 2 Acthcut. Escriba rápidamente los bloques de barra en lugar de usar la ventana de bloque de inserción emergente cada vez que desea agregar un bloque, un método más rápido es escribir “/” en un bloque vacío y buscar el bloque por nombre. Aquí hay un ejemplo:
3. Dibuje imágenes del escritorio a Gutenberg para acelerar la adición de imágenes, puede sacarlas directamente del escritorio a cierto punto del editor. Gutenberg los cobrará automáticamente en su biblioteca de medios:

4. Use el bloque de columna para aspectos más complicados si desea crear modelos más complicados, Gutenberg incluye un bloque de columna. Después de agregar el bloque de columna, puede agregar otros bloques dentro de él:

Para obtener más flexibilidad con los aspectos, puede instalar el complemento Kadence Blocks. Hablando de … 5. Aproveche los terceros complementos de bloques de partidos Una de las cosas maravillosas de Gutenberg es que puede usar los terceros complementos para agregar nuevos bloques. Muchos desarrolladores trabajan para crear nuevos bloques de contenido y apariencia, lo que puede ayudar a extender la funcionalidad de Gutenberg. Algunos buenos para comenzar son: bloques atómicos

Finales para Gutenberg

Apilable

Gutenberg avanzado

El complemento Gutenberg Cloud también es un proyecto interesante que le permite instalar bloques específicos de una variedad de desarrolladores. Más allá de eso, algunos complementos que usa ya agregarán bloques para reemplazar códigos cortos. Por ejemplo, si tiene una tienda WooCommerce, podrá ingresar a los productos de WooCommerce en su contenido utilizando un nuevo bloque. ¿Qué sucede con su contenido anterior después de actualizar a WordPress 5.0? Si ya tiene un sitio de WordPress, es natural preguntar qué sucederá con todo el contenido que ya ha creado con TinyMce Publisher. No se preocupe: el equipo base no ha olvidado su contenido anterior. Así es como funcionará. Supongamos que tiene una publicación posterior a la publicación utilizando el editor Tinymce que se ve así:

Cuando pasa a WordPress 5.0 y el editor de bloques de Gutenberg, WordPress pondrá todo el contenido anterior en un solo bloque clásico. El bloque clásico es prácticamente el editor de Tinymce … justo en la interfaz Gutenberg. Entonces, en lugar de que cada elemento sea un bloque separado, todo está solo en ese bloque clásico. Se ve como esto:
Si necesita editar el contenido, puede editarlo en el bloque clásico, ya que haría el editor TinyMCE:
O también puede elegir la opción de convertir en bloques. Una vez que elija esta opción, Gutenberg dividirá todo su contenido antiguo en bloques separados y podrá trabajar con ella a medida que haya construido la publicación desde cero con Gutenberg. ¿Tienes que usar el editor de Gutenberg? ¿Puedes continuar usando el editor Tinymce? No tiene que usar el nuevo editor de bloques de Gutenberg. Aunque se convertirá en el editor predeterminado en WordPress 5.0, también hay un complemento oficial del editor clásico que le permitirá continuar usando el editor TinyMCE original con el que ya está familiarizado. Además, el equipo básico de WordPress continuará apoyando oficialmente el editor de TinyMce al menos a finales de 2021. Todo lo que tiene que hacer es instalar el complemento en wordpress.org. Una vez que lo active, deshabilitará el editor de bloques Gutenberg y creará contenido exactamente como antes de WordPress 5.0. Si lo desea, el complemento también tiene otra opción que le permite usar tanto el editor de bloques TinyMce y el editor de bloques Gutenberg y cambiar entre sí. Para activar esta configuración, vaya a Configuración → Escriba y elija la opción para usar el editor de bloqueo predeterminado e incluya enlaces opcionales al editor clásico: