> 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/guides/creer-un-bloc.md).

# Créer un bloc

{% stepper %}
{% step %}

### Créer un fichier PHP dans app/View/Blocks

Nommer le fichier **en Anglais** avec une **Majuscule** au début

```
├── app
    ├── View
        ├── Blocks
            ├── Hero.php
```

{% endstep %}

{% step %}

### Créer la classe du bloc

Précise au début `namespace App\View\Blocks;`

Ajoutez les 2 dépendances de classes : 

```php
use Akyos\Core\Classes\Block;
use Akyos\Core\Classes\GutenbergBlock;
```

Créer la classe du MÊME NOM que le fichier.\
Cette classe va hériter de `Block` créé dans le Akyos-x-core

```php
class Hero extends Block
{
}
```

{% endstep %}

{% step %}

### Ajouter les fonctions de la classe

Il y a 3 fonctions indispensables : 

```php
protected static function block(): GutenbergBlock
protected static function fields(): array
public function render()
```

`block()` : Permet de configurer l'identité du bloc (slug/titre/catégorie/icône..)

`fields()` : Retourne la liste des champs ACF 

`render()` : Retourne la vue Blade
{% endstep %}

{% step %}

### Fonction block()

```php
return (new GutenbergBlock())
            ->setName("hero")
            ->setTitle("Entête page accueil")
            ->setCategory("header")
            ->setIcon("admin-site")
            ->setPreviewImage(get_template_directory_uri() . '/resources/assets/images/previews/hero.png')
        ;
```

* Le nom est l'identifiant du bloc en Anglais
* Le titre est toujours en Français et EXPLICITE
* La catégorie doit être l'une des catégories déclarées dans `app/gutenberg.php`
* L'icône provient de <https://developer.wordpress.org/resource/dashicons/#location-alt>
* L'image de prévisualisation est utilisée dans le page builder : on prend un screenshot depuis la maquette
  {% endstep %}

{% step %}

### Fonction fields()

On retourne la liste des champs ACF via la libraire "Extended ACF"

{% code fullWidth="true" %}

```php
        return [
            Tab::make("Contenu"),
            Repeater::make("Images", "images")
                ->fields([
                    Image::make("Image", "image")
                        ->format('id'),
                ]),
            Tab::make("Options"),
            Number::make("Slides par vue", "per")
                ->default(1),
            Checkbox::make("Modules", "modules")
                ->choices([
                    'pagination' => 'Pagination',
                    'navigation' => 'Navigation',
                    'autoplay' => 'Autoplay',
                ])
        ];
```

{% endcode %}

Liste des champs disponibles : <https://github.com/vinkla/extended-acf>
{% endstep %}

{% step %}

### Fonction render()

On retourne le chemin vers la vue du template.

* Créer un fichier hero.blade.php dans le dossier `resources/views/blocks` avec comme nom l'identifiant du bloc&#x20;

<pre class="language-php"><code class="lang-php">public function render()
{
<strong>    return view('blocks.hero');
</strong>}
</code></pre>

{% endstep %}

{% step %}

### Fonction data()

La fonction `data()` est optionnelle. Elle permet de traiter un peu de logique depuis la déclaration du bloc et renvoyer des variables à la vue.

Pour ça, il faut déclarer des propriétés sur la classe :&#x20;

```php
class Blog extends Block
{
    public $posts;
    public $pagination;
    public $max_pages;
    ...

```

```php
public function data()
    {

        $query = QueryBuilder::make("post")
            ->limit(4)
            ->page(get_query_var('paged') ?: 1)
            ->orderBy('date', 'DESC')
            ->get('query');

        $this->posts = $query->posts;
        $this->pagination = App::getPagination($query);
        $this->max_pages = $query->max_num_pages;

        $show_filters = get_field('show_filters');
        $show_pagination = get_field('show_pagination');

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

Dans ma vue, j'aurais directement accès aux variables `$posts $pagination` et `$max_pages`

{% hint style="info" %}
L'utilisation d'un Composer est également possible même si un Composer aura + de sens s'il y a plusieurs blocs qui doivent recevoir les mêmes infos
{% endhint %}
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Pas de nom en Anglais à part si c'est vraiment courant genre "slider" mais "hero" ça l'est beaucoup moins, pareil pour "container" , "Boite de contenu" c'est plus compréhensible\
\
Encore une fois, c'est fait pour mettre à l'aise le plus possible le client.\
Bien penser à ajouter une catégorie
{% endhint %}

<details>

<summary>Créer une catégorie de blocs</summary>

Dans le fichier `gutenberg.php` il y a une liste de catégories déclarées :&#x20;

```php


    $categories[] = array(
        'slug' => 'form',
        'title' => 'Formulaire'
    );

    $categories[] = array(
        'slug' => 'content',
        'title' => 'Blocs de contenu'
    );

    $categories[] = array(
        'slug' => 'layout',
        'title' => 'Blocs de mise en page'
    );

    $categories[] = array(
        'slug' => 'slider',
        'title' => 'Sliders'
    );

    $categories[] = array(
        'slug' => 'element',
        'title' => 'Elements seuls'
    );

    $categories[] = array(
        'slug' => 'cpt',
        'title' => 'Contenu personnalisé'
    );

    return $categories;
});
```

Ajoutez une entrée supplémentaire avec votre nouvelle catégorie et utilisez bien le `slug` dans le `setCategory()` du bloc.

</details>

<details>

<summary>Utiliser la commande make:block</summary>

Au lieu de réécrire les blocs à la main, une commande est disponible depuis `wp acorn`

`wp acorn make:block`

Il suffit de donner un nom au bloc et les fichiers sont générés automatiquement :&#x20;

* Déclaration du bloc
* Création de la vue
* Création d'un fichier .scss pour le bloc

</details>