Boutons de style dans les thèmes de blocs WordPress

Les nouvelles fonctionnalités introduites dans WordPress 6.1 fournissent un contrôle pour l'application des ombres directement dans l'interface utilisateur de l'éditeur de blocs et de l'éditeur de site, et cet article plongera dans les moyens de style dans les thèmes de blocs WordPress, en particulier avec les fichiers theme.json.

Pourquoi sélectionner le bouton? C'est une bonne question, commençons ici.

différents types de boutons

Dans le contexte de l'éditeur de blocs WordPress, nous devons faire la distinction entre deux types différents de boutons:

1. Sous-bloque dans le bloc de bouton.
2. boutons imbriqués dans d'autres blocs (par exemple, le bloc de formulaire de commentaire de l'article).

Si nous ajoutons ces deux blocs au modèle, ils ont la même apparence par défaut.

mais ses marques sont très différentes:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Nous pouvons voir que les noms de balises HTML sont différents. Ce sont les noms de classe communs - .wp-block-button et .wp-element-button - qui garantissent le style cohérent des deux boutons.

Si nous écrivons CSS, nous ciblerons ces deux classes. Mais comme nous le savons tous, les thèmes de blocs WordPress ont des méthodes de gestion de style différentes, c'est-à-dire via theme.json les fichiers.

Alors, comment définissez-vous les styles de bouton dans theme.json sans écrire de CSS réels? Faisons-le ensemble.

Créer un style de base

theme.json est un ensemble structuré de motifs écrits sous la forme d'attribut: paires de valeurs. L'attribut de niveau supérieur est appelé "sections" et nous utiliserons la section styles. C'est là que se trouvent toutes les directives de style.

Nous accorderons une attention particulière à styles dans elements. Ce sélecteur localise les éléments HTML partagés entre les blocs. Voici le cadre de base que nous utilisons:

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Ce que nous devons faire, c'est définir un élément de bouton.

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Ce bouton correspond à l'élément HTML utilisé pour marquer l'élément du bouton à l'extrémité avant. Ces boutons contiennent des balises HTML qui peuvent être l'un de nos deux types de bouton: des composants autonomes (c'est-à-dire des blocs de bouton) ou des composants imbriqués dans un autre bloc (par exemple, des blocs de commentaires de l'article).

Au lieu d'avoir à styliser chaque bloc individuel, créez un style partagé. Allons de l'avant et modifions la couleur d'arrière-plan par défaut et la couleur du texte pour les deux types de bouton dans le thème. Il y a un objet couleur, qui à son tour prend en charge les propriétés d'arrière-plan et de texte, où nous définissons la valeur souhaitée:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

Cela modifie les couleurs des deux boutons.

Si vous ouvrez Devtools et affichez le CSS généré par WordPress pour le bouton, nous verrons que la classe .wp-element-button ajoute le style que nous avons défini dans theme.json:

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

Ce sont nos couleurs par défaut! Ensuite, nous voulons fournir des commentaires visuels aux utilisateurs lorsqu'ils interagissent avec les boutons.

Implémentez le style de bouton interactif

Puisqu'il s'agit d'un site sur CSS, je parie que beaucoup d'entre vous connaissent déjà l'état d'interaction des liens et des boutons. Nous pouvons osciller le curseur de la souris sur eux (:hover), les germer pour se concentrer (:focus), et cliquez-les pour les garder actifs (:active). Il y a même un statut :visited qui montre visuellement l'utilisateur qu'il a cliqué dessus auparavant.

Ce sont des pseudo-classes CSS, que nous utilisons pour localiser l'interaction des liens ou des boutons.

Dans CSS, nous pouvons styliser le :hover comme ceci:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Dans theme.json, nous utiliserons ces pseudo-classes pour étendre les déclarations de bouton existantes.

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Veuillez noter ses propriétés "structurées". Nous suivons essentiellement un résumé:

• élément
  • élément
    • objet
      • Propriétés
        • valeur

