WordPress 5.0 est juste au coin de la rue, et beaucoup d’entre nous se sentent excités et inquiets en même temps. Gutenberg apporte un grand changement dans la façon dont nous utilisons WordPress, et il y a certainement une certaine inquiétude concernant ce qui arrivera à nos sites Web si nous mettons à jour nos installations sans les tester auparavant. Mais ne vous inquiétez pas, nous avons un article sur la façon de désactiver l’éditeur Gutenberg WordPress (même si ce n’est que temporaire) afin d’éviter que des thèmes et plugins non supportés ne cassent nos sites.
Vous serez peut-être surpris d’apprendre que nous utilisons déjà WordPress 5.0. En fait, nous le sommes ! Comme Matt l’a déclaré sur le blog Make WordPress :
Si nous maintenons la version 5.0 strictement à 4.9.8 + Gutenberg, nous aurons une version qui est à la fois majeure et non événementielle en termes de nouveau code. Tout est testé au ligne. D’une certaine manière, la version 5.0 est déjà de facto lancée dans la nature, avec quelques hébergeurs tournés vers l’avenir qui installent et activent déjà Gutenberg lors de nouvelles installations.
Cela signifie que WordPress 5.0 fonctionne déjà sur nos serveurs : c’est juste WordPress 4.9.8, avec Gutenberg au cœur. En fait, ce n’est pas tout, car WordPress 5.0 est livré avec un élément supplémentaire, qui est le tout nouveau thème par défaut Twenty Nineteen.
Alors voyons ce qu’il y a de nouveau.
- À propos de Gutenberg et de Twenty Nineteen
- Installation de Twenty Nineteen
- L’apparence de Twenty Nineteen
- Theming pour Gutenberg : L’approche d’un développeur
À propos de Gutenberg et de Twenty Nineteen
Certains d’entre vous n’aiment peut-être pas Gutenberg. D’ailleurs, le débat sur le nouvel éditeur est loin d’être terminé, mais considérez la portée déclarée de Gutenberg :
Ces blocs personnalisés modifient la façon dont les utilisateurs, les développeurs et les hébergeurs interagissent avec WordPress pour créer un contenu Web riche plus facile et plus intuitif, démocratisant la publication et travaillant pour tous, indépendamment de leurs capacités techniques.
C’est l’objectif de Gutenberg, et Twenty Nineteen fait un pas en avant, il a été créé avec Gutenberg et pour Gutenberg. Il s’agit d’un thème de blogging minimal, axé sur la typographie, avec une mise en page en une seule colonne, qui peut être utilisé pour créer un large éventail de sites Web, allant des blogs personnels aux sites Web des petites entreprises.
Écrire à propos de Twenty Nineteen signifie surtout que nous écrivons à propos de Gutenberg. Dans Twenty Nineteen, Gutenberg permet aux utilisateurs non seulement de créer du contenu riche, mais même de construire l’ensemble de leurs sites Web dans l’éditeur. Selon Allan Cole sur le blog Make WordPress,
Gutenberg accorde aux utilisateurs un niveau de liberté sans précédent pour personnaliser la mise en page et le design de leur site. Afin de réaliser pleinement leur vision, les utilisateurs auront besoin d’une nouvelle génération de thèmes flexibles, construits pour profiter de la liberté créative que Gutenberg offre. Dans cette optique, WordPress 5.0 sera lancé avec un tout nouveau thème par défaut : Twenty Nineteen
Dans le thème Twenty Nineteen, Gutenberg est plus qu’un créateur de contenu, c’est un créateur de site, et les utilisateurs de WordPress seront autorisés à construire l’ensemble de leurs sites Web en tirant profit des blocs. Et si Gutenberg n’est pas encore votre truc, la plupart des plugins populaires de constructeurs de pages ajoutent aussi le support pour Gutenberg.
(Lecture suggérée : Introduction au thème Twenty Twenty)
Installation de Twenty Nineteen
Twenty Nineteen devrait suivre le plan de sortie de la nouvelle version majeure de WordPress. Cependant, WordPress 5.0 devrait sortir le 19 novembre, et il est possible qu’une version fonctionnelle de Twenty Nineteen ne soit pas prête à cette date. Voir toutes les dates de sortie possibles pour WordPress 5.0. Quoi qu’il en soit, le thème est disponible en téléchargement sur Github, et y restera jusqu’à ce qu’il soit fusionné au cœur de WordPress.
Twenty Nineteen est basé à la fois sur le thème _s et gutenberg-starter et vient avec Sass à l’intérieur. Une fois que vous avez le paquet.zip, extrayez le thème et téléchargez/déplacez le dossier du thème dans le répertoire /wp-content/themes de votre installation de développement. Vous pouvez également le télécharger depuis votre tableau de bord WordPress.
Les clients de Kinsta peuvent l’installer sur leur environnement de développement. Si vous n’êtes pas chez Kinsta, vous pouvez toujours l’installer sur votre machine locale.
L’apparence de Twenty Nineteen ans
La disposition en une seule colonne met l’accent sur le contenu et s’adapte mieux aux blocs de pleine largeur et de grande largeur. Le thème prend maintenant en charge la barre latérale du footer et est livré avec trois menus de navigation : le menu principal et le menu Liens sociaux, tous deux positionnés dans l’en-tête de page, et le Footer Menu, positionné dans le footer.
La page de blog ressemble à une page de blog normale avec des images vedettes activées. Les articles et les pages uniques montrent mieux le potentiel de la version actuelle de Gutenberg en tant que constructeur de site.
Puisqu’il est entièrement basé sur Gutenberg, les fonctionnalités de Twenty Nineteen dépendent principalement du cycle de développement de Gutenberg et de la disponibilité des blocs. Nous pouvons ajouter des blocs de widgets, des blocs de shortcodes, des galeries, du code HTML, etc. Cependant, tous ces blocs sont loin de couvrir tous nos besoins. Mais heureusement nous avons plusieurs plugins qui nous permettent d’ajouter de nouveaux blocs à Gutenberg, comme Atomic Blocks, Advanced Gutenberg et Stackable. Il y a même des projets comme le Gutenberg Cloud qui ont vu le jour.
Si vous pensez que le thème semble trop minimal, considérez que Twenty Nineteen est encore un travail en cours. Nous ne sommes pas sûrs qu’il sera fusionné dans le noyau d’ici la sortie de WordPress 5.0, et nous pouvons nous attendre à plusieurs ajouts et résolutions de bugs dans un futur proche. De plus, il y a beaucoup de problèmes qui ne sont pas encore résolus, et des caractéristiques qui doivent être mises en œuvre. Maintenant Twenty Nineteen supporte les sous-menus mais pas les En-têtes personnalisés et en-têtes vidéo. Quoi qu’il en soit, nous pouvons nous attendre à ce que des fonctionnalités supplémentaires soient ajoutées dans un délai raisonnable.
Si l’état du thème vous intéresse, consultez la liste complète des issues sur Github.
Theming pour Gutenberg : L’approche d’un développeur
Gutenberg fournit un support de base pour les styles de blocs dans les thèmes, et les développeurs de thèmes sont libres de remplacer les styles par défaut de Gutenberg avec leurs styles personnalisés. Mais les développeurs peuvent également omettre complètement les styles personnalisés et décider de se fier exclusivement à Gutenberg pour le style des blocs sur le front-end du site.
Avoir un éditeur qui affiche le résultat améliore l’expérience d’écriture de l’auteur, et permet à tout le monde de se sentir à l’aise avec l’interface utilisateur.
Quoi qu’il en soit, certains styles et fonctionnalités de présentation de Gutenberg exigent que les thèmes ajoutent expressément leur support, et ceci peut être fait en appelant add_theme_support dans le fichier functions.php lorsque l’action after_setup_theme est déclenché. Voici un exemple d’implémentation d’une fonctionnalité :
function mytheme_setup() {
// Ajouter la prise en charge des styles de blocs
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Vous trouverez ci-dessous une sélection de ces fonctionnalités de Gutenberg, dont certaines sont également supportées par Twenty Nineteen. Vous trouverez la liste complète des fonctionnalités dans le Manuel Gutenberg.
Ajout de la prise en charge des styles de présentation des blocs Gutenberg
L’un des objectifs de l’équipe derrière Gutenberg était de construire un système flexible pour le style à l’intérieur des thèmes, et de se rapprocher le plus possible « de la parité visuelle entre le front-end et l’éditeur ». Le but est de donner à l’utilisateur un aperçu précis du contenu tel qu’il apparaîtra sur le site.
Pour atteindre cet objectif, l’équipe a dû séparer les styles de présentation et les styles structurels. Par défaut, les styles de présentation ne sont pas chargés sur le front-end, afin d’éviter d’affecter l’apparence du site. Quoi qu’il en soit, les nouveaux thèmes peuvent profiter des styles de présentation de Gutenberg en les activant simplement avec l’enregistrement suivant (voir le Manuel pour plus de détails) :
// Ajouter la prise en charge des styles de blocs
add_theme_support( 'wp-block-styles' );Comme vous pouvez vous y attendre, Twenty Nineteen supporte les styles de blocs de Gutenberg. La page d’un seul article ressemble beaucoup à la page d’édition, avec la seule différence de l’image en vedette, qui s’affiche sur le bureau comme une image d’arrière-plan couvrant toute la fenêtre. L’image ci-dessous montre Gutenberg en action sur le back-end.
Et voici le même message sur le site en front-end.
Alignements larges et complets
Gutenberg propose également deux options d’alignement supplémentaires : l’alignement large et l’alignement pleine largeur, mais vous pouvez sélectionner l’alignement large ou pleine largeur uniquement si votre thème les supporte. Si c’est le cas, Gutenberg affiche deux icônes d’alignement supplémentaires.
L’image ci-dessous montre l’alignement des images au centre, large et en pleine largeur sur Twenty Nineteen.
Les développeurs de thèmes peuvent ajouter la prise en charge des alignements Largeur et Pleine Largeur en les activant dans le fichier de fonctions avec une seule instruction :
// Ajout de la prise en charge de l'alignement complet et large des images
add_theme_support( 'align-wide' );Une fois que nous avons ajouté la prise en charge des alignements Large et Pleine Largeur, nous devrions fournir les déclarations CSS pour deux classes CSS supplémentaires : alignfull et alignwide. Twenty Nineteen propose les styles suivants :
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Note : Soyez prudent lorsque vous utilisez cette option, car elle peut causer des problèmes si vous changez de thème (lisez plus à ce sujet sur Github).
Style de l’éditeur
Le style éditeur est une fonctionnalité introduite avec WordPress 3.0 permettant aux développeurs de thèmes d’ajouter des styles personnalisés à l’éditeur TinyMCE. Gutenberg supporte également cette fonctionnalité, mais elle fonctionne différemment de l’éditeur classique, qui charge les styles directement dans l’iframe de l’éditeur. Gutenberg ajoute des sélecteurs CSS spécifiques, car il n’utilise pas d’iframe.
Nous pouvons ajouter la prise en charge des styles d’éditeur comme suit :
// Ajouter la prise en charge des styles d'éditeur
add_theme_support( 'editor-styles' );
// Lister les styles de l'éditeur
add_editor_style( 'style-editor.css' );Cette fonctionnalité est également supportée par Twenty Nineteen. Vous pouvez approfondir ce sujet dans Editor Style dans Gutenberg.
Palettes de couleurs de blocs
Gutenberg fournit un sélecteur de couleur générique dans le panneau Paramètres de couleur de l’éditeur. Les développeurs de thèmes peuvent améliorer cet outil en ajoutant des palettes de couleurs personnalisées permettant aux utilisateurs de choisir rapidement la bonne couleur pour le fond de bloc et le texte. Il s’agit d’un processus en deux étapes :
Tout d’abord, nous devons fournir une gamme de couleurs :
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Ensuite, nous devons déclarer les styles correspondants dans la feuille de style du thème :
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Les noms de classes commencent par has-, suivi du slug de couleur et se terminent par le contexte, qui peut être color ou background-color. Actuellement, Twenty Nineteen ne supporte pas les palettes de couleurs de blocs, mais nous pouvons facilement changer cela avec un thème enfant.
Au lieu de cela, si vous souhaitez désactiver une palette de couleurs personnalisée, vous devez ajouter la ligne suivante au fichier functions.php de votre thème ou thème enfant :
add_theme_support( 'disable-custom-colors' );Tailles des polices de caractères des blocs
Un thème peut également remplacer l’ensemble des tailles de polices par défaut de Gutenberg. Voici un exemple du code que vous devez ajouter au fichier functions.php :
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );Les nouvelles tailles de police seront ajoutées au sélecteur de taille de police dans les Paramètres Texte de Gutenberg.
Ensuite, nous devons déclarer les styles correspondants dans la feuille de style du thème. Le nom de la classe doit commencer par has-, suivi du nom de la taille de la police, et se terminer par -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen ne fournit pas de tailles de police spécifiques et s’appuie sur les valeurs par défaut de Gutenberg.
Note : Rappelez-vous que, pour que tout ce code fonctionne, vous devez le connecter via l’action after_setup_theme action.
Résumé
Twenty Nineteen pourrait bien fonctionner pour les blogs personnels, et vous pourriez penser que c’est plus comme une toile blanche qu’un thème WordPress entièrement fonctionnel. Une approche aussi minimale pourrait être un peu contraignante lorsqu’il s’agit de créer des sites Web pour les entreprises et le eCommerce, mais ne vous inquiétez pas : de nouvelles fonctionnalités devraient être mises en place prochainement, et nous pourrions voir une version plus puissante de Twenty Nineteen bientôt.
En attendant, vous pouvez aussi jeter un coup d’oeil à quelques thèmes qui soutiennent déjà Gutenberg. Atomic Blocks, GeneratePress, Gutentype, et Divi pour n’en nommer que quelques-uns, mais beaucoup d’autres devraient venir bientôt. WordPress 5.0 approchant à grands pas, la prise en charge de Gutenberg n’est pas une option, et les développeurs de thèmes devraient adopter le nouvel éditeur WordPress dès que possible pour rester en tête de la compétition.
Avez-vous installé Twenty Nineteen ou tout autre thème soutenant Gutenberg ? Nous aimerions entendre vos avis dans les commentaires ci-dessous.
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
Laisser un commentaire