Comment créer des variations de style dans les thèmes de bloc WordPress 6.0

Global Styles, une caractéristique des thèmes de blocs, est l'une de mes parties préférées de la création de thèmes de bloc. Le concept de variations de style global dans WordPress a été introduite dans Gutenberg 12.5 qui permettrait aux auteurs de thème de créer des variations alternatives d'un thème de bloc avec différentes combinaisons de couleurs, de polices, de typographie, d'espacement, etc. Différents fichiers de thème.

L'interface utilisateur du panneau Global Styles est en itération de développement actif. Plus de détails sur le développement de cette fonctionnalité peuvent être trouvés et suivis ici sur ce billet GitHub (# 35619).

Dans cet article, je vais me promener dans la création d'une variation de style global de preuve de concept à l'aide de fichiers alternatifs /styles/theme.json et créer des thèmes enfants avec différents modes de couleurs en échangeant uniquement des palettes de couleurs.

Table des matières

• Table des matières
• Condition préalable
• Variations de style global
• Section 1: Création de variations de style thème
• Section 2: Un exemple de cas d'utilisation
• Exemple de thèmes de bloc avec des variations de styles de thème
• Emballage
• Ressources

Condition préalable

Cet article est destiné à ceux qui ont une compréhension de base des thèmes de blocs WordPress et une certaine familiarité de l'utilisation de l'interface complète de l'éditeur de site (FSE). Si vous êtes nouveau pour bloquer les thèmes et le FSE, vous pouvez commencer ici sur CSS-Tricks avec cette introduction profonde aux thèmes de blocs WordPress et la documentation de l'éditeur de site. Ce site Web complet d'édition de site est l'un des guides de tutoriel les plus à jour pour apprendre toutes les fonctionnalités FSE, y compris les thèmes et les variations de styles discutés dans cet article.

Variations de style global

Pour quelques antécédents, présentons brièvement la variation du style global. Vingt-deux-deux (TT2) Lead-thème et le directeur de la conception de l'automate Kjell Reigstad ont introduit des variations de styles globaux avec ce tweet et le billet GitHub # 292 en tant que thèmes enfants. Dans le billet, Kjell note qu'ils étaient initialement destinés à des motifs de couleurs et à des combinaisons de polices alternatives, mais ils peuvent être utilisés pour construire des thèmes enfants simples.

Cet exemple de Kjell montre comment différentes combinaisons de style pourraient être sélectionnées parmi les options disponibles dans la barre latérale.

Depuis lors, l'équipe de thème automatique expérimente le concept pour créer des thèmes enfants variables (couleur et polices variables uniquement), y compris les éléments suivants:

• géologue avec des variations bleues, crème, ardoise, jaune
• quadrat avec versions noires, vertes, rouges, blanches et jaunes

Commutateur de style global

La version Gutenberg 12.5 a introduit un commutateur de styles global qui permettrait aux utilisateurs de basculer rapidement et facilement entre différents looks dans le même thème via différents fichiers theme.json stockés sous un dossier A / Styles.

Le concept d'autoriser la commutation de variation de style global via le thème.json a été discuté sur GitHub depuis un certain temps maintenant. L'ingénieur principal de Gutenberg, Matias Ventura, lui a renforcé la feuille de route renouvelée en l'ajoutant récemment à la feuille de route WordPress 6.0.

Embrasser le style alternatifs motivé par les variations JSON. Cela a été taquiné dans diverses vidéos autour du nouveau thème par défaut et doit être entièrement dévoilé et présenté en 6.0. L'un des objectifs parallèles est de créer quelques variations distinctes de TT2 réalisées avec des styles. (35619)

Matias Ventura, «Feuille de route préliminaire à 6,0»

La dernière itération de développement du switcher de variation de style de thème est disponible avec Gutenberg 13.0 et incluse dans WordPress 6.0. Dans cette vidéo d'exploration de WordPress 6.0, la liaison de produits automatitiques Anne McCarthy donne un aperçu de ses principales fonctionnalités, y compris des variations de style et de l'API Webfonts (à partir de 5:18) discutées dans cet article.

