Uno de los objetivos principales del editor de sitios de WordPress (y, sí, ese es ahora el "nombre oficial) es mover el estilo de bloque básico en CSS a JSON estructurado. Los archivos JSON son legibles por máquina, lo que los hace consumibles por el Editor del sitio basado en JavaScript para configurar los estilos globales de un tema directamente en WordPress.
¡Aún no ha llegado hasta allí! Si observamos el tema predeterminado Twenty Twenty-Two (TT2), había dos problemas principales sin resolver: interacciones de estilo (como el :hover, :active, :focus), o los márgenes y relleno de contenedores de diseño. Puedes ver cómo se arreglaron temporalmente en el TT2 style.css archivo en lugar de convertirlo en el theme.json archivo.
WordPress 6.1 solucionó esos problemas y lo que quiero hacer es mirar específicamente este último. Ahora que tenemos estilos JSON-ified para los márgenes y el relleno de los contenedores de diseño, eso nos abre a formas más flexibles y sólidas de definir el espaciado en nuestros diseños de temas.
¿De qué tipo de separación estamos hablando?
En primer lugar, ya tenemos relleno a nivel de raíz que es una forma elegante de describir el relleno en el elemento. Eso es bueno porque garantiza un espacio constante en un elemento que se comparte en todas las páginas y publicaciones.
Pero hay más porque ahora tenemos una forma de que los bloques pasen por alto ese relleno y se alineen en todo el ancho. Eso es gracias a alineaciones conscientes del relleno que es una nueva característica opcional en theme.json. Por lo tanto, incluso si tiene relleno de nivel de raíz, aún puede permitir, por ejemplo, que una imagen (o algún otro bloque) se rompa y ocupe el ancho completo.
Eso nos lleva a otra cosa que obtenemos: diseños restringidos. La idea aquí es que cualquier bloque anidado en el diseño respete el ancho del contenido del diseño, que es una configuración global, y no fluya fuera de él. Podemos anular ese comportamiento bloque por bloque con alineaciones, pero llegaremos a eso.
Empecemos con…
relleno a nivel de raíz
Una vez más, esto no es nuevo. Hemos tenido la capacidad de configurar el relleno en el elemento en theme.json desde el experimento Complemento de Gutenberg lo introdujo en la versión 11.7. Lo colocamos en el styles.spacing objeto, donde tenemos margin y padding objetos para definir el espacio superior, derecho, inferior e izquierdo en el cuerpo:
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}Esta es una configuración global. Entonces, si tuviéramos que abrir DevTools e inspeccionar el elemento, veríamos estos estilos CSS:
body {
margin-top: 60px;
margin-right: 30px;
margin-bottom: 60px;
margin-left: 30px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}Enfriar. Pero aquí radica la cuestión de cómo en el mundo podemos permitir que algunos bloques salgan de ese espacio para llenar la pantalla completa, de borde a borde. Es por eso que el espacio está ahí, ¿verdad? ¡Ayuda a evitar que eso suceda!
Pero, de hecho, hay muchos casos en los que es posible que desee romper ese espacio en una instancia única cuando trabaja en el Editor de bloques. Digamos que colocamos un bloque de imagen en una página y queremos que ocupe el ancho completo mientras que el resto del contenido respeta el relleno de nivel raíz.
Entrar…
Alineaciones con reconocimiento de relleno
Al intentar crear el primer tema predeterminado de WordPress que define todos los estilos en el theme.json archivo, el diseñador principal Kjell Reigstad ilustra los aspectos desafiantes de romper el relleno a nivel de raíz en este Problema de GitHub.
Se crearon nuevas funciones en WordPress 6.1 para solucionar este problema. Profundicemos en los siguientes.
useRootPaddingAwareAlignments
Una nueva encuesta useRootPaddingAwareAlignments propiedad fue creada para abordar el problema. En realidad, se introdujo por primera vez en el complemento Gutenberg v13.8. los solicitud de extracción original es una buena introducción a cómo funciona.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},Desde el principio, tenga en cuenta que esta es una función en la que tenemos que optar. La propiedad se establece en false por defecto y tenemos que establecerlo explícitamente en true para habilitarlo. También observe que tenemos appearanceTools establecido en true . Eso nos opta por los controles de la interfaz de usuario en el Editor del sitio para diseñar bordes, colores de enlaces, tipografía y, sí, espaciado que incluye margen y relleno.
Fijar appearanceTools establecido en true opta automáticamente por bloques en el margen y el relleno sin tener que configurar ninguno settings.spacing.padding or setting.spacing.margin a true.
Cuando habilitamos useRootPaddingAwareAlignments, se nos proporcionan propiedades personalizadas con valores de relleno raíz que se establecen en el elemento en la parte delantera. Curiosamente, también aplica el relleno al .editor-styles-wrapper class para que el espaciado se muestre cuando se trabaja en el Editor de bloques de back-end. ¡Muy genial!
Pude confirmar esas propiedades personalizadas de CSS en DevTools mientras investigaba.
Habilitación useRootPaddingAwareAlignments también aplica relleno izquierdo y derecho a cualquier bloque que admita los valores de ancho de "contenido" y ancho "ancho" en la imagen de Estilos globales anterior. También podemos definir esos valores en theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}Si la configuración de Estilos globales es diferente de lo que se define en theme.json, entonces los estilos globales tienen prioridad. Puede aprender todo sobre la gestión de estilos de tema de bloque en mi último artículo.
contentSizees el ancho predeterminado para los bloques.wideSizeproporciona una opción de diseño "ancho" y establece una columna más ancha para que los bloques se extiendan.
Entonces, ese último ejemplo de código nos dará el siguiente CSS:
/* The default content container */
.wp-container-[id] > * {
max-width: 640px;
margin-left: auto !important;
margin-right: auto !important;
}
/* The wider content container */
.wp-container-[id] > .alignwide {
max-width: 1000px;
}[id] indica un número único generado automáticamente por WordPress.
¿Pero adivina qué más obtenemos? ¡Alineación completa también!
.wp-container-[id] .alignfull {
max-width: none;
}¿Mira eso? Al habilitar useRootPaddingAwareAlignments y definiendo contentSize y wideSize, también obtenemos una clase CSS de alineación completa para un total de tres configuraciones de contenedores para controlar el ancho de los bloques que se agregan a las páginas y publicaciones.
Esto se aplica a los siguientes bloques específicos de diseño: Columnas, Grupo, Publicar contenido y Bucle de consulta.
Controles de diseño de bloque
Digamos que agregamos cualquiera de esos bloques específicos de diseño mencionados anteriormente a una página. Cuando seleccionamos el bloque, la interfaz de usuario de configuración del bloque nos ofrece una nueva configuración de diseño basada en el settings.layout valores que definimos en theme.json (o la interfaz de usuario de estilos globales).
Estamos tratando con bloques muy específicos aquí, que pueden tener otros bloques anidados en su interior. Por lo tanto, estas configuraciones de diseño son realmente para controlar el ancho y la alineación de esos bloques anidados. La configuración "Bloques internos usan ancho de contenido" está habilitada de manera predeterminada. Si lo desactivamos, entonces no tenemos max-width en el contenedor y los bloques en su interior van de borde a borde.
Si dejamos el conmutador activado, los bloques anidados se adherirán a la contentWidth or wideWidth valores (más sobre eso en un momento). O podemos usar las entradas numéricas para definir personalizado contentWidth y wideWidth valores en esta instancia única. ¡Esa es una gran flexibilidad!
Bloques anchos
Los ajustes que acabamos de ver están establecidos en el bloque principal. Una vez que hemos anidado un bloque dentro y lo seleccionamos, tenemos opciones adicionales en ese bloque para usar el contentWidth, wideWidth, o ir de ancho completo.
contentWidth configuración, etiquetada como "Ninguna" en el menú contextual, pero también se puede configurar para wideWidth (etiquetado como "Ancho ancho") o "Ancho completo".Observe cómo WordPress multiplica las propiedades personalizadas de CSS de relleno de nivel raíz por -1 para crear márgenes negativos al seleccionar la opción "Ancho completo".
.alignfull La clase establece márgenes negativos en un bloque anidado para asegurarse de que ocupa todo el ancho de la ventana gráfica sin entrar en conflicto con la configuración de relleno del nivel raíz.Uso de un diseño restringido
Acabamos de cubrir los nuevos espacios y alineaciones que obtenemos con WordPress 6.1. Esos son específicos para bloques y cualquier bloque anidado dentro de bloques. Pero WordPress 6.1 también presenta nuevas funciones de diseño para una mayor flexibilidad y consistencia en las plantillas de un tema.
Caso en cuestión: WordPress ha reestructurado por completo sus tipos de diseño Flex y Flow y nos dio una constreñido diseño type que facilita la alineación de los diseños de bloques en los temas usando la configuración de ancho de contenido en la interfaz de usuario de estilos globales del Editor del sitio.
Diseños flexibles, de flujo y restringidos
La diferencia entre estos tres tipos de diseño son los estilos que generan. Isabel Brison tiene un excelente artículo que describe muy bien las diferencias, pero parafraseémoslas aquí como referencia:
- Diseño de flujo: Agrega espacio vertical entre bloques anidados en el
margin-blockdirección. Esos bloques anidados también se pueden alinear a la izquierda, a la derecha o al centro. - Diseño restringido: Exactamente lo mismo que un diseño de flujo, pero con restricciones de ancho en bloques anidados que se basan en el
contentWidthywideWidthconfiguración (ya sea entheme.jsono Estilos globales). - Diseño flexible: Esto no se modificó en WordPress 6.1. Usa Caja flexible de CSS para crear un diseño que fluya horizontalmente (en una fila) de forma predeterminada, pero que también pueda fluir verticalmente, de modo que los bloques se apilen uno encima del otro. El espaciado se aplica usando el CSS
gappropiedad.
Esta nueva lista de tipos de diseño crea nombres de clases semánticas para cada diseño:
| Clase de diseño semántico | tipo de diseño | Bloques compatibles |
|---|---|---|
.is-layout-flow |
Diseño de flujo | Columnas, Grupo, Publicar contenido y Bucle de consulta. |
.is-layout-constrained |
Diseño restringido | Columnas, Grupo, Publicar contenido y Bucle de consulta. |
.is-layout-flex |
Diseño flexible | Columnas, botones, iconos sociales |
Justin Tadlock tiene un artículo extenso sobre los diferentes tipos de diseño y clases semánticas, incluidos casos de uso y ejemplos.
Actualización de su tema para admitir diseños restringidos
Si ya está utilizando un tema de bloque de su propia creación, querrá actualizarlo para admitir diseños restringidos. Todo lo que se necesita es intercambiar un par de cosas en theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}Estos son temas de bloque lanzados recientemente que han habilitado la configuración de espaciado con useRootPaddingAwareAlignments y tener una actualización theme.json archivo que define un diseño restringido:
Deshabilitar estilos de diseño
Los estilos de diseño base son funciones predeterminadas que se incluyen en WordPress 6.1 Core. En otras palabras, están habilitados desde el primer momento. Pero podemos deshabilitarlos si es necesario con este pequeño fragmento en functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Gran advertencia aquí: deshabilitar el soporte para los tipos de diseño predeterminados también elimina todo el estilo base para esos diseños. Eso significa que deberá implementar sus propios estilos para el espaciado, las alineaciones y cualquier otra cosa necesaria para mostrar el contenido en diferentes contextos de plantillas y bloques.
Terminando
Como gran fanático de las imágenes de ancho completo, el nuevo diseño de WordPress 6.1 contenido y las características de alineación consciente del relleno son dos de mis favoritos hasta ahora. Junto con otras herramientas, incluido un mejor margen y control de relleno, tipografía fluida, y los bloques List y Quote actualizados, entre otros, es una prueba sólida de que WordPress se está moviendo hacia una mejor experiencia de creación de contenido.
Ahora, tenemos que esperar y ver cómo la imaginación y la creatividad de los diseñadores y creadores de contenido ordinarios usan estas increíbles herramientas y las llevan a un nuevo nivel.
Debido a las iteraciones de desarrollo del editor del sitio en curso, siempre debemos anticipar un camino difícil por delante. Sin embargo, como optimista, estoy ansioso por ver qué sucederá en la próxima versión de WordPress 6.2. Algunas de las cosas que estoy vigilando de cerca son cosas como características que se consideran para la inclusión, el apoyo a posicionamiento pegajoso, nuevos nombres de clase de diseño para envolvedoras de bloques interiores, opciones de alineación de pie de página actualizadasy agregar opciones de diseño de flujo y restringidas a los bloques de cobertura.
Este Problemas de GitHub #44720 enumera las discusiones relacionadas con el diseño programado para WordPress 6.2.
Recursos adicionales
Consulté y mencioné muchas fuentes mientras investigaba todo esto. Aquí hay una gran lista de cosas que encontré útiles y creo que también podrías disfrutar.