Nous avons maintenant terminé la définition complète des styles par défaut et interactifs du bouton. Mais que se passe-t-il si nous voulons coiffer certains boutons imbriqués dans d'autres blocs?

Définissez le style des boutons imbriqués dans chaque bloc

Supposons que nous voulons que tous les boutons aient notre style de base, à une exception. Nous voulons que le bouton Soumettre dans le bloc de commentaires de l'article soit bleu. Comment devrions-nous y parvenir?

Ce bloc est plus complexe qu'un bloc de bouton car il contient des pièces plus actives: formulaires, entrées, texte descriptif et boutons. Afin de localiser les boutons de ce bloc, nous devons suivre la même structure JSON que l'élément de bouton, mais s'appliquer au bloc "Formulaire de commentaire de l'article" mappé à l'élément core/post-comments-form:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Veuillez noter que nous ne travaillons plus dans elements. Au lieu de cela, nous travaillons dans blocks, qui est utilisé pour configurer les blocs réels. En revanche, les boutons sont considérés comme un élément global car ils peuvent être imbriqués dans les blocs, même s'ils peuvent être utilisés comme blocs autonomes.

La structure JSON prend en charge les éléments des éléments. Donc, s'il y a un élément de bouton dans le bloc de formulaire de commentaire de l'article, nous pouvons le localiser dans le bloc core/post-comments-form:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

Ce sélecteur signifie que nous ne localisons pas seulement un bloc spécifique - nous localisons également un élément spécifique contenu dans ce bloc. Maintenant, nous avons un ensemble de styles de boutons par défaut qui s'appliquent à tous les boutons du sujet et un ensemble de styles qui s'appliquent aux boutons spécifiques contenus dans le bloc de formulaire de commentaire de l'article.

WordPress généré CSS a donc un sélecteur plus précis:

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

Et si nous voulons définir différents styles interactifs pour le bouton "Formulaire de commentaire de l'article"? C'est la même manière que nous avons fait pour les styles par défaut, sauf que ces styles sont définis dans le bloc core/post-comments-form:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Que dois-je faire si les boutons en non-blocs?

WordPress génère automatiquement et applique les classes correctes pour sortir ces styles de bouton. Mais que se passe-t-il si vous utilisez un thème WordPress "hybride" qui prend en charge l'édition à l'échelle du bloc et du site, mais contient également des modèles PHP "classiques"? Ou, que se passe-t-il si vous créiez un bloc personnalisé, même une ancienne version du shortcode avec un bouton? Ceux-ci ne sont pas gérés par des moteurs de style WordPress!

Ne vous inquiétez pas. Dans tous ces cas, vous ajouterez la classe .wp-element-button à la balise de modèle, de bloc ou de shortcode. Les styles générés par WordPress seront ensuite appliqués.

Dans certains cas, vous ne pourrez peut-être pas contrôler le marquage. Par exemple, certains plugins de blocs peuvent être trop arbitraires et appliquer leurs propres styles à volonté. À ce stade, vous pouvez généralement accéder à l'option avancée dans le panneau des paramètres de bloc et y appliquer la classe:

Résumé

Bien qu'il puisse être gênant d'écrire "CSS" dans theme.json Au début, j'ai trouvé que c'était une seconde nature. Comme CSS, vous pouvez appliquer un nombre limité de propriétés largement ou très précisément en utilisant le bon sélecteur.

et n'oubliez pas d'utiliser theme.json trois avantages principaux:

1. Les styles s'appliquent aux boutons de la vue frontale et de l'éditeur de blocs.
2. Votre CSS sera compatible avec les futures mises à jour WordPress.
3. Les styles générés sont compatibles avec les thèmes de bloc et les thèmes classiques - il n'a pas besoin de copier quoi que ce soit dans une feuille de style séparée.

Si vous utilisez le style theme.json dans votre projet, veuillez partager vos expériences et vos idées. J'ai hâte de lire les commentaires et les commentaires!

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!