<?php

/***********************************************************************************************************
*  MODIFIER TAILLES POLICE EDITEUR GUTENBERG 
*    MODIFIER TAILLES POLICE EDITEUR GUTENBERG POUR UN THEME JSON 
*	 TYPOGRAPHIE FLUIDE TAILLES PERSONNALISÉES   
*	 ESPACEMENT FLUIDE MARGES & ESPACEMENT BLOCS  
*	 TAILLE POLICE EDITEUR GUTENBERG PAR DEFAUT  
*  DÉSACTIVER LA TAILLE DE POLICE PERSONNALISÉE 
*    DÉSACTIVER LA TAILLE DE POLICE PERSONNALISÉE POUR UN THEME JSON
*************************************************************************************************************/



/***********************************************************************************************
                           MODIFIER TAILLES POLICE EDITEUR GUTENBERG             
***********************************************************************************************/
	
	/*	
	
	Pour définir une taille de police personnalisée dans les paramètres de typographie Gutenberg, 
	nous allons utiliser le hook 'editor-font-sizes' avec la fonction add_theme_support().
	Cette fonction accepte un tableau de tailles de police. 
	Pour chaque taille de police, nous allons définir :
	
	Le nom : affiché dans l'interface.
	La taille en pixels : Utilisée pour styliser l'éditeur.
	Le slug : Un identifiant unique pour la taille. Utilisé pour styliser le frontend.
	
	Pour éviter un conflit avec les styles par défaut de WordPress on va précéder le slug
	avec les initiales du plugin: eccp 
	
	La traduction des noms pour les tailles de police n'est pas prise en compte avec le crochet d'action 
	'after_setup_theme' alors on utilise le le hook init: initialisation de WordPress.
	
	les classes pour appliquer la taille de la police en front-end seront:
	.has-eccp-small-font-size
	.has-eccp-large-font-size
	.has-eccp-large-font-size
	.has-eccp-huge-font-size 
	.has-eccp-extra-large-font-size
	
	On va donc en front-end générer les tailles de police
    & la Typographie Fluide	par du CSS Dynamique:
	CSS DYNAMIQUE TAILLES POLICE EDITEUR GUTENBERG & TYPOGRAPHIE FLUIDE (Front End)
	
	*/


function eccp_custom_font_size_editor() {
	
	// On récupère les paramètres de taille de texte pour l'éditeur
	$editor_text_size_settings = get_option( 'eccp_setting_editor_text_size' );
	
	
	add_theme_support( 'editor-font-sizes', array(

			// font-size: small
			array(
				'name' => __( 'Small', 'editor-custom-color-palette' ),
				'size' => intval($editor_text_size_settings['eccp_settings_small_font_size_text_field']),
				'slug' => 'eccp-small'
			),
			
			// font-size: regular
			array(
				'name' => __( 'Regular', 'editor-custom-color-palette' ),
				'size' => intval($editor_text_size_settings['eccp_settings_regular_font_size_text_field']),
				'slug' => 'eccp-regular'
			),
			
			// font-size: large
			array(
				'name' => __( 'Large', 'editor-custom-color-palette' ),
				'size' => intval($editor_text_size_settings['eccp_settings_large_font_size_text_field']),
				'slug' => 'eccp-large'
			),
			
			// font-size: huge (énorme)
			array(
				'name' => __( 'Huge', 'editor-custom-color-palette' ),
				'size' => intval($editor_text_size_settings['eccp_settings_huge_font_size_text_field']),
				'slug' => 'eccp-huge'
			),
			
			// font-size: Extra Large
			array(
				'name' => __( 'Extra Large', 'editor-custom-color-palette' ),
				'size' => intval($editor_text_size_settings['eccp_settings_extra_large_font_size_text_field']),
				'slug' => 'eccp-extra-large'
			),
			
		) 
	);
	
	
} 

// si on à activé la personnalisation de la taille de la police
if ( $editor_text_size_settings['eccp_settings_activate_editor_text_size_checkbox_field'] ==  true ) {
	add_action( 'init', 'eccp_custom_font_size_editor',10,1 );
}


