Tutorial Gutenberg – Nuevo editor WordPress 5.0 – Lo que debes saber ANTES de actualizar

Actualizado: abril 2018

En este artículo actualizado constantemente encontrarás todas las novedades y un completo tutorial del editor Gutenberg para WordPress. Vuelve de vez en cuando para enterarte de todas las novedades antes de actualizar a la nueva versión 5.0.

Tutorial Gutenberg WordPress

Tutorial Gutenberg – Nuevo editor WordPress 5.0 – Lo que debes saber ANTES de actualizar
4,7 (94,9%) 51 votes

Si estás leyendo esto, es porque usas o estás pensando usar WordPress ¿no?. Pues bien, debes saber que la forma en la que se crea contenido con WordPress está a punto de cambiar… ¡Este año!

Quédate en este artículo y aprende todo lo relacionado con el proyecto Gutenberg, el nuevo editor por defecto que el equipo que desarrolla WordPress implementará en la próxima versión 5.0 prevista para este año.

¿Qué es Gutenberg y que significa para WordPress?

El nuevo editor visual Gutenberg pretende revolucionar la forma en que publicamos el contenido a través de WordPress, con el fin de que todo el mundo, incluso personas sin apenas habilidades técnicas puedan no sólo publicar si no construir sitios web y blogs con facilidad sin necesidad de comprar y usar temas o plugins de terceros.

En efecto, si usas Divi, Beaver Builder, Elementor o algún otro constructor en tu página web, esto te interesa y mucho.

Gutenberg está disponible actualmente como plugin de WordPress, sin embargo, el nuevo editor reemplazará al antiguo con el lanzamiento de la nueva versión 5.0.

Ya estoy deseando que se implemente para actualizar el manual WordPress pdf en español y gratuito que puedes descargar en TutorialWP.

Editor actual de WordPress

Gutenberg Editor WordPress 5.0

editor visual wordpress
gutenberg wordpress editor

Cómo funciona el nuevo editor Gutenberg en WordPress 5.0

A continuación vamos a repasar juntos la nueva interfaz del editor Gutenberg en WordPress

Después de conocer cada sección, veremos también cada área de la interfaz para que puedas sacarle el máximo partido a Gutenberg, el nuevo editor visual de WordPress.

La interfaz de Gutenberg se compone de tres áreas principales:

Interfaz Editor Gutenberg WordPress
  1. 01. Barra de Herramientas
    Zona superior de la pantalla
  2. 02. Área de Contenido
    Parte principal en la zona central
  3. 03. Configuración Avanzada
    Barra lateral derecha

Cada una de estas áreas contiene secciones adicionales con diferentes configuraciones.

01. Barra de Herramientas

Ubicada en la parte superior de la pantalla, la barra de herramientas de edición permite lo siguiente:

Interfaz Editor Gutenberg WordPress

Novedades Gutenberg:

El nuevo editor de WordPress 5.0 Gutenberg, incluye un resumen la estructura del contenido que incluye número de palabras, párrafos, bloques, encabezados y una tabla de contenidos.

02. Área de contenido

Area contenido Gutenberg editor

El área de contenido es (obviamente) donde añadimos el contenido a nuestra página o post.

Esta parte es exactamente igual que con el editor clásico TinyMCE, sólo que ahora usaremos los bloques de Gutenberg para añadir el contenido.

Novedades Gutenberg:

Si tu tema está adaptado a Gutenberg, mostrará los estilos de los bloques dentro del área de contenido (back-end) de igual forma que se verán en la parte frontal de la web (front-end).

Si el tema utilizado no soporta esta funcionalidad, simplemente mostrará los estilos por defecto del editor.

Herramientas para bloques

En el editor visual Gutenberg, cada bloque, cuenta con una pequeña barra de herramientas que aparece justo encima.

Esta barra de herramientas aparecen al hacer clic dentro del bloque que queremos editar y nos muestra las posibilidades de edición para el bloque seleccionado.

Cada tipo de bloque cuenta con sus propias herramientas ya que las necesidades de edición son diferentes.

Por ejemplo, las herramientas disponibles para el bloque de párrafos son negrita, cursiva, tachado, enlaces y alineación.

Sin embargo, el bloque de shortcodes, no tiene opciones, ya que depende de cada código usado.

03. Ajustes avanzados (Barra Lateral)

El área de ajustes avanzados del nuevo editor de WordPress se encuentra en la barra lateral derecha y consta de dos subsecciones distintas: Documento y Bloque

Documento

Son los ajustes que se aplican a la página o post que estás editando.

El apartado de configuración del documento contiene la mayoría de la información situada en la barra lateral derecha del editor clásico de WordPress:

Ajustes avanzados editor gutenberg

Bloque

Aquí aparece la configuración avanzada de cada bloque.

