Logical properties CSS dans les styles globaux : margin-inline plutôt que left

margin-left: 24px; a-t-il vraiment un sens dans une mise en page qui doit aussi fonctionner en arabe ou en hébreu ? Une fois le thème traduit et livré à un client dont le site existe en version RTL, la question cesse d’être théorique : « gauche » et « droite » ne correspondent plus à « début » et « fin » de ligne.

Les propriétés logiques CSS résolvent ce problème à la racine, en remplaçant les repères physiques (haut, bas, gauche, droite) par des repères relatifs au sens d’écriture (bloc et ligne). Dans un thème à blocs, elles s’intègrent directement dans theme.json, sans code supplémentaire ni feuille de style séparée pour le RTL.

Physique contre logique : la différence concrète

Une propriété physique comme margin-left désigne toujours le même côté de l’écran, quel que soit le sens de lecture. Une propriété logique comme margin-inline-start désigne le début de la ligne de texte : à gauche en français, à droite en arabe. Le navigateur fait la traduction automatiquement en fonction de l’attribut dir du document et de la propriété writing-mode.

Les correspondances les plus utiles dans un thème :

• margin-inline-start / margin-inline-end remplacent margin-left / margin-right.
• margin-inline fixe les deux côtés en une seule déclaration, l’équivalent logique de margin-left + margin-right identiques.
• margin-block-start / margin-block-end remplacent margin-top / margin-bottom.
• padding-inline et padding-block suivent la même logique pour les espacements internes.

Où l’utiliser dans theme.json

Les styles globaux acceptent des valeurs CSS arbitraires dans certains blocs via la propriété css, ou plus simplement dans les styles d’éléments et de blocs déjà couverts par le schéma. Pour un espacement de bloc générique, la déclaration se fait au niveau du bloc concerné :

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/group": {
        "css": "margin-inline: var(--wp--preset--spacing--50); padding-inline: var(--wp--preset--spacing--40);"
      }
    }
  }
}

La propriété css au sein d’un bloc dans theme.json accepte une chaîne de règles CSS brutes, injectées dans une règle ciblant ce bloc précis. C’est le point d’entrée le plus direct pour des propriétés logiques que le schéma structuré de theme.json ne couvre pas nativement pour tous les cas.

Le cas des marges de la mise en page globale

Pour les réglages de mise en page générale (largeur de contenu, largeur large), les valeurs restent gérées par les variables de préréglage contentSize et wideSize, qui reposent déjà sur margin-inline: auto en interne côté cœur — aucune adaptation à faire de ce côté, le centrage automatique fonctionne de la même façon quel que soit le sens de lecture.

C’est surtout au niveau des espacements asymétriques (un bloc décalé d’un seul côté, une bordure d’accent sur un côté précis) que la bascule vers les propriétés logiques évite un dédoublement de règles.

Éviter le piège du rtl.css dupliqué

L’approche historique pour rendre un thème compatible RTL consistait à maintenir un fichier rtl.css séparé, chargé automatiquement par WordPress quand la langue du site l’exige, et contenant l’inverse de chaque règle physique du thème. Cette approche fonctionne, mais double la charge de maintenance : chaque ajustement d’espacement doit être répété, dans le bon sens, dans les deux fichiers.

Les propriétés logiques ne remplacent pas totalement ce fichier — certains ajustements très spécifiques au RTL (icônes à retourner, par exemple) restent hors de leur portée — mais elles éliminent la majorité des règles d’espacement et de bordure qui composaient jusqu’ici l’essentiel d’un rtl.css de thème à blocs.

Compatibilité navigateur

Les propriétés logiques de base (margin-inline, padding-inline, margin-block, padding-block) sont prises en charge par tous les navigateurs modernes ciblés par un thème WordPress actuel. Aucune solution de repli n’est nécessaire pour ces propriétés précises.

Vérifier le résultat

Le test le plus fiable reste manuel : ouvrir le site avec l’attribut dir="rtl" forcé (via les outils de développement du navigateur, en éditant temporairement l’attribut sur la balise html) et vérifier que les espacements suivent bien le sens de lecture inversé, sans qu’aucune règle physique ne vienne casser la mise en page dans ce sens.

Sur un thème destiné à plusieurs langues, la règle interne est simple : aucune nouvelle propriété physique d’espacement n’entre dans theme.json sans qu’on ait d’abord vérifié son équivalent logique.

En résumé

Passer aux propriétés logiques dans les styles globaux d’un thème à blocs n’ajoute pas de complexité : c’est en réalité une simplification, puisqu’un seul jeu de règles sert toutes les directions de lecture. Le seul effort réel consiste à prendre le réflexe au moment d’écrire chaque nouvelle règle d’espacement, plutôt que de corriger après coup.