¡Suscríbete a nuestra newsletter y recibe nuestras ofertas, novedades y descuentos directamente en tu email!

Como hablamos en el articulo anterior «Aprende Gutenberg 1: ¿Qué es Gutenberg?«,  el nuevo editor de WordPress «Gutenberg» funciona a través de lo que llama como «Bloques«.  

Estos bloques nos permiten poder maquetar nuestras entradas de infinitas maneras ya que podemos ir añadiendo el bloque que mejor nos convenga. Tanta flexibilidad nos permiten los bloques que podemos incluso crear nuestros propios bloques con el conocimiento adecuado.

Podremos instalar plugins que contengan bloques que amplíen la funcionalidad y nuestro abanico de bloques a utilizar.

Tipos de bloques

Cuando instalamos Gutenberg nos trae una lista de bloques predeterminados que nos da una amplia lista de funcionalidades para poder maquetar nuestras páginas/entradas.

Bloques comunes

  • Párrafos: Es el bloque más básico que usaremos con el que podremos escribir un párrafo. Cada vez que pulsemos intro (salto de linea) crearemos un nuevo párrafo
  • Listas: Este bloque nos creara una lista (ordenada o desordenada) como la que estoy utilizando en este momento.
  • Encabezados: Nos permite escribir títulos desde H1 hasta H6
  • Imagen: Este bloque nos permite añadir una imagen, podemos subirla desde nuestro ordenador directamente o cogerla de medios en WordPress.
  • Galería: Nos permite crear una galería de imágenes, de la misma manera podemos seleccionar las imágenes desde nuestro ordenador o de medios
  • Cita: Este bloque nos deja añadir una cita de otro autor.
  • Audio: El bloque de audio nos da la posibilidad de añadir un reproductor de audio. Para esto deberemos añadir la URL donde se encuentra el audio que queremos reproducir o subir el archivo a medios. Este audio debe estar en nuestro repositorio medios subido. Para utilizar audios externos utilizaremos los «Bloques de incrustado«.
  • Imagen de fondo: Este curioso bloque nos permite añadir una imagen de fondo sobre la que podemos añadir un texto (este texto se coloca con una etiqueta <p></p> no como encabezados <h1>, <h2>, etc).
  • Archivo: Este bloque nos permite enlazar todo tipos de archivos como .pdf, .zip, etc el cual podremos visualizarlo o descargarlo. Justo al lado del nombre que se coloca como enlace aparece un botón de descargar.
  • Video: Nos permite añadir un video que tengamos subido en medios, para añadir un video de You Tube u otra página web utilizaremos los «Bloques de incrustado«.

Bloques formato

  • Clásico: El bloque clásico nos añade un bloque que contiene el editor TinyMCE (el editor clásico de WordPress). Cuando pasamos nuestras entradas antiguas escritas en el editor clásico al editor Gutenberg nos coloca todo el contenido en este bloque. 
  • Código: Este bloque nos permite escribir código y que aparezca de forma legible.
  • HTML personalizado: Con este bloque podremos añadir HTML en la entrada/página.
  • Preformateado: Este bloque nos añade texto preformateado (con etiquetas <pre></pre>).
  • Cita: Aunque este bloque se llame igual al anterior de «cita» presenta estilos distintos ya que contiene una clase CSS distinta. Esto nos permite jugar con los estilos de una y otra.
  • Tabla: Con este bloque podemos crear tablas HTML, cuando creamos el bloque nos pregunta cuantas filas y columnas queremos y nos creará una tabla con las especificaciones que hayamos escogido.
  • Verso: Este bloque está destinado para poesía y nos permite controlar los saltos de linea.

Bloques de elementos de diseño

  • Botón: Este bloque nos permite añadir un botón el cual podemos modificar a nuestro antojo (texto, url, colores).
  • Más: Con este bloque nos 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 de Widgets

  • Shorcode: Este bloque nos deja añadir un shortcode.
  • Archivo: Nos muestra la lista por meses de las entradas de nuestro blog .
  • Categoría: Nos muestra la lista de categorías utilizadas en nuestro blog.
  • Últimos comentarios: Nos muestra los últimos comentarios de nuestro blog.
  • Últimas entradas: Nos muestra las últimas entradas de nuestro blog.

Bloques de incrustados

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

Tenemos actualmente una gran lista para contenido incrustado:

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 tenemos un bloque para incrustar desde cualquier web.

Puedes continuar aprendiendo Gutenberg en Aprende Gutenberg 3 – Bloques comunes.

Twitter Facebook LinkedIn WhatsApp