Bienvenido al mundo de bloques de WordPress

clock2 min

Qué son los bloques

En el paradigma de Gutenberg, los bloques son los elementos básicos a partir de lo que se construye todo: lo mas simple y lo tremendamente complejo. La idea no es nueva. Todos los page builders incorporan este paradigma e incluso el HTML –que es en lo que a la postre se traduce todo– también tiene esta estructura de bloques dentro de bloques que van dando riqueza y complejidad al contenido.

Yo soy un bloque «fondo»

Este bloque puede contener otros bloques, como por ejemplo encabezados

También puede incluir párrafos, que es el tipo de bloque que usaremos de forma mas habitual.

Este tipo de bloque nos permite incluir otros bloques contenedores, como por ejemplo una distribución por columnas.

No todos los bloques permiten incrustar otros bloques.

Tu puedes extender el editor creando tus propios bloques.

Un bloque define

  • Propiedades visuales
  • Ajustes
  • Herramientas
  • Estilos CSS
  • Código JS
  • Posibilidad de contener otros bloques

Disposición por columnas

Era una de las cosas que mas habíamos echado en falta en el editor estándar incluido WordPress.

En muchos sitios web, el único motivo para instalar un page builder era poder realizar una maquetación por columnas.

Pues ahora lo tenemos dentro de Gutenberg.

Hay diferentes disposiciones de 2 (arriba) y 3 (aquí) columnas.

Las columnas contienen otros bloques: imágenes, párrafos, …

Ademas de las distribuciones de columnas preestablecidas. Se pueden usar los ajustes de bloque para establecer las anchuras a nuestro antojo.

¡¡Se pueden incluir columnas

dentro de otras columnas!!

Si estas leyendo esto en un móvil no habrás entendido nada de lo que te cuento de las columnas. Es normal, los contenidos dispuestos en columnas se presentan de forma lineal en pantallas mas estrechas. Todos los bloques tienen comportamiento responsivo.

Bloques sencillos

Ya hemos demostrado los bloques párrafo, encabezado, imagen, galería y lista. Aquí incluimos algunos otros bloques simples menos utilizados.

Cita sencilla

Dadme 26 soldados de plomo y yo conquistaré el mundo.

Johanes Gutenberg

Cita de párrafo

Este mi amo, por mil señales, he visto que es un loco de atar, y aun también yo no le quedo en zaga, pues soy más mentecato que él, pues le sigo y le sirvo, si es verdadero el refán que dice: ‘Dime con quién andas, decirte he quién eres’, y el otro de ‘No con quien naces, sino con quien paces’

D. Miguel de Cervantes Saavedra, 1615, “El ingenioso hidalgo don Quijote de la Mancha”, juan de la Cuesta, Madrid: Parte 2 «EL INGENIOSO CABALLERO DON QUIJOTE DE LA MANCHA» Capítulo 10.
Soneto de D. Francisco de Quevedo dedicado a su «estimado amigo» D. Luis de Góngora.

Bloque verso

A un hombre de gran nariz

Érase un hombre a una nariz pegado,
Érase una nariz superlativa,
Érase una alquitara medio viva,
Érase un peje espada mal barbado;

Era un reloj de sol mal encarado.
Érase un elefante boca arriba,
Érase una nariz sayón y escriba,
Un Ovidio Nasón mal narigado.

Érase el espolón de una galera,
Érase una pirámide de Egito,
Los doce tribus de narices era;

Érase un naricísimo infinito,
Frisón archinariz, caratulera,
Sabañón garrafal morado y frito.

Un separador


Un espacio en blanco para «airear» nuestro contenido

¡¡¿¿Cómo hemos podido vivir sin esto??!!

Contenido preformateado (¡no me toques mis espacios!)

  .     _///_,
.      / ` ' '>
  )   o'  __/_'>
 (   /  _/  )_\'>
  ' "__/   /_/\_>
      ____/_/_/_/
     /,---, _/ /
    ""  /_/_/_/
       /_(_(_(_                 \
      (   \_\_\\_               )\
       \'__\_\_\_\__            ).\
       //____|___\__)           )_/
       |  _  \'___'_(           /'
        \_ (-'\'___'_\      __,'_'
        __) \  \\___(_   __/.__,'
     ,((,-,__\  '", __\_/. __,'
                  '"./_._._-'

Bloque de código

figcaption {
	font-size: small;
	text-align: center;
}

.page-links {
	font-size: 2em;
	padding: 0.75em 0;
}

figure.my-video > div {
	text-align: center;	
}

figure.my-video > div > iframe {
	margin-bottom: 0;	
}

figure.wp-block-pullquote {
	border-style: solid;
	border-width: 0.5em 0;
	margin-bottom: 1em;
}

Botones

Tablas

Columna 1Columna 2Columna 3Columna 4
100200300400
10203040
0,100,200,300,40
10002000300040000
1110,102220,23330,34440,4
Las tablas de Gutenberg aún no soportan la posibilidad de combinar celdas