> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/wordpress/details-du-theme/systeme-de-blocs.md).

# Système de blocs

### Qu'est-ce qu'un Block ?

À l'arrivé de Gutenberg en Page Builder Natif à Wordpress, il nous a semblé logique de prendre celui-ci pour des soucis de performances et de maintenabilité. Nous avons donc repris les Blocks de Gutenberg au lieu de shortcode.

Un Block est donc un objet qui est référencé dans Gutenberg, où l'on peut ajouter des champs ACF pour que ce soit administrable et qui a un template associé pour pouvoir le rendre.

### Nomenclature

Pour nommer vos blocks, il n'y a pas de convention spécifique puisque le bout de code qui permet de parser les blocks et les enregistrer, ne met de pas de contrainte.

```php
$path = get_template_directory().DIRECTORY_SEPARATOR.'app'.DIRECTORY_SEPARATOR.'View'.DIRECTORY_SEPARATOR.'Blocks';
        $directory = new \RecursiveDirectoryIterator($path);
        $iterator = new \RecursiveIteratorIterator($directory);
        foreach ($iterator as $info) {
            if (preg_match('/\w*[.]php\b/', $info->getFileName())) {
                require_once $info->getPathName();
                $name = explode('.', $info->getFileName());
                $name = 'App\\View\\Blocks\\'.$name[0];
                (new $name())->registerGutenberg();
            }
        }

```

{% hint style="info" %}
Pour tout ce qui est affiché sur le back office **: Français**

-> ex : PAS DE CHAMP AVEC POUR LABEL "content button" 
{% endhint %}

Vous devez placer votre Block dans le bon dossier, c'est à dire qu'il doit se situé dans app/View/Blocks.

### Quelle est la différence entre Block et Component ?

Un Block est un Component puisque la classe Abstraite étend de Component. Vous pouvez donc utiliser toutes les fonctionnalités des Components **( `<x-component></x-component>` )**

Les seules spécificités en plus d'un Component, c'est que vous pouvez lui ajouter des champs administrables dans le BO via Wordplate/ACF et qu'il est enregistré dans Gutenberg.

### Visualisation de la Classe abstraite Block

{% embed url="<https://github.com/akyoscommunication/akyos-x-core/blob/main/src/Classes/Block.php>" %}

Vous voyez ici, que nous avons deux fonctions abstraites protégées avec lesquelles vous pouvez interagir qui sont `block()` et `fields()` .

`registerBlock()` permet comme son nom l'indique, d'enregistrer le block dans Gutenberg.&#x20;

### Utiliser le block comme un component

Vous devez mettre dans le construct et en attributs, les mêmes noms que vous avez dans les champs ACF pour pouvoir les utiliser. Nous avons dû faire cela pour que les variables soit accessibles dans la vue via la fonction `renderCallback`.

{% hint style="danger" %}
Le nom du template blade du block doit être en MINUSCULE et SANS TIRET
{% endhint %}

### Réajuster ou ajouter de nouvelles données au composant à la volé

Utiliser la fonction `data()` dans votre composant et ajouter votre logique.

Exemple :&#x20;

```php
public function data()
{
    $this->styleCustom = style_vars([
        'text-align' => $this->textAlign
    ]);

    return parent::data();
}
```

{% hint style="danger" %}
Bien retourner la function parent de data
{% endhint %}