Si estás pensando en crear un sitio web con WordPress, probablemente hayas oído hablar de Gutenberg . Gutenberg es el editor para WordPress, que se lanzó 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.

Esta guía incluye:

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

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

¿Qué hay de nuevo en 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 te permite utilizar bloques de contenido para añadir texto, imágenes y otros medios a tus 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 tenías que entrar en la vista HTML para hacer cualquier cambio. De lo contrario, tenías que instalar un plugin aparte para añadir funciones sencillas como tablas o galerías de imágenes al sitio web tus .

Con Gutenberg puedes diseñar el sitio web tu no 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 quieras tener en el sitio web tus .

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 fundamentos de Gutenberg.  

Cómo utilizar Gutenberg

1. Crea una nueva entrada de blog en WordPress como de costumbre. 
2. Haz clic en el signo azul más en la esquina superior izquierda. 
3. Selecciona el bloque que quieres incluir en tu publicación. 
4. Ajusta la configuración del bloque dentro del borrador del post. 
5. Reorganiza los bloques de tu arrastrá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 sobre WordPress Gutenberg . 

Manual detallado del editor de bloques Gutenberg 

Ahora que ya tenemos lo básico, vamos a sumergirnos en los detalles del Editor de Bloques de WordPress. Cuando cargas por primera vez la pantalla del editor de un sitio o 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. No pasa nada. El primer paso es añadir algunos bloques. 

1. añade bloques a tu entrada

Para añadir un bloque a tu publicación, pulsa el signo más en la esquina superior izquierda del borrador de la publicación. 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 puedes hacer más ajustes con el menú secundario.

Puedes navegar por los tipos de bloque o utilizar la barra de búsqueda para encontrar el tipo de bloque deseado. A continuación, añade un bloque introduciendo "/" y el tipo de bloque. Por ejemplo, si quieres añadir una imagen, introducirías "/imagen".

Hay muchos bloques disponibles, entre ellos

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

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

Alternativamente, puedes añadir un bloque haciendo clic en el signo más negro: Esto aparece cuando haces clic en el borrador donde dice: "Escribe algo o toca para seleccionar un bloque". 

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

2. reorganiza los bloques de tu

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

Con el editor de bloques de WordPress, es mucho más fácil reorganizar el contenido de tu que con el editor clásico. No tienes que preocuparte de 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 con la que puedes organizar los bloques de tu es una de las mejores características del editor de bloques de Gutenberg . Ahorras tiempo en arreglar el código roto y no tienes que depender de copiar y pegar para hacer el trabajo.

3. ajusta la configuración del estilo tu Bloques

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

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

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

Con el menú de Configuración 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. 

Crea bloques reutilizables del Editor Gutenberg

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

Los bloques reutilizables son útiles si tienes elementos que deben añadirse regularmente a un determinado sitio o tipo de entrada. 

Supongamos que escribes críticas de películas y tienes una tabla que muestra la clasificación tu de cada película. Esto debería tener siempre el mismo aspecto, con un estilo específico y el mismo número de columnas y filas. Si creas un bloque reutilizable, puedes 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 la misma CTA (llamada a la acción) en cada post que escribes. Para crear un botón reutilizable, empieza por seguir el proceso típico de añadir un bloque de botones. Ajusta el estilo y el texto hasta que tenga el aspecto que deseas.  

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

Aquí puedes dar un nombre a tu nuevo bloque. 

Si quieres reutilizar este bloque, ve al menú"Bloques normales", cambia a la pestaña"Reutilizable" y selecciona el bloque guardado. 

También puedes exportar bloques reutilizables para utilizarlos en otros sitios web. Sólo tienes que hacer clic en los tres puntos que hay junto al bloque, seleccionar Exportar como JSON y descargar el archivo. 

Luego, para añadir un bloque reutilizable exportado a otro sitio web de WordPress, ve a la pestaña Reutilizable del menú Bloques y selecciona Gestionar todos los bloques reutilizables. 

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

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

Coloca los bloques de tu en grupos

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

Por ejemplo, puedes agrupar un bloque de llamada a la acción en 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 , selecciona todos los bloques que quieras agrupar. A continuación, haz clic en el icono de la capa en la izquierda sitio del pequeño menú superpuesto:

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

Todavía puedes hacer cambios en los ajustes de cada bloque individual. Por ejemplo, puedes añadir texto a un bloque de párrafos y cambiar su aspecto. 

Si quieres desagrupar bloques, selecciona el grupo y luego haz clic en los tres puntos del menú de superposición. Desplázate hacia abajo y haz clic en Desagrupar.

Esta función también funciona con bloques reutilizables. Una vez que hayas agrupado los bloques, puedes guardarlos como bloques reutilizables siguiendo el mismo procedimiento descrito anteriormente. 

Usar patrones de bloques en el editor de bloques de WordPress

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

Para acceder a los Patrones de Bloque, haz clic en el mismo signo más que utilizaste para acceder al menú Bloque . Selecciona la pestaña Patrones. 

A primera vista, los Patrones de Bloque 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 es lo que más se acerca. 

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 junto a los demás
• cabeceras personalizadas
• Citas con imágenes

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

Si quieres crear tu tus propios patrones de bloques manualmente, esto requiere algunos conocimientos de programación. En el manual de desarrollo se denominan diseños de bloques predefinidos. 

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. 

Añade bloques adicionales a Gutenberg

Antes de continuar con este tutorial de WordPress Gutenberg , debes saber que hay 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

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

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 puedes crear diseños totalmente personalizados y basados en bloques, pero sólo para entradas y páginas. Una vez que la edición completa del sitio web ha llegado a Gutenberg , los widgets se vuelven redundantes. Esto proporciona 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 serie de funciones muy cercanas a las 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 los errores. Mientras tanto, la mayor parte de eso se ha arreglado. 

Sin embargo, algo que no es un error es el hecho de que Gutenberg sigue siendo incompatible con muchos temas. Así que si quieres utilizar un tema concreto y te gusta el diseño, es probable que no puedas personalizarlo ni utilizar 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 el hecho de 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ás limitado en los tipos de páginas que puedes 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 crecen a un ritmo constante, pero esto no convierte a Gutenberg en un constructor de temas. Todavía no. 

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

Reflexiones finales: Guía sobre 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ás 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, puedes 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: utiliza los consejos de nuestro tutorial de WordPress Gutenberg y empieza a personalizar el contenido del sitio web tus . Y asegúrate de que el sitio web tu funciona a una velocidad óptima con un plan de alojamiento de sitios web de WordPress de Raidboxes con una velocidad óptima.