¿Qué es Gutenberg?

Gutenberg es un nuevo editor de WordPress. Se nombra después de Johannes Gutenberg, quien inventó la imprenta con teclas móviles hace más de 500 años. El editor visual actual exige mucho de nosotros para utilizar los códigos de acceso y HTML para hacer que las cosas funcionen. Su meta es hacer esto más fácil, especialmente para aquellos que empiezan con WordPress. Ellos están adoptando “bloques pequeños“ y esperan añadir más opciones de diseño avanzado. Puede comprobar el ejemplo oficial.

Al día de hoy Gutenberg se encuentra todavía en la fase de pruebas, el equipo que trabaja en él están alentando a la gente a probarlo y dejar comentarios y opiniones en el foro de soporte de WordPress o abrir un tema en GitHub. O puede unirse a las conversaciones que tienen lugar en #core-editor en el núcleo WordPress Slack. Gutenberg será lanzado junto con WordPress 5.0.

Cómo Activar Gutenberg en su WordPress actual

Dependiendo de la versión WordPress que tenga activa, podrá visualizar en el Escritorio un botón que indica “Instalar Gutenberg”, presionando allí y siguiendo los pasos indicados, podrá disponer de este nuevo editor en su administrador wordpress actual.

Si no ubica el botón anterior puede activar el editor a través del Gutenberg WordPress Plugin.

Puede descargar la última versión de Gutenberg desde el repositorio de WordPress o buscándolo en el WordPress dashboard en plugins “Agregar nuevo”. Repito: recomendamos instalarlo en un sitio de prueba, ya que pudiera no ser 100% compatible con el tema, plugins o contenido que esté manejando.

Explorando Gutenberg

Tras la instalación de Gutenberg, verá enlaces en sus Entradas que le permiten abrir el Gutenberg editor. Ellos no sustituyen el editor de WordPress por defecto, que es una cosa buena, en nuestra opinión, ya que durante la fase de prueba le permite rebotar adelante y atrás. Obviamente, una vez que este se fusione con el núcleo, probablemente de forma predeterminada use los enlaces “Editar”. A partir de la última versión en el repositorio, ahora soporta tipos de páginas personalizadas y páginas también.

Importante: al lanzar WordPress 5.0 Gutenberg será el editor predeterminado pero aún tendrá la opción de instalar el editor clásico si enfrenta con problemas de compatibilidad (como se ven en la advertencia abajo).

Advertencia de WordPress 5.0 y Gutenberg

También agrega un nuevo menú en el WordPress dashboard que contiene una demostración (como se muestra a continuación) y la posibilidad de crear una nueva publicación. De nuevo, este menú es probablemente sólo para propósitos de prueba como se puede ver el editor visual luce muy diferente al que probablemente está acostumbrado. Tiene una sensación muy similar a Medium, lo que nos parece genial.

Si usted echa un vistazo a ambos el Gutenberg editor y el actual editor visual de lado a lado (haga clic para ampliar) puede ver cuánto más espacio de escritura Gutenberg dispone, especialmente en pantallas más pequeñas. Para personas que escriben en las computadoras portátiles, ¡Gutenberg va a ser un buen cambio de ritmo! Realmente se centra en “escribir primero” y está tratando de proporcionar un entorno con menos distracciones.

En el Gutenberg WordPress editor, puede hacer clic en “Ajustes de Publicación” para eliminar la configuración de la barra lateral derecha. Y mientras esto no le da acceso a incluso más de su pantalla parece que estamos a mitad de camino a la actualmente disponible modo de escritura sin distracciones. Intentamos utilizar Shift+Alt+W para abrirlo en el Gutenberg editor, pero parece que no funciona todavía. A lo mejor no han añadido esto todavía. Pero estamos bastante seguros de que lo harán, ya que habrá bastantes personas que utilizan esta característica.

Ocultar ajustes de publicación (a mitad de camino a un modo de escritura sin distracciones)

Para cambiar entre el editor visual y el modo de editor de texto (código), ahora hay un menú desplegable en la parte superior izquierda. Usted notará que ahora hay comentarios HTML al principio y al final de cada bloque. Por ejemplo, lo siguiente le permite crear un bloque de texto.

<!– wp:core/text –> <!– /wp:core/text –>

Esto le permite crear los bloques directamente desde el modo de editor de texto. Sin embargo, también añade mucho más desorden de lo que probablemente esté acostumbrado si está editando en este modo.