La mayoría de ajustes que necesitarás, los tienes disponibles en la barra de herramientas del propio bloque, pero si algún bloque tuviese ajustes adicionales, estos aparecerían y se configurarían en este apartado.

Novedades Gutenberg:

No todos los bloques tienen ajustes avanzados.

La mayoría de veces no aparecerá nada en este área.

Bloques de Gutenberg

Como ya hemos visto, con Gutenberg los bloques son nuestros nuevos mejores amigos y han venido para quedarse y es que son uno de los mayores cambios introducidos con el nuevo editor visual de WordPress.

Por definirlos de alguna manera, los bloques de Gutenberg son fragmentos de contenido que se insertan en los posts o páginas de WordPress y su función es hacer que editar y añadir diferentes tipos de contenido sea mucho más fácil y rápido.

Con Gutenberg, estos bloques de contenido se pueden copiar, pegar, duplicar y más importante, desplazar a diferentes puntos de la página, de forma que puedas personalizar la estructura y diseño de tu contenido fácilmente.

Haciendo clic en los tres puntos pequeños que verás junto a cada bloque, también podrás ver más opciones para editar tu contenido, incluyendo opciones como los siguientes:

En Gutenberg, los bloques no sólo están formados por texto, sino que hay una gran selección de aspectos y tipos de contenido dónde elegir. A continuación veremos un listado completo de todos los bloques de Gutenberg que vienen por defecto con el nuevo editor hasta la fecha.

Pincha en los que más te interesen para ampliar la información.

¡Vamos allá!

Texto

Multimedia

  • Imagen
  • Galería
  • Audio
  • Video
  • Embeds
  • Cover Imagen

Citas

  • Cita
  • Verso

Estructura

  • Columnas
  • Columnas de texto
  • Separador
  • Leer más

Código

  • Código
  • Preformat.
  • Tabla
  • Shortcodes
  • Custom HTML

01. Bloque Párrafo (Paragraph)

Función: Agrega texto simple a un post o página de WordPress.

Formatos disponibles: negrita, cursiva, alineación, tamaño de fuente, color, color de fondo y otros ajustes.

Descripción: El bloque párrafo sirve para añadir un solo párrafo de contenido.

La mayor parte del contenido general que añadimos a nuesto sitio utilizará este bloque.

Ajustes disponibles para los bloques Párrafo

Estos son los ajustes disponibles a la hora de usar el bloque para crear párrafos:

Bloque párrafo editor gutenberg
  • Negrita
  • Cursiva
  • Tachado
  • Enlaces
  • Alineación del texto
  • Letra capital (Drop cap)
  • Tamaño de fuente
  • Color de la fuente
  • Color de fondo
  • Clase CSS Adicional

Cómo personalizar el bloque de párrafos

Todos estos ajustes que hemos visto son individualmente configurables para cada uno de los bloques de tu contenido mediante los siguientes métodos:

Herramientas para modificar el contenido en los bloques de párrafos

Estos ajustes aparecen directamente encima del bloque seleccionado, una vez que haga clic dentro de él.

Más información

Configuración avanzada de párrafos

Estos ajustes permiten modificar el bloque de párrafo como un todo.

Los ajustes avanzados de párrafos se dividen en secciones y se encuentran en el panel Configuración del bloque (también llamado “Ajustes avanzados”) en el lado derecho de la pantalla de edición.

Más información

Herramientas de edición para los bloques de párrafo

El nuevo editor Gutenberg pone a tu algunas herramientas de edición dentro de los bloques de párrafo.

Aunque son muy similares a las herramientas disponibles en TinyMCE el editor clásico de WordPress, vamos a ver un rápido repaso por si no conocías alguna:

Herramientas bloque parrafo Gutenberg

Alinear texto

Puedes alinear los párrafos a la izquierda, derecha o centro de la página.

En la mayoría de los casos, la alinéación por defecto, a la izquierda, será la única que necesites; pero es bueno conocer todas las posibilidades.

Por ejemplo, si quieres resaltar alguna acción o contenido puntual, puedes valorar la alineación de texto centrada.

Negrita, cursiva y tachado

Estas opciones ya estaban disponibles en el editor clásico de WordPress y se usan del mismo modo en el nuevo editor Gutenberg:

Enlaces

De igual forma, la forma en la que añadir enlaces dentro del texto no ha cambiado en el editor Gutenberg de WordPress:

  1. Seleccionar el texto que deseas enlazar
  2. Pinchar en el icono del enlace (en forma de cadena)
  3. Escribir o pegar la URL
  4. Aceptar

Configuración avanzada de bloques de párrafos

Estos son los ajustes avanzados disponibles para editar los bloques de párrafos en Gutenberg:

Ajutes del texto

Ajustes de texto en WordPress 5.0 Gutenberg
Tamaño de fuente

