Aprende en este tutorial cómo establecer que las imágenes que añades a una entrada o página estén centradas por defecto con un poco de código.
Seguramente te habrás dado cuenta que cuando añades una imagen a una entrada o página, por defecto, se muestra alineada a la izquierda (aunque el ajuste de alineación sea ‘ninguna’).
Puedes cambiar este ajuste de forma sencilla desde la barra de herramientas del bloque, pero si prefieres que siempre se muestren centradas puede ser un poco engorroso tener que cambiarlo manualmente.
En este tutorial te voy explicar una forma muy sencilla para conseguir que el ajuste por defecto sea el de la imagen centrada, creando una variación de bloque.
Aquí tienes cómo hacerlo.
Pasos para crear una variación del bloque de imagen que muestre las imágenes centradas por defecto
1. Registra una nueva variación de bloque
Lo primero que tienes que hacer es registrar las nuevas variaciones.
Para ello crea un fichero llamado block-variations.js dentro de la carpeta /assets/js/ de tu tema (si no existe puedes crearla) y añade el siguiente código:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
La variación del código de arriba contiene los siguientes campos:
core/image: el bloque para el que estamos creando la variación.isDefault: al sertrueindicas que sea una variación por defecto.attributes: los atributos del bloque.
En este caso, no son necesarios ni name ni label ya que no estás creando una nueva variación, sino que estás modificando la que viene por defecto.
Solo usamos un atributo:
align: el tipo de alineación de la imagen (por defecto'none').
En él le indicamos que sea 'center', para que este sea el ajuste predeterminado cuando se añada un nuevo bloque de imagen.
Ya ves que a efectos prácticos la nueva variación que has creado reemplaza al bloque nativo con los nuevos ajustes.
2. Encola las nuevas variaciones de bloques
Una vez que tienes el fichero donde has registrado los estilos, debes encolarlos al tema. Para ello añade el siguiente snippet al final de functions.php:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Ya ves que es un proceso muy sencillo y te puede ahorrar (a ti o tu cliente) bastante tiempo.
Esto es un simple ejemplo en que te puedes inspirar para crear tus propias variaciones por defecto de bloques.
Por cierto, puedes ver los atributos determinados que tiene cada bloque en la documentación oficial.
Conclusiones
¿Estás cansado tener que cambiar la alineación de las imágenes cada vez que añades una? Ahora ya sabes cómo modificar el ajuste predeterminado para que por defecto las nuevas imágenes estén centradas.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
