bonus new member

https://librolibre.net/

https://lookingforlilith.org/

slot bet 100

slot

slot bet 100

https://lsphalal.id/data/?angka=inatogel

pasporbet

https://www.salemoregonhairsalon.com/

Referencia de hojas de estilo global de WordPress | trucos CSS

La siguiente información se basa en la documentación de WordPress solo por conveniencia. En el momento de escribir este artículo, los estilos globales (theme.json) y la personalización de la interfaz de usuario están en desarrollo activo. Y, por supuesto, todo esto todavía está en desarrollo activo. Si nota que algo ha cambiado o es incorrecto, ¡hágamelo saber en los comentarios!

Guía de configuración de estilo de tema de bloque de CSS y WordPress

Contenido


Ajustes

{
  "version": 2,
  "settings": {
    "border": {},
    "color": {},
    "typography": {},
    "layout": {},
    "spacing": {},
    "outline": {},
    "appearanceTools": true | false,
    "useRootPaddingAwareAlignments": true | false
}

Comenzaremos con las configuraciones de configuración, donde las hemos dividido en varias tablas para Tipografía, Colores, Personalizado y Espaciado.

Recuerde que estos estilos de "nivel superior" se aplican a <body> Y podría ayudar recordar la sintaxis con la que estamos tratando:

  • Propiedades personalizadas de CSS: --wp--preset--{preset-category}--{preset-slug}
  • Clases CSS: .has-{preset-slug}-{preset-category}

Borde

El border La pestaña permite controles de borde en la interfaz de usuario del editor.

{
  "version": 2,
  "settings": {
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
  }
}
Propiedad JSON ¿Qué está haciendo? equivalente de CSS
settings.border.color Habilita el control de color del marco. border-color
settings.border.radius Habilita el control del radio del borde. border-radius
settings.border.style Habilita el control de estilo de marco. border-style
settings.border.width Habilita el control de ancho de borde. border-width

color

El color establece las paletas de colores, los degradados y los efectos de dos tonos del tema.

{
  "version": 2,
  "settings": {
      "color": {
        "palette": {
          "slug": "",
          "color": "",
          "name": "",
        },
        "gradients": [
          {
            "slug": "",
            "gradient": "",
            "name": ""
          }
        ],
        "duotone": {
          "slug": "",
          "color": "",
          "name": "",
        }
        "link": true | false
      }
    }
  }
}
Propiedad JSON ¿Qué está haciendo? Propiedades CSS personalizadas
settings.color.pallete.color Define los valores de color para usar en todo el tema. --wp–preset--color--{slug}
settings.color.gradients.color Define patrones de degradado para usar en todo el tema. --wp–preset--gradient--{slug}
settings.color.duotone Define efectos de dos colores para su uso en todo el sitio. –-wp–preset--duotone--{slug}
settings.color.link Habilita la configuración para cambiar el color del enlace predeterminado del tema en el editor del sitio. –-wp–preset-–color-–link

Tipografía

