Ajout d'ombres de boîte aux blocs et éléments WordPress

Ajouter des ombres de boîte dans WordPress 6.1 thème JSON Fichier

Récemment, Ana Segota a demandé sur Twitter comment ajouter une ombre de boîte CSS à l'état de survol du bouton dans le fichier thème.json d'un thème WordPress. En effet, WordPress veut que nous commencions à utiliser le thème.json dans les thèmes de bloc pour définir les styles de base. Traditionnellement, nous utilisons Style.css dans le thème "classe" pour tous les styles. Mais avec la récente version du thème par défaut de vingt-trois (TT3) avec WordPress 6.1 migrant tout son style vers le thème.json, nous nous rapprochons de plus en plus de la possibilité de faire de même dans nos propres thèmes.

Cependant, le thème.json ne prend toujours pas en charge de nombreuses propriétés et sélecteurs CSS. Par exemple, il est actuellement impossible d'utiliser perspective-origin et d'autres propriétés dans theme.json pour style.

Heureusement, en commençant par WordPress 6.1, theme.json prend en charge l'attribut box-shadow. Voici comment appliquer l'observation des boîtes dans le thème.json pour un bloc spécifique (comme le bloc d'image en vedette):

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

nouvelle syntaxe couleur rgb(0 0 0 / 0.66) ne semble pas encore être prise en charge.

De même, nous pouvons appliquer des ombres de boîte à un seul "élément" (comme les boutons). Un bouton lui-même est un bloc, mais il peut également être imbriqué dans un autre bloc. Pour s'appliquer globalement aux ombres de boîte pour tous les boutons, vous pouvez effectuer ce qui suit dans thème.json:

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

ana veut ajouter une ombre à l'état :hover du bouton. Heureusement, WordPress 6.1 prend également en charge les styles pour l'état interactif de certains éléments tels que les boutons et les liens en utilisant des pseudo-classes (y compris :hover, :focus, :active et :visited).

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

Si vous utilisez un thème parent, vous pouvez remplacer le style de thème dans le thème de l'enfant. Le code suivant couvre complètement le style de bouton de TT3:

Affichez le code complet

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

Une autre façon est d'utiliser des styles personnalisés, tels que l'attribut .settings.custom.shadow défini dans un thème pixl.

De plus, l'attribut outline prend également en charge le thème.json et peut être appliqué aux boutons et à leurs états d'interaction.

Dans l'ensemble, il existe de nombreuses façons de définir l'ombre de la boîte pour les thèmes de blocs dans WordPress 6.1, y compris des paramètres officiellement pris en charge, des méthodes de style personnalisé et des méthodes pour écraser les styles dans les sous-thèmes. Pour plus d'informations, veuillez vous référer aux liens répertoriés dans l'article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!