Gutenberg-Guía

Gutenberg WordPress: Tutorial para usuarios

Si está pensando en crear un sitio web con WordPress, probablemente haya oído hablar de Gutenberg . Gutenberg es el editor para WordPress, que fue lanzado con la versión 5.0. 

Desde la primera versión, se han añadido numerosas funciones al editor de bloques de WordPress, como la agrupación de bloques y los patrones de bloques. Pero la razón principal por la que Gutenberg es tan popular es que las entradas y las páginas se pueden editar de forma mucho más visual que con el editor estándar de WordPress.

Gutenberg WordPress: Tutorial para usuarios

Esta guía incluye:

  • Qué es Gutenberg
  • una guía completa de Gutenberg para desarrolladores
  • una breve lista de las diferentes características en Gutenberg

Y puedo prometerte una cosa ahora mismo: Después de esta guía sabrá cómo crear diseños profesionales para los sitios web tucon la ayuda de Gutenberg .

¡Por fin ha llegado WordPress 5.6!

La última versión de WordPress se centra en la maquetación y el diseño: un tema totalmente nuevo, opciones de maquetación adicionales para las entradas y las páginas, y patrones de bloques para todo el sitio web tu. Puede encontrar todos los detalles en la nota oficial de la versión y en la Guía de Campo de WordPress.

¿Qué novedades presenta el editor de bloques Gutenberg ?

Antes de sumergirnos específicamente en el tutorial de WordPress Gutenberg , echemos un vistazo a lo que es realmente Gutenberg . 

Gutenberg sustituye al editor TinyMCE y le permite utilizar bloques de contenido para añadir texto, imágenes y otros medios a sus publicaciones y páginas. El editor clásico de TinyMCE estaba basado en texto y limitaba a los nuevos usuarios que no tenían conocimientos de codificación. 

Aunque el conocimiento de HTML no era esencial para utilizar el editor clásico, a menudo había que entrar en la vista HTML para realizar cualquier cambio. De lo contrario, había que instalar un plugin aparte para añadir funciones sencillas como tablas o galerías de imágenes al sitio web tus.

Gutenberg WordPress: Tutorial para usuarios

Con Gutenberg puede diseñar el sitio web tuno con texto sino con imágenes. Con el editor de bloques de WordPress Gutenberg puedes añadir fácilmente bloques de contenido a tus páginas y entradas. Hay bloques para imágenes, para párrafos - y para casi cualquier otro elemento que desee tener en tus.

Gutenberg WordPress: Tutorial para usuarios

Gutenberg es ahora el editor de bloques por defecto de WordPress y viene con muchos bloques fuera debox . También puedes añadir plugins de WordPress que te proporcionen aún más bloques para incrustar fácilmente diversas funciones en las entradas y páginas de tu. 

Tutorial de WordPress Gutenberg

Cuando creas sitios web, nunca es mala idea simplificar tu flujo de trabajo. Gutenberg puede ahorrarte mucho tiempo. Así que ya es hora de que echemos un vistazo al editor de bloques de WordPress. En primer lugar, vamos a repasar juntos los aspectos básicos de Gutenberg.  

Cómo utilizar Gutenberg

  1. Cree una nueva entrada de blog en WordPress como de costumbre. 
  2. Haga clic en el signo azul más en la esquina superior izquierda. 
  3. Seleccione el bloque que desea incluir en su publicación. 
  4. Ajuste la configuración del bloque dentro del borrador de la entrada. 
  5. Reorganice los bloques de tuarrastrándolos y soltándolos.

¡Eso es todo! Sólo hace falta un poco más de explicación para entender cómo funcionan los bloques individuales, cómo personalizarlos y cómo agruparlos. A eso llegaremos en el resto de nuestro tutorial de WordPress Gutenberg . 

Manual detallado del editor de bloques Gutenberg 

Ahora que tenemos los fundamentos fuera del camino, vamos a sumergirnos en los detalles del Editor de Bloques de WordPress. Cuando se carga por primera vez la pantalla del editor de un sitioo de un post con Gutenberg , el editor parece bastante vacío, incluso más que el editor clásico, porque faltan las opciones del menú tradicional. Está bien. El primer paso es añadir algunos bloques. 

1. añadir bloques a su puesto

Para añadir un bloque a tu entrada, pulsa el signo más en la esquina superior izquierda del borrador de la entrada. Se superpone un nuevo bloque con un pequeño conjunto de opciones de menú. 

