Conociendo el nuevo Gutenberg WordPress Editor (Pros y Contras)

Actualizado September 28, 2017

El editor visual de WordPress actual no ha tenido muchos cambios a lo largo de los años y la mayoría de las veces, ha permanecido prácticamente igual. Aunque esto no es una mala cosa, muchos piensan que es el momento de cambiar. Otras plataformas como Medium o Ghost proporcionan una experiencia realmente única y refrescante para escritores, ¿así que por qué WordPress no? Bueno, muchos colaboradores y voluntarios han estado trabajando en el nuevo Gutenberg WordPress editor detrás de las escenas durante los últimos 6 meses. ¿Su objetivo? Añadir contenido multimedia a WordPress simple y agradablemente. Hoy nos sumergiremos en el nuevo editor y discutimos los pros y los contras.

¿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.

Para ser justos con los desarrolladores y el equipo que trabaja en esto, es importante señalar que este se encuentra actualmente en su versión beta y en la fase de pruebas, no está preparado para ejecutarse en los sitios de producción todavía. Pero querríamos estudiarlo y ver por nosotros mismos de qué trata todo el bombo. Nos aseguraremos de mantener esta publicación actualizada según cambios y mejoras sean lanzados. Parece que antes de que esto sea oficialmente fusionado en WordPress core Matt Mullenweg (el fundador) espera obtener 100,000 instalaciones activas. Lo que tiene perfecto sentido, ya que esto resolverá mucho de los errores, problemas, y les permitirá procesar nuevas ideas y peticiones de características.

Debido a que 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. Con suerte, podremos ver esto en WordPress 5.0.

Cómo Instalar Gutenberg

Al escribir esta entrada, el plugin Gutenberg cuenta actualmente con un poco más de 2000 instalaciones activas con más de 25,000 descargas totales y un 2,5 de 5 estrellas. También requiere la versión 4.8 de WordPress para utilizarlo.

Gutenberg WordPress Plugin

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 o utilizar su entorno de pruebas de su host.

Instalar Gutenberg WordPress plugin

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.

Enlace de Gutenberg en la publicación

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.

Demo de Gutenberg editor

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.

Comparación de Gutenberg vs editor actual

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)

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.

Editor de texto de Gutenberg

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.

Trabajando con bloques de Gutenberg

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.

Versión móvil de Gutenberg editor

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

No más TinyMCE

Aquí está lo que Matt Mullenweg tuvo que decir sobre ello.

“Lo que estamos intentando hacer es cambiarlo para que sólo tenga que aprender sobre bloques una vez y una vez que usted aprenda sobre el bloque de imagen, eso puede estar en una publicación, en un recuadro, en una página, en un tipo de publicación personalizada y funcionará exactamente de la misma manera. Cualquier cosa que esté integrado con él, digamos un plugin que traiga sus Fotos de Google o su Dropbox, ahora funcionará en todas partes, también”. — Matt Mullenweg (fuente: WP Tavern)

Sin embargo, Andrew Roberts, el jefe de proyecto en el equipo TinyMCE también nos contactó y aclaró algunas cosas con respecto a lo que está pasando con TinyMCE y Gutenberg.

Yo he estado en el equipo de Gutenberg desde sus inicios. Ha sido un esfuerzo conjunto. Cabe señalar que la edición básica de TinyMCE es el motor que impulsa el componente “editable” que a su vez alimenta la mayoría de los bloques. El bloque de Tabla, por ejemplo. Es muy probable que esto continúe en el futuro previsible.

