GUTENBERG WordPress, El Editor Definitivo [+TIPS]

¿Te gustaría editar contenidos de manera sencilla en tu página web, blog o tienda online? ¿Has oído hablar de Gutenberg, el nuevo editor de texto de WordPress, pero desconoces cómo funciona y cómo sacarle el máximo partido? ¿Buscas Gutenberg blocks para mejorar la funcionalidad de Gutenberg? ¡Estás en el sitio correcto! Gutenberg es el editor de WordPress que te permite simplificar la edición web para crear espacios de calidad gracias a su sistema de bloques. Supongo que eres consciente de la importancia que tiene hoy en día para tu negocio estar en la red. En esta guía te explicamos qué es Gutenberg, el nuevo editor de WordPress (y definitivo).

Gutenberg te va a permitir crear y gestionar contenido para tu web de manera sencilla e intuitiva, sin necesidad de tener conocimientos de lenguaje ni códigos de HTML. Con este editor vas a poder diseñar tu web utilizando bloques o secciones, que pueden ser de diversos tipos: desde textos, imágenes, botones, tablas hasta widgets. Con este nuevo editor de texto lograrás un diseño mucho más visual y atractivo para captar la atención del lector combinando los elementos que ofrece en cada uno de los bloques que te proporcionan la posibilidad de personalizar tu post. Si quieres ser original en tus publicaciones, presta atención a toda la información.

Qué es el editor Gutenberg, cómo funciona y para qué sirve

Gutenberg el editor de WordPress que permite construir y publicar páginas web de modo rápido y sencillo. Se trata, por tanto, de una herramienta que pretende revolucionar toda la experiencia de publicación en Internet tanto como Gutenberg lo hizo con la palabra impresa. El objetivo del editor es simplificar el diseño web para todos los usuarios, haciendo el contenido mucho más visual para llegar más rápido a la atención del público objetivo siguiendo las tendencias de diseño web.

La herramienta de diseño Gutenberg permite dar un nivel estético y personalizado a tu contenido web a través de los bloques que ofrece, permitiendo combinar texto con imágenes o videos, añadiéndole siempre un toque único.

Gutenberg introduce en WordPress una nueva funcionalidad: la edición por bloques. Este sistema de edición consiste en ir añadiendo contenido por secciones o tipología de contenido. Esta herramienta significa un gran avance para WordPress, ya que acerca la posibilidad de crear contenido web a todo usuario añadiendo esencia al mismo mediante la utilización de las diversas secciones que ofrece, sin necesidad de contar con conocimientos profundos sobre diseño web. Puedes olvidarte de los complejos códigos de diseño y programación para darle personalidad a tu contenido de manera sencilla.

Ventajas del editor de texto Gutenberg para WordPress

El nuevo editor de texto Gutenberg de WordPress ha venido para quedarse debido a las ventajas que ofrece a todo usuario independientemente de su nivel de conocimiento en creación de contenido. Estos son los principales beneficios de este editor que te permitirán sacarle el máximo partido a tu página web y a tu estrategia de marketing de contenidos.

