¿Qué es el editor gutenberg? ¿Cómo sas tomó el mundo de WordPress con una tormenta? Todo lo que quieras saber

Con 1 de cada 4 sitios web usando WordPress, es sin duda uno de los sistemas de administración de contenido (CMS) más utilizados disponibles. Desde sus días iniciales, ha pasado de ser un sistema de gestión de blogs a un CMS de buena fe generalizado. Pero dicho esto, las cosas están cambiando muy rápido en el mundo de WordPress y, según nuestra opinión, ¡las cosas están cambiando para siempre!

¡Editores tradicionales basados ​​en texto, al borde de la extinción!

La edición de contenido de WordPress, tradicionalmente, consistía en editar páginas de texto con algunas imágenes. No proporcionó ninguna experiencia de usuario de arrastrar y soltar para la creación de contenido. Además, para la incrustación de contenido complejo, los desarrolladores usan códigos cortos, que son un tipo especial de sintaxis. Con todas estas limitaciones, la comunidad de desarrollo de WordPress necesitaba un editor mucho más simple, que pueda hacer que el desarrollo sea más rápido y eficiente.

Con el lanzamiento de WordPress 5.0 el 6 de diciembre de 2018, se introdujo un nuevo editor llamado Gutenberg. Lleva el nombre de Johannes Gutenberg, el inventor de la imprenta.

¿En qué se diferencia Gutenberg del editor TinyMCE o cualquier otro editor de texto tradicional?

El editor de Gutenberg sigue un enfoque basado en bloques. Permite la creación de cualquier diseño de contenido con facilidad y el usuario puede editar el contenido sobre la marcha, si es necesario. Los bloques pueden ser casi cualquier cosa, como:

• Texto
• Imagen
• Empotrar
• Botón
• Widgets
• Mesas
• Y muchos más.

El usuario puede incluso crear un bloque personalizado, si es necesario, y usarlo varias veces. Los temas y complementos pueden mejorar la compatibilidad con Gutenberg al agregar nuevos tipos de bloques. Con este enfoque, hay posibilidades inimaginables. Y estamos seguros de que la comunidad de desarrolladores de WordPress innovaría lo mejor que pudiera.

Hay casos en los que muchos de ustedes están usando una versión de WordPress inferior a 5.0 y quieren jugar con el complemento de Gutenberg, para empezar, pueden seguir los pasos a continuación:

¿Cómo instalar el complemento de Gutenberg?

Puede comenzar descargando e instalando el complemento de Gutenberg desde el repositorio de complementos de WordPress.org. En caso de que sea una persona de repositorio, la recomendación estándar es que clone la versión de desarrollo de Gutenberg alojada en GitHub. Otro beneficio de usar el repositorio de desarrollo es que obtendrá la versión de desarrollo de React.js que ya viene incluida con el repositorio de Gutenberg.

La versión de desarrollo también proporciona un informe de errores más detallado que ayuda con una depuración efectiva.

Comprender el diseño de Gutenberg

1. ¿Cuáles son los diferentes tipos de bloques disponibles?

Gutenberg proporciona numerosos bloques, divididos en diferentes categorías. Los bloques más utilizados se verían en la parte superior, al desplazarnos hacia abajo, hay otras secciones como bloques comunes, formato, elementos de diseño, widgets, etc. Podemos elegir el bloque que necesitamos, arrastrarlo en el diseño de la página y comenzar a editar. Algunos de los tipos de bloque y su usabilidad se explican a continuación.

• Los elementos en línea contendrían solo un bloque para una imagen en línea.
• Un bloque común contendría texto regular, párrafos, citas y muchos más bloques de construcción básicos.
• El formato se puede usar para contenido como una tabla o contenido con más formato, como comillas.
• Los elementos de diseño se pueden utilizar para dividir el texto en columnas.
• Los widgets se pueden usar para agregar categorías, códigos cortos o mostrar widgets de la barra lateral.
• Las incrustaciones pueden ayudar a agregar YouTube, Twitter, Instagram o cualquier otro contenido externo.

