Bloque de lista

Como es costumbre en estas entradas pensadas para WordPress primero explicaré el uso del bloque y también incluiré un ejemplo en HTML. Pensaréis que este bloque es uno de los más usados y no os faltará razón. Pero durante un tiempo estuve usándolo mal y por si os pasa lo mismo, creo que no viene mal pegarle un repaso.

Bloque de lista

Cuando insertamos el bloque de lista, por defecto nos crea una lista desordenada, la típica de viñetas. Podemos trabajar con ella escribiendo en el cuadro correspondiente y pulsando intro cuando queramos añadir otro elemento debajo del que tenemos. Por cada elemento de la lista veremos su correspondiente cuadro de edición.

Una vez tenemos creada la lista podemos mover los elementos dentro de la misma. Ya sea con control, alt, shift T para subirlo, o control, alt, shift Y para bajarlo. Al igual que podemos insertar elementos entre los existentes pulsando intro al principio o al final del correspondiente cuadro de edición. Si estamos situados en el principio nos insertará el elemento justo encima y si estamos al final, lo hará debajo. También se puede hacer con control alt T para insertar encima y control alt Y para hacerlo debajo.

¿Sencillo, verdad? Durante mucho tiempo estuve haciendo virguerías para salir de ese bloque y continuar escribiendo párrafos, encabezados, etc. Hasta que un día por accidente pulsé intro dos veces y entonces se hizo la luz. Si estamos en un elemento de lista vacío y volvemos a pulsar intro nos saca de la lista en la que estamos trabajando y nos crea un nuevo bloque vacío para que indiquemos de qué tipo será el siguiente.

Ejemplo de bloques de lista

A continuación pongo un par de ejemplos de listas, una es desordenada (la típica que podemos usar para hacer listas de la compra o ingredientes) y la otra es ordenada (un ejemplo muy habitual es para los pasos de una receta).

Por defecto se nos crea una lista desordenada. Si queremos cambiarla a ordenada tendremos que ir a la barra de herramientas del bloque y pulsar encima del botón seleccionar lista. Una vez lo hemos activado tendremos que salir del modo foco y explorar la ventana. Diría que es en el único elemento de bloques que no se comporta según lo esperado. Pero hay que tener en cuenta que hace muy poco tiempo que se ha actualizado este bloque. Al crear la lista ordenada podemos invertir los números, por ejemplo para que empiece a contar del 3 al 1 en orden descendente. Es una opción bastante rara, diría que nunca la he usado.

También nos permite crear listas en MarkDown escribiendo un – (guion) antes de cada elemento para una lista desordenada o un número con un punto justo después 1. 2. para una lista ordenada. A continuación añado el enlace a la documentación oficial de WordPress del bloque de lista.

• Tomate
• Pepino
• Sal
• Aceite
• vinagre

Y ahora vamos con el ejemplo de lista ordenada:

1. Cortamos los tomates
2. Pelamos y cortamos el pepino en rodajas
3. Aliñamos poniendo primero la sal, continuamos con el vinagre y por último finalizamos con el aceite.

Ejemplo de código en html

A continuación añado el código de las mismas listas que en el encabezado anterior. Veréis como únicamente cambia la etiqueta que determina el tipo de lista. Los elementos individuales que forman el contenido tanto en la primera como en la segunda se encierran dentro de la misma etiqueta.

Lista ordenada:
	<ul>
		<li>Tomate</li>
		<li>Pepino</li>
		<li>Sal</li>
		<li>Aceite</li>
		<li>Vinagre</li>
	</ul>

Lista desordenada:
	<ol>
		<li>Cortamos los tomates</li>
		<li>Pelamos y cortamos el pepino en rodajas</li>
		<li>Aliñamos poniendo primero la sal, continuamos con el vinagre y por último finalizamos con el aceite</li>
	</ol>