<?php
/**
 * Onglets de navigation pour le Bloc Groupe
   Crédit code: https://redpishi.com/wordpress-tutorials/add-tabs-in-wordpress-without-plugins/
		   
La disposition et l’apparence de la composition est crée avec des blocs suivants:
	• Le bloc Boutons avec trois boutons ou chaque bouton va représenter un onglet 
	  avec son item de menu.
	• Trois blocs Groupe Gutenberg pour le contenu de chaque onglet.

Chaque bloc bouton se voit attribuer la classe: is-style-tab-item en sélectionnant 
le style Tab Item au panneau styles des paramètres du bloc
Chaque bloc groupe se voit attribuer la classe: is-style-tab-content en sélectionnant 
le style Tab Content au panneau styles des paramètres du bloc

Ces classes vont permettre d'appliquer des régles CSS en Front End via
le fichier asset\eccp-custom-front-end.php pour le bloc Boutons

On utilise un script js\eccp-tabs-blocks.js

Résumé des fonctionnalités du script:

• Au chargement de la page, le premier onglet et le premier contenu 
  sont définis comme actifs (affichés).
• Lorsque l'utilisateur clique sur un onglet, la fonction activeTab est appelée.
• La fonction activeTab désactive tous les onglets et masque les contenus 
  en supprimant la classe active.
• La fonction activeTab active l'onglet cliqué et affiche le contenu correspondant 
  en ajoutant respectivement la classe active à l'onglet et le bloc groupe correspondant.
		
	On retourne un array pour la fonction register_block_pattern() qui permet 
	d'enregistrer notre modèle de navigation par onglets:
	array(
		'title'      => __( 'Tabs Nav', 'editor-custom-color-palette' ),
		'categories' =>  array( 'composition-eccp' ),
		'description' => __( 'Établir une chronologie', 'editor-custom-color-palette' ),
		'keywords' => 'tabs',
		'content' => ' le code HTML du modèle'
	)
	
 */
return array(

	'title'      => __( 'Tabs Nav', 'editor-custom-color-palette' ),
	'categories' => array( 'composition-eccp' ),
	'description' => __( ' Establish a tabs nav', 'editor-custom-color-palette' ),
	'keywords' => 'tabs', 
	'content'    => '<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"title-color","className":"is-style-tab-item","style":{"elements":{"link":{"color":{"text":"var:preset|color|title-color"}}},"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"0","bottom":"0"}}},"buttonFillColorHoverAttribute":"#8FB63F"} -->
<div class="wp-block-button is-style-tab-item" style="--eccp-buttonFillColorHover:#8FB63F"><a class="wp-block-button__link has-title-color-color has-text-color has-link-color wp-element-button" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">Onglet 1</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"title-color","className":"is-style-tab-item","style":{"elements":{"link":{"color":{"text":"var:preset|color|title-color"}}},"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"0","bottom":"0"}}},"buttonFillColorHoverAttribute":"#F37020"} -->
<div class="wp-block-button is-style-tab-item" style="--eccp-buttonFillColorHover:#F37020"><a class="wp-block-button__link has-title-color-color has-text-color has-link-color wp-element-button" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">Onglet 2</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"title-color","className":"is-style-tab-item","style":{"elements":{"link":{"color":{"text":"var:preset|color|title-color"}}},"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"0","bottom":"0"}}},"buttonFillColorHoverAttribute":"#B84331"} -->
<div class="wp-block-button is-style-tab-item" style="--eccp-buttonFillColorHover:#B84331"><a class="wp-block-button__link has-title-color-color has-text-color has-link-color wp-element-button" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">Onglet 3</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:group {"className":"is-style-tab-content","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"dimensions":{"minHeight":"200px"}},"layout":{"type":"constrained"},"defaultStylewithBoxShadow":true,"styleAttribute":"default"} -->
<div class="wp-block-group is-style-tab-content eccp-box-shadow" style="min-height:200px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);box-shadow:0px 0px 4px 1px rgba(0,0,0,0.2)"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|green"}}}},"textColor":"green"} -->
<h3 class="wp-block-heading has-green-color has-text-color has-link-color">Contenu Onglet 1</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-style-tab-content","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"dimensions":{"minHeight":"200px"}},"layout":{"type":"constrained"},"defaultStylewithBoxShadow":true,"styleAttribute":"default"} -->
<div class="wp-block-group is-style-tab-content eccp-box-shadow" style="min-height:200px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);box-shadow:0px 0px 4px 1px rgba(0,0,0,0.2)"><!-- wp:heading {"level":3,"textColor":"primary"} -->
<h3 class="wp-block-heading has-primary-color has-text-color">Contenu Onglet 2</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-style-tab-content","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"dimensions":{"minHeight":"200px"}},"layout":{"type":"constrained"},"defaultStylewithBoxShadow":true,"styleAttribute":"default"} -->
<div class="wp-block-group is-style-tab-content eccp-box-shadow" style="min-height:200px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);box-shadow:0px 0px 4px 1px rgba(0,0,0,0.2)"><!-- wp:heading {"level":3,"textColor":"secondary"} -->
<h3 class="wp-block-heading has-secondary-color has-text-color">Contenu Onglet 3</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->',

);