Como no podía ser de otra forma, con Gutenberg también puedes ajustar el tamaño de la fuente fácilmente.

A diferencia del editor clásico, con esta nueva versión es muy fácil variar el tamaño para cada párrafo por separado.

Además, con Gutenberg hay dos maneras de cambiar el tamaño de la fuente de un párrafo:

Por supuesto, podrás eliminar cualquier tamaño de fuente personalizado usando el enlace Restablecer.

Esto forzará los estilos csss del párrafo para que herede el tamaño de fuente que el tema establece por defecto.

Capitalizar (Drop Cap)

Si añades el estilo de letra capital a tu texto, se enfatizará la primera letra de la primera palabra.

Los estilos aplicados cambiarán en función del tema, pero normalmente son:

Capitalizar Gutenberg 5.0


Cambiar color de fondo en editor Gutenberg

Color de fondo

El nuevo editor Gutenberg ofrece una forma sencilla de hacer que nuestros textos destaquen añadiendo cualquier color de fondo.

Podrás seleccionar cualquiera de los colores existentes en tu tema o utilizar la rueda de colores para seleccionar un nuevo color.

Al igual que hemos visto con el tamaño de fuente, también podrás eliminar cualquier color utilizando el botón Restablecer.


Color de texto

Cambiar el color del texto es otra forma de hacer que un bloque de párrafo destaque.

Al igual que con el color de fondo, con Gutenbreg podrás elegir un color predeterminado o crear uno completamente nuevo.

Novedades Gutenberg:

Con el nuevo editor 5.0 de WordPress llega una nueva característica muy interesante, y es que nos aparecerá un mensaje de aviso si los colores de fondo y texto que hemos escogido para nuestro tema no constrastan lo suficiente para leerse con facilidad.

Cambiar color del texto con editor WordPress 5.0 Gutenberg

Alineación de Bloques

En Gutenberg, la alineación de bloques no es lo mismo que la alineación de texto.

Como alinear bloques en Gutenberg

La función de la alineación de bloques es mover todo el párrafo en relación con el contenido que lo rodea.

Por ejemplo, si alineas un bloque de párrafo a la izquierda, cualquier bloque que tenga debajo flotará para colocarse a su derecha hasta llenar el ancho de la pantalla del dispositivo que estés utilizando.

El nuevo editor Gutenberg ofrece tres posibilidades para alinear los bloques:

  1. Alinear a la izquierda
  2. Alinear al centro
  3. Alinear a la derecha

La alineación a la izquierda y derecha colocará ese bloque al lado correspondiente.

El alineado central, moverá el bloque o bloques de párrafos al centro de la página dejando el espacio sobrante a los dos lados equitativamente.


Clases adicional CSS

Clases adicionales CSS editor gutenberg wordpress 5.0

Gutenberg ofrece la posibilidad de añadir clases de CSS adicionales para que puedas personalizar al máximo el estilo visual y diseño de tus bloques.

Para añadir más de una clase CSS a la vez, separa cada nombre con un espacio.

Transformar un bloque de párrafo

Otra nueva posibilidad que viene de la mano del editor Gutenberg para WordPress es la posibilidad de transformar el tipo de bloque de un bloque ya creado.

Cómo cambiar el tipo de bloque en Gutenberg

Cada bloque que creamos, tiene ciertas posibilidades a las que se pueda transformar.

Por resumir, cualquier bloque de texto (Párrafo, versículo, cita, listas etc) se puede convertir a cualquier otro bloque de texto.

Los bloques del tipo imagen que veremos más adelante, se pueden convertir en cualquier otro bloque de imagen y así respectivamente.

En el nuevo editor de WordPress, puedes cambiar un bloque de párrafo a los siguientes tipos que verás a continuación. para hacer el cambio, sólo hay que pulsar en el primer icono del desplegable de herramientas.

Como cambiar tipo de bloque en editor Gutenberg

02. Bloque listas (List)

El bloque para listas es un bloque simple, que permite añadir listas. Pueden ser ordenadas (con números) o desordenadas (normalmente con puntos o guiones).

Su único propósito es mostrar el contenido en formato de listado ya sea o no enumerado.

Ajustes disponibles para los bloques Párrafo

Hasta el momento, el nuevo editor visual Gutenberg permite personalizar los siguientes ajustes para los bloques de creación de listados:

Herramientas bloque lista Gutenberg Editor

Herramientas del bloque lista

Como has visto, y al igual que con los bloques de párrafo, en Gutenberg seguimos disponiendo de un conjunto de herramientas a las que ya estamos habituados con TinyMCE, el editor clásico de WordPress.

Éstos aparecen directamente encima del bloque al seleccionarlo con el ratón.

Cambiar tipo de bloque

Un bloque de tipo lista sólo se puede convertir en un párrafo (Paragraph) o una cita (Quote).