{
  "version": 2,
  "settings": {
    "styles": {
      "typography": {
        "dropCap": true | false,
        "customFontSize": true | false,
        "fluid": "<undefined>" | false,
        "fontSizes": [
          {
            "fluid": {
              "min": "",
              "max": ""
            },
           "slug": "",
           "size": "",
           "name": ""
         },
       ],
      "fontFamilies": [
        {
          "fontFamily": "",
          "name": "",
          "slug": "",
          "fontFace": ""
        },
      ],
      "lineHeight": true | false,
      "fontStyle": true | false,
      "letterSpacing": true | false,
      "textDecoration": true | false,
      "textTransform": true | false,
    }
  }
}
Propiedades JSON ¿Qué está haciendo? Propiedades personalizadas de CSS
settings.typography.fontSizes Determina el tamaño de fuente en todo el sitio. --wp--preset--font-size--{slug}
settings.typography.fontFamilies Define el uso de una fuente tipográfica en todo el sitio. --wp--preset--font-family--{slug}
settings.typography.lineHeight Define la altura de la línea que se utilizará en todo el sitio. --wp--preset--line-height--{slug}
settings.typography.fontStyle Define el estilo de fuente que se utilizará en todo el sitio. --wp--preset--line-height--{slug}
settings.typography.fontWeight Define el peso de la fuente para su uso en todo el sitio. --wp--preset--font-weight--{slug}
settings.typography.letterSpacing Define el espaciado entre letras para su uso en todo el sitio. --wp--preset--letter-spacing--{slug}
settings.typography.textDecoration Define la decoración del texto para su uso en todo el sitio. --wp-preset --texto-decoración --{slug}
settings.typography.textDecoration.line Define una línea para decorar el texto del enlace para uso en todo el sitio. --wp-preset--text-decoration--line
settings.typography.textDecoration.style Define el estilo de línea para decorar el texto del enlace para su uso en todo el sitio. --wp-preset--text-decoration--style--{slug}
settings.typography.textDecoration.color Define el color de la decoración del texto del enlace para su uso en todo el sitio. --wp–preset--text-decoration--color--{slug}
settings.typography.textDecoration.thickness Especifica el grosor de la línea decorativa del texto del vínculo para su uso en todo el sitio. --wp–preset--text-decoration--thickness--{slug}
settings.typography.textTransform Especifica el tipo de transformación de texto (mayúsculas, minúsculas) para usar en todo el sitio. --wp--preset--text-transform--{slug}

Intervalo

Estas configuraciones habilitan/deshabilitan los controles de margen y espacio de relleno en el editor del sitio y le permiten especificar qué unidades de CSS admitir.

"styles": {
  "spacing":{
    "padding": true,
    "margin": true,
    "units": [ "px", "em", "rem", "vh", "vw", "%" ]
  }
}

Los editores de sitios y bloques incluyen controles deslizantes de entrada que le permiten establecer una distancia en una escala de valores predefinidos. Podemos personalizar esta escala con spacingScale Propiedad:

{
  "version": 2,
  "settings": {
    "spacing": {
      "spacingScale": {
        "operator": "+",
        "increment": <number>,
        "steps": <number>,
        "mediumStep": <number>,
        "unit": ""
      }
    }
  }
}
Propiedad JSON ¿Qué está haciendo? Un ejemplo
settings.spacing.operator Determina si el control escala hacia arriba o hacia abajo. +
settings.spacing.increment Determina en gran medida los cambios de distancia por paso. 0.25
settings.spacing.steps Especifica el número de pasos de escala disponibles. 6
settings.spacing.mediumStep Establece el punto medio de la escala de rango. 1.5
settings.spacing.unit Establece la unidad de longitud de CSS en el valor numérico. rem

Una cosa más que podemos hacer con los espacios es crear propiedades personalizadas de CSS que se pueden usar en todo el tema:

{
  "version": 2,
  "settings": {
    "spacing": {
      "spacingSizes": [
        {
          "size": "",
          "slug": "",
          "name": ""
        }
      ]
    }
  }
}
Propiedad JSON ¿Qué está haciendo? Un ejemplo
settings.spacing.spacingSizes.size Establece el valor del tamaño personalizado, incluida la unidad. 3.5rem
settings.spacing.spacingSizes.slug El programa utilizado en el nombre de la propiedad personalizada de CSS. medium
settings.spacing.spacingSizes.name Proporciona la etiqueta de tamaño en el sitio y la interfaz de usuario del editor de bloques. Medium

La sintaxis de propiedad personalizada de CSS resultante es: --wp-preset--spacing--<slug>

Diseño

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "",
      "wideSize": "",
      "type": "",
    }
  }
}
Propiedad JSON ¿Qué está haciendo? Propiedad CSS generada
settings.layout.contentSize Establece el ancho máximo del contenedor de contenido predeterminado para páginas y publicaciones. --wp--style--global--content-size
settings.layout.contentWide Establece el ancho máximo del contenedor de contenido "ancho" para páginas y publicaciones. --wp--style--global--wide-size
settings.layout.type Determina si el contenedor es default o constrained.