Nos centraremos primero en el menú principal y luego discutiremos cómo puede hacer más ajustes con el menú secundario.

Gutenberg WordPress: Tutorial para usuarios

Puede examinar los tipos de bloque o utilizar la barra de búsqueda para encontrar el tipo de bloque deseado. A continuación, añada un bloque introduciendo "/" y el tipo de bloque. Por ejemplo, si quieres añadir una imagen, debes introducir "/image".

Hay muchos bloques disponibles, entre ellos

  • Tacones
  • Imágenes
  • Titulares
  • Escuche
  • Tablas
  • Separador
  • Galería
  • Botones
  • Vídeos
  • Archivos de audio 

Si ha instalado plug-ins con bloques personalizados, también aparecerán en esta lista. 

También puede añadir un bloque haciendo clic en el signo negro más: Aparece cuando se pulsa en el borrador donde dice: "Escribe algo o toca para seleccionar un bloque". 

Gutenberg WordPress: Tutorial para usuarios

O puede seguir las instrucciones del texto y escribir "/" para seleccionar de una lista desplegable de opciones.  

Gutenberg WordPress: Tutorial para usuarios

2. reordenar los bloques de tu

Puedes mover los bloques con las flechas del propio bloque o pulsando los puntos entre las flechas, arrastrando y soltando los bloques hasta donde quieras que aparezcan.

Gutenberg WordPress: Tutorial para usuarios

Con el editor de bloques de WordPress, es mucho más fácil reorganizar el contenido de tuque con el editor clásico. No hay que preocuparse por romper el código porque toda la información sobre el contenido del bloque (incluyendo la fuente, el color y el tamaño) se mueve con el bloque. 

La facilidad para organizar los bloques de tues una de las mejores características del editor de bloques de Gutenberg . Se ahorra tiempo en arreglar el código roto y no hay que depender de copiar y pegar para hacer el trabajo.

3. ajustar la configuración del estilo tuBloques

El siguiente paso en nuestro tutorial de WordPress Gutenberg es conocer el menú de ajustes de estilo. En algunos casos, algunas opciones aparecen cerca del bloque cuando se hace clic en él. Por ejemplo, si está editando un bloque de párrafos, aparecerán algunas opciones familiares justo encima del bloque. 

Gutenberg WordPress: Tutorial para usuarios

Sin embargo, también aparece un menú secundario en la parte derecha sitiode la pantalla. Haga clic en la pestaña"Configuración".  

Gutenberg WordPress: Tutorial para usuarios

Las opciones de configuración del estilo que puede ajustar dependen del bloque. Por ejemplo, la configuración del bloque de párrafos es diferente a la del bloque de imágenes.

Gutenberg WordPress: Tutorial para usuarios

Con el menú de ajustes de estilo, puedes ajustar fácilmente los bloques de tus entradas. De nuevo, a diferencia del editor clásico, no tienes que preocuparte de hacer cambios en el pie de foto y estropear el formato del texto subyacente. 

Crear bloques reutilizables en el editor Gutenberg

Ahora llegamos a los consejos avanzados del tutorial de WordPress Gutenberg . Ahorra mucho tiempo y esfuerzo guardando bloques que puedes reutilizar en futuras entradas, páginas y otros sitios web de WordPress.

Gutenberg WordPress: Tutorial para usuarios

Los bloques reutilizables son útiles si tienes elementos que necesitan ser añadidos regularmente a un determinado sitioo tipo de entrada. 

Supongamos que escribes críticas de películas y tienes una tabla que muestra la clasificación de cada película en tu. El aspecto debe ser siempre el mismo, con un estilo específico y el mismo número de columnas y filas. Si crea un bloque reutilizable, puede ahorrar una cantidad considerable de tiempo al recrearlo para cada entrada. 

Guardar el estilo y los distintos atributos de los elementos también puede suponer un verdadero ahorro de tiempo para los botones. 

Digamos que necesitas el mismo CTA (Call to Action) en cada post que escribes. Para crear un botón reutilizable, empiece por el proceso típico de añadir un bloque de botones. Ajusta el estilo y el texto hasta que tenga el aspecto que deseas.  

Gutenberg WordPress: Tutorial para usuarios

A continuación, haga clic en los tres puntos del menú de bloques y seleccione Añadir a bloques reutilizables

Gutenberg WordPress: Tutorial para usuarios

Aquí puede dar un nombre a su nuevo bloque. 

Gutenberg WordPress: Tutorial para usuarios

Si quiere reutilizar este bloque, vaya al menú"Bloques habituales", cambie a la pestaña"Reutilizable" y seleccione el bloque guardado. 