Variation du style de thème contre l'enfant thème

Dans mon article précédent, j'ai brièvement couvert les thèmes des enfants de la construction. Les variations de style global ont brouillé la ligne entre les thèmes alternatifs-thème.json et enfants. Par exemple, la seule différence entre un thème enfant Alante-Dark récemment publié et son thème parent est un fichier alternatif.json dans le thème de l'enfant qui remplace les styles de thème globaux comme celui-ci:

De même, les deux thèmes récent d'ALARA Child dans le répertoire WordPress - Framboise et Richmond - ne diffèrent que dans leur fichier Single Theme.json.

Section 1: Création de variations de style thème

À la racine de votre dossier de thème enfant, créez un dossier A / Styles, qui contient des variations de style sous forme de fichiers JSON. Pour cet exemple de démonstration, j'ai créé trois variantes de vingt-deux theme de thèse.

Voici le résultat final après avoir cliqué sur l'icône Styles à partir du tableau de bord d'administration (situé en apparence → Éditeur ):

Cliquez sur le bouton des autres styles (récemment révisé sur les styles de navigateur), qui affiche des icônes de style couleur «bleu», «marron» et «rose» en plus de ses styles d'origine.

Pour modifier et choisir un style, sélectionnez votre variation préférée et cliquez sur le bouton Enregistrer (haut-droit), qui est affiché à l'extrémité avant de votre navigateur.

L'ajout d'étiquettes aux variations de style alternatives et au nom de fichier avec l'effet d'animation de survol est disponible dans Gutenberg 13.0.

Étape 1: Configuration et installation

Tout d'abord, installez et configurez un site WordPress avec un contenu factice. Pour cette démo, j'ai effectué une nouvelle installation WordPress, activé Vingt-deux thème et ajouté des données de test de Gutenberg.

L'API des variations de style de style et Web décrites discutées dans cet article nécessite une installation et une activation du plugin Gutenberg 13.0 ou WordPress 6.0.

Étape 2: Créez un thème d'enfant TT2

Dans cet exemple de thème de démonstration de la démo, faisons légèrement varier la couleur du corps de la couleur de l'en-tête et du pied de page, avec tout le contenu du site centré:

Étape 3: Créez des fichiers JSON

Créer / Styles dans le dossier racine de votre thème avec Blue, Maroon et Pink.json Fichiers:

 __ style.css
__ thème.json
__ fonctions.php
__ index.php
__ Modèles
__ ...
__ pièces
__ ...
__ Styles
__ bleu.json
__ maroon.json
__ Pink.json

Étape 4: Créez des fichiers JSON à thème alternatif

Ensuite, créez vos fichiers alternatifs-theme.json avec des palettes de couleur souhaitées sous / styles. Pour cet exemple de démonstration, j'ai créé trois palettes de couleurs (bleu, marron et rose). Voici le code pour maroon.json:

 {
  "Version": 2,
  "Titre": "Maroon",
  "paramètres": {
    "couleur": {
      "palette": [
        {"Slug": "Foreground", "Color": "# 7C290F", "Name": "Foreground"},
        {"Slug": "Background", "Color": "#ffffff", "Name": "Background"},
        ?
        {"Slug": "Background-body", "Color": "# ffd8be", "name": "Background Body"},
        {"slug": "primaire", "couleur": "# 000000", "nom": "primaire"},
        {"slug": "secondaire", "couleur": "# ffe2c7", "name": "secondaire"},
        {"Slug": "tertiaire", "couleur": "# 55ACEE", "nom": "tertiaire"}
      ]]
  },
  "Typographie": {}
},
"Styles": {
  "couleur":
      {
        "Background": "var (- wp - preset - Color - Background-Body)",
        "Texte": "var (- wp - preset - coulor - foreground-dark)"
      },
  "Éléments": {
      "lien": {
        "Couleur": {"Text": "var (- wp - présent - coulor - primaire)"}
      }
    }
  }
}

