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.jsonEntonces, 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.

El relleno a nivel de raíz evita que los bloques ocupen todo el ancho de la ventana gráfica (izquierda). Pero con las alineaciones con reconocimiento de relleno, algunos bloques pueden «renunciar» a este espacio y ocupar todo el ancho de la ventana gráfica (derecha). (Credito de imagen: Kjell Rygstad)

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 useRootPaddingAwareAlignmentsse 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.jsonentonces 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 wideSizetambié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, wideWidtho ir de ancho completo.

Este bloque de imagen está configurado para respetar 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».

los .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 y wideWidth configuración (o en theme.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.

Lecciones

Publicaciones de WordPress

Solicitudes de extracción y problemas de GitHub

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

rtp live