Gutenberg WordPress: Tutorial para usuarios

También puede exportar bloques reutilizables para utilizarlos en otros sitios web. Basta con hacer clic en los tres puntos situados junto al bloque, seleccionar Exportar como JSON y descargar el archivo. 

Gutenberg WordPress: Tutorial para usuarios

A continuación, para añadir un bloque reutilizable exportado a otro sitio web de WordPress, vaya a la pestaña Reutilizable del menú Bloques y seleccione Gestionar todos los bloques reutilizables

Gutenberg WordPress: Tutorial para usuarios

Esto abrirá una sección de aspecto más tradicional en el WordPress Dashboarddonde podrá gestionar todos los bloques reutilizables que haya creado. 

Si ha guardado bloques reutilizables de otros sitios web, puede cargarlos haciendo clic en Importar desde JSON. Una vez hecho esto, debería poder acceder a ellos como siempre desde la pestaña Reutilizable del menú Bloques

Colocar los bloques de tuen grupos

El siguiente Pro Tip en nuestro tutorial de WordPress Gutenberg es sobre la agrupación de bloques. Si coloca dos o más bloques en un grupo, puede ajustarlos y manipularlos como si fueran un solo bloque. 

Por ejemplo, puede agrupar un bloque de llamada a la acción para redes sociales con un bloque que contenga iconos para compartir en redes sociales. También puedes agrupar un bloque de párrafos con un bloque de botones para crear un CTA estándar que puedes insertar al final de las entradas de tus. 

Para crear un grupo de bloques con el editor de bloquesGutenberg , seleccione todos los bloques que desee agrupar. A continuación, haga clic en el icono de la capa en la izquierda sitiodel pequeño menú superpuesto:

Gutenberg WordPress: Tutorial para usuarios

Aparece un nuevo menú con la inscripción"Transformar a", haga clic en Grupo. Eso es todo. Ahora puedes mover y ajustar estos bloques como si fueran uno solo. 

Todavía se pueden hacer cambios en la configuración de cada bloque individual. Por ejemplo, puede añadir texto a un bloque de párrafos y cambiar su aspecto. 

Si desea desagrupar los bloques, seleccione el grupo y luego haga clic en los tres puntos del menú de superposición. Desplácese hacia abajo y haga clic en Desagrupar.

Gutenberg WordPress: Tutorial para usuarios

Esta función también funciona con bloques reutilizables. Una vez agrupados los bloques, puede guardarlos como bloques reutilizables siguiendo el mismo procedimiento descrito anteriormente. 

Uso de patrones de bloques en el editor de bloques de WordPress

Con WordPress Block Patterns puedes crear y compartir diseños de bloques predefinidos. Con Block Patterns puedes crear diseños complejos con unos pocos clics de ratón.

Para acceder a los patrones de bloques, haga clic en el mismo signo más que utilizó para acceder al menú de bloques . Seleccione la pestaña Patrones

Gutenberg WordPress: Tutorial para usuarios

A primera vista, los patrones de bloques se parecen a los bloques reutilizables. Sin embargo, los patrones de bloques son lo más parecido a la posibilidad de crear páginas enteras en Gutenberg se acerca más. 

Los patrones de bloques te permiten añadir secciones de diseño completas a tus entradas o páginas con un solo clic. Son ideales si quieres crear y guardar un diseño para utilizarlo en varias entradas. 

El editor de bloques de WordPress viene con varios patrones ya hechos, incluyendo

  • varias columnas de texto
  • botones al lado del otro
  • cabeceras personalizadas
  • Citas con imágenes
Gutenberg WordPress: Tutorial para usuarios

Otra ventaja de los patrones de bloques es que permiten cambiar de tema más fácilmente. Dado que el formato de tuestá ligado a los propios bloques, no se ve afectado por otro tema. 

Si desea crear tusus propios patrones de bloques manualmente, esto requiere algunos conocimientos de programación. En el manual de desarrollo se denominan disposiciones de bloque predefinidas

La creación de patrones de bloques desde cero requiere el uso de la interfaz de programación de aplicaciones (API) de bloques. Sin embargo, el plugin Block Pattern Builder puede ayudar. 

Gutenberg WordPress: Tutorial para usuarios

Añadir bloques adicionales a Gutenberg

Antes de continuar con este tutorial de WordPress Gutenberg , debes saber que existen varios plugins que te permiten añadir aún más tipos de bloques al editor, entre ellos

  • Índice de contenidos
  • Listas de precios
  • Google Maps
  • Formularios de contacto