Les deux autres alternent Blue.json et Pink.json Les fichiers échangent des valeurs de premier plan et de fond de fond, de premier plan et de couleurs primaires avec leurs valeurs de couleur hexadécimal bleu et rose respectives.

Section 2: Un exemple de cas d'utilisation

Comme je l'ai noté dans mon article précédent, j'ai travaillé sur des thèmes de bloc et je les ai utilisés pour mon propre site de projet personnel. Inspiré par les variations de style de thème et les fonctionnalités de l'API Webfonts dans le plugin Gutenberg, j'ai commencé à peaufiner mon thème de blocage de travail en cours avec un mode de couleur sombre alternative et en configurant l'API WebFonts.

Dans cette section, je vais vous guider à travers la façon dont j'ai créé TT2 Gopher Blocks , une démonstration de démo de mon thème de bloc de travail en cours créé pour cet article. Le thème comprend des modes de couleur marron, sombre et clair créés à l'aide de variations de style de thème et de l'API Webfonts qui sont devenues disponibles avec la version Gutenberg 12.8.

Certains faits saillants du thème TT2 GOPHER incluent un affichage de contenu mono-colonne centré, un en-tête et un pied de page distinct, des pages d'archives et de recherche plus conviviales plus utilisateur.

Une copie de TT2 Gopher Blocks est disponible dans le référentiel GitHub, que vous pouvez déborder et personnaliser.

Création du mode sombre sur WordPress

Tout d'abord, un arrière-plan en mode sombre. Le mode Dark est une préférence personnelle et les développeurs lui offrent ou d'autres commutateurs à bascule en mode comme sur ce site, qui n'est pas un petit travail pour la plupart des développeurs réguliers. La création du mode sombre est bien couverte ici chez CSS-Tricks, y compris ce guide complet du mode sombre et de la typographie en mode sombre.

Dans un site WordPress, nous pouvons ajouter une bascule en mode sombre à l'aide du plugin WP Dark Mode. Erin Myers de WP Engine et WPBeginner décrivent comment utiliser le plugin WP Dark Mode, tandis que Brenda Barron répertorie d'autres options de plugin en mode sombre dans ce message WPExplorer.

La création d'un mode sombre dans les thèmes de blocs WordPress sans plugin implique plusieurs étapes. Il y a plus d'un an, Ari Stathopoulos a créé un support sombre pour le thème des blocs TT1 au Github. En regardant l'exemple ici, cela implique des connaissances JavaScript pour créer des actifs (par exemple, basculer, personnaliser, supporter en mode éditeur), des variables CSS de couleur foncée et des fichiers de fonctions.php élargis.

Dans cette courte vidéo, Anne McCarthy d'Automattic montre à quel point il est simple de créer un mode sombre de thème de bloc TT2 avec une variation de style globale en ajoutant des extraits de Kllejr Gist of JSON dans le dossier TT2 / Styles.

Création du thème Demo TT2 Gopher Blocks

Le TT2 Gopher est une version très simple et modifiée du thème par défaut de vingt-deux ans. Il comprend trois variations de style thème - marron, sombre et blanc.

Décrire chaque étape de personnalisation dépasse le champ d'application de cet article, mais vous pouvez en savoir plus sur mon introduction profonde aux thèmes de blocs WordPress ainsi que le manuel de l'éditeur de blocs sur wordpress.org.

Un bref aperçu des combinaisons de couleurs et de polices du thème TT2 Gopher comprend:

• Mode léger
  • L'en-tête est blanc et le pied de page a une couleur de fond du corps fumé.
  • Open SANS est la police principale.
• Mode sombre
  • L'en-tête et le pied de page sont noirs avec des couleurs sombres plus claires pour les arrière-plans du corps.
  • Source Serif Pro est la police principale.
