Desde WordPress 5.0, WordPress se ha estado moviendo hacia la edición completa del sitio (FSE). Por lo tanto, los usuarios pueden usar bloques de Gutenberg para publicar contenido y Diseña sitios web completos.
Para lograr FSE, WordPress está desarrollando un editor de bloques que utiliza directorios de bloques, patrones de bloques y temas de bloques.
Estos temas de bloques necesitan dos componentes para funcionar: plantillas y estilos globales.
Las plantillas suenan familiares, pero ¿qué es Global Styles?
Sigue leyendo para aprender:
Estilos globales de WordPress 101
Lo que ofrece WordPress Global Styles
Cómo funcionan los estilos globales
¿Cómo pruebo los estilos globales?
Nuevas mejoras en los estilos globales
Reflexiones finales: ¿Qué es WordPress Global Styles?
Estilos globales de WordPress 101
Global Styles ayuda a los usuarios a cambiar el estilo general de su sitio web. Le permite evitar la molestia de editar bloques o páginas individuales. Amplía la funcionalidad de edición completa del sitio al brindar un mayor nivel de personalización a Gutenberg y WordPress.
Con Global Styles, los usuarios tienen un mejor control sobre el diseño y el diseño del sitio web. Los desarrolladores de temas pueden diseñar y diseñar bloques con más libertad y funcionalidad.
Antes de esto, los diseñadores web que editaban sitios web que se ejecutaban en el Editor clásico de WordPress usaban PHP para agregar opciones de color y tamaños de fuente. Usando PHP, agregarían hojas de estilo (CSS) tanto al frontend como al final del administrador del tema.
Lo que ofrece WordPress Global Styles
Global Styles te ahorra la molestia adicional. Con Global Styles, WordPress añade automáticamente los estilos. No es necesario que escribas CSS adicional.
Puede utilizar los estilos globales para modificar el estilo de un tema o activar o desactivar la configuración y las funciones (como la letra capitular).
Por ejemplo, con los estilos globales, los usuarios pueden seleccionar un color de fondo o cambiar el tamaño del texto de todo el tema desde un solo lugar.
Pero no limita la personalización individual. Todavía puede editar estilos de bloques individuales y anular los estilos globales.
Cómo funcionan los estilos globales
Los estilos globales permiten a los desarrolladores usar un nuevo archivo de configuración de tema llamado theme.json para definir el sitio web y bloquear los valores predeterminados. Los datos de los objetos JSON se reformatean como CSS y propiedades personalizadas de CSS para definir estilos.
Hay dos partes importantes en el archivo de theme.json: la configuración y los estilos.
Configuración
La configuración enumera los valores globales o contextuales que describen cómo se comportan el editor y los bloques. En concreto, define:
- Qué controles están deshabilitados u ocultos
- Valores preestablecidos, como paletas de colores
- Configuración de tipografía predeterminada
Estilos
Los estilos definen el lenguaje de diseño del tema. Permite a los editores o autores de temas decidir cosas como:
- Tamaño de fuente
- Altura de la línea
- Colores de enlace
- Tamaños de cabeza
- Color predeterminado
Cuando se renderizan, los estilos se traducen en hojas de estilo (CSS) que se inyectan en el frontend y el administrador del tema.
¿Cómo pruebo los estilos globales?
Para empezar a usar Global Styles, necesitas un tema de edición de sitio completo (como Twenty Twenty-Two) y el plugin Gutenberg activado ahora mismo. Esto podría cambiar cuando WordPress lance la versión 5.9 en enero de 2022.
- Ve al Editor del sitio en el menú de administración de WordPress.
- Abra la barra lateral Estilos globales haciendo clic en el icono Aa .
En Estilos globales, verás dos pestañas:
- Global : estos ajustes afectar al sitio web. Por ejemplo, el color de fondo que seleccione aquí será el fondo del cuerpo del sitio web.
- Por tipo de bloque : estos ajustes afectan a todas las copias de un tipo de bloque. Por ejemplo, al cambiar el color de un bloque de grupo, se cambiará el color de todos los bloques agrupados.
Nuevas mejoras en los estilos globales
Global Styles está en constante evolución.
En la versión 12.1 de Gutenberg, el equipo de WordPress añadió las siguientes características a Global Styles:
- Definición de degradados personalizados a través de la sección de paleta de colores
- Mostrando colores de duotono en la misma sección de degradado
- Dividir las opciones de tipografía entre elementos de texto y enlace
Reflexiones finales: ¿Qué es WordPress Global Styles?
WordPress Global Styles permite a los usuarios modificar el aspecto de su sitio web sin editar bloques o páginas individuales.
Con Global Styles, WordPress agrega automáticamente estilos a los temas o bloques a través de archivos theme.json. Estos archivos omiten PHP y CSS, que requerían el Editor clásico.
Esperamos que Global Styles se envíe con WordPress 5.9, que se lanzará en enero de 2022.
Síguenos en Twitter para enterarte @Bluehost las últimas noticias tecnológicas.
Escriba un comentario