Antes de realizar este cambio, hay que tener en cuenta cómo se comportará el contenido ya incluido en el bloque:

Cambiar una Lista a un bloque párrafo

Al convertir una lista en un párrafo, cada elemento de la lista se convierte en su propio bloque de párrafos individual.

Cambiar una Lista a un bloque de cita

Cuando se cambia de una lista a una cita, cada elemento de dicha lista, pasa a convertirse en un párrafo individual dentro de una única cita.

Lista Desordenada

Una lista desordenada, equivale a la etiqueta HTML <ul>.

Se utiliza cuando el orden de los elementos de la lista no importa o no afecta al significado de la lista.

Lista Ordenada

Crear una lista numerada u ordenada, es lo mismo que usar la etiqueta HTML <ol>.

Se utiliza cuando el orden de los elementos son necesario para comprender el significado de la lista, por ejemplo en un tutorial, receta, etc.

Reducir o añadir Sangría

Con las 2 opciones siguientes podrás crear listas más complejas añadiendo distintos niveles a los elementos.

Es ideal para facilitar visualmente la comprensión de listas complejos, añadiendo o reduciendo sangría para los subelementos de algún item superior por ejemplo.

Esta es una ventaja del nuevo editor Gutenberg para WordPress, ya que con el editor normal, sólo se podía conseguir este efecto pulsando la tecla tabulador.

Negrita, cursiva y tachada

Estas opciones también estaban disponibles en el editor clásico de WordPress, y se usan de la misma manera en Gutenberg.

Simplemente debes hacer clic en B para negrita, en I para cursiva, y en ABC para tachar el texto.

Enlaces

Como sabes, el icono de la cadena, permite añadir enlaces a nuestros textos.

Esta parte también funciona de la misma manera en Gutenberg que con el editor clásico:

Configuración Avanzada

Recuerda que para acceder a funciones de configuración avanzada, debes seleccionar el bloque que deseas editar y pulsar la opción de “Bloque” en la barra lateral derecha.

Ahí te aparecerán todas las opciones avanzadas disponibles para ese bloque en cuestión.

En el caso del bloque para listas, Gutenberg sólo dispone de una única opción de configuración avanzada.

Se trata de añadir una clase CSS adicional a esa lista para adaptarla al diseño de tu tema o añadir alguna función específica.

A diferencia del bloque párrafo, aquí no podrás cambiar ni el tamaño o color de fuente ni el color de fondo de las listas.


Columnas de texto

Ahora puede añadir el bloque ‘columna de texto’ para dividir el contenido en diferentes columnas hasta un máximo de 4 columnas por bloque.

Cada columna puede ser editada independientemente, lo que significa que ya no es necesario utilizar ningún plugin de shortcodes o maquetador visual para dar un aspecto más profesional a tus artículos.

Esto sin duda es una de las grandes mejoras que veremos con el nuevo editor de WordPress 5.0, sobre todo para usuarios principiantes o que no quieren depender de plugins con cientos de funciones sólo para esta finalidad.

Bloque columnas de texto en editor Gutenberg WordPress 5.0

Bloque botón wordpress 5.0 Gutenberg

Botones CTA

El bloque’ botones’ le permite agregar botones de llamada a la acción (‘Call to Action’) en cualquier parte de su contenido. Puede editar el texto del botón y vincularlo a cualquier página web.

Anteriormente, usted tendría que codificar sus botones CTA en su sitio WordPress, descargar un plugin de botones o usar una imagen con un hipervínculo para tener botones CTA personalizados.

Este cambio significa que será aún más fácil crear CTAs fuertes y beneficiosos en sus páginas y entradas de blog

Galería

Editor actual de WordPress
galeria editor wordpress
Nueva galería WordPress con editor Gutenberg
galeria gutenberg wordpress

Al igual que con la antigua galería de WordPress, con Gutenberg podrás elegir el número de columnas de imágenes que desees, sin embargo, el nuevo editor organiza sus fotos en un formato más fácil de usar y visualmente más atractivo.

Tablas

tablas gutenberg wordpress

Añada fácilmente tablas dentro de su contenido con el bloque “tablas”. También tienes la opción de aumentar el tamaño de la tabla y añadir filas y columnas como lo harías en Google Docs o Microsoft Word.

Imágenes de portada

imagenes gutenberg wordpress

Ahora tiene más opciones para cubrir imágenes. Puede hacer atractivas las imágenes de encabezado de post dentro de WordPress añadiendo texto a su imagen.

Además, puede utilizar la función URL para vincular su encabezado a otra página web y cambiar la alineación del texto en la imagen.

HTML

html gutenberg wordpress

En lugar de tener que editar toda la entrada de tu blog en HTML, ahora puedes editar bloques individuales.

Esto significa que ya no tendrá que desplazarse por cantidades interminables de código HTML para encontrar lo que está buscando.