Cuando resalte sobre un bloque, hay opciones para mover fácilmente hacia arriba o hacia abajo con las flechas, elimínelo o entre en la configuración del bloque. Esto es muy similar al de los controles disponibles en Medium.

También fuimos sorprendidos por lo bien que trabajó en el móvil inmediatamente. Si necesita realizar un insertar imagen rápido o añadir un párrafo antes de publicar una publicación sobre la marcha, parece que Gutenberg va a hacer que sea muy fácil.

Una de las primeras cosas que probablemente notará es que la barra de herramientas de TinyMCE que se ha acostumbrado a ver durante años se ha ido. Ahora es reemplazada con un menú desplegable si hace clic en el botón “Insertar”. Bueno, eso es porque parece que Gutenberg está tratando de librarse de su dependencia de la integración de TinyMCE. ¿O no?

No más TinyMCE

 

A continuación, se encuentran algunas nuevas adiciones de bloque que creímos que eran bastante geniales.

Bloque de Tabla y de Columna de Texto

Las tablas simples son ahora mucho más fáciles, ya que puede insertarlas como bloques dentro del editor. Anteriormente había que usar un plugin de terceros o código HTML. Ahora se puede agregar una tabla de 2×2 con la opción de insertar y no puede diseñarlo sin entrar en la vista de texto. Si bien suponemos que seremos capaces de hacer todo esto vía visual editor.

También agregaron la habilidad de añadir bloques de columna de texto que ¡es genial! De momento podemos elegir entre 2, 3 o 4 columnas. Columnas receptivas siempre fueron un dolor de cabeza en WordPress en el pasado y en general requerían un plugin de terceros para funcionar correctamente.

Bloque HTML Vivo

También tienen lo que se llama un bloque HTML vivo. Puede insertar el código y después, ver una vista justo dentro del bloque. Esto es realmente una idea muy genial y realmente podría impedir que algunos de nosotros tuviéramos que alternar entre los modos de editor visual y de editor de texto.

html block gutenberg editor

Arrastrar y Soltar Imágenes

Desde la versión 0.5.0 de Gutenberg se puede arrastrar y soltar imágenes directamente en un bloque de imagen como hemos acostumbrado en el editor visual. Sin embargo hay un efecto de desaparecer que es bastante raro. Sentimos que este será un problema.

Drag and drop images

También se puede añadir clases de CSS adicionales a ciertos bloques.

Add CSS class

Bloques Recientes

Con todos los bloques integrados en Gutenberg editor y a lo mejor con más por venir han añadido “Bloques Recientes” para ayudar a acelerar el proceso de inserción.

Recent blocks

Cubrir Opciones de Texto

En Gutenberg 0.9.0, han introducido unos estilos visuales nuevos y opciones para cubrir el texto. Se puede cambiar el tamaño de fuentes, cambiándolo en letras capitales y modificar el color con su componente nuevo de paleta de colores personalizados.

Cubrir texto en Gutenberg

Función de Autocompletar

Una característica genial en Gutenberg 1.1.0 es la capacidad de usar autocompletar para insertar bloques. Para aquellos que utilizan Slack diariamente es una manera familiar de formatear el contenido de tal manera como desee. ¡Teniendo la opción de minimizar clics y utilizar más del teclado es una gran ventaja!

Tabla de Contenidos y Soporte de Anclaje

Han añadido la Tabla de Contenidos en la barra lateral. Esto crea enlaces seleccionables así se puede saltar en cada sección en su artículo. Esto resultará muy útil al escribir contenido largo.

Tablas de contenido en Gutenberg

Tablas de contenido en Gutenberg

Otra función que se puede utilizar en bloques ahora son los anclajes. Es una maravilla y tan necesitada desde hace mucho tiempo. Añadir anclajes le permite enlazar directamente a una cierta sección o encabezado en el artículo. Es fantástico para compartir así como crear saltos a menús en SERPs.

Gutenberg soporte de anclaje

Recuento de Palabras y Bloques

La mayoría de nosotros nos acostumbramos al conteo de palabras en la parte inferior del editor WYSIWYG. Bien, en Gutenberg 1.2.1 añadieron esto como una información emergente que se puede ver rápido. Se ve el recuento total de palabras, número de bloques y encabezados.

Gutenberg recuento de palabras y bloques

Opciones de Bloque de Citas y Nuevas Opciones de Alineación

