🔐 Gutenberg – Editor de Bloques de WordPress

Comenzamos esta nueva sección dedicada al editor Gutenberg de WordPress, una herramienta que ha generado opiniones divididas desde su lanzamiento. Sin embargo, a medida que avanza el tiempo, resulta cada vez más claro que Gutenberg tiene el potencial de convertirse en una parte central del ecosistema WordPress. Si bien otros constructores visuales como Elementor, Visual Composer o Beaver Builder han dominado el mercado hasta ahora, Gutenberg ofrece una solución nativa, ligera y poderosa que podría cambiar las reglas del juego. Es posible que en el futuro estos otros constructores vean un menor uso en favor de Gutenberg, pero eso es solo mi opinión.

En este curso, exploraremos todas las funcionalidades del editor Gutenberg en detalle, desde su interfaz básica hasta las herramientas más avanzadas. Mi objetivo es ayudarte a comprender cómo aprovechar al máximo esta herramienta, y para ello he estructurado una serie de videos progresivos que abarcan todos los aspectos clave de este editor. Cada video te guiará a través de un tema específico, con ejemplos prácticos y consejos útiles para aplicar lo aprendido en tus propios proyectos.

¿Qué Aprenderás en Este Curso?

1. Interfaz y Primeros Pasos: Comenzaremos con un recorrido por la interfaz general de Gutenberg, donde aprenderás a añadir bloques y explorar las opciones básicas disponibles. Este video te servirá como base para entender cómo funciona el editor y te preparará para los temas más avanzados.
2. Bloques Comunes: En el siguiente paso, repasaremos los bloques más utilizados, como párrafos, encabezados, listas, imágenes y galerías. Estos bloques son esenciales para cualquier tipo de contenido y entender su funcionamiento te permitirá construir páginas de manera rápida y eficiente.
3. Bloques de Formato: También profundizaremos en los bloques de formato, como código, HTML personalizado, tablas y versos. Estos bloques son ideales para personalizar el contenido y dar un estilo único a tus publicaciones.
4. Elementos de Diseño: Exploraremos bloques de diseño como botones, columnas, separadores y espaciadores, que son herramientas clave para crear diseños visualmente atractivos sin necesidad de usar un constructor externo.
5. Bloques Incrustados: Aprenderás a integrar contenido externo como videos de YouTube, música de Spotify o publicaciones de redes sociales directamente en tus páginas, ampliando las posibilidades creativas de tu sitio.
6. Widgets y Shortcodes: También veremos cómo utilizar bloques dinámicos para mostrar contenido automatizado, como categorías, archivos y últimos comentarios.
7. Bloques Reutilizables: Por último, descubrirás cómo crear bloques reutilizables para ahorrar tiempo y mantener la consistencia en tu diseño. Aprenderemos a exportar e importar bloques, y a trabajar con ellos de manera avanzada para mejorar la productividad.

¿Por Qué Aprender Gutenberg?

Aunque muchos hemos evitado usar Gutenberg durante un tiempo, su integración nativa con WordPress y sus constantes mejoras lo convierten en una herramienta que no podemos ignorar. Este editor no solo es ligero y flexible, sino que también es el futuro de WordPress. Dominarlo ahora te dará una ventaja competitiva, ya que muchos usuarios y desarrolladores comenzarán a adoptarlo como su herramienta principal.

¿Qué Más Incluye Este Curso?

Además de los temas mencionados, también exploraremos cómo ampliar las funcionalidades de Gutenberg con plugins de terceros que añaden bloques extra. Estas extensiones permiten llevar tus diseños al siguiente nivel, combinando la simplicidad de Gutenberg con la flexibilidad de herramientas avanzadas.

Mi objetivo es que, al finalizar este curso, no solo entiendas cómo funciona Gutenberg, sino que te sientas cómodo utilizándolo para construir páginas y sitios completos. Estoy convencido de que Gutenberg será una pieza clave en el futuro de WordPress, y este curso es el primer paso para que formes parte de esa evolución. ¡Nos vemos en el próximo tutorial! Un saludo.