Simplemente selecciona el bloque que deseas editar y haz clic en “Editar como HTML”.

Estas son las principales novedades con las que jugar en Gutenberg.

Hay una gama de otros bloques para probar y es probable que esta lista se amplíe en el futuro, así que mantenga sus ojos abiertos para nuevas adiciones!

Incrustar contenido (Embeds)

embed gutenberg wordpress

Ahora hay toda una serie de opciones de incrustación para aprovechar, por lo que añadir contenido externo es ahora más fácil que nunca! Simplemente elija un sitio e introduzca la URL, o añada el código de incrustación a un bloque.

Aparte de las opciones en la imagen de arriba, otros sitios o elementos que podrás incrustar directamente gracias a Gutenberg son:

  • YouTube
  • Twitter
  • Facebook
  • Instagram
  • Vimeo
  • Soundcloud
  • Spotify
  • Flickr
  • Tumblr
  • VideoPress
  • WordPress
  • WordPress.tv
  • Meetup.com
  • Dailymotion
  • Slideshare
  • TED
  • Reddit
  • Cloudup
  • CollegeHumor
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Mixcloud
  • Photobucket
  • Polldaddy
  • ReverbNation
  • Screencast
  • Scribd
  • Animoto
  • SmugMug
  • Speaker

Y la lista no termina ahí!

Ya hay una gran cantidad de opciones de incrustación en Gutenberg, sin embargo, si su sitio preferido no está en esta lista, vale la pena esperar a ver si estará en la versión completa del editor.

Plugins compatibles con Gutenberg

Este es uno de los principales temas que preocupan a la comunidad WordPress actualmente.

Y es que puede llevar algún tiempo hasta que todos los plugins sean totalmente compatibles con la nueva interfaz.

Por suerte, los creadores, desarrolladores y toda una legión de voluntarios de la comunidad WordPress están trabajando duro para que la mayoría de los plugins más populares y utilizados por los usuarios estén listos para el lanzamiento de la versión 5.0 y el nuevo editor Gutenberg.

Cómo desactivar el nuevo editor de WordPress llamado Gutenberg y volver a la versión anterior del editor clásico?

El editor Gutenberg será lanzado con WordPress 5.0. La fecha de lanzamiento sigue siendo desconocida, pero una vez que vea la luz, se aplicará en todas las webs y blogs que se gestionen con este CMS.

Por supuesto, WordPress 5.0 incluirá muchas otras características además del nuevo editor Gutenberg, pero sin duda, esta será la más destacada.

Como ya sabrás, siempre se recomienda mantener WordPress actualizado a la última versión, pero esta vez, si no has hecho las pruebas necesarias y te has asegurado que tu web es totalmente compatible, es mejor que esperes unos días hasta ver reacciones de otros webmasters.

Cómo desactivar el editor Gutenberg con el plugin Classic Editor para WordPress

Si es demasiado tarde, y ya has actualizado a la versión 5.0 de WordPress, aún puedes desactivar Gutenberg y volver al editor clásico (también conocido como TinyMCE).

Para ello, tendrás que descargar e instalar el plugin Classic Editor plugin.

¿Ya lo tienes? Actívalo como de costumbre y sigamos.

Al desactivar Gutenberg, tiene dos modos diferentes para elegir:

classic editor plugin WordPress

Alternar entre Gutenberg y Classic Editor

Esta es la opción por defecto.

Si quieres seguir usando el editor clásico de WordPress mientras aprendes cómo funciona Gutenberg, esta opción también es válida. Si seleccionas esta opción, podrás alternar entre un editor y otro a tu gusto según cada ocasión.

Cómo editar con Gutenberg

Para usar Gutenberg, simplemente haga clic en el título de una entrada/página, o utilice el enlace “Editar” o “Añadir nuevo”.

Es decir, haz lo mismo que siempre has hecho para crear o editar tu contenido, pero a partir de ahora, con el editor Gutenberg.

Cómo usar el editor clásico

Para usar el editor clásico, tendrás que hacer clic en el enlace “Editar (Clásico)” situado en la parte superior de la barra de administración.

Esta acción te llevará a la experiencia de edición anterior que ya conoces con el editor TinyMCE a la que estamos acostumbrado.

Desactivar Gutenberg y utilizar siempre Classic Editor

Para desactivar Gutenberg por completo y seguir utilizando el editor clásico por defecto debes ir a:

Ajustes > Escritura > Ajustes del editor clásico

Pulsa guardar cambios un poco más abajo y Gutenberg se desactivará por completo.

Todas las pantallas de edición de posts y páginas se verán como hasta ahora en la versión 4.9 de WordPress o anteriores.

¿Esperabas algo más?

¡Olvídate! Eso es todo lo que tienes que hacer para seguir utilziando WordPress como hasta ahora.