Además de tener el bloque de cita estándar que hemos estado utilizando durante años, también tienen un el llamado pull quotes o ladillos. Y sí, pull quotes son diferentes. También es agradable ver algunas variaciones en el posicionamiento de los bloques. Durante años, el editor visual estándar le ha dado la posibilidad de alinear a izquierda, centro, derecha, y asignar sin alineación. Con Gutenberg WordPress editor, también se puede alinear de ancho (como se muestra a continuación), y alinear en ancho completo.

Botón

Existe también un método integrado para añadir un simple botón. Aunque no hay muchas opciones aquí sin embargo es agradable ver, ya que muchos blogueros y editores necesitan maneras más fáciles para añadir llamadas de atención a sus publicaciones de blogs. Ahora mismo tiene que usar HTML o confiar en un plugin de terceros de botón/código de acceso.

Opciones de Contenido Embebido

Si desea embeber opciones más fácilmente accesibles bueno, ¡sin duda obtendrá su deseo! Gutenberg hace embeber contenido multimedia super fácil, ya sea YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, y muchos más.  Mientras que usted podía incorporar todos estos antes, muchos no se daban cuenta de esto porque no había mención de ello en el editor visual. Combinado con la nueva experiencia de bloque y opciones de alineación, no deja mucho que desear. Aunque, es posible que tenga que reorganizar las cosas más adelante ya que esto puede volverse fácilmente desordenado.

Los Pros de Gutenberg WordPress Editor

Aquí están algunas ventajas que vemos con el actual Gutenberg Editor.

  • Deshacerse  *algo* de la dependencia de TinyMCE es una buena cosa, en nuestra opinión. Nos encantaría ver una integración más estrecha entre el núcleo, el tema, los desarrolladores de plugins, y el editor.
  • Para los editores que prefieren el estilo de experiencia de edición Medium más reciente, lo más probable es que vayan a amar el editor Gutenberg de WordPress.
  • Gutenberg proporciona una experiencia menos molesta con más espacio en la pantalla.
  • Los bloques son divertidos de usar y las nuevas opciones de alineación son un paso adelante para las pantallas de mayor resolución y plantillas de ancho completo y sitios responsivos.
  • Ya funciona genial en móvil, y en adelante podemos ver realmente a la gente utilizando esto mucho más. ¿Necesita hacer una edición rápida en el teléfono mientras está en camino? No hay ningún problema.
  • La capacidad para desarrolladores de tema y plugin para crear sus propios bloques personalizados.
  • Fácil de utilizar para los principiantes.

Otra cosa que nos llamó la atención en Gutenberg Editor 0.4.0 mencionaron en sus registros de desarrollo añadir una API para manipular contenido pegado. (La meta es tener una manipulación especial para convertir Word, Markdown, Google Docs en bloques de WordPress nativos.) Esto sería genial. Ahora copiar de Google Docs a WordPress está completamente roto.

Los Contras de Gutenberg WordPress Editor

Y aquí están algunos inconvenientes que vemos en el actual Gutenberg Editor. Recuerde, todavía está en fase de prueba, por lo que muchas de estas cosas probablemente serán arregladas o añadidas.

  • Mientras hemos mencionado que es más fácil de utilizar para los principiantes, también podemos ver esto como algo más difícil para algunos de aprender.
  • Desde Octubre de 2017 Gutenberg sí soporta los metabox. Sin embargo es un soporte inicial y requerirá que los desarrolladores lo mejoren. Sin embargo es una decisión muy buena, ahora por lo menos ya puede manejar la configuración de Yoast SEO.

    Gutenberg meta boxes

        • Con tantos temas y plugins, la compatibilidad con versiones previas va a ser un gran problema de ahora en adelante. De hecho, probablemente habrá miles de desarrolladores que ahora tendrán que hacer mucho trabajo, como aquellos que tienen integraciones con TinyMCE. De todas las actualizaciones de WordPress, esta, probablemente, va a ser una de las que causa el mayor trabajo para desarrolladores. Aunque puede haber un wrapper próximamente que ofrezca compatibilidad con versiones previas de TinyMCE.

    Y ahora muchos están adivinando ¿Gutenberg será opcional, o no? LA respuesta es no. Al lanzar Gutenberg no será capaz de apagarlo ya que será el editor oficial de WordPress. Hay un plugin gratuito llamado Classic Editor con su uso se puede restaurar el editor antiguo. Lo consideramos como un medio para conseguir un fin.