Todo lo que necesita saber sobre Gutenberg, el nuevo editor de WordPress

WordPress 5.0 es la nueva versión de WordPress y presenta nuevas funciones. Por un lado, viene con un nuevo editor de contenido llamado Gutenberg. Por otro lado, viene con un nuevo tema implícito, veinte diecinueve. ¿Cómo te afectan estos cambios? Bueno, más de lo que piensas … especialmente del editor. Pero no se asuste. En Nelio somos conscientes de que Gutenberg es un tema controvertido que genera muchas dudas entre los usuarios. Lo amo o lo odio, parece que Gutenberg estará a nuestro alrededor, nos guste o no, por lo que es mejor que comprenda cómo usarlo lo antes posible.
Si aún no ha hecho esto, instale Gutenberg en WordPress y permita que lo guíe a través de los pasos con él. Hoy descubrirá todo lo que necesita saber sobre la operación básica de Gutenberg y estará listo para su llegada triunfal a WordPress 5.0. WordPress Publisher “Old”. Si ha estado usando WordPress durante algún tiempo, es probable que esté 100% familiarizado con su interfaz de edición de contenido. Como saben, hasta la versión 5.0, WordPress usó el editor TinyMce, así como algunos “cuadros” a su alrededor para editar aspectos adicionales de su contenido:

El editor “antiguo” de WordPress tiene un área de texto y una herramientas de formato en las que escribe contenido y varios meta cuadros a su alrededor, con algunas opciones adicionales.
Los diversos complementos que hemos instalado en nuestro sitio podrían expandir esta interfaz de edición agregando, como digo, cajas adicionales con nuevas funciones. Por ejemplo, nuestro complemento no contenido agrega varias cajas adicionales, incluida una para programar todos los mensajes sociales para promover el blog en las redes sociales: los mensajes sociales generados automáticamente se basan en (a) su contenido publicado y (b) en plantillas sociales.

El editor en sí es exactamente lo que espera: un área de texto en el que crea su contenido y una barra de formato para formatear el texto, agregar títulos, listas, etc. Nada de lujo.
Gutenberg ahora echemos un vistazo a Gutenberg. ¿Qué es? ¿Por qué deberíamos hablar de eso? ¿Es tan diferente de lo que estamos acostumbrados? Intentemos responder a todas estas preguntas y enseñarle todo lo que necesita saber para hacer la transición de la manera más suave posible. Los primeros pasos con Gutenberg comienzan familiarizándonos con el nuevo editor. Lo primero que vemos cuando creamos una nueva publicación en nuestro blog usando el editor de Gutenberg es la siguiente interfaz de usuario:
Gutenberg Publisher parece muy familiar … y sin embargo, nada es lo mismo.

Como puede ver en la captura de pantalla anterior, la interfaz de usuario de Gutenberg es muy familiar, pero es diferente, extraña al mismo tiempo. Como editor, su esqueleto es el mismo que tenía antes: un área de texto rodeada de algunas opciones adicionales. Claro, parece más fresco y menos hinchado, pero la esencia está ahí.
Ahora pasemos al lado interesante … ¡escribamos algo de contenido! Como puede ver, Gutenberg nos da la bienvenida con algunos mensajes que nos invitan a escribir algún contenido: “Agregar título” seguido de “Agregar texto o tipo / para agregar contenido”. Seguimos el ejemplo: escribir contenido en Gutenberg parece muy natural.
Fue bastante fácil, ¿no? ¡Hasta aquí todo bien! Entonces, continuemos buceando … ¿Qué sucede si desea insertar un enlace, una lista o formato? ¿Cómo haces esto? ¿Dónde están mis herramientas? En nuestro editor de la vida, estábamos acostumbrados a tener una barra de herramientas en la parte superior. Allí encontramos todo lo que necesitábamos: en negrita, cursiva, lazos, alineaciones, listas, enumeraciones, títulos … pero en Gutenberg no hay tal cosa, no hay barra de herramientas. ¿O hay?

Las barras de herramientas de Gutenberg son contextuales y dependen del blog activo. Por defecto, están al lado del bloque que editamos en ese momento.
Si presta atención, cuando edita un párrafo de su publicación (como capté en la captura de pantalla anterior), verá la barra de herramientas flotando por encima de ella. Y aquí tiene las herramientas que faltaban: alineación, audaz, cursiva, etc. Esta es una de las primeras diferencias que encontramos en Gutenberg de forma predeterminada: las barras de herramientas son contextuales y aparecen en el bloque que editamos. ¿Que? ¿No te gusta este comportamiento? ¡No hay problema! Los desarrolladores de Gutenberg ya lo han pensado y han agregado la oportunidad de cambiar el comportamiento de la nueva barra de herramientas y volver al estilo antiguo.

Puede personalizar algunas cosas sobre Gutenberg, incluso dónde debería estar la barra de herramientas.
Solo tiene que acceder a la configuración del editor (el icono de suspensión en la esquina superior derecha de la pantalla) y activar la opción Barra de herramientas unificada para obtener el siguiente resultado: la barra de herramientas unificada de Gutenberg coloca la barra de herramientas en su ubicación ordinaria; Es decir, en la parte superior de su editor.

