Création d’un thème WordPress basé sur les blocs

Création du dossier du theme et du fichier style.css

Créez un dossier avec le nom de votre thème. Par exemple : mon-theme.

Ajoutez un fichier style.css dans ce dossier. Les sites « full site editing » utilise le header standard des fichiers css de WordPress.

/*
Theme Name: Nom du thème.
Author: Nom du développeur du thème.
Description: Description du thème.
Version: La version, écrit au format X.X ou X.X.X.
Requires at least: La version de WordPress la plus ancienne supportée, écrit au format X.X. 
Tested up to: Dernière version de WordPress testée, 6.0. Ecrire seulement la version.
Requires PHP: La version de Php la plus ancienne supportée, au  format X.X, Ecrire seulement la version.
License: La License du thème.
License URI: L'URL de la licence du thème.
Text Domain: l'adresse utilisée pour les traduction, adresse du thème.
*/

Le projet peut commencer avec un fichier style.css vide. Seul le header ci-dessus est obligatoire.

Ajouter vos premiers templates

Ajouter dans votre dossier de thème un nouveau dossier nommé templates.

Créez deux fichier dans ce nouveau dossier :

• index.html (équivalent au index.phpdes thèmes classiques)
• 404.html (équivalent au 404.php des thèmes classiques)

Pour que WordPress et Gutenberg reconnaissent que votre thème est supporté par l’éditeur du site, le thème doit inclure un fichier index.html et vous devez placer ce fichier dans un dossier templates.

Création du fichier de configuration theme.json

Le fichier theme.json est un fichier de configuration qui permet d’autoriser ou d’interdire des réglages de blocs et qui permet appliquer ses réglages aux blocs.

Créez un fichier theme.json à la racine de votre thème.

{
        "version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px",
			"wideSize": "1100px"
		}
	}
}

Structure de base du theme

La structure de votre thème devrait ressembler à ceci dans votre dossier de thème que vous avez créé précédemment :

templates/
	index.html
	404.html
style.css
theme.json

Ajouter le fichier functions.php

Les thèmes WordPress full site editing n’ont pas besoin d’un fichier functions.php pour fonctionner. Ce fichier permet d’utiliser de nouvelles fonctions pour votre thème ainsi que d’ajouter des fichiers css ou javascripts, des tailles d’images custom et des hooks.

Créez un fichier functions.php à la racine de votre thème.

La fonction wp_enqueue_style() permet d’ajouter le lien de votre fichier style.css à la liste des fichiers à utiliser par WordPress.

<?php
/**
 * Functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package mon-theme
 * @since 1.0.0
 */

/**
 * Ajouter le fichier style.css.
 * 
 * @since 1.0.0
 */
function mon-theme_styles() {
	wp_enqueue_style(
 'fse-style',
 get_stylesheet_uri(),
 array(),
 wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'mon-theme_styles' )

Screenshot

Vous pouvez ajouter pour illustrer votre thème, à la racine de votre dossier, une image nommée screenshot au format .png (1200x900px).

Structure du theme

La mise en place de votre thème WordPress Full Site Editing (FSE) est terminée.

La structure de votre thème devrait maintenant ressembler à ceci :

templates/
	index.html
	404.html
functions.php
screenshot.png
style.css
theme.json

Des dossiers complémentaires peuvent être ajouter à la structure de votre thème. Ils serviront à stocker des morceaux de structure de votre thème

assets/
	fonts/
parts/
	header.html
	footer.html
patterns/
styles/
templates/
	index.html
	404.html
functions.php
screenshot.png
style.css
theme.json

Source: www.fullsiteediting.com/lessons/creating-block-based-themes/