¿Es aconsejable desactivar Gutenberg?

Ya no hay marcha atrás. Gutenberg es el futuro presente de WordPress.

Y es que esto no se va a quedar en la edición de posts y páginas, si no que con el tiempo, Gutenberg será empleado para editar y modificar también no sólo la estructura, si no también el aspecto y diseño de tus plantillas en WordPress.

Por este motivo, si tienes una web o blog en WordPress, tarde o temprano tendrás que hacer frente al nuevo editor Gutenberg y es por eso que te animo a que te familiarices con la nueva interfaz y comiences cuanto antes a utilizarla.

No obstante, está claro que no es tarea sencilla aprender WordPress de nuevo de un día para otro, y es por eso que espero que este mini tutorial para desactivar Gutenberg y volver al editor clásico de WordPress te sea de ayuda.

Documentación oficial y recursos para Gutenberg

Tienes toda la información acerca del editor Gutenberg para WordPress, en el repositorio oficial del proyecto en github, incluyendo el código, componentes y una guía sobre cómo contribuir con Gutenberg o si lo prefieres, también dispones de documentación oficial en WordPress.org

Si bien es un gran cambio para el editor que todos conocemos y amamos, es sin duda un paso en la dirección correcta para hacer que la plataforma sea de fácil acceso y fácil de usar. ¿Qué opinas?

Gutenberg tutorial en español: El próximo editor de WordPress

Video de Francisco Aguilera G.

Próximos pasos de Gutenberg en WordPress 5.0

A pesar de los desafíos, Gutenberg tiene un inmenso potencial para aquellos involucrados en la creación de la world wide web.

Tecnologías modernas para aplicaciones avanzadas: La API Rest

El editor Gutenberg es el primer proyecto que se incluirá en el core de WordPress que utiliza la API REST, recientemente fusionada.

Esta tecnlogía está cambiando la forma en que los desarrolladores construyen en WordPres y seguro que nos traerá muchas gratas sorpresas.

Una poderosa herramienta de diseño y desarrollo

Gutenberg pretende dar a los editores el poder de añadir y editar su contenido de forma intuitiva, pero al hacerlo, también se centra en dar a los desarrolladores herramientas para que todos crezcamos juntos.

Lo que antes requería un conjunto complejo de abstracciones usando shortcodes, widgets y metaboxes, ahora se puede hacer directamente en un bloque.

Pero eso no es todo, ya que además de los bloques de cara al usuario, Gutenberg y WordPress 5.0 ponen a disposición de los desarrolladores las herramientas necesarias para crear cualquier cosa que puedan imaginar.

Edición colaborativa

La individualidad y semántica de cada bloque es lo que hace que estén disponibles características como la revisión de la jerarquía de encabezados o titulares.

Pero lo más importante, es que esto también prepara el camino para una futura edición colaborativa, proporcionando a los editores herramientas más potentes para la edición y control del contenido.

Esto no estará disponible para el lanzamiento de Gutenberg en WordPress 5.0, pero está incluido en la hoja de ruta del proyecto Gutenberg a largo plazo.

El futuro del proyecto Gutenberg

El editor visual Gutenberg se encuentra aún en una primera fase de un plan más amplio que cuyo objetivo es modificar cómo se construyen y editan las páginas web en WordPress.

Con el tiempo, los bloques se convertirán en la base de la personalización y no se necesitarán temas como Divi o plugins como Elementor para construir webs y blogs con diseños elaborados y atractivos.

En el momento de escribir estas líneas, Gutenberg está actualmente disponible en versión beta (disponible para descarga como plugin en WordPress.org) y será el elemento clave de la próxima versión 5.0 de WordPres prevista para abril de 2018.

Entrevista a Matías Ventura sobre WordPress y el nuevo editor Gutenberg

Video de Mauricio Gelves para GoDaddy España

Esta versión ofrecerá una experiencia de edición y un modelo de contenido completamente renovados, con total compatibilidad para versiones anteriores, y la posibilidad de volver al Editor clásico con un solo clic.

La llegada del proyecto Gutenberg supondrá en cierto modo un peligroso, pero importantísimo paso adelante para la transformación y el futuro de WordPress.

Y es que el uso de los ya conocidos bloques de contenido permiten crear y editar contenido con mucho menos trabajo y mejores resultados.

Muchas de las cosas que el editor visual Gutenberg ya hace de forma nativa, requerirían hasta la fecha de shortcodes o HTML y CSS personalizado, dejando al usuario estándar de WordPress fuera de juego.

Con la llegada de WordPress 5.0, se creará una experiencia mucho más fluida y rápida no sólo para los que crean sitios web si no también para los editores que las llenan de contenido.

El plugin del editor visual Gutenberg ha hecho una entrada más que dramática en la comunidad WordPress, y es que ha sido un cambio de rumbo radical que para muchos parece muy nuevo.

