Uso del nuevo diseño limitado en los temas de bloque de WordPress | trucos CSS
Uno de los propósitos principales del editor de sitios de WordPress (y, sí, ahora es "nombre oficial) es mover el estilo del bloque principal de CSS a JSON estructuradoLos archivos JSON son legibles por máquina, por lo que un editor de sitios basado en JavaScript puede utilizarlos para configurar estilos de temas globales directamente en WordPress.
¡Aún no ha llegado! En cuanto al tema predeterminado Twenty Twenty-Two (TT2), había dos problemas principales sin resolver: interacciones de estilo (me gusta :hover
, :active
, :focus
), y márgenes y revestimiento de contenedores de diseñoPuedes ver cómo se arreglaron temporalmente en TT2 style.css
archivo en lugar de hacerlo en theme.json
expediente.
WordPress 6.1 arreglar esos problemas y lo que quiero hacer es mirar específicamente el último. Ahora que tenemos estilos JSON-ified para los márgenes y rellenos del contenedor de diseño, esto nos abre formas más flexibles y sólidas de definir el espaciado en nuestros diseños de temas.
¿De qué distancia estamos hablando?
Primero, ya tenemos almohadilla de nivel de raíz que es una forma elegante de describir la almohadilla de <body>
Esto es bueno porque proporciona 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 rodeen esa almohadilla y se alineen a lo ancho. esto es gracias a revestimiento alineado alineaciones que es una nueva característica a incluir en el theme.json
Entonces, incluso si tiene un pad de nivel de raíz, aún puede permitir, digamos, que una imagen (o algún otro bloque) salte y se amplíe por completo.
Esto nos lleva a otra cosa que obtenemos: diseños limitadosLa idea aquí es que todos los bloques anidados en el diseño respeten el ancho del contenido del diseño, que es una configuración global, y no salgan de él. Podemos anular este comportamiento bloque por bloque con alineaciones, pero ya llegaremos a eso.
Empecemos con…
Revestimiento a nivel de la raíz.
Una vez más, esto no es nuevo. Tuvimos la oportunidad de colocar posavasos en <body>
elemento en theme.json
desde el experimento Complemento de Gutenberg lo presentamos en la versión 11.7. Lo configuramos para styles.spacing
objeto donde tenemos margin
y padding
objetos para determinar la distancia superior, derecha, inferior e izquierda 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 tenemos que abrir DevTools y verificar <body>
elemento, veremos 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;
}
Excelente. Pero aquí radica la cuestión de cómo podemos permitir que algunos bloques salgan de esa distancia para llenar toda la pantalla, de un extremo a otro. Por eso la distancia está ahí, ¿no? ¡Ayuda a prevenir esto!
Pero, de hecho, hay muchos casos en los que es posible que desee ir más allá de esta distancia en un solo caso cuando trabaja en el editor de bloques. el resto del contenido respeta el pad de nivel base?
Ingresar...
Alineaciones compatibles con revestimientos
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 salir de la almohadilla en el nivel de raíz en este Problemas de GitHub.
Las nuevas funciones de WordPress 6.1 se crearon para solucionar este problema. Veámoslos más a fondo.
useRootPaddingAwareAlignments
Nuevo useRootPaddingAwareAlignments
La propiedad fue creada para abordar el problema. En realidad, se introdujo por primera vez en el complemento Gutenberg v13.8. solicitud de descarga original es un buen ejemplo de cómo funciona.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},
Observe de inmediato que esta es una característica que debemos incluir. La propiedad se establece en false
por defecto y debemos establecerlo explícitamente en true
para activarlo. También observe que tenemos appearanceTools
sintonizado en true
también. Esto nos lleva a los controles de la interfaz de usuario. en el editor del sitio para aplicar estilo a los bordes, vincular los colores, la tipografía y, sí, el espaciado que incluye el margen y el relleno.
Ajustes appearanceTools
sintonizado en true
incluye automáticamente bloques en campo y pad sin tener que configurar ninguno settings.spacing.padding
o setting.spacing.margin
a true
.
Cuando activamos useRootPaddingAwareAlignments
se nos proporcionan propiedades personalizadas con valores de relleno raíz establecidos en <body>
elemento en la parte delantera. Curiosamente, también aplica la almohadilla a .editor-styles-wrapper
class para que la distancia se muestre cuando se trabaja en el editor de bloques de backend. ¡Impresionante!
Pude verificar estas propiedades CSS personalizadas en DevTools mientras hurgaba.
Activación useRootPaddingAwareAlignments
también aplica el relleno izquierdo y derecho a cada bloque que mantiene los valores de ancho 'contenido' y ancho 'ancho' en la imagen de estilos globales de arriba. También podemos definir estos valores en theme.json
:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}
Si la configuración de estilo global es diferente de la definida en el 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.
contentSize
es el ancho predeterminado para los bloques.wideSize
Proporciona una opción de diseño "ancho" y establece una columna más ancha para estirar bloques.
Entonces, el ú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]
muestra 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;
}
¿Ves esto? Por activación useRootPaddingAwareAlignments
y determinación 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, Contenido de publicación y Bucle de consulta.
Controles de diseño de bloque
Digamos que agregamos uno de los 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 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. Entonces, estas configuraciones de diseño son en realidad para controlar el ancho y la alineación de estos bloques anidados. La configuración "Bloques internos usan ancho de contenido" está habilitada de forma predeterminada. Si la desactivamos, entonces no tenemos max-width
en el contenedor y los bloques en su interior van de extremo a extremo.
Si dejamos el interruptor encendido, los bloques anidados se pegarán a contentWidth
o wideWidth
valores (más sobre eso en un momento). O podemos usar las entradas digitales para definir las personalizadas contentWidth
y wideWidth
valores en este caso único. ¡Esa es una gran flexibilidad!
Bloques anchos
La configuración que acabamos de ver se establece en el bloque principal. Una vez que hemos anidado un bloque dentro y lo hemos seleccionado, tenemos opciones adicionales dentro de ese bloque para usar contentWidth
, wideWidth
o ir de ancho completo.
contentWidth
una configuración etiquetada como "Ninguno" 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 CSS personalizadas para el pad de nivel raíz por -1
para crear márgenes negativos cuando seleccione 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 principal.Usar un diseño limitado
Acabamos de ver los nuevos espacios y alineaciones que estamos obteniendo con WordPress 6.1. Son específicos de bloques y de todos los bloques anidados dentro de bloques. Pero WordPress 6.1 también presenta nuevas características de diseño para una mayor flexibilidad y consistencia en las plantillas de temas.
Caso en cuestión: WordPress reestructuró por completo sus tipos de diseño Flex y Flow y nos dio una limitado diseño type que facilita la alineación de diseños de bloques en 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 muestran. Isabel Brisson tiene un excelente comentario. esto describe muy bien las diferencias, pero parafraseémoslas aquí como referencia:
- Diseño de transmisión: Agrega espacio vertical entre bloques anidados en
margin-block
Estos bloques anidados también se pueden alinear a la izquierda, a la derecha o al centro. - Diseño limitado: El mismo trato exacto que el diseño de flujo, pero con límites de ancho de bloque anidados que se basan en
contentWidth
ywideWidth
configuración (o entheme.json
o estilos globales). - Diseño flexible: Esto no se modificó en WordPress 6.1. Utiliza CSS Flexbox para crear un diseño que fluye horizontalmente (en una fila) de manera predeterminada, pero también puede fluir verticalmente para que los bloques se apilen uno encima del otro. El espaciado se aplica usando CSS
gap
Propiedad.
Este nuevo conjunto de tipos de diseño crea nombres de clases semánticas para cada diseño:
Clases de diseño semántico | tipo de diseño | Bloques compatibles |
---|---|---|
.is-layout-flow |
Diseño de flujo | Columnas, grupo, publicar contenido y ciclo de consulta. |
.is-layout-constrained |
Diseño limitado | Columnas, grupo, publicar contenido y ciclo de consulta. |
.is-layout-flex |
Diseño flexible | Columnas, botones, iconos sociales. |
Justin Tadlock tiene una descripción extensa de los diferentes tipos diseño y clases semánticasincluyendo casos de uso y ejemplos.
Actualice su tema para admitir diseños limitados
Si ya está utilizando un tema de bloque que ha creado, querrá actualizarlo para admitir diseños limitadosTodo lo que se necesita es cambiar algunas cosas 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 ha actualizado theme.json
archivo que define un diseño restringido:
Deshabilitar estilos de diseño
Los estilos de diseño básicos son características 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í: deshabilite la compatibilidad con los tipos de diseño predeterminados también elimina todo el estilo base para estos diseñosEsto significa que deberá implementar sus propios estilos para el espaciado, las alineaciones y todo lo demás necesario para mostrar el contenido en diferentes plantillas y contextos de bloque.
resumiendo
Como gran admirador de las imágenes de ancho completo, el nuevo diseño de WordPress 6.1 y las características de alineación con reconocimiento de pad son dos de mis favoritos hasta ahora. En conjunto con otras herramientas, que incluyen un mejor control de margen y relleno, tipografía fluida y listas actualizadas y bloques de citas, entre otras, es una evidencia 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 en curso del editor del sitio, siempre debemos anticipar un camino difícil por delante. Sin embargo, como optimista, estoy ansioso por ver qué sucederá en el próximo lanzamiento de WordPress 6.2. Algunas de las cosas que mantengo cerca son cosas como funciones bajo consideración incluir, apoyo a posicionamiento pegajoso, nuevos nombres de clase de diseño para el embalaje de unidades interiores, opciones de alineación de pie de página actualizadasy agregar opciones de diseño de flujo de superposición de bloques y diseño delimitado.
este Problemas con GitHub #44720 enumera las discusiones relacionadas con el diseño diseñado para WordPress 6.2.
Recursos adicionales
Consulté y me referí a muchas fuentes mientras investigaba todo esto. Aquí hay una gran lista antigua de cosas que he encontrado útiles y que creo que te pueden gustar.
Deja una respuesta