• Sencillez: Todos estamos de acuerdo en que la principal ventaja de Gutenberg es la sencillez de uso. Independientemente de si acabas de crear un blog o llevas años trabajando en él, con el nuevo editor conseguirás ese rediseño web profesional que tanto tiempo llevas esperando conseguir. A diferencia de otros maquetadores, Gutenberg no necesita código HTML para proporcionar un resultado rápido y eficaz para captar a más leads.
• Limpieza: Seguro que en alguna ocasión has comprado una plantilla multiusos WordPress y te has visto en medio de miles de configuraciones y procedimientos complejos de difícil entendimiento, ¿verdad? Con Gutenberg eso no sucede porque se trata de un editor muy visual y limpio en el que todos los elementos se encuentran ordenados para facilitar el diseño y la actividad al usuario. No tendrás de qué preocuparte porque podrás encontrar cada herramienta fácilmente.
• Variado: Gutenberg está compuesto por una amplia variedad de bloques para adaptarse a las diversas temáticas de cada página web. Gracias a ello podrás crear contenido muy visual, variado y atractivo para tu lector. Además todos ellos reciben una denominación sencilla y son muy intuitivos con el objetivo de que el usuario no tenga que consultar su funcionamiento.
• Compatible con dispositivos móviles o tablets: Cuando pensábamos que todavía no podía haber algo mejor. ¡Vemos que es compatible con los dispositivos electrónicos! El editor de texto de Gutenberg funciona perfectamente desde cualquier dispositivo móvil o tablet, lo que supone una gran ventaja a la hora de poder crear o editar contenido si no se tiene un ordenador a mano. Un problema muy habitual que forma parte de los pasos después de publicar un artículo es encontrarse con una pequeña falta de ortografía. Con Gutenberg podrás corregirlo rápidamente sin problemas.

Partes más importantes del editor Gutenberg de WordPress

Después de crear una nueva entrada en WordPress, te aparecerá una pequeña presentación de la herramienta Gutenberg con un mini tutorial de lo que significan los bloques de este editor. Una vez abierto el editor, solo queda comenzar a escribir y desarrollar tu publicación. El editor Gutenberg de WordPress cuenta con tres secciones principales que te presentamos a continuación.

• Sección del contenido: Es el área donde debes introducir el contenido de tu publicación. Para comenzar, debes elegir un título para tu post, el cual aparecerá en el primer bloque. Por defecto, el nuevo editor Gutenberg añade bloques cada vez que marques la tecla “intro”. Una vez creado un determinado bloque, puedes acceder a la barra de herramientas (Nº 2) que aparece en el lateral superior izquierdo. Cada tipo de bloque cuenta con sus propias herramientas para editarlo.
• Barra de herramientas: Situada en el margen superior izquierdo. Está compuesta por un botón + (donde tienes todos los tipos de bloques que puedes ir añadiendo a tu publicación según el diseño que quieras darle), el lápiz (para la selección y edición de bloques), las opciones de deshacer y rehacer (para editar el contenido, según quieras eliminar un cambio o volver a visualizar un cambio eliminado), la estructura del contenido (para ver el resumen cuantificado de tu publicación, en cuanto a palabas, encabezados, párrafos y bloques) y la navegación de bloques o resumen de los tipos de bloques empleados en tu contenido.
• Margen derecho: Dentro del mismo se encuentra la barra de herramientas básicas de tu contenido, que incluye las mismas funciones que el editor clásico, en dos partes desplegables “Documento” y “Bloque”, con sus respectivas opciones despegables. En la barra de «Documento” puedes ver la configuración completa de tu publicación (añadir pantallazo de esta sección). En el área llamada “Bloque”, puedes personalizar la configuración del bloque que selecciones, en función del tipo de bloque que corresponda, tendrás diferentes alternativas de edición y personalización. (añadir pantallazo de esta sección).
• Margen superior derecho: Situada junto a la barra de ajustes del contenido, se encuentran las siguientes funciones: guardar como borrador, visualización previa de la publicación y modificación del código HTML si conoces su funcionamiento y estructura.