• Mode marron
  • L'en-tête et le pied de page sont tous deux d'une couleur marron foncée, avec un fond de corps jaunâtre plus léger.
  • Le travail SANS est la principale police.

Permettez-moi de vous guider brièvement à travers la façon dont j'ai créé des variations de style de thème.

Ajout et configuration de Webfonts

Le plugin Gutenberg 12.8 a introduit une nouvelle API WebFontts qui permet aux auteurs de charger des polices locales (groupées) «d'une manière adaptée aux performances, conviviale et à l'épreuve des performances». Cette fonctionnalité peut être implémentée dans un thème de bloc de la manière PHP ou de la voie thème.json.

Actuellement, cette fonctionnalité fonctionne uniquement avec des polices regroupées avec des thèmes de blocs et ne prend pas en charge les polices hébergées par Google en raison de problèmes de confidentialité. Plus de détails sur l'état actuel du développement de l'API WebFonts sont couverts dans cet article MADE WORDPRESS CORE et cet article WP Tavern.

Étape 1: Téléchargez et ajoutez des polices dans le thème du bloc

Le thème TT2 ajoute des fichiers Source Serif Pro dans le dossier Assets / Fonts du thème. Deux polices supplémentaires - travail sans et Sans publics - sont également fournies dans le référentiel Github.

Étape 2: Enregistrement de Webfonts

Dans le thème TT2, la source locale Serif Pro WebFonts est enregistrée auprès de PHP dans ses fonctions.php Fichier:

 fonction TwentyTwentyTwo_get_Font_Face_Styles () {
  retour "
  @ FONT-FACE {
    Font-Family: 'Source Serif Pro';
    Police-poids: 200 900;
    Style de police: normal;
    Police-étirement: normal;
    Font-Display: Swap;
    src: url ('". get_theme_file_uri (' actifs / polices / sourceserif4variable-roman.ttf.woff2 ')."') format ('woff2');
  }
  @ FONT-FACE {
    Font-Family: 'Source Serif Pro';
    Police-poids: 200 900;
    Style de police: italique;
    Police-étirement: normal;
    Font-Display: Swap;
    src: url ('". get_theme_file_uri (' actifs / polices / sourceserif4variable-italic.ttf.woff2 ')."') format ('woff2');
  }
  "
}