Las posibilidades de mejora, son infinitas, pero como siempre, cualquier cambio es difícil.

Por suerte, el enfoque del proyecto Gutenberg como nuevo editor visual ha supuesto un gran impulso para el CMS que todos conocíamos.

Y lo ha hecho con una visión clara de quiénes deben ser los destinatarios:

Los millones de personas que crean y escriben sus propios sitios web utilizando WordPress y que son los principales beneficiarios de la misión de “democratizar la publicación”, lema que el proyecto Gutenberg ha adoptado desde el principio de sus días.

Pero la visión de Gutenberg es lo suficientemente amplia, y la ambición técnica lo suficientemente profunda, como para que todos nos beneficiemos de este salto al futuro.

Las capacidades de WordPress han crecido orgánicamente y lo siguen haciendo tras cada nueva actualización.

Y es que el nuevo editor visual de WordPress está rediseñando la generación de contenidos para alejarse de los shortcodes y del HTML en la que ya es sin duda la actualización más dramática desde el nacimiento del CMS más popular del mundo.

Prepárate para una nuevo WordPress, una nueva forma de pensar, un nuevo futuro.

Prepárate para el editor visual Gutenberg.

Gutenberg vs Page Builders

En los últimos años, varios plugins de Page Builder para WordPress han aparecido con éxito en el mercado:

Divi Builder, Beaver Builder, Elementor, Page Builder por SiteOrigin, Conductor, Themify Builder, Visual Composer y Thrive son sólo algunos de los más populares.

Millones de sitios web se han construido utilizando creadores de páginas.

Muchos temas exitosos se integraron con un creador de páginas o crearon los suyos propios. Por ejemplo, Avada y su Fusion Builder.

Los creadores de páginas redujeron las barreras de entrada al negocio de desarrollo de sitios web para diseñadores que no tenían conocimientos de codificación.

También aumentaron el número de usuarios de WordPress exponencialmente.

Todas estas son señales claras de que WordPress necesitaba su propio generador de páginas por defecto. Especialmente para proporcionar un estándar para los usuarios, sino también para los desarrolladores de temas y plugins.

He leído muchos artículos y notas sobre cómo Gutenberg afectará al mercado de los creadores de páginas.

La mayoría de la gente está de acuerdo en que Page Builders se quedará por un tiempo, después de que Gutenberg sea liberado. Porque Gutenberg no puede competir actualmente con sus características.

En mi opinión, no están viendo el panorama general y les faltan 4 puntos en particular:

Los constructores de páginas más pequeños se irán muy pronto. Los jugadores más grandes resistirán más tiempo, antes de ver una gran caída en los ingresos.

Después de eso, no tendrá sentido continuar desarrollando y apoyando sus productos.

O portarán sus características únicas a Gutenberg, o desaparecerán.

Esto sucederá en 4 etapas:

Etapa 1 – Resistencia

Cuando Matt Mullenweg anunció Gutenberg y el primer lanzamiento de BETA, la comunidad reaccionó con mucho drama. El drama continúa y yo personalmente creo que la resistencia al cambio es la razón principal de ello.

Algunos usuarios no quieren aprender una nueva interfaz y nuevas formas de hacer las cosas.

Algunos desarrolladores no quieren aprender ReactJS o JavaScript en general.

Muchos se quejan de UX, pero en mi opinión su juicio es ofuscado por el prejuicio.

Gutenberg es un trabajo en progreso. Se puede mejorar y se mejorará. Dar una revisión de 1 estrella después de darle sólo unas pocas horas (o minutos) de prueba es muy poco profundo.

La mayoría de los comentarios negativos parecen ser inmerecidos, porque todos los problemas que se han planteado pueden solucionarse y lo más probable es que se solucionen.

La gran mayoría de los usuarios, sin embargo, son silenciosos. Muchos probablemente ni siquiera saben lo que está pasando.

De +8000 instalaciones activas del plugin BETA de Gutenberg, sólo 415 usuarios han enviado un comentario hasta el momento. 203 de ellos lo calificaron como 1 estrella.

Muchos negocios de WordPress están trabajando duro para estar listos para el lanzamiento de Gutenberg (como nosotros).

Aquellos que no lo son, perderán la mayor oportunidad de ser relevantes, en la historia reciente de WordPress.

Todavía estamos en la Etapa 1, pero nos estamos acercando rápidamente a la Etapa 2.

Etapa 2 – Aceptación

Gutenberg, aunque todavía está en BETA, ya está creciendo más rápido en términos de características, que cualquier constructor de páginas comerciales.

Cada nueva versión trae muchas mejoras. No pasará mucho tiempo antes de que sea tan bueno como cualquier otro creador de páginas.

Algunos de los mejores desarrolladores de esta comunidad están trabajando en Gutenberg.

