Ajustes de bloques en WordPress: Relleno y Margen

El nuevo editor de WordPress, paso a paso se está convirtiendo en una herramienta muy potente para poder crear diseños de forma sencilla con una interfaz amigable. Esto hace que el rango de usuarios que se atreven a construir una web no solo se centre en desarrolladores y diseñadores web, sino en todo tipo de usuarios. Esto provoca que algunos conceptos básicos para los que solemos trabajar en diseño web sean desconocidos para muchos. Entre ellos el funcionamiento y control de los espacios. Y en este caso concreto, de los espacios de los bloques en WordPress.

Si ya habíais trabajado antes con WordPress, estos espacios los solíamos controlar gracias al bloque Espaciador, que nos permitía añadir una zona vacía con la altura que quisiésemos entre dos bloques. Pero desde las últimas actualizaciones, podemos prescindir del Espaciador en muchas ocasiones gracias a dos opciones de bloque: relleno y margen. Todo lo que sea utilizar menos bloques siempre va a ser favorable a mantener más limpio el diseño y mejorar la carga de la web.

En el artículo de hoy vamos a explicar qué son el relleno y margen, como van a afectar a nuestros bloques, y de que manera pueden ayudarnos a mejorar el espaciado en nuestros diseños. Y todo esto directamente desde el propio editor de WordPress, y sin tener que editar una sola línea de código.

Ajustes de las dimensiones de un bloque

Las opciones relleno y margen se encuentran dentro del panel Dimensiones de los ajustes de bloque. Este panel Dimensiones, a fecha de hoy, no está disponible en todos los bloques, sino que suele estar dentro de los bloques agrupados en la subcategoría Diseño, como son el bloque Grupo, Columnas, Botones… Por hacer un resumen rápido, el panel Dimensiones nos va a permitir controlar los diferentes tipos de espacios alrededor de un bloque. Si, hay varios tipos de espacios, pero eso lo veremos más adelante.

Para el ejemplo del artículo, voy a crear un par de grupos con párrafos en su interior, que nos van a servir perfectamente para ilustrar como funcionan estos espaciados.

Si seleccionamos el bloque Grupo y nos vamos a sus ajustes, podremos ver la sección Dimensiones de la que hablábamos.

Por defecto, nos muestra dos ajustes: Relleno y Espaciado del bloque. Es este último hablaremos al final, ya que es algo más complejo. Vemos el ajuste Relleno pero, ¿dónde está el de margen?. Por algún motivo que, personalmente desconozco, está oculto. Si hacemos clic en los tres puntitos de la parte superior izquierda, se nos abre una ventana emergente donde podemos activar la opción de Margen. Y ya nos aparecerá junto al resto.

¿Qué es el relleno de un bloque?

Antes de ponernos a rellenar ajustes sin cabeza, vamos a explicar exactamente a que se refiere WordPress cuando habla de relleno de un bloque. El relleno de un bloque es el espacio que hay entre el contenido de un bloque y el borde del mismo bloque. Si dentro de nuestro grupo tenemos un texto, el relleno es el espacio entre el borde del cuerpo del texto y el borde del bloque Grupo.

Como se puede ver en la imagen, hemos añadido un relleno de 30px a cada uno de los lados de nuestro bloque. El recuadro en color violeta nos muestra el borde que delimita el bloque, por lo que el relleno, como hemos dicho antes, esta dentro de ese borde.

Por defecto, solo podemos añadirle el mismo relleno por cada uno de los cuatro espacios (superior, inferior, izquierdo y derecho). Pero si hacemos clic en el icono con forma de cadena de la derecha, nos dejará añadir un valor de relleno independiente en cada lateral. Estos cuatro campos de relleno tienen el siguiente orden, leyendo de izquierda a derecha: relleno superior, relleno derecho, relleno inferior y relleno izquierdo. No os preocupéis de memorizar este orden, ya que según el campo que tengamos seleccionado, se marcará en el dibujo de arriba en que zona estamos aplicando el relleno.

Seguro que habéis notado que, dejando el campo Relleno vacío, por defecto WordPress nos va a aplicar un relleno con unas dimensiones determinadas, dependiendo del tema que estemos usando. Este relleno lo mete el desarrollador vía código, y por eso como usuario no nos aparece en el editor. Comprobar esto es tan sencillo como escribir un Relleno de 0px, y vemos como todo el contenido llegará hasta el borde del bloque Grupo.

¿Qué es el margen de un bloque?

Una vez sabemos lo que significa el relleno, pasemos al margen. El margen es el espacio que se define entre el borde del bloque y los bloques que tiene alrededor. Es decir, estamos definiendo un espacio exterior al borde de nuestro bloque, mientras que con el relleno designamos un espacio interior.

Mientras que con el relleno podíamos definir los cuatro laterales, con el margen solo podemos aplicar un margen superior y un margen inferior. Esto es así porque WordPress va siempre a alinear al centro nuestros bloques.

Podríamos pensar que si dejamos el campo de margen vacío, WordPress está aplicando un margen de cero a nuestro bloque. Esto no es así, y por eso decía antes que no entendía porque estaba algo escondido este ajuste. Para verlo mas directamente lo que decimos, vamos a darle un color de fondo diferente a cada uno de nuestros bloques Grupo. Si tenemos estos dos bloques, y no escribimos nada en el campo de margen, nos va a quedar esto.

WordPress nos mete este pequeño margen, que muchos usuarios no saben como quitar. Y que se hace muy evidente si tenemos bloques con diferentes colores de fondo. Para solucionar esto es tan sencillo como ajustar el margen a 0, y tendremos nuestros bloques seguidos, sin espacio entre ellos.

Espera un momento, esto de relleno y margen me suena…

Para los que hayáis tocado alguna vez CSS, seguro que todo esto de los rellenos y los margenes os ha sonado mucho, ya que no es mas que una traslación al editor de WordPress de los paddings (relleno) y margins (márgenes). Antes de existir estas opciones en los bloques, teníamos que tirar de CSS para añadir rellenos y márgenes. Por suerte, ya podemos hacer estos ajustes directamente desde el editor, y que el usuario final los pueda modificar a su gusto de forma sencilla.

Entendiendo la opción Espaciado del bloque

No queríamos terminar sin hablar del ajuste Espaciado de bloque, que nos aparecía como tercera opción en el panel Dimensiones. Imaginemos que dentro de nuestro bloque Grupo tenemos varios bloques de contenido: párrafos, imágenes, listas… por defecto, el primero de estos bloques va a tener un margen superior de cero, mientras que a partir del segundo va a tener un margen diferente a cero, para que haya un espacio en blanco entre bloque y bloque y no este todo tan ajustado.

Pues es espaciado de bloque es precisamente para esto, permitirnos ajustar de forma manual la dimensión de este margen superior cuando tenemos varios bloques apilados. Podemos pensar que este ajuste se queda un poco obsoleto con la opción de margen. Pero en realidad es una forma más directa de controlar el espacio entre un bloque y su inmediatamente superior.

Conclusiones

Como hemos visto, el ajuste de espacios dentro de bloques y entre bloques es mucho más sencillo de realizar desde las últimas actualizaciones de WordPress. Una vez que se sabemos a que nos referimos al hablar de relleno y margen, jugar con estas opciones para mejorar nuestros diseños es solo cuestión de añadir números en un campo de texto y ver como todo empieza a coger forma.

Esperamos que os haya sido de utilidad, y que os resulte aun más sencillo crear o modificar vuestros diseños desde el propio editor de WordPress.