Gutenberg 12.8 a présenté la possibilité d'enregistrer les polices Web locales avec le fichier thème.json. Le thème suivant. Les extraits de la démo TT2 Gopher Thème montrent comment le travail local sans les polices Web est enregistré dans la variation du style de thème marron:

 "Typographie": {
  "Fontfamilies": [
    {
      "Fontfamily": "'Work Sans', -Apple-System, BlinkMacSystemfont, 'Helvetica Neue', 'Helvetica', Sans-Serif",
      "Slug": "Work-Sans",
      "Nom": "Work Sans",
      "Fontface": [
        {"FontFamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "400", "Fontstyle": "Normal", "FonttRetch": "Normal", "Src": ["Fichier: ./
        {"Fontfamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "700", "Fontstyle": "Normal", "FonttRetch": "Normal", "Src": ["Fichier: ./
        {"Fontfamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "400", "Fontstyle": "Italic", "FonttRetch": "Normal", "Src": ["Fichier: ./ Assets / Fontts / Work-Sans / Worksans-Italic-Variablefont_wght.TTF"]
        {"Fontfamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "700", "Fontstyle": "Italic", "FonttRetch": "Normal", "Src": ["Fichier: ./ Assets / Fonts / Work-Sans / Worksans-Italic-Variablefont_Wght.TTF"]
      ]]
    }
  ]]
}

Des informations supplémentaires sur la façon de s'inscrire et d'utiliser des webfonts locaux dans les thèmes de bloc sont décrites dans ce tutoriel et cet article WP Tavern.

Création de variations de style thème

Suivant les étapes décrites dans la section précédente, j'ai créé deux versions alternatives du fichier thème.json - white.json et noir.json - avec des combinaisons de couleurs et de polices différentes dans le dossier du thème / styles de l'enfant.

Cette fonctionnalité nécessite la version 2 de theme.json. Depuis Gutenberg 12.5, le titre peut également être ajouté sur thème.json pour afficher l'étiquette de style dans l'éditeur de site ou le nom de fichier (sans extension) sera affiché par défaut.

Voici un exemple de blanc.json:

 {
  "Version": 2,
  "titre": "blanc",
  "paramètres": {
    "couleur": {
      "palette": [
        ?
        {"Slug": "Background", "Color": "# f2f2f2", "name": "fond"},
        ?
        {"slug": "primaire", "couleur": "# 0d0d0d", "nom": "primaire"},
        {"slug": "secondaire", "couleur": "# f0eae6", "nom": "secondaire"},
        {"Slug": "tertiaire", "couleur": "# eb3425", "name": "tertiaire"},
        {"Slug": "Quaternaire", "Color": "# 7C7E83", "Name": "Quaternaire"}
      ]]
    },
    "Typographie": {
      "Fontfamilies": [
        {
        "Fontfamily": "\" public Sans \ ", sans-serif",
        "nom": "public sans",
        "Slug": "public-Sans",
        "Fontface": [
          {"Fontfamily": "public Sans", "FontDisplay": "Block", "Fontstyle": "Normal", "FonttRetch": "Normal", "Src": ["Fichier: .assets / Fontts / Publicsans / Publicsans-Variablefont_wght.TTF.woff2"]},
          {"Fontfamily": "public Sans", "FontDisplay": "Block", "Fontstyle": "Italic", "FonttRetch": "Normal", "Src": ["File: ./ Assets / Fonts / Publicsans / Publicsans-Italic-Variablefont_Wght.Ttf.Woff2"]}
        ]]
      }
    ]]
  }
},
"Styles": {
  "blocs": {
    "Core / Image": {
      "Filter": {"duotone": "var (- wp - présent - duotone - défiltre default)"}
    },
    "Core / Post-title": {
      "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family - Public-Sans)", "Fontweight": "700", "Fontsize": "var (- wp - custom - Typographie - Font-Size - Gigantic)"}
    },
    "Core / Query-Title": {
      "Typographie": {"Fontfamily": "var (- wp - preset --Font-Family --public-san)", "Fontweight": "300", "Fontsize": "var (- wp - custom - Typographie - Font-Size - Gigantic)"}
    },
    "Core / post-Image-Image": {
      "Filter": {"duotone": "var (- wp - présent - duotone - défiltre default)"}
    },
    "Core / Site-Logo": {
      "Filter": {"duotone": "var (- wp - présent - duotone - défiltre default)"}
    },
    "Core / Site-Title": {
      "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --Public-Sans)", "Fontsize": "var (- wp - preset --font-size - normal)", "Fontweight": "normal"}
    }
    },
    "Couleur": {"Background": "var (- wp - preset - Color - Background)", "Text": "var (- wp - preset - coulor - forestground)"},
    "Éléments": {
      "H1": {
        "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --Public-Sans)", "Fontweight": "600", "Fontsize": "var (- wp - custom - Typographie - Font-Size - Colossal)"}
      },
      "H2": {
        "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --Public-Sans)", "Fontweight": "600", "Fontsize": "var (- wp - custom - Typographie - Font-Size - Gigantic)"}
      },
      "H3": {
        "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --Public-Sans)", "Fontweight": "300", "Fontsize": "var (- wp - usine - Typographie - Font-Size - Huge)"}
      },
      "H4": {
        "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --public-san)", "Fontweight": "300", "Fontsize": "var (- wp - preset --font-size --x-laage)"}
      },
      "H5": {
        "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --public-san)", "Fontweight": "700", "TextTransform": "Uppercase", "Fontsize": "var (- WP - Preset --Fontase - Medium)"}}
      },
      "H6": {
        "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --public-san)", "Fontweight": "400", "textTransform": "uppercase", "Fontsize": "var (- - wp - preset --font-size - midium)"}}}}}
      },
      "lien": {
        "Couleur": {"Texte": "var (- WP - Custom - Color - Foreground)"}
      }
    },
    "Typographie": {"Fontfamily": "var (- wp - preset - Font-Family --Public-Sans)", "Fontsize": "var (- wp - preset --font-size - normal)"}
  }
}