Existe un directorio oficial de bloques de WordPress donde puede encontrar y añadir bloques adicionales para Gutenberg . 

Gutenberg WordPress: Tutorial para usuarios

El plan original era crear un subdirectorio para los plugins de un solo bloque. En su lugar, el directorio actual es una subsección del directorio de plugins por defecto de WordPress con una lista de búsqueda de plugins basados en bloques. 

Edición completa del sitio web en Gutenberg

Por el momento, Gutenberg no permite todavía la edición completa del sitio web. Sin embargo, el equipo de desarrollo de WordPress está haciendo grandes progresos hacia este objetivo, entre otras cosas, añadiendo patrones de bloques. 

Actualmente existe una versión experimental del tema Twenty Twenty que utiliza la edición completa del sitio web y adopta la idea de un tema basado en bloques

Con el editor de bloques de WordPress, ahora puede crear diseños basados en bloques totalmente personalizados, pero sólo para las entradas y las páginas. Una vez que la edición completa del sitio web ha llegado a Gutenberg , los widgets se vuelven redundantes. Esto ofrece a los usuarios un control completo sobre cada elemento de diseño, incluyendo cabeceras, barras laterales y pies de página. 

Aunque el editor de bloques de Gutenberg todavía no es un constructor de páginas de WordPress completo, está en camino de convertirse en uno. Mientras tanto, los patrones de bloques, como se explica en el tutorial de bloques de WordPress Gutenberg , ofrecen una gama de funciones muy cercana a la de un editor de sitios web completo. 

Desventajas del editor Gutenberg 

Aunque Gutenberg es una herramienta útil que ha cambiado la forma en que muchos usuarios interactúan con WordPress y crean contenidos, el editor no está exento de inconvenientes. 

Por ejemplo, cuando se introdujo Gutenberg , era bastante propenso a errores. La mayor parte se ha arreglado entretanto. 

Sin embargo, algo que no es un error es el hecho de que Gutenberg sigue siendo incompatible con muchos temas. Así que si quieres usar un tema en particular y te gusta el diseño, es probable que no puedas personalizarlo o usar Gutenberg en él. Si lo intentas, el resultado suele ser simplemente un desastre. 

Bueno, Gutenberg es compatible con algunos temas, pero no lo suficiente como para presumir de una compatibilidad generalizada. 

Otro problema que aporta Gutenberg es que no ofrece la misma flexibilidad que el editor clásico. Por supuesto, Gutenberg elimina algunos de los problemas de formato idiosincrásicos que se producen con el editor clásico, pero desgraciadamente está limitado en los tipos de páginas que puede crear. 

Como las opciones de personalización de temas más amplias aún no están disponibles en Gutenberg , tendrás que conformarte con los temas compatibles con Gutenberg y con los bloques y plugins de bloques disponibles. 

Los recursos disponibles para el uso de Gutenberg están creciendo a un ritmo constante - pero esto no hace que Gutenberg sea un constructor de temas. Todavía no. 

En definitiva, Gutenberg es la opción ideal para quienes ya están acostumbrados a los constructores de páginas o a los editores puramente visuales y quieren mantener esa experiencia, o para quienes sólo quieren centrarse en el contenido y hacer el diseño arrastrando y soltando. 

Reflexiones finales: Guía de WordPress Gutenberg 

El editor Gutenberg es ahora parte del núcleo de WordPress. El equipo de desarrollo de WordPress tiene grandes planes para él. Con el tiempo podrá crear menús de navegación con Gutenberg , crear diseños completos de sitios web y Gutenberg será compatible con aún más temas. 

Hasta entonces, puede aprovechar al máximo las funciones que ofrece actualmente el editor de bloques de WordPress y crear entradas y páginas visualmente atractivas, sin saber una sola línea de código. Un buen trato, si nos preguntas. 

Así que adelante: utilice los consejos de nuestro tutorial de WordPress Gutenberg y empiece a personalizar el contenido del sitio web tus. Y asegúrese de que el sitio web tufuncione a una velocidad óptima con un plan de alojamiento de sitios web de WordPress de Raidboxes con una velocidad óptima. 

WordPress Gutenberg Editor: tuPreguntas

¿Qué te parece el editor de WordPress Gutenberg ? ¿Qué preguntas tienes para Maddy? No dude en utilizar la función de comentarios. ¿Quieres más consejos sobre WordPress? Entonces síganos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.