Cambiaría el orden de numeración, siendo 1. Área de contenido; 2. Barra de herramientas (margen superior izquierdo, ya que es en esta sección donde puedes seleccionar el bloque que quieras añadir;  y 3. Barra de ajustes del contenido (para editar el documento o el bloque una vez creado el contenido).

Cómo instalar Gutenberg en tu WordPress correctamente

Para instalar el editor de texto Gutenberg debes contar con la versión 5.0 de WordPress (o sucesivas). Su instalación es muy sencilla, ya que este editor ya viene incluido en las versiones de WordPress que te acabo de mencionar, por lo que únicamente tienes que activarlo. A continuación, te indicamos los pasos a seguir para poder instalar el editor Gutenberg en WordPress:

• El primer paso siempre es hacer una copia de seguridad de tu instalación WordPress para que, si hay algún problema durante la instalación, no pierdas el contenido ya creado en el editor clásico predeterminado de WordPress.
• Actualiza la versión de tu WordPress a la 5.0 en adelante.
• Instalada la versión debida de WordPress, el editor Gutenberg será el predeterminado para comenzar a trabajar, por lo que ¡ya puedes comenzar a utilizar el editor Gutenberg!

Bloques y widgets del editor de WordPress Gutenberg

Los bloques del editor de texto Gutenberg tienen por objetivo hacerte más fácil la labor de escritura y diseño de tus contenidos. Te permiten introducir diferentes diseños, combinando textos, imágenes, vídeos y muchos más elementos de manera sencilla. A continuación te explicamos un poco más en profundidad cada uno de ellos.

Bloques de texto del editor de Wordpress Gutenberg:

Como puedes observar en la barra que aparece a la izquierda de tu contenido, esta herramienta permite darle distintos estilos a tu texto. Tienes las siguientes opciones:

• Escribir por párrafos.
• Añadir encabezados a tu texto.
• Hacer un listado.
• Citas: añadir citas de autores.
• Introducir códigos.
• Volver al editor clásico.
• Añadir un estilo preformateado.
• Incluir un párrafo de cita.
• Insertar una tabla.
• Introducir estilo de un verso.

Bloques de medios del editor de WordPress Gutenberg

En esta sección puedes añadir a tu publicación contenido diferente al texto escrito al que nos referíamos anteriormente, añadiendo los siguientes elementos:

• Imágenes, a las que puedes añadir una descripción.
• Galería de imágenes.
• Un audio determinado que acompañe y añada valor al contenido de tu texto.
• Fondo y escribir sobre él para darle a tu post un atractivo visual.
• Archivo descargable para el lector.
• Combinar en un mismo bloque los medios con tu texto.
• Vídeos.

Bloques de diseño del editor de WordPress Gutenberg

Con esta herramienta puedes jugar con el estilo de tu publicación utilizando los siguientes elementos:

• Botones, para animar a los visitantes a que realicen alguna acción.
• Columnas, añadiendo contenido en varias columnas dentro de un mismo bloque.
• Grupo: un bloque que agrupa otros bloques.
• Más (leer más).
• Salto de página: separa el contenido en varias páginas.
• Separador horizontal, para separar ideas.
• Espaciador, para personalizar los espacios entre bloques.

Bloques incrustados del editor de WordPress Gutenberg

En esta sección, Gutenberg te ofrece multitud de opciones para añadir a tu contenido desde fuentes externas como pueden ser tus Redes Sociales, las cuales puedes seleccionar a través de su logo correspondiente. Esta opción que ofrece Gutenberg, te permite crear el contenido dinámico y visual que vengo resaltándote en toda esta guía. A continuación, te proponemos algunos ejemplos de herramientas desde las cuales puedes incrustar contenido:

• Incrustado de otras fuentes.
• Twitter.
• YouTube.
• Facebook.
• Instagram.
• WordPress.
• Spotify.
• Flickr.
• Vimeo.
• Sundcloud.

Widgets del editor de WordPress Gutenberg

Con esta opción, Gutenberg te va a permitir añadir multitud de widgets a tu publicación de manera muy sencilla. Únicamente debes seleccionar el widget que deseas incluir en tu contenido, de entre las siguiente opciones:

• Shortcode: para incluir y ejecutar contenido de otro script.
• Archivos: este widget permite mostrar archivos por meses.
• Calendario de las entradas de tu web.
• Categorías: muestra un listado de las categorías.
• HTML personalizado: para añadir código personalizado de HTML y visualizarlo mientras lo editas.
• Últimos comentarios: para mostrar una lista de tus comentarios.
• Últimas entradas: muestra listado de tus entradas recientes.
• RRSS: muestra entradas de cualquier red social.
• Buscar: para facilitar a tus visitantes la búsqueda de contenido.
• Iconos sociales: para enlazar y redirigir a tus lectores hacia tus redes sociales.
• Nube de etiquetas: muestra una nube de tus etiquetas más utilizadas.

Preguntas frecuentes sobre el nuevo editor de WordPress Gutenberg

A la hora de utilizar y crear elementos con el editor Gutenberg debes tener en cuenta una serie de pautas como, por ejemplo, el hosting, la plantilla y el dominio de tu WordPress. Normalmente cuando se utiliza este editor por primera vez suelen surgir muchas dudas y preguntas que a veces no tienen fácil respuesta. Por ello, después de muchos años utilizando este tipo de servicios, hemos juntado algunas preguntas frecuentes que nos suelen hacer amigos, conocidos y clientes a la hora de utilizar el editor Gutenberg de WordPress:

¿Con qué plugins es compatible el editor de Gutenberg?

Solamente con algunos. Al principio presentaba bastantes problemas en este sentido siendo incompatible con los mejores plugins de WordPress como, por ejemplo, Yoast SEO, All in One SEO Pack, Jetpack, NextGen Gallery o SiteOrigin Panels. No obstante, actualmente son muchos los plugins con los que el editor Gutenberg presenta compatibilidad, es decir, los que el usuario puede seguir utilizando mientras Gutenberg está activo.

Nuestro consejo es que compruebes la compatibilidad del plugin que deseas utilizar en el directorio de plugins de Wordpress.org, buscando el mismo por su nombre. Puedes encontrar la etiqueta «Tested with» en el directorio de plugins de WordPress.org buscando en el nombre de tu plugin. En caso de encontrar alguna incompatibilidad, te proponemos que lo notifiques al equipo de WordPress para que lo tengan en consideración para futuras versiones.

¿Cómo es la experiencia de escritura en Gutenberg?

Muy buena. La principal ventaja que presenta Gutenberg es, como te hemos indicado anteriormente, el diseño por bloques. Con ellos el editor te permite ir añadiendo contenido de diferentes estilos, combinar texto con imágenes, vídeos…y todos los tipos de bloque que te he comentado en esta guía, lo que hará tu publicación mucho más atractiva y personalizada.

La escritura puede ser tan sencilla como comenzar tu publicación con un texto e ir añadiendo los elementos que prefieras y consideres más adecuados al contenido que deseas obtener, bien simplemente utilizando la tecla intro para cambiar de bloque o dirigirte a la barra de herramientas superior izquierda, y elegir el tipo de bloque que deseas añadir. En definitiva, Gutenberg permite crear contenido limpio, muy visual y de forma sencilla.

¿Funcionará Gutenberg en mi sitio web?

Depende de tu hosting. Gutenberg puede presentar ciertas incompatibilidades con ciertos sitios web. Nuestra recomendación es que lo pruebes, siempre guardando antes de instalarlo una copia de seguridad de tu contenido. Si es incompatible, tiene solución. Solamente debes volver a activar el editor clásico predeterminado, una vez lo hayas descargado, dirígete a «Ajustes de escritura > Editor clásico predeterminado» de las dos opciones que verás en “Editor predeterminado para todos los usuarios”,  y guardar los cambios.

¿Gutenberg permite la edición front-end como un maquetador visual?

No. Por el momento, Gutenberg no permite modificar el contenido directo de la página web. Es cierto que esta herramienta está avanzando rápidamente, pero en este sentido, aún es necesario dirigirte a “vista previa” para ver cómo quedaría el diseño creado en tu página web.

¿Cuándo reemplazará Gutenberg al editor clásico de WordPress?

Gutenberg no reemplaza aún al clásico editor predeterminado de WordPress. Esta es otra de las ventajas de este editor, ya que al permitirte optar por utilizarlo o no, podrás seguir editando contenidos creados con anterioridad a tu instalación de Gutenberg. Así, podrás utilizar ambos editores según la publicación que desees crear o editar, según sea antigua o más reciente.

¿Qué pasa con el contenido ya publicado fuera de Gutenberg?

No se perderá. Al instalar la nueva versión de WordPress, como ya te he contado, el editor Gutenberg será el predeterminado. Pero esto no afectará al contenido ya creado en esta herramienta, siempre que hayas guardado una copia de seguridad. No obstante, si quieres editar alguna publicación anterior a la nueva versión instalada de WordPress, debes activar el editor clásico anterior siguiendo los pasos que ya te hemos indicado.

¿Cómo puedo hacer la copia de seguridad antes de cambiar la versión de Wordpress?

Haciendo una copia del contenido. Antes de hacerte con la nueva versión de WordPress para comenzar a utilizar el editor Gutenberg, deberías hacer una copia de todos los elementos que hayas creado con anterioridad. Para realizar tu copia de seguridad, WordPress ofrece plugins o backups programados, los cuales puedes subirlos directamente a Dropbox o Google Drive. Igualmente, para hacer una copia de tus archivos en WordPress, simplemente necesitarás un programa de FTP como FileZilla o Coda.

¿Cómo se puede desactivar Gutenberg para volver al editor clásico?

Como te hemos contado antes, la instalación del editor Gutenberg no supone el fin del clásico editor de WordPress. Si ya te descargaste la versión 5.0 de WordPress o sucesivas, puedes volver a su uso acudiendo al repositorio de WordPress e instalar el plugin del editor clásico, en la siguiente dirección: https://wordpress.org/plugins/classic-editor/ ; una vez lo hayas instalado, debes dirigirte a «Ajustes de escritura > Editor clásico» de las dos opciones que verás en “Editor predeterminado para todos los usuarios” y guardar los cambios.

¿Es aconsejable desactivar Gutenberg?

No te lo aconsejamos. Gutenberg ha venido para quedarse y, aunque actualmente pueda combinarse con el editor clásico de WordPress, en el futuro todas las plantillas de WordPress funcionarán con este editor. ¿Nuestro consejo? Aprovecha que aún puedes seguir combinando ambos editores, el clásico y el nuevo, trabaja con el clásico si lo prefieres, pero aprende y crea todo lo que puedas con Gutenberg.

Mejores plugins de bloques para el editor Gutenberg de WordPress

El editor de Gutenberg, como has comprobado, es un nuevo paradigma dentro de WordPress. Desarrolladores y creativos han comenzado a diseñar plugins de bloques para conseguir que todos los usuarios, independientemente de su conocimiento y sus necesidades, puedan crear un espacio de modo sencillo. La mayor parte de las herramientas se caracterizan por su ligero peso y por las posibilidades de configuración. Para que tú mismo puedas comprarlo he elaborado una lista de los mejores plugins de bloques para el editor de Gutenberg:

Kadence Blocks

Kadence Blocks es un plugin de bloques para Gutenberg que se caracteriza por su óptimo funcionamiento. La herramienta contiene la mayor parte de los bloques más utilizados en WordPress (filas, pestañas, galerías, formularios e iconos) para añadir más funcionalidades al editor de contenidos. El complemento permite crear diseños personalizados para conseguir un estilo propio y desactivar los restantes para que no ocupen espacio en la página.

Genesis Blocks

Genesis Blocks es un plugin de bloques para el editor Gutenberg de carácter gratuito. La herramienta nació para sustituir al Atomic Blocks, una colección de bloques que existía hace años y que desde hace un tiempo forma parte de StudioPress. Durante unos meses ambas estarán disponibles para el usuario. La única diferencia reside en el nombre los bloques y clases que utilizan. Destaca especialmente su capacidad de personalización, sus diseños y su buen funcionamiento.

Características

• Integración con Genesis Framework: Genesis Blocks está diseñado para trabajar de manera perfecta con el Genesis Framework, lo que garantiza una integración perfecta y un rendimiento óptimo cuando se utiliza con temas de StudioPress y otros temas de Genesis.
• Bloques Pre-diseñados: Ofrece una amplia variedad de bloques pre-diseñados que pueden ser fácilmente personalizados y utilizados para construir diseños complejos sin necesidad de conocimientos de codificación. Estos bloques incluyen secciones de contenido, testimonios, llamadas a la acción, listas de precios, y más.
• Flexibilidad de diseño: Genesis Blocks proporciona un alto grado de flexibilidad en términos de diseño, permitiendo a los usuarios crear diseños personalizados mediante la combinación de diferentes bloques y ajustando las opciones de estilo para que coincidan con la identidad de marca del sitio web.
• Optimización para la velocidad: Está optimizado para la velocidad y el rendimiento, asegurando que los sitios web construidos con Genesis Blocks carguen rápidamente y ofrezcan una experiencia de usuario fluida.

Planes de precios

• Essential ($20/Mes).
• Core ($400/Mes).
• Enterprise ($2000/Mes).

Stackable

Stackable es el plugin de Gutenberg que más bloques proporciona para crear una página. Actualmente pone a disposición del usuario 26 tipos que continúan incrementándose. La herramienta ofrece controles en las secciones, en los fondos y en la personalización para móviles. También destaca la diversidad de opciones versátiles de imagen y color para crear un diseño en concordancia con la imagen corporativa.

Características

• Diseño moderno y atractivo: Stackable ofrece una amplia variedad de bloques con diseños modernos y atractivos que pueden ser fácilmente personalizados para adaptarse a las necesidades de diseño de cualquier sitio web.
• Gran variedad de bloques: Stackable incluye una amplia gama de bloques, que van desde bloques de diseño básico como columnas y encabezados hasta bloques más avanzados como testimonios, galerías, contadores, y mucho más.
• Bloques de secciones Pre-diseñadas: Además de bloques individuales, Stackable ofrece bloques de secciones pre-diseñadas que permiten a los usuarios crear diseños complejos y atractivos con facilidad.
• Opciones de estilo avanzadas: Stackable proporciona numerosas opciones de estilo para cada bloque, lo que permite a los usuarios personalizar fácilmente la apariencia de los elementos en su sitio web, incluyendo colores, fuentes, espaciado y más.

Planes de precios

• Personal ($49/Año).
• Business ($99/Año).
• Agency ($149/Año).

Conclusión: Comienza a editar con Gutenberg en tu página web

Como has podido comprobara lo largo de esta guía, utilizar el nuevo editor de texto Gutenberg de WordPress es casi una obligación por las muchas ventajas que ofrece y que se acabarán convirtiendo en las favoritas de todo usuario. Gutenberg proporciona un gran abanico de posibilidades para todo aquel que quiera iniciarse en el diseño de páginas web, poniendo a tu alcance la combinación de multitud de herramientas y diseños que puedes añadir a tu publicación.

A diferencia de otros editores, Gutenberg garantiza su sencillez a la hora de editar y crear contenido, gracias a su funcionalidad mediante bloques. No le tengas miedo a este nuevo editor, ya que son mayores las ventajas que presenta que sus inconvenientes. Con él lograrás personalizar tus publicaciones, insertar los elementos que se adapten a tu contenido y jugar con imágenes o vídeos para hacer tu publicación más atractiva. Gutenberg ha llegado para quedarse, por lo que cuanto antes lo domines mejor para tu web.

¿Qué te ha parecido esta guía sobre el nuevo editor de texto Gutenberg para Wordpress? ¿Te hemos animado a comenzar a sacarle partido a esta herramienta? ¿Quieres contar tu experiencia? ¿Crees que nos hemos dejado algo por el camino? ¿Te has quedado con alguna duda o pregunta? Entonces te pedimos que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero nos alegraremos mucho de leerlo y responderlo.