Herramientas de apariencia

{
  "version": 2,
  "settings": {
    "appearanceTools": true | false,
}

Establezca esto en true es una abreviatura para habilitar las siguientes configuraciones:

{
  "version": 2,
  "settings": {
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    },
    "color": {
      "link": true
    }
    "spacing": {
      "margin": true,
      "padding": true,
      "blockGap": true,
    },
    "typography": {
      "lineHeight": true
    }
  }
}

Alineaciones adaptadas a las almohadillas

{
  "version": 2,
  "settings": {
    "useRootPaddingAwareAlignments": true | false
}

Establezca esto en true es una abreviatura para habilitar las siguientes configuraciones:

{
  "version": 2,
  "settings": {
    "spacing": {
      "margin": true,
      "padding": true
    },
  }
}

Estilos

La idea aquí es que los estilos están organizados por estilos de alto nivel (aquellos que establecen estilos para <body>), estilos globales (aquellos que establecen estilos a elementos globales como títulos), y estilos de bloque (aquellos que establecen estilos a bloques específicos).

{
  "version": 2,
  "styles": {
    // Top-level styles
    // etc.

    // Global-level styles
    "elements": { },

    // Block-level styles
    "blocks": {  }
  }
}

Estilos de primer nivel

{
  "version": 2,
  "styles": {
    // Top-level styles
    "border": [],
    "color": [],
    "spacing": [],
    "typography": [],
    "filter": "",
    "shadow": "",
    "outline": []
  }
}
Propiedad estilo equivalente de CSS apoyo adicional
border color border-color
radius border-radius
style border-style
width border-width
top border-top color, style, width
right border-right color, style, width
bottom border-bottom color, style, width
left bottom-left color, style, width
color background background-color
gradient background-image
text color
spacing blockGap gap (en contenedores Flexbox y Grid)
margin margin bottom, left, right, top
padding padding bottom left, right, top
typography fontFamily font-family
fontSize font-size
fontStyle font-style
fontWeight font-weight
letterSpacing letter-spacing
lineHeight line-height
textDecoration text-decoration
textTransform text-transform
filter duotone filter
shadow box-shadow
outline color outline-color
offset outline-offset
style outline-style
width outline-width

Estilos globales

{
  "version": 2,
  "styles": {
    "elements": {
      "buttons": {
        "border": {
          "radius": ""
          },
          "color": {
            "background": "",
            "text": ""
          }, 
          "heading": {},  
          "h1": { },
          "h2": { },
          "h3": { },
          "h4": { },
          "h5": { },
          "h6": { },              
          "link": {
            "border": { },
            "color": { },
            "spacing": { },
            "typography": { }
            }
          }
        }
    }
  }
}
Propiedad JSON ¿Qué está haciendo? donde se usa
styles.elements.buttons Define las propiedades del elemento del botón (p. ej. border, coloretc) para su uso en todo el sitio. Botones
styles.elements.heading Define estilos de todos los encabezados, (<h1> a <h6>) elementos para su uso en todo el sitio. <h1> a <h6> (todo)
styles.elements.h1 a styles.elements.h6 Define estilos individualmente para <h1> a <h6> elementos de bloque de encabezado para uso en todo el sitio. <h1> a <h6> (individual)
styles.elements.link Define la relación <a> estilo de elemento para uso en todo el sitio. <a>
styles.elements.cite Define estilos para blockquote.cite, quote.cite Clases para uso en todo el sitio. Citar, citar
styles.elements.caption Define estilos para <figcaption> y <caption> elementos para bloques de imágenes y tablas, respectivamente, para su uso en todo el sitio. figura, mesa
styles.elements.spacing.padding Establece el relleno de encabezados, líneas, bloques y bloques de párrafo para usar en todo el sitio. Títulos, líneas, bloques, párrafos
styles.elements.typography Establece el estilo de tipografía predeterminado para encabezados y bloques de párrafo para usar en todo el sitio. títulos, párrafos

Estilos a nivel global: elementos interactivos