// autre façon de modifier les tailles de texte en filtrant les paramètres
// de l'editeur avec le hook: block_editor_settings_all
function wp_docs_block_editor_settings( $editor_settings, $editor_context ) {
   
	$editor_settings["__experimentalFeatures"]["typography"]["fontSizes"]["default"] = 
										array (
											array("name"=>"Small","slug"=>"small","size"=>"18px"),
											array("name"=>"Medium","slug"=>"medium","size"=>"20px"),
											array("name"=>"Large","slug"=>"large","size"=>"24px"),
											array("name"=>"Extra Large","x-large"=>"medium","size"=>"30px"),
										);			 
									
    return $editor_settings;
	
}
 
//add_filter( 'block_editor_settings_all', 'wp_docs_block_editor_settings', 10, 2 );



/***********************************************************************************************
                  MODIFIER TAILLES POLICE EDITEUR GUTENBERG POUR UN THEME JSON           
***********************************************************************************************/
	
	/*
	Pour définir une taille de police personnalisée dans les paramètres de typographie Gutenberg, 
	nous allons utiliser le hook 'wp_theme_json_data_theme' introduit par WordPress 6.1
	qui permet de filtrer les paramétres de theme.json.
	la fonction utilisé avec le hook retourne la méthode update_with( $new_data )
	avec $new_data ayant une structure de type valide theme.json
	 
	On commence par déclarer quelle version de theme.json on utilise depuis WordPress 6.6
	c'est la version V3
	Ensuite on a le tableau settings qui comprend le tableau typography
	ou l'on va renseigner dans le tableau fontSizes nos tailles personnalisé
	
	Le nom : affiché dans l'interface.
	La taille en pixels : Utilisée pour styliser l'éditeur.
	Le slug : Un identifiant unique pour la taille. Utilisé pour styliser le frontend.
	
	Pour éviter un conflit avec les styles par défaut de WordPress on va précéder le slug
	avec les initiales du plugin: eccp 
		
	les classes pour appliquer la taille de la police en front-end seront:
	.has-eccp-small-font-size
	.has-eccp-large-font-size
	.has-eccp-large-font-size
	.has-eccp-huge-font-size 
	
	On va donc en front-end générer les tailles de police par du CSS Dynamique:
	CSS DYNAMIQUE TAILLES POLICE EDITEUR GUTENBERG & TYPOGRAPHIE FLUIDE (Front End)
	
	*/