¡Esto es bueno! Se vuelve cada vez más a nuestro editor habitual, ¿no crees? ? Ahora eche un vistazo más de cerca a la barra de herramientas. ¿Qué no ves? ¡Exacto! La barra de herramientas de Gutenberg se ve mucho menos poderosa que la que tenía en el editor anterior porque faltan muchas cosas …
Los bloques de Gutenberg no se preocupan, no se desesperen. El importante cambio de paradigma que trae Gutenberg es la noción de bloques. En Gutenberg, cada fragmento que agrega a su contenido es un bloque. Y, como puedes imaginar, hay muchos bloques diferentes:

Gutenberg organiza su contenido en bloques. Aquí puede ver algunos ejemplos de bloques predeterminados que incluye el editor.
En la captura de pantalla anterior puede ver una lista de algunos de los bloques más comunes:
Los párrafos son el bloque básico de cualquier publicación y, por lo tanto, son el bloque predeterminado que Gutenberg sugiere al escribir contenido.


Las imágenes y galerías también son bastante comunes. Como su nombre indica, se usan prácticamente para insertar imágenes en la copia.
Los títulos nos ayudan a organizar nuestro contenido.
Enumere los trabajos de formulario y un conjunto de artículos desordenados.
Las citas nos permiten citar a alguien.
Bastante obviamente, ¿verdad? Lo importante aquí es que, en Gutenberg, cada parte de nuestro contenido es un bloque de cierto tipo. Como resultado de este hecho, las acciones que podemos usar en cualquier momento dependen del bloque con el que trabajamos: varios ejemplos de Gutenberg: una imagen y una cita. Observe cómo cambia la barra de herramientas de acuerdo con el bloque activo.
Por ejemplo, en la captura de pantalla anterior vemos dos bloques nuevos: una imagen y una cita. Como puede ver, el usuario trabaja con el bloque de imágenes y, por lo tanto, tiene una barra de herramientas de imagen accesible. Es decir, el usuario tiene acceso a acciones como alinear la imagen o un botón para editar su título y texto alternativo, pero nada sobre formatear el texto (porque no tiene sentido en este contexto y momento). Si el usuario cambia su atención a un nuevo bloque, las acciones disponibles cambiarán para que coincidan con el nuevo contexto y el bloque.
Por otro lado, debe saber que en la barra lateral de Gutenberg hay una pestaña llamada bloqueo, donde encontrará más opciones e interruptores sobre el bloque activo:
Los bloques no solo tienen su propia barra de herramientas, sino también su propio conjunto de opciones avanzadas (si es necesario). Estoy en el panel correcto.

Como puede ver, Gutenberg tiene una interfaz más limpia, centrada en la tarea actual. Entonces, en lugar de tener barras de herramientas con miles de opciones, dejamos que el editor nos muestre lo que es relevante y útil en cada momento. ¿Pero algo más? En este momento, debería ser obvio que crear y administrar contenido con Gutenberg es realmente muy simple. A pesar de todos los cambios que incluye y la “nueva forma de hacer las cosas, el resultado final es muy natural e intuitivo. ¿Pero qué hay de algo más? Categorías, etiquetas, imágenes presentadas, autores … En el editor anterior había muchas cosas “sobre” el editor de texto en sí. ¿Dónde estoy? Comencemos con un ejemplo que pertenece a una de las preguntas frecuentes: ¿Cómo puedo cambiar el enlace permanente de mi publicación? En la versión anterior de WordPress, el enlace permanente se generó a partir del título de su publicación y, de hecho, la opción de cambiarla estaba justo debajo. Ya he dicho que Gutenberg muestra solo las opciones que son relevantes en algún momento y parece que el enlace permanente está relacionado con el título, así que …
Cambiar un enlace permanente en Gutenberg es tan simple como antes … un tipo. Accederá al título y la configuración del enlace permanente.
Si tuviéramos que editar el título de nuestra publicación, también podemos cambiar su enlace permanente. ¡Y realmente lo somos! Claro, no es tan obvio que antes, porque ahora la configuración no es visible todo el tiempo, pero WordPress todavía usa la misma lógica que antes. Como se mencionó anteriormente: es una interfaz familiar, pero no la misma. Todas las demás opciones, como no podría ser de otra manera, están disponibles en la barra lateral del editor. Allí encontré una pestaña llamada documento con el equivalente de las cajas que tenía en el editor anterior: encontrará todas las opciones que podrían interesarle en el panel derecho del editor. Son bastante similares a lo que solía hacer, por lo que no se necesitan explicaciones.

Categorías, etiquetas, programación, fragmentos … todo lo que teníamos antes está disponible aquí, nos espera. No es un gran problema, ¿no? Gutenberg y mis complementos al final, hablemos brevemente sobre la compatibilidad de Gutenberg con nuestros complementos. Como saben, en el editor anterior, los complementos podrían agregar sus propias “personalizaciones”. Por ejemplo, un complemento como Yoast SEO agregó una nueva caja para administrar los parámetros de SEO de nuestra publicación. Pero, por supuesto, ahora no hay cajas … entonces, ¿cómo funciona eso?
Gutenberg debe ser compatible con todos sus complementos. Encontrará los meta cuadros de sus complementos en ubicaciones ordinarias: bajo contenido o al lado.