WordPress 6.3 poursuit en toute logique ses avancés Full Site Editing. Les mises à jour de version 6.3 de WordPress ciblent donc principalement des éléments d’interface ou fonctionnalités liées à édition complète du site. Je vous propose dans cet article un coup d’œil sur les avancées les plus importantes de cette version de WordPress.
Un éditeur de site en accès direct
La page d’accueil de l’éditeur FSE (full Site Editing) de WordPress propose désormais un accès vers l’ensemble des composantes de l’interface. L’utilisateur WordPress pourra donc organiser ses réglages au niveau global avant d’accéder directement à au composant souhaité. Le menu d’administration de l’éditeur présente ainsi 5 liens d’accès directs.
- Le menu « Navigation » permettra d’éditer un menu existant ou d’en créer un nouveau par simple duplication. Les menus de WordPress étant désormais des blocs Gutenberg réutilisables, l’ajout de liens internes sera aussi simple qu’une édition de liens depuis l’éditeur de page.
- L’éditeur de style est désormais lui aussi accessible depuis la page d’accueil de l’éditeur de site, ce qui est finalement cohérent puisqu’il s’agit là d’éditer les styles globaux du site WordPress
- Les menus « Pages » et « Templates » permettent d’accéder à la liste des modèles présents sur le site.
- le lien « Patterns » permettra d’accéder aux blocs de composition.
Une interface de design et de mise en page simplifiée
Dimension du conteneur
Les dimensions du conteneur central sont désormais définies depuis le menu « Layout » de l’onglet des styles globaux. L’utilisateur pourra ainsi paramétrer une dimension dite de « contenu » (content) et une dimension étendue (wide).
Il sera aussi possible de définir marges verticales et horizontales du bloc de contenus.
Typographie du site WordPress
Question Typographie, il sera possible de choisir parmi une taille, un style et une famille prédéfinis par le thème, pour les zones de titres, de corps, de liens, de boutons et de légendes.
L’utilisateur pourra aussi définir toute couleur de police souhaitée… attention néanmoins au phénomène « arbre de noël »…
Du nouveau pour les bannières du site
L’onglet d’édition des styles du site propose une fenêtre de réglage pour la plupart des blocs statiques ou dynamiques du site.
De la même façon, le bloc de bannière est désormais paramétrable depuis cette même section « Blocs ».
Des réglages de typographie de mages, bordure et filtres duotones sont ainsi accessibles au niveau global.
Des révisions de styles
On notera la présence d’un bouton en forme d’horloge inversée permettant d’afficher les différentes révisions de style du site et/ou de les réinitialiser totalement.
Retour sur quelques blocs et fonctionnalités Gutenberg Gutenberg 16.2 (12 juillet 2023)
Des notes de bas de page
Pas tout à fait nouvelle, l’option de note de bas de page a été corrigée avec la version 6.3 de WordPress et mérite donc d’être à nouveau mise en lumière. L’option de note de bas de page est accessible directement depuis l’item « Footnote » du menu de style (à droite du bouton de création de lien hypertexte), cette option permet de créer les liens aller-retour vers un bloc de notes de bas de page qui sera automatiquement créé.
L’idée est donc d’externaliser les annotations en dehors du contenu, et pourquoi pas, de déplacer vos liens externes sur ces notes.
Un des gros avantages des notes de bas de page de WordPress est que vous pourrez les créer dans n’importe quel ordre, le bloc réorganisera les notes de bas de page selon leur ordre d’apparition dans le texte.
N.B. Attention toutefois à ne pas généraliser l’utilisation de notes de bas de page sur votre site sous peine de pénaliser votre référencement.
Un nouveau bloc « détails » pour masque ou afficher du contenu
WordPress embarque désormais un » bloc de détail » permettant d’afficher un résumé de contenu, déroulant au clic sur un bouton en forme de flèche.
On notera ici que le bloc est totalement SEO friendly puisqu’il le code HTML du contenu reste visible en permanence pour les moteurs de recherche. Le bloc Détail de WordPress est donc un peu rudimentaire mais totalement fonctionnel.
Retour sur les réglages du bloc d’espacement
Le bloc d’espacement permet désormais de définir une hauteur ainsi que des marges verticales.
Il est ainsi possible de définir un séparateur visible, ou non, et de l’intégrer totalement à n’importe quelle charte graphique.
Les blocs réutilisables
La création de blocs réutilisables est encore simplifiée avec WordPress 6.3. Accessible depuis le menu à point, cette option permettra de transformer n’importe quelle composition en « Pattern réutilisable ».
Il vous sera alors possible de rappeler ce bloc comme un modèle interne pour en changer ensuite le contenu.
Une fois créé, ce paterne de composition apparaîtra en mauve dans votre arborescence de bloc et vous le retrouverez dans votre menu « My Patterns » (Mes compositions ou « My Patterns ») du menu de l’éditeur. Pensez donc à bien libeller vos paternes afin d’être sûr de les reconnaître facilement.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
Orientation verticale des blocs de texte
Depuis juillet dernier, l’éditeur Gutenberg embarque une fonctionnalité d’orientation des blocs de texte. Auparavant paramétrable à l’aide de la règle CSS « writing-mode », cette fonctionnalité nécessite néanmoins toujours quelques efforts pour être déployée sur un site WordPress.
D’une part, à l’heure où cet article est rédigé, il vous faudra veiller à installer et activer avec le plugin de Gutenberg a minima dans sa version 16.4 pour profiter de l’orientation verticale, mais il vous faudra aussi veiller à paramétrer le fichier theme.json du thème WordPress afin d’autoriser l’application des règles de style « witingMode » dans les réglages typographiques des blocs souhaités.
// theme.json
« settings » : {
« typography » {
« writingMode » : trueLe réglage global de l’orientation d’un type de bloc défini pourra être effectué via l’onglet « Styles » de la page d’accueil de l’éditeur, puis en allant chercher, pour le bloc souhaité, l’onglet d’orientation de texte.
Enfin, pour appliquer une orientation par défaut à un bloc de texte, le webmaster pourra définir la même propriété dans la section « typography » du bloc souhaité dans la section « styles » du thème theme.json :
// theme.json
« styles » : {
« blocks » : “
« jst-block/custom » : {
« typography » : {
« writingMode » :Espacement (marges) des blocs du bloc Post Template
La mise à jour 6.3 de WordPress apporte un changement notable au niveau de la mise en page du bloc de template de posts, appelé bloc de boucle de de requête ou bloc de « modèle de publication ».
L’alignement des posts en colonne auparavant assurée par une disposition CSS basée sur un affichage « flex », a désormais recours à un affichage basé basée sur grid. La disposition en liste semble quant à lui reposer sur un affichage CSS de type « block ».
Comme vous pouvez le voir dans cette illustration, le bouton de contrôle est situé au niveau du bloc du modèle de publication.
WordPress 6.3 côté développement et intégration
Les concepteurs de WordPress ne laissent pas en reste les développeurs et autres créateurs de site internet.
Noms de classe étendue des blocs de composition
Nous savons que les classes CSS des blocs de (blocs de mise en page tels que les blocs de groupe, les paternes ou les bannières, sont composées du nom du bloc et de la classe de positionnement choisie via l’éditeur.
Un nom de classe étendu est ainsi ajouté à l’enveloppe du bloc « wp-block-cover is-light » « wp-block-group-is-layout-flex », « wp-block-group-is-layout-constrained ».
Mais une classe additionnelle est désormais ajoutée à l’enveloppe de certains de blocs de mise en page, à l’instar du bloc de bannière (core/banner) qui, en fonction de l’opacité de l’overlay se verra attribué « is-light » ou « is-dark-theme ».
Vous pouvez retrouver ici, les principales mises à jour de l’éditeur de WordPress 6.3 pour le mise en page.
Nouveau type de mise en page de grille (grid) pour les déclarations de blocs
Il est désormais possible d’assigner le positionnement interne d’un bloc en grid layout.
Pour cela le développeur pourra déclarer le « layout » et le paramétrer par défaut à « grid » dans son fichier block.json :
// block.json
« supports » : {
« layout » : {
« default » : {
« type » : « grid »Introduction d’un mode de développement
Une constante « WP_DEVELOPMENT_MODE » est introduite dans le fichier de configuration.
Sa valeur définira le type de développement en cours : « core », « plugin », « theme » ou « all ».
Actuellement, le principal cas d’utilisation du mode « développement » est la désactivation du cache de theme.json mais les cas d’utilisation se multiplieront vraisemblablement très rapidement.
// confing.php
define( ‘WP_DEVELOPMENT_MODE’, ‘plugin’ ) ;Dans ce cas, veiller à déclarer WP_DEBUG et WP_DEBELOPMENT TYPE
define( ‘WP_DEBUG’, true ) ;
define( ‘WP_DEVELOPMEENT_TYPE’, ‘local’ || ‘development’ );On vérifie la variable à l’aide de wp_is_development_mode( ‘theme’ ) ) :
if( wp_is_development_mode() ){ …Additionnellement, il est possible d’utiliser wp_get_development_mode() pour retrouver la valeur souhaitée.
Conclusion
La version 6.3 de WordPress vient consolider les avancées significative de la version 6.2, préparant ainsi le terrain au une administration totalement basée sur le nouvel environnement Gutenberg… À suivre…