function eccp_font_size_theme_json( $theme_json ){
	
	// On récupère les paramètres de taille de texte pour l'éditeur
	$editor_text_size_settings = get_option( 'eccp_setting_editor_text_size' );
	
    $new_data = array(
	
        'version'  => 3,
		
        'settings' => array(
		
            'typography' => array(
			
				// masque les tailles de police par défaut dans l’éditeur et permet au thème
				// de créer des préréglages à l'aide des slugs par défaut			
				'defaultFontSizes'=> false,
				
                'fontSizes' => array( 
				
                    // font-size: small
					array(
						'name' => __( 'Small', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_small_font_size_text_field']."px",
						'slug' => 'eccp-small'
					),
					
					// font-size: regular
					array(
						'name' => __( 'Regular', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_regular_font_size_text_field']."px",
						'slug' => 'eccp-regular'
					),
					
					// font-size: large
					array(
						'name' => __( 'Large', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_large_font_size_text_field']."px",
						'slug' => 'eccp-large'
					),
					
					// font-size: huge (énorme)
					array(
						'name' => __( 'Huge', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_huge_font_size_text_field']."px",
						'slug' => 'eccp-huge'
					),
					
					// font-size: Extra Large
					array(
						'name' => __( 'Extra Large', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_extra_large_font_size_text_field']."px",
						'slug' => 'eccp-extra-large'
					)
					
                ),
				
            ),
        ),
    );

    return $theme_json->update_with( $new_data );
}

// si on a activé la personnalisation des taille de police
if ( $editor_text_size_settings['eccp_settings_activate_editor_text_size_checkbox_field'] ==  true ) {
	add_filter( 'wp_theme_json_data_theme', 'eccp_font_size_theme_json', 10, 1 );
}


/***********************************************************************************************
                       TYPOGRAPHIE FLUIDE TAILLES PERSONNALISÉES          
***********************************************************************************************/

/*
la Typographie fluide permet aux tailles de police de s'adapter aux 
changements de taille de l'écran, par exemple en augmentant la taille 
à mesure que la largeur de la fenêtre augmente, ou en la réduisant 
à mesure qu'elle diminue.
La typographie fluide utilise une échelle et des largeurs d'écran prédéfinies.
La typographie fluide est active pour des Largeurs de fenêtre 
minimales et maximales(320px et 1600px) ce qui n'est pas optimal,
il vaudrait mieux 600px et 1280px.
elle s'applique aux
• valeurs prédéfinies de taille de police 
• tailles de police personnalisées

Deux hooks permettent de filtrer un fichier theme.json:
wp_theme_json_data_default: filtre les données par défaut fournies par WordPress
lorsqu'on a pas de fichier theme.json
wp_theme_json_data_theme: filtre les données fournies par le fichier theme.json
du thème

Pour établir une typographie fluide WordPress utilise la fonction CSS clamp
qui prend trois valeur:
clamp([min-font-size], [fluid-font-size], [max-font-size]);
fluid-font-size est calculée avec la fonction clamp et s'ajustera 
en fonction de la taille de la fenêtre, afin d'obtenir l’effet fluide
pour la résolution d'écran comprise entre [320px et 1600px ] 
les valeurs min & max doivent être données en rem
avec la régle 1rem = 16px  
par exemple pour des valeurs
min: 24px ( pour une résolution de 768px) 
max:36px ( pour une résolution de 1600px)

'fluid' => array(
					'min' => '1.5rem',
					'max' => '2.25rem',
				),
				
lorsque min & max sont omis max sera égal a size et min 
sera calculée automatiquement.
la fluid-font-size sera calculé par WordPress selon
https://websemantics.uk/tools/responsive-font-calculator/

La typographie fluide est définit dans le fichier:wp-includes\block-supports\typography.php
par la fonction wp_get_computed_fluid_typography_value()
min_viewport = 320px & max_viewport= 1600px, une taille mini de police est définit à 14px
 
WordPress génére une variable CSS au format:
--wp--preset--{preset-category}--{preset-slug}

exemple pour notre taille de texte Enorme définie a 36px 
avec le slug: eccp-huge générera la régle CSS:
.has-eccp-huge-font-size {
    font-size: var(--wp--preset--font-size--eccp-huge);
}

--wp--preset--font-size--eccp-huge: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 0.938), 2.25rem);


voici le code pour modifier les tailles de texte avec une typographie fluide
• on active la typographie fluide par 'fluid' => true,
• on peut la désactiver indépendement pour chaque taille de texte
par 'fluid' => false,

Malheureusement la désactivation de la typographie fluide par taille de texte
et spécifier les valeurs Min & Max ne fonctionnent pas pour les thèmes
sans fichier theme.json, on ne pourra donc 
l'appliquer qu'aux tailles de polices personnalisées.

Pour les theme classique sans fichier theme.json la typo fluide 
pour les tailles de textes prédéfinies sera activée uniquement 
en Front End et géré dans le fichier CSS\eccp-dynamic-css-front-end.php à la section:
CSS DYNAMIQUE TAILLES POLICE EDITEUR GUTENBERG & TYPOGRAPHIE FLUIDE (Front End)

function eccp_filter_fluid_typography_theme_json_data_default( $theme_json ){
	
	// On récupère les paramètres de taille de texte pour l'éditeur
	$editor_text_size_settings = get_option( 'eccp_setting_editor_text_size' );
	
    $new_data = array(
	
		'version' => 2,
		
		'settings' => array(
		
			'typography' => array(
			
				'fluid' => true,
				
				'fontSizes' => array( 
				
                    // font-size: small
					array(
						'name' => __( 'Small', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_small_font_size_text_field'].'px',
						'slug' => 'eccp-small',
						'fluid' => false,
					),
					
					// font-size: regular
					array(
						'name' => __( 'Regular', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_regular_font_size_text_field'].'px',
						'slug' => 'eccp-regular',
						'fluid' => false,
					),
					
					// font-size: large
					array(
						'name' => __( 'Large', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_large_font_size_text_field'].'px',
						'slug' => 'eccp-large',
						'fluid' => array(
							'min' => '1.25rem',
							'max' => '1.5rem',
						),
					),
					
					// font-size: huge (extra-large) (min:24px max:36px)
					array(
						'name' => __( 'Huge', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_huge_font_size_text_field'].'px',
						'slug' => 'eccp-huge',
						'fluid' => array(
							'min' => '1.5rem',
							'max' => '2.25rem',
						),
					)
					
                ),
				
				
			),
			
		),
		
	);

	return $theme_json->update_with( $new_data );
	
}
*/


// si le thème a un fichier theme.json
if (wp_theme_has_theme_json()){
	
	// si on a activé la typographie fluide pour une taille personnalisée ou
	// les tailles de texte prédéfinies
	if($editor_text_size_settings['eccp_settings_enable_fluid_custom_font_size_checkbox_field'] ||
	   $editor_text_size_settings['eccp_settings_enable_fluid_typography_checkbox_field']) {
			//add_filter( 'wp_theme_json_data_theme', 'eccp_filter_fluid_typography_theme_json_data_theme',1,1 );	
	}

// sinon pour un thème classique
} else	{
	
	// si on a activé la typographie fluide pour une taille personnalisée 
	if($editor_text_size_settings['eccp_settings_enable_fluid_custom_font_size_checkbox_field']) {
		add_filter( 'wp_theme_json_data_default', 'eccp_filter_fluid_typography_theme_json_data_default',1,1 );
	}
	
}


// activer la typographie fluide des tailles personnalisés
// pour les thèmes classiques sans fichier theme.json
function eccp_filter_fluid_typography_theme_json_data_default( $theme_json ){

    $new_data = array(
	
		'version' => 3,
		
		'settings' => array(
		
			'typography' => array(
			
				'fluid' => true,
				// pour modifier la taille min de 14px
				// attribué par défaut pour une limite inférieure à laquelle 
				// les tailles de police personnalisées fluides sont converties
				'minFontSize' => '18px',
			),
			
		),
		
	);

	return $theme_json->update_with( $new_data );
	
}

// activer la typographie fluide pour les thèmes classiques
// ayant un fichier thème.json comme le thème ASTRA
function eccp_filter_fluid_typography_theme_json_data_theme( $theme_json ){
	
	// on récupère les paramètres pour les tailles de texte
	$editor_text_size_settings = get_option( 'eccp_setting_editor_text_size' );
	
	// on récupère les paramètres de l'editeur
	$custom_gutenberg_editor_settings = get_option( 'eccp_settings_custom_gutenberg_editor' );
	
	// Remarque: Une résolution[768px 1600px] est préférable pour le thème Astra & Divi,
	// Ainsi que tous les thèmes ayant un fichier theme.json
	
	// 480px par défaut
	$min_viewport = $custom_gutenberg_editor_settings['eccp_settings_min_viewport_fluid_espacement_text_field'];
	
	// 1000px par défaut
	$max_viewport = $custom_gutenberg_editor_settings['eccp_settings_max_viewport_fluid_espacement_text_field'];
	
	
	$new_data = array(

		'version' => 3,
		
		'settings' => array(
		
		    /* pour modifier les largeurs de fenêtre minimales et maximales */ 
			'layout' => array(
			  'contentSize' => $min_viewport.'px',
			  'wideSize' => $max_viewport.'px'
			), 
		
			'typography' => array(
			
				'fluid' => true,
				
				// pour modifier la taille min de 14px
				// attribué par défaut pour une limite inférieure à laquelle 
				// les tailles de police personnalisées fluides sont converties
				'minFontSize' => '18px',
				
				'fontSizes' => array( 
				
                    // font-size: small
					array(
						'name' => __( 'Small', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_small_font_size_text_field'].'px',
						'slug' => 'eccp-small',
						'fluid' => array(
							'min' => strval(round( $editor_text_size_settings['eccp_settings_mobile_screen_small_font_size_text_field']/16,3)).'rem',
							'max' => strval(round( $editor_text_size_settings['eccp_settings_small_font_size_text_field']/16,3)).'rem',
						),
					),
					
					// font-size: regular
					array(
						'name' => __( 'Regular', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_regular_font_size_text_field'].'px',
						'slug' => 'eccp-regular',
						'fluid' => array(
							'min' => strval(round( $editor_text_size_settings['eccp_settings_mobile_screen_regular_font_size_text_field']/16,3)).'rem',
							'max' => strval(round( $editor_text_size_settings['eccp_settings_regular_font_size_text_field']/16,3)).'rem',
						),
					),
					
					// font-size: large
					array(
						'name' => __( 'Large', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_large_font_size_text_field'].'px',
						'slug' => 'eccp-large',
						'fluid' => array(
							'min' => strval(round( $editor_text_size_settings['eccp_settings_mobile_screen_large_font_size_text_field']/16,3)).'rem',
							'max' => strval(round( $editor_text_size_settings['eccp_settings_large_font_size_text_field']/16,3)).'rem',
						),
					),
					
					// font-size: huge (énorme) 
					array(
						'name' => __( 'Huge', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_huge_font_size_text_field'].'px',
						'slug' => 'eccp-huge',
						'fluid' => array(
							'min' => strval(round( $editor_text_size_settings['eccp_settings_mobile_screen_huge_font_size_text_field']/16,3)).'rem',
							'max' => strval(round( $editor_text_size_settings['eccp_settings_huge_font_size_text_field']/16,3)).'rem',
						),
					),
					
					// font-size: Extra Large 
					array(
						'name' => __( 'Extra Large', 'editor-custom-color-palette' ),
						'size' => $editor_text_size_settings['eccp_settings_extra_large_font_size_text_field'].'px',
						'slug' => 'eccp-extra-large',
						'fluid' => array(
							'min' => strval(round( $editor_text_size_settings['eccp_settings_mobile_screen_extra_large_font_size_text_field']/16,3)).'rem',
							'max' => strval(round( $editor_text_size_settings['eccp_settings_extra_large_font_size_text_field']/16,3)).'rem',
						),
					)
					
                ),
				
				
			),
			
		),
		
	);

	return $theme_json->update_with( $new_data );
	
}


/***********************************************************************************************
                       ESPACEMENT FLUIDE MARGES & ESPACEMENT BLOCS           
***********************************************************************************************/
/*
L'espacement fluide s'applique aux valeurs prédéfinies des marges interne,
externe et espacement des blocs
Cela permet aux espacements de s'adapter aux changements de taille de l'écran.
on utilise:
• le hook wp_theme_json_data_user qui permet de filtrer les données utilisateurs,
c'est a dire les options de la barre latérale Styles dans l'éditeur Gutenberg.
• la fonction CSS clamp qui permet d'obtenir l'espacement fluide,
elle comporte trois valeur:
clamp([min-spacing], [fluid-spacing], [max-spacing]);
[min-spacing]: valeur min en pixel de l'espacement pour une résolution d'écran <= min_viewport
[value-max]: valeur max de l'espacement en pixel pour la résolution d'écran >= max_viewport
fluid-spacing est calculée afin d'obtenir l’effet fluide et s'ajustera  
en fonction de la taille de la fenêtre compris dans la résolution:
[min_viewport en px, max_viewport en px], 
La formule de calcul est obtenu a partir de ce site:
https://websemantics.uk/tools/fluid-responsive-property-calculator/

fluid-spacing = calc(ZZrem + ((1vw - XXpx) * YY))
Avec   XX = min_viewport / 100
		YY est le facteur linéaire
        YY = 100 * (max_spacing - min_spacing) / (max_viewport - min_viewport)
           = 100 * spacing_difference / viewport_difference
        ZZ = min_spacing en REM
    
Rappel : 16px = 1rem

Exemple pour une résolution[480px 1000px] avec
un espacement min:16px & max:24px 
clamp(16px, calc(1rem + ((1vw - 4.8px) * 1.5385)), 24px)

On filtre dans theme.json les paramètres de marges et d'espacement des blocs 
avec la propriété spacingScale: utilisée pour générer un tableau de tailles 
prédéfinies d'espacement.
l'argument slug du tableau spacingScale doit être impérativement au format 
"20","30","40","50","60","70","80", avec "50" représentant la taille Medium. 

j'ai repris en taille max d'espacement les valeurs par défaut de Gutenberg:
Pour les slug 20 & 30 réservés aux tailles Tiny(minuscule) Very Small(trés petite)
je n'applique pas d'espacement fluide.
Pour cela je mets max_spacing = min_spacing

rem		pixel 	slug 	segment
0.44	7		20		1
0.625	10		30		2
1		16		40		3
1.5		24		50		4
2.25	36		60		5
3.38	54		70		6
5.06	81		80		7

espacement fluide pour les 7 valeurs prédéfinies
1er segment: clamp(7px, calc(0.4375rem + ((1vw - 4.8px) * 0)), 7px)
2ème segment: clamp(10px, calc(0.625rem + ((1vw - 4.8px) * 0)), 10px)
3ème segment: clamp(10px, calc(0.625rem + ((1vw - 4.8px) * 1.1538)), 16px)
4ème segment: clamp(16px, calc(1rem + ((1vw - 4.8px) * 1.5385)), 24px)
5ème segment: clamp(24px, calc(1.5rem + ((1vw - 4.8px) * 2.3077)), 36px)
6ème segment: clamp(32px, calc(2rem + ((1vw - 4.8px) * 4.2308)), 54px)
7ème segment: clamp(32px, calc(2rem + ((1vw - 4.8px) * 9.4231)), 81px)

WordPress génére une variable CSS au format:
--wp--preset--{preset-category}--{preset-slug}

Exemple on a sélectionné le 5ème segment pour l'espacement des blocs
la régle CSS obtenu est 
margin-block-start: var(--wp--preset--spacing--60);
On applique alors une marge haute de 36px sur PC et 24px sur mobile
Cette régle CSS s'applique en back office mais pas en Front End
pour le thème OceanWP par contre OK pour les marges internes & externes.

L'espacement Fluide ne fonctionne pas pour les marges externes avec 
un alignement centré du bloc a cause de la régle CSS:
.aligncenter {
    margin: 0 auto!important;
}

Une résolution[768px 1600px] est préférable pour le thème Astra & Divi,
Ainsi que tous les thèmes ayant un fichier theme.json

*/

// Si on a activé l'espacement fluide
if($custom_gutenberg_editor_settings['eccp_settings_enable_fluid_spacing_checkbox_field']){
	add_filter( 'wp_theme_json_data_user', 'eccp_filter_fluid_spacing_theme_json_data_user',1,1 );
}

function eccp_filter_fluid_spacing_theme_json_data_user( $theme_json ){
	
	// on récupère les paramètres de l'editeur
	$custom_gutenberg_editor_settings = get_option( 'eccp_settings_custom_gutenberg_editor' );
	
	$min_viewport = $custom_gutenberg_editor_settings['eccp_settings_min_viewport_fluid_espacement_text_field'];
	$max_viewport = $custom_gutenberg_editor_settings['eccp_settings_max_viewport_fluid_espacement_text_field'];
	$viewport_difference = $max_viewport - $min_viewport;
	$xx = strval($min_viewport/100).'px';
	
	// clamp(min spacing, fluid-spacing , max spacing )
	
	//fluid-spacing  = calc(ZZrem + ((1vw - XXpx) * YY))
		//Avec   XX = min_viewport / 100
        //YY = 100 * (max_spacing - min_spacing) / (max_viewport - min_viewport)
          // = 100 * spacing_difference / viewport_difference
        //ZZ = min_spacing in REM
	
	
	$new_data = array(
	
		'version' => 3,
		
		'settings' => array(
		
			'spacing' => array(
			
				// masque les tailles d'espacement par défaut dans l’éditeur et permet au thème
				// de créer des préréglages d'espacement à l'aide des slugs par défaut			
				'defaultSpacingSizes' => false,
			
				'spacingSizes' => array(
				
					array(
						'name' => 'Tiny(spacing 1)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_one_text_field'].'px,'. 
												'calc('.strval(round( $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_one_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round( 100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_one_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_one_text_field'] ) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_one_text_field'] .'px
										 )',
						'slug' => '20'
					),
					
					array(
						'name' => 'Very Small(spacing 2)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_two_text_field'].'px,'. 
												'calc('.strval(round($custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_two_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round( 100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_two_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_two_text_field']) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_two_text_field'] .'px
										 )',
						'slug' => '30'
					),
					
					array(
						'name' => 'Small(spacing 3)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_three_text_field'].'px,'. 
												'calc('.strval(round($custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_three_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round(100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_three_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_three_text_field']) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_three_text_field'] .'px
										 )',
						'slug' => '40'
					),
					
					array(
						'name' => 'Medium(spacing 4)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_four_text_field'].'px,'. 
												'calc('.strval(round($custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_four_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round(100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_four_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_four_text_field']) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_four_text_field'] .'px
										 )',
						'slug' => '50'
					),
					
					array(
						'name' => 'Large(spacing 5)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_five_text_field'].'px,'. 
												'calc('.strval(round($custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_five_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round(100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_five_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_five_text_field']) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_five_text_field'] .'px
										 )',
						'slug' => '60'
					),
					
					array(
						'name' => 'Extra Large(spacing 6)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_six_text_field'].'px,'. 
												'calc('.strval(round($custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_six_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round(100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_six_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_six_text_field']) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_six_text_field'] .'px
										 )',
						'slug' => '70'
					),
					
					array(
						'name' => 'XL(spacing 7)',
						'size' => 'clamp('	.$custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_seven_text_field'].'px,'. 
												'calc('.strval(round($custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_seven_text_field']/16,3)).'rem'.
														' + ('.
																'(1vw - ' .$xx .') * ' 
															.round(100 * ( ($custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_seven_text_field'] - $custom_gutenberg_editor_settings['eccp_settings_min_value_fluid_espacement_number_seven_text_field']) / $viewport_difference),4).
														   ')
													 ),' 
											.$custom_gutenberg_editor_settings['eccp_settings_max_value_fluid_espacement_number_seven_text_field'] .'px
										 )',
						'slug' => '80'
					),
					
				),
				
			),
		
		),
		
	);

	return $theme_json->update_with( $new_data );
	
}


/***********************************************************************************************
                  TAILLE POLICE EDITEUR GUTENBERG PAR DEFAUT           
***********************************************************************************************/

// pour bien déclarer le style uniquemment pour l'éditeur en back office on utilise 
// le hook: enqueue_block_editor_assets
if ( $editor_text_size_settings['eccp_settings_enable_default_gutenberg_editor_font_size_checkbox_field'] ) {
	add_action('enqueue_block_editor_assets', 'ecpp_default_gutenberg_editor_font_size');
}

function ecpp_default_gutenberg_editor_font_size() {
	
	add_action( 'admin_head', function() {
	
		// Si on est en back office & si l'objet d'écran est l'éditeur Gutenberg,
		// alors on peut charger notre style sinon on sort
		if (!is_admin() and !get_current_screen()->is_block_editor() ) {
			return;
		}
		
		// On récupère les paramètres de taille de texte pour l'éditeur
		$editor_text_size_settings = get_option( 'eccp_setting_editor_text_size' );
		
		
		echo '<style id="editor-custom-color-palette" type="text/css">';
		
			echo'.editor-styles-wrapper .wp-block {';
				echo'font-size:'.$editor_text_size_settings['eccp_settings_default_gutenberg_editor_font_size_text_field'].'px;';
			echo'}';
			
		echo '</style>';
		
	});

}


/***********************************************************************************************
                          DÉSACTIVER LA TAILLE DE POLICE PERSONNALISÉE             
***********************************************************************************************/

// si on a coché l'option pour désactiver la taille de police personnalisée
if ( $editor_text_size_settings['eccp_settings_disable_custom_font_size_checkbox_field'] == true ) {
	
	add_theme_support('disable-custom-font-sizes');
	
}


/***********************************************************************************************
             DÉSACTIVER LA TAILLE DE POLICE PERSONNALISÉE POUR UN THEME JSON            
***********************************************************************************************/

function eccp_disable_custom_font_size_theme_json( $theme_json ){
	
    $new_data = array(
	
        'version'  => 2,
		
        'settings' => array(
		
            'typography' => array(
                'customFontSize' => false,
            ),
			
        ),
    );

    return $theme_json->update_with( $new_data );
}

// si on a coché l'option pour désactiver la taille de police personnalisée
if( $editor_text_size_settings['eccp_settings_disable_custom_font_size_checkbox_field'] == true ) {
	add_filter( 'wp_theme_json_data_theme', 'eccp_disable_custom_font_size_theme_json', 10, 1 );
}