Un ejército de desarrolladores de código abierto pronto comenzará a publicar su contribución al desarrollo de Gutenberg también.

Crearán plugins para extenderlo. Ellos desarrollarán Temas construidos con Gutenberg en mente y veremos más recursos para desarrollar bloques Gutenberg personalizados.

Varios plugins de Gutenberg ya han sido lanzados y nuevos plugins son añadidos al repositorio de plugins de WordPress diariamente.

La primera plancha de calderas para los bloques Gutenberg es Create Guten Block de Ahmad Awais. Otras herramientas seguirán.

Durante esta fase, el número de revisiones positivas presentadas comenzará a ser igual al número de revisiones negativas. Ya estamos viendo muchos más comentarios positivos que hace unos meses. Por eso creo que estamos muy cerca de entrar en esta fase.

Etapa 3 – Adopción

Cuando Gutenberg sea finalmente lanzado, será casi tan bueno como la mayoría de los Page Builders comerciales.

Lo que sea que falte, será visto por los desarrolladores como una oportunidad para llenar un vacío.

Sin embargo, la mayor diferencia con los creadores de páginas comerciales será el nivel de integración que los principales plugins ofrecerán espontáneamente con Gutenberg.

Veo esto como la ventaja competitiva más grande.

Por ejemplo, nunca tuvimos el tiempo ni el deseo de ofrecer algún tipo de integración con ningún Creador de Páginas. El mayor nivel de integración que ofrecemos son los shortcodes.

Puede usarlos con cualquier creador de páginas, pero tiene que escribir los atajos en bloques de texto.

Tan pronto como Gutenberg ha sido anunciado, inmediatamente empezamos a pensar en la mejor manera de integrar GeoDirectory con Gutenberg.

Aquí puede ver una descripción de lo que estamos haciendo: GeoDirectory V2 Roadmap para la integración de Gutenberg.

No sólo creamos un bloque personalizado para cada uno de los elementos frontales de GeoDirectory. Hacemos posible diseñar y personalizar las plantillas de GeoDirectory, utilizando Gutenberg.

Estoy seguro de que muchos desarrolladores de WordPress están trabajando en esa dirección.

Después del lanzamiento de WordPress 5.0, Gutenberg se instalará por defecto en millones de sitios web.

La mayoría de los desarrolladores de plugins habrán creado bloques personalizados para cada bit de sus plugins, haciendo de Gutenberg el Constructor de Páginas más completo y deseable de todos.

Esto ocurrirá con bastante rapidez.

Etapa 4 – Dominación

1 año después del lanzamiento oficial de WordPress 5.0, los autores de la mayoría de los Page Builders menores habrán dejado de desarrollar sus plugins.

Gutenberg tendrá cientos si no miles de extensiones construidas por la miríada de desarrolladores que gravitan alrededor de WordPress.

Algunos serán excelentes, otros serán realmente malos. Algunos serán gratis, otros serán premium.

Una nueva economía crecerá alrededor de Gutenberg. Revitalizará la economía de WordPress, abriendo nuevas oportunidades para aquellos que son lo suficientemente inteligentes como para aprovecharlas.

En un par de años, sólo los fanáticos de los creadores de páginas comerciales seguirán usándolas, mientras que la gran mayoría de la comunidad se habrá cambiado a Gutenberg.

Porque ofrecerá mucho más y los constructores comerciales no podrán seguir el ritmo.

La caída de los ingresos obligará a sus propietarios a frenar su desarrollo y apoyo hasta que finalmente pierdan todas sus cuotas de mercado y desaparezcan.

La única forma de verlos sobrevivir es que usen su experiencia para construir lo que los usuarios quieran ver en términos de características premium de Gutenberg.

Noticias y novedades sobre el nuevo editor Gutenberg para WordPress 5.0

Para terminar os traigo algunos consejos rápidos para principiantes (Actualizado: Y no tan principiantes) sobre cómo usar Gutenberg, el nuevo editor de WordPress.

Antes de empezar, debes saber que en sus primeras versiones, Gutenberg no será un remplazo para los editores de texto enriquecidos, theme builders como Divi o constructures como el plugin Elementor.

Este nuevo editor, mejorará la experiencia de edición del editor que viene por defecto en WordPress, pero no será un remplazo para estos recursos… Aún.

Vamos allá:

La mayoría de estos consejos vienen de la mano de Joe Casabona (@jcasabona) y Zac Gordon (@zgordon), junto con las traducciones de Jose Angel Vidania (@JAVidania). Podéis ver toda la serie en los momentos de la cuenta de twitter de TutorialWP.

¡Muchas gracias por la visita!

No olvides compartir en las redes sociales

Añade el código de verificación que aparecerá en el comentario. Usa un nombre que puedas recordar para validar la tarea.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Sigue leyendo!