2. Ejemplo de cómo usar los bloques

1. A continuación se muestra el bloque de cotización que se seleccionó de la categoría de bloque común y se colocó en la pantalla. Una vez que coloque su bloque de comillas, puede comenzar a editar el texto según sea necesario.

2. También puede crear varios diseños de columnas. Puede seleccionar el bloque de columnas de la sección de elementos de diseño. Una vez que se selecciona el bloque de columnas, puede mover cualquier subbloque dentro de este bloque de columnas para estructurar su contenido.

3. ¿Cómo reorganizar estos bloques de construcción básicos?

1. La flecha hacia arriba o hacia abajo se puede usar para mover los bloques de un lugar a la vez.
2. En caso de que desee moverlo con mayor libertad, puede usar el icono de seis puntos para arrastrar y soltar donde sea necesario.

• ¿Cómo editar el código fuente?

1. En caso de que se requiera editar a nivel del código fuente, puede hacer clic en los tres puntos verticales en la parte superior derecha y seleccionar Editor de código.

   

2. Para mejorar su experiencia de edición, Gutenberg ofrece un modo de pantalla completa, una barra de herramientas fija y un modo de foco.

Una vez que haya terminado con la edición, simplemente haga clic en el botón publicar y tendrá su publicación lista.

Ventajas (PROS) de Gutenberg

• Según nosotros, Gutenberg sería una bendición para los editores. Les permitiría crear algunos temas y complementos realmente innovadores utilizando el enfoque de bloqueo de Gutenberg.
• El desarrollador puede guardar información sobre el bloque e incluso crear un nuevo bloque específico para sus necesidades. La mejor parte es que el desarrollador puede crear un bloque una vez y usarlo en todas partes.
• La pantalla en general estaría menos abarrotada ya que el enfoque basado en bloques brinda un diseño limpio y ordenado.
• El diseño de bloques es un enfoque realmente óptimo para el desarrollo receptivo móvil. Ahora será comparativamente más fácil hacer que un sitio web sea compatible con dispositivos móviles.
• Es tan fácil de usar que incluso los novatos pueden hacer frente fácilmente a la creación del sitio de WordPress con bastante facilidad.

Desventajas (CONS) de Gutenberg

• Considere que el 33% de todos los sitios web en Internet se construyen con WordPress, la compatibilidad con versiones anteriores de Gutenberg aún es cuestionable. La actualización facilitaría las cosas para los usuarios finales o principiantes, pero será un trabajo tedioso para la comunidad de desarrolladores hacer que los sitios web de WordPress existentes sean compatibles con Gutenberg.
• Dado que usa React, será algo difícil de aprender en comparación con el desarrollo estándar de WordPress.
• Los complementos y temas existentes tendrían que actualizarse para admitir Gutenberg y lo mismo puede tomar tiempo para digerir esta transición.
• Dado que todo se basa en cajas, hay una parte de la comunidad de desarrolladores que expresa su preocupación por no poder encontrar el elemento de caja correcto, lo que al final conduce a una desorganización del diseño.

Uso del editor tradicional (p. ej., TinyMCE) con WordPress 5.0

Dado que WordPress 5.0 ya está disponible, todos los sitios web de WordPress deben actualizarse para recibir actualizaciones de seguridad. Dicho esto, hay un complemento oficial de WordPress llamado "Editor clásico" (https://WordPress.org/plugins/classic-editor/) que permitiría a los desarrolladores acostumbrarse a Gutenberg. Según la declaración oficial mencionada en la descripción de este complemento, "Classic Editor será totalmente compatible y se mantendrá hasta al menos 2022, o mientras sea necesario".

En caso de que necesite ayuda para actualizar y comenzar a usar Gutenberg, no dude en comunicarse con nosotros en [email protected]. Estaremos más que felices de proporcionar nuestros servicios de WordPress y llevar su sitio web a la velocidad de la industria.