Curso de Gutenberg

Comenzamos una nueva sección que considero que es necesaria a largo plazo.

Voy a crear una serie de videos sobre el nuevo editor de WordPress Gutenberg.

Yo he sido uno de los que lo ha estado evitando, pero creo que a la larga cogerá mucha fuerza, mucha gente empezará a utilizarlo y los otros constructores visuales como Elementor, Visual Composer, Beaver Builder, etc serán menos utilizados.

Esto es solo una opinión mía 🙂

GUTENBERG 1  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.

GUTENBERG 2 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

GUTENBERG 3 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

GUTENBERG 4 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.

GUTENBERG 5 BLOQUES INCRUSTADOS

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.

GUTENBERG 6  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

GUTENBERG 7  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.