Full Site Editing (FSE)

Le FSE (depuis WordPress 5.9) permet de modifier l'intégralité du site avec l'éditeur de blocs, via des block themes et un fichier theme.json.

Structure d'un block theme

mon-theme/
├── style.css
├── theme.json
├── templates/
│   ├── index.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   └── 404.html
└── parts/
    ├── header.html
    └── footer.html

theme.json — Couleurs et typographie

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary",   "color": "#6B4EFF", "name": "Primaire" },
        { "slug": "secondary", "color": "#00CFCF", "name": "Secondaire" }
      ]
    },
    "typography": {
      "fontFamilies": [
        { "fontFamily": "Orbitron, sans-serif", "slug": "orbitron", "name": "Orbitron" }
      ],
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Petit" },
        { "slug": "large", "size": "1.5rem",   "name": "Grand" }
      ]
    }
  }
}

Styles globaux dans theme.json

{
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--orbitron)",
      "fontSize": "1rem",
      "lineHeight": "1.65"
    },
    "color": {
      "background": "var(--wp--preset--color--background)",
      "text": "var(--wp--preset--color--foreground)"
    },
    "elements": {
      "link": {
        "color": { "text": "var(--wp--preset--color--primary)" }
      }
    }
  }
}

Templates HTML

Les templates utilisent les commentaires de blocs WordPress. Exemple de single.html :