{
  "version": 2,
    "styles": {
      "elements": {
        "button": {
          "color": {
            "background": " ",
            "text": " "
          }
          ":hover": {
            "color": {
              "background": " ",
              "text": " "
            }
          },
          ":focus": {
            "color": {
              "background": " ",
              "text": " "
            }
          },
          ":active": {
            "color": {
              "background": " ",
              "text": " "
          }
        },
        ":visited": {
          "color": {
            "background": " ",
            "text": " "
          }
        }
      }
    }
  }
}

Nota: Podemos usar todas las propiedades JSON predefinidas en ajustes preestablecidos como tipografía, contorno, sombra, etc. para agregar estilo a cualquier elemento JSON global.

Artículo Recomendado:  Optimización de imagen superior: la solución perfecta con Gatsby e ImageEngine trucos CSS
Propiedad JSON estilo ¿Qué está haciendo? equivalente de CSS
styles.elements.color fondo Define el color de fondo del enlace para uso en todo el sitio. a:link { background-color }
Texto Define el color del texto del enlace para su uso en todo el sitio. a:link { color }
styles.elements.:hover fondo Define el color de fondo del enlace al pasar el mouse para uso en todo el sitio. a:hover { background-color }
Texto Define el color del texto del enlace al pasar el mouse para uso en todo el sitio. a:hover { color }
styles.elements.:focus fondo Define el color de fondo del enlace de estado de enfoque para uso en todo el sitio. a:focus { background-color }
Texto Define el color del texto del enlace de estado de enfoque para uso en todo el sitio. a:focus { color }
styles.elements.:active fondo Define el color de fondo del enlace en el estado activo para su uso en todo el sitio. a:active { background-color }
Texto Define el color del texto del vínculo en el estado activo para su uso en todo el sitio. a:active { color }
styles.elements.:visited fondo Define el color de fondo del enlace de estado visitado para uso en todo el sitio. a:visited { background-color }
Texto Define el color del texto del enlace en estado visitado para uso en todo el sitio. a:visited { color }

Personalizado

Esta tabla muestra ejemplos de propiedades personalizadas que puede crear usando la pestaña Personalizar de la theme.json Las propiedades CSS personalizadas generadas por la pestaña Personalizar utilizan la siguiente sintaxis: --wp--custom--<variable-name>

Propiedad JSON Sintaxis Propiedad personalizada generada
settings.custom.spacing.padding --wp--custom--{padding} --wp--custom--padding
settings.custom.typography --wp--custom--{typography} --wp--custom--typography
settings.custom.fontWeight --wp--custom--{font-weight} --wp--custom--front-weight
settings.custom.lineHeight --wp--custom--{line-height} --wp--custom--line-height
settings.custom.someColor --wp--custom--{some-color} --wp--custom--some-color
settings.custom.someParagraph --wp--custom--{some-paragraph} --wp--custom--some-paragraph

Estilos a nivel de bloque

Todo a nivel mundial styles inclusivo elements se puede usar para personalizar CSS para bloques individuales para anular la personalización global. Los estilos de nivel de bloque tienen prioridad sobre los estilos de nivel superior (globales).