Interfaz

En este primer video vamos a ver la interfaz en general, como añadir bloques y las opciones que tenemos. Después iré agregando videos sobre diferentes tipos de bloques hasta verlos todos.

Por ultimo iré agregando plugins de terceros que agregan bloques extra a Gutenberg y así ampliar las posibilidades de diseño.

Bloques Comunes

En este segundo video vamos a darle un repaso a todos los bloques comunes.

En los bloques comunes encontramos:

• Párrafo
• Encabezado
• Lista
• Imagen
• Cita
• Imagen de fondo
• Galería
• Audio
• Archivo
• Video

Bloques de Formatos

En este video vamos a repasar los bloques de formatos.

Los bloques de formatos son:

• Código
• Clásico
• HTML personalizado
• Preformateado
• Párrafo de cita
• Tabla
• Verso

Elementos de Diseño

En el siguiente video vamos a darle un repaso a todos los elementos de diseño.

Los elementos de diseño son:

• Botón: Este bloque nos permite añadir un botón el cual podemos modificar a nuestro antojo (texto, url, colores).
• Columnas: Este bloque nos permite insertar varios bloques dentro de una misma columna.
• Más: Con este bloque podemos acortar el contenido cuando se muestre en portada y aparecerá el botón de «Leer más» justo en el lugar donde lo hemos colocado. Esto no se mostrará dentro de la entrada.
• Salto de linea: Este bloque nos permite crear páginas dentro de nuestra entrada. Esto dividirá el contenido en distintas páginas y con un menú de navegación podremos navegar entre el contenido de la entrada.
• Separador: Este bloque nos añade una linea de separación (lo que nos crea es un <hr>).
• Espaciador: Este elemento nos crea un espacio blanco al cual le podemos indicar la cantidad de pixeles que queremos de alto de separación.

Bloques Inrustados

En el siguiente video vamos a ver el funcionamiento de los bloques incrustados.

Este tipo de bloques nos permite añadir contenido de otras plataformas como por ejemplo videos de YouTube, fotos de Instagram, música de Spotify etc.

Actualmente los bloques de contenido incrustado son:

Youtube, Twitter, Instagram, Spotify, Kickstarter, Facebook, WordPress, SoundCloud, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNAtion, Screencast, Scribd, Slideshare, SmugMug, Speaker, TED, Tumblr, VideoPress y WordPress.tv.

Si el contenido es de otra plataforma que no se encuentra en la lista anterior tenemos un bloque para incrustar una URL desde cualquier web.

Widgets

En el siguiente video vamos a ver los widgets de Gutenberg. Aprenderemos el funcionamiento de los widgets y shortcodes.  Este tipo de bloques son bloques dinámicos, es decir, mientras que en el resto de bloques podemos editar el bloque en sí añadiendo contenido, en este tipo de bloques solo podremos configurar unos ajustes determinados como mostrar la fecha, cantidad de artículos, etc.

Entre los widgets actuales de Gutenberg encontramos:

• archivos
• categorías
• últimos comentarios
• últimas entradas
• shortcodes

Bloques Reutilizables

En el siguiente video vamos a ver los bloques reutilizables.

Un bloque reutilizable es un bloque normal y corriente que configuras como tú quieres y luego puedes agregarlo con 1 simple clic en otras páginas y entradas respetando la configuración inicial.

Incluso puedes exportarlo en 1 archivo .json e importarlo en otra instalación de WordPress.

Por ejemplo un botón con un texto personalizado y un enlace a un producto en concreto que quieras poner en diferentes entradas y páginas de tu web.

Además lo bueno de este tipo de bloques es que si editas uno se editan todos. Imagínate que tienes 50 botones de estos repartidos por toda tu web, menudo tostón tener que hacerlo uno por uno.

En el video también veremos como convertir varios bloques en 1 solo bloque reutilizable y además editaremos el bloque de botón para que al hacer clic se abra en una pestaña aparte. Esta funcionalidad venía incluida en versiones anteriores pero por algún motivo la han quitado.

Nos vemos en el siguiente tutorial. Un saludo.