Ce code échange des palettes de couleurs de theme.json et enregistre et définit également les fichiers locaux de police SANS public.

Le Black.json est également très similaire et utilise des polices Source Serif Pro enregistrées dans le fichier functions.php.

Exemple de thèmes de bloc avec des variations de styles de thème

• Vingt-vingt-deux - le premier thème par défaut pour inclure des variations de style. Son 1,2 mis à jour, groupé avec WordPress 6.0 comprend trois variations de style - «bleu», «rose» et «suisse» - permettant aux utilisateurs d'échanger rapidement entre différents styles visuels.
• Frost - Un thème de bloc expérimental avec une variation de style de thème sombre.
• Alara - a au-dessus de 100 installations actives et comprend 7 variations de style.
• Wabi - qui alimente le site Web Rich Tabor contient 3 variantes de style et 300 installations actives.
• Brisky - a plus de 600 installations et une variation de style de thème sombre.
• Pendant - Un thème de l'équipe de thème Automattic sous Development at GitHub contient 3 variation de style de thème.

Dans cet article WP Tavern, Justin spécule que cette nouvelle fonctionnalité peut être utilisée par les auteurs de thème en liant les paramètres du visiteur du site, tandis que certains utilisateurs peuvent préférer modifier leur site en donnant un look de conception saisonnière ou basé sur des événements. C'est probablement un peu tôt, mais seul le temps nous dira comment cette fonctionnalité puissante serait utilisée par les auteurs de thème et les utilisateurs.

Emballage

La création de variations de style d'un thème de bloc avec une typographie et une combinaison de couleurs différentes a été grandement simplifiée, sans utiliser de plugins. C'est l'une de mes fonctionnalités préférées de l'éditeur de blocs que je prévois d'appliquer dans mes projets personnels.

À mon avis, les variations de style de thème changent certainement la donne pour les thèmes de blocs et avec cette fonctionnalité pratique, il pourrait ne pas y avoir de besoin de thèmes enfants ou même de nombreux thèmes de blocs de bobinage à la cuisine. Quelques thèmes de bloc de base bien conçus, similaires aux banques de blocs ou blockbase de l'équipe de thème Automattic (thèmes de bloc de base de travail en cours sur GitHub), pourraient être personnalisés avec la variation du style de thème.

Ressources

• Global Styles Presets (Block Editor Handbook)
• Autoriser la commutation des variations des styles globaux # 35619 (github)
• Ajouter la version initiale du moteur de style # 37978 (github)
• Les variations de style mondial, les «skins» pour les thèmes, ont atterri à Gutenberg (WP Tavern)
• Un commutateur de styles global (Critterverse.blog)
• Panneau de styles globaux: itération du bouton «Browse Styles» # 40478 (GitHub)
• Un coup d'œil aux prochaines variations de style mondial de vingt-deux (WP Tavern)
• Exploration de WordPress 6.0: Variations de style, interface utilisateur de verrouillage de blocs, améliorations de l'écriture (Anne McCarthy - vidéo)
• Quoi de neuf dans WordPress 6.0: Nouveaux blocs, commutation de style et bien plus encore (Aleksandar Savkovic - Cloudways)

Mode sombre

• Donnez une pause aux yeux, ajoutez le mode sombre à votre site WordPress (Erin Myers)
• Un guide complet du mode sombre sur le Web (adhuham)
• Disons que vous allions écrire un article de blog sur Dark Mode (Chris Coyier)

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!