{
  "version": 2,
  "styles": {
    // Top-level styles
    // etc.

    // Global-level styles
    "elements": { },

    // Block-level styles
    "blocks": {
      "core/<BLOCKNAME>": {
        // Define or overwrite any global styles
        "typography": {
          "fontSize": " ",
          "fontWeight": "",
          "lineHeight": "",
          "letterSpacing": "",
          "textDecoration": "",
          "textTransform": "" 
        },
        // Define or overwrite any global elements styles
        "elements": {
          "link": {
            "typography": {
              "textDecoration": ""
            },
            "color": {
              "text": " ",
              "background-color": ""
            },
            ":hover": {
              "typography": {
                "textDecoration": ""
              },
              "color": {
                "text": "",
                "background-color": ""
              },
            },
            ":focus": {
              "typography": {
                "textDecoration": ""
              },
              "color": {
                "text": " ",
                "background-color": ""
              },
            },
            ":active": {
              "typography": {
                "textDecoration": ""
              },
              "color": {
                "text": " ",
                "background-color": ""
              },
            },
            ":visited": {
              "typography": {
                "textDecoration": ""
              },
              "color": {
                "text": "",
                  "background-color": ""
              },
            },
          },
        },     
      },
      // Additional blocks
      "core/<BLOCKNAME>": {
        "typography": { },
        // etc.
      }
    }
  }
}
Propiedad JSON estilo ¿Qué está haciendo?
.styles.core.<BLOCKNAME>.typography font-size Establece o anula el tamaño de fuente global de este bloque únicamente.
font-weight Define o anula el peso total de la fuente de este bloque únicamente.
line-height Define o anula la altura de fuente global de este bloque únicamente.
letter-spacing Define o anula el espaciado global entre letras de este bloque únicamente.
text-decoration Define o anula la decoración de texto global de este bloque únicamente.
text-transform Define o anula la transformación de texto global de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.typography text-decoration Define o anula la tipografía de conexión global de este bloque únicamente.
.styles.core.<BLOCKNAME>.elements.link.color` background-color Define o anula el color de fondo del enlace global de este bloque solamente.
color Establece o anula el color del texto del enlace global de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:hover.typography text-decoration Define o sobrescribe el texto de decoración del estado de conexión global cuando se mantiene presionado solo este bloque.
.styles.core.<BLOCKNAME>.elements.link.:hover.color background-color Define o anula el color de fondo global del estado de espera de este bloque solamente.
color Define o anula el color de fondo global del estado de espera de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:active.typography text-decoration Define o sobrescribe la decoración de texto global del estado de conexión activo de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:active.color background-color Define o anula el color de fondo global del estado de enlace activo de este bloque solamente.
color Define o anula el color de fondo global del estado de enlace activo de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:focus.typography text-decoration Define o sobrescribe la decoración de texto global del estado del enlace de enfoque de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:focus.color background-color Define o anula el color de fondo global del estado del enlace de enfoque de este bloque solamente.
color Define o anula el color de fondo global del estado del enlace de enfoque de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:visited.typography text-decoration Define o sobrescribe la decoración de texto global del estado del enlace visitado de este bloque solamente.
.styles.core.<BLOCKNAME>.elements.link.:visited.color background-color Define o anula el color de fondo global del estado de conexión visitado de este bloque únicamente.
color Se define o sobrescribe el color de fondo global del estado de conexión visitado de este bloque únicamente.

Para ver ejemplos del uso de la personalización de CSS a nivel de bloque, puede consultar la última Tema veintitrés y otros temas de bloque recientes en directorio temático.

Artículo Recomendado:  ¿Qué es el cromo sin cromo en la parte superior? | trucos CSS

resumiendo

¡Has superado esta guía completa para bloquear el CSS de WordPress y la configuración de temas! Comenzamos con una breve introducción que comparaba los temas de bloques de WordPress con el sistema de plantillas PHP "clásico". A partir de ahí, hablamos un poco sobre JSON porque, curiosamente, así es como "escribimos" CSS en los temas de bloque de WordPress.

Entonces hay theme.json el archivo real donde se definen todos estos estilos, como el style.css fue para temas PHP clásicos. El archivo está estrechamente estructurado en secciones para alternar la configuración de WordPress y definir CSS globalmente en un tema de bloque.

Y una vez que terminamos de definir la configuración y los estilos del tema de bloque, el motor de estilo de WordPress se hace cargo y procesa nuestro JSON en un conjunto bien organizado de estilos CSS utilizados en el tema.

Guía de configuración de estilo de tema de bloque de CSS y WordPress

¡Es una locura lo diferentes que son los temas de bloque cuando se trata de definir y administrar estilos en WordPress! Todo esto todavía está en desarrollo activo y es probable que veamos nuevas funciones y opciones agregadas a theme.json.

¿Ves algo nuevo o cambiado? ¡Por favor házmelo saber en los comentarios!

Deja una respuesta

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

Subir