Además, el bloque de texto clásico es esencialmente el editor TinyMCE. Cuánta importancia obtiene es probablemente dependa de los comentarios de la comunidad. Efectivamente hay una solicitud de extracción (#1394) que está siendo trabajada, que básicamente hace de Gutenberg un wrapper para el ‘viejo’ editor para que los plugins TinyMCE y botones existentes funcionen. Queda por verse si eso se llega a incluir.

Independientemente, es probable que los equipos centrales de WP y TinyMCE trabajarán conjuntamente para asegurarse de que la experiencia del usuario tenga un estilo de procesamiento de palabras en WordPress. Incluso si eventualmente se convierte en un plugin.

Por otra parte, una de las razones por las que hemos estado trabajando en el proyecto Gutenberg con el excelente equipo de Gutenberg ha sido traer estos conceptos a la amplia comunidad de TinyMCE durante los próximos 12 meses. Esto le permitirá llevar el concepto de la edición basada en bloque en su propia aplicación personalizada. – Andrew Roberts

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

Bloque de Tabla

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. También sería bueno ver columnas agregadas a esto, pero definitivamente estamos en la vía correcta. Estamos bastante seguros de que funcionarán columnas en Gutenberg, antes de lanzarlo. Tener la capacidad para agregar 1/3 o 3/4 columnas receptivas ahora es esencial para casi cualquier sitio WordPress.

Tablas de Gutenberg

Actualmente, sólo puede agregar una tabla de 2×2 con la opción de insertar sin un estilo sin entrar en la vista de texto. Aunque finalmente, suponemos que será capaz de hacer todas estas cosas desde el editor visual.

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

Bloque HTML en 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

Arrastrar y soltar imágenes

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

Add CSS class

Añadir clase de CSS

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

Bloques recientes

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

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!

Función de autocompletar de Gutenberg

Función de autocompletar de Gutenberg

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

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

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.

Bloque HTML en Gutenberg editor

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.

Botón en Gutenberg

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.

Opciones de Embebido en Gutenberg

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.

  • Actualmente falta apoyo de Markdown.
  • 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.
  • No admite meta recuadros personalizados de plugin como Yoast SEO todavía. Esto hace que no se pueda utilizar en producción ahora mismo. Pero es comprensible que los desarrolladores de plugins ahora tendrán que empezar a probar integraciones con el Gutenberg Editor. ¡Pero recuadros de meta vendrán pronto! Como puede ver en la imagen abajo es una funcionalidad planeada para un futuro lanzamiento.

    Gutenberg recuadros de meta vendrán pronto

    Gutenberg recuadros de meta vendrán pronto

  • No admite columnas sensibles todavía. Esperamos que esto llegué pronto. Muchas veces, esta es una razón por la cual la gente instala plugins de visual builder o plugins de códigos cortos, es solamente para conseguir la función de columna. ¡Definitivamente las columnas deben estar en el núcleo!
  • 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. Ver solicitud de extracción #1394.
  • Algunos están preocupados por la accesibilidad de Gutenberg. Joost de Valk, el desarrollador de Yoast SEO reveló sus preocupaciones. Asegúrese de que también eche un vistazo a esta publicación sobre el uso de Gutenberg con un lector de pantalla.

Ahmad Awais ha publicado un resumen sobre Gutenberg para ayudar a los desarrolladores de temas y plugins de WordPress a iniciar su desarrollo con Gutenberg editor. Vale la pena leerlo. Y ahora muchos están adivinando ¿Gutenberg será opcional, o no? comentarios negativosDe momento la mejor respuesta fue resumida por Tammie Lister contestando en el repositorio:

Gracias por tomar su tiempo para comentarios, cada una de las reacciones tiene importancia. En primer lugar habrá una manera para todos que no desean utilizar Gutenberg, así ha sido el caso siempre. El cómo está todavía por decidir. Nuestra esperanza, ya que este es un proyecto que no se ha terminado, cuanto más crece, se harán menos experimentos… – Tammie Lister

Resumen

En conjunto nos quedamos muy impresionados con el nuevo Gutenberg WordPress editor, es definitivamente algo por el que estamos entusiasmados para el futuro. Alentamos a todos a tomar una copia del repositorio de WordPress e instalarla en un sitio de dev o sitio de staging. Esta es nuestra oportunidad amigos para ayudar a construir el editor que todos hemos estado esperando. ¡Podemos tener la misma experiencia que la gente de Medium tiene, pero en nuestro CMS favorito! El equipo de Kinsta definitivamente estará dedicando parte de su tiempo a ayudar a dar comentarios.

¿Ya ha probado a Gutenberg? Si es así, nos encantaría conocer su pensamientos, tanto positivos como negativos.

Este artículo fue escrito por Brian Jackson
Brian enfoca en nuestros esfuerzos de marketing a través de las redes sociales: desde el desarrollo de la nueva estrategia de crecimiento online, creación de contenido, optimización técnica de buscadores hasta nuestra expansión en la comunidad WordPress. Es apasionado por Wordpress lleva usándolo desde hace más de 8 años e incluso está desarrollando su propio plugin exclusivo. A Brian le encanta el blogueo, películas, montar en bici y trabajar con sitios web.

Artículos relacionados

Deja un comentario

Send this to a friend