No me aparecen las opciones align fullwidth y align wide en el editor de bloques

Puede haber varias razones por las que no aparecen estas opciones.

Revisar theme.json

La más básica, en el caso de un tema de bloques (block theme) es que no esté definido el “layout” en las “settings” del theme.json del tema.

Revisar las opciones que soporta el tema

Para el caso de los temas clásicos (classic themes) o temas híbridos, la razón puede ser que no se haya añadido el “support” correspondiente, en este caso sería:

add_theme_support( 'align-wide' );

Menos intuitivo pero igual de importante: revisar las opciones de layout de los bloques

Hay que revisar, en el caso de los block themes, las templates que conforman nuestra web.

Vamos a por un ejemplo directo que se verá más claro: single.html, que hace referencia a la plantilla que renderizará el contenido de nuestros posts individualmente.

Yo tengo definido un header y un footer (que no influyen en este caso) y un bloque Group entre medias, que aglutinará el resto de mis bloques. Tal que así:

Bien, ese bloque Group tiene una opción en ajustes, en su sección Layout, que es “Inner blocks use content width” (flecha roja de la derecha en la imagen de arriba). Esta opción debe estar marcada para que el contenido dentro de este bloque Group se ajuste al “contentSize” definido anteriormente en el theme.json. Si no estuviera marcada, todo el contenido dentro del bloque Group, se vería siempre a ancho completo (en el frontend, porque en el backend se seguiría viendo ajustado, por los estilos propios por defecto del editor de bloques)

Dentro de Group tenemos varios bloques definidos en este caso, pero el que nos interesa es el de Content, que será el contenido propiamente dicho del post que vayamos a escribir.

En la primera imagen, tenemos el editor de plantillas, mostrando el bloque “Content” señalado así como la opción “Inner blocks use content width” desmarcada.

En la segunda imagen, tenemos un post que estamos creando, y al añadir un bloque “Cover”, el cual soporta tanto “align wide” como “align fullwidth”, vemos que no nos aparece dicha opción.

Esto es debido a que en la plantilla single.html el bloque “Content” está expandido al máximo, aunque en nuestro caso lo veamos restringido porque está dentro de un bloque “Group” que sí tenía marcada esa opción, pero claro, todo el contenido dentro del bloque “Content” tiene prohibido tener una alineación como “Wide” o “Fullwidth”.

Hay que marcar activo esa opción para el bloque “Content” y entonces nos aparecerán las opciones de “Wide” y “Fullwidth” en nuestro bloque “Cover”, tal como mostramos en las siguientes imágenes:

Ok, ya veo las opciones en el backend, pero el frontend sigue igual

Efectivamente, con esto hemos conseguido ver las opciones y marcarlas en nuestro bloque “Cover” y vemos que se pone a todo el ancho en el backend, pero al ir al frontend sigue estando limitado por el “contentSize”, ¿por qué?

Falta un último ajuste en el editor de plantillas. Hay que poner el bloque de “Content” ajustado a “fullwidth” para que sea el propio creador de contenido el que elija qué bloques se ajustan a “Wide” o “Fullwidth”

En la imagen vemos, a pesar de estar alineado “Fullwidth” el bloque “Content”, que hay espacios tanto a izquierda como derecha, porque tenemos marcada la opción de “Inner blocks use content width” que marcamos en el anterior punto.

Es decir, el contenido por defecto se ajustará al “contentSize” pero si queremos un bloque “fullwidth” se pondrá al ancho completo.

Guardamos los cambios y vemos en el front como ahora nuestro bloque “Cover” ocupa todo el ancho:

Conclusiones

Los temas de bloques tienen bastantes opciones de configuración, y si no las tenemos en cuenta, podemos caer en errores básicos como estos, ya que nos obcecamos en un punto (theme.json) cuando hay otros aspectos como las opciones de layout que no son tan evidentes y que impiden la aparición de estos tipos de alignment en los bloques.

Espero que os haya servido, a mí desde luego, escribirlo me ha servido, y sobre todo, recordar que siempre tendré este sitio para revisitarlo si me vuelve a pasar.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *