Blocs (Gutenberg) avec ACF Composer

Les blocs constituent l’unité de base de l’éditeur Gutenberg.
Dans le T32B, les blocs sont définis et configurés exclusivement via ACF Composer, afin de garantir une architecture claire, versionnée et maintenable.

Pourquoi utiliser ACF Composer pour les blocs ?

Cette approche permet de :

• Versionner les blocs avec le code
• Centraliser leur configuration
• Éviter la création manuelle via l’UI ACF
• Garantir des clés de champs stables
• Faciliter la réutilisation et l’évolution

Création d’un bloc via la ligne de commande

La création d’un bloc se fait via la ligne de commande :

wp acorn acf:block Hero

Cette commande génère :

• la classe du bloc
• la vue dans le dossier resources/views/blocks

⚠️ Cette commande ne gère pas la différence de langue entre le slug en Anglais et le nom du bloc en Français. Vous devez donc, après avoir généré votre classe bloc, ajouter une propriété $slug et faire correspondre sa valeur avec le slug de la vue généré.

Exemple

namespace App\Configurations\Blocks;

use Log1x\AcfComposer\Block;
use Log1x\AcfComposer\Builder;

class Spacer extends Block
{
    /**
     * The block name.
     *
     * @var string
     */
    public $name = 'Espacement';

    public $slug = 'spacer';

    /**
     * The block description.
     *
     * @var string
     */
    public $description = 'Bloc pour créer des espacements responsive';

    /**
     * The block category.
     *
     * @var string
     */
    public $category = 'design';

    /**
     * The block icon.
     *
     * @var string|array
     */
    public $icon = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false"><path d="M7 18h4.5v1.5h-7v-7H6V17L17 6h-4.5V4.5h7v7H18V7L7 18Z"></path></svg>';

    /**
     * The block keywords.
     *
     * @var array
     */
    public $keywords = [];

    /**
     * The parent block type allow list.
     *
     * @var array
     */
    public $parent = [];

    /**
     * The ancestor block type allow list.
     *
     * @var array
     */
    public $ancestor = [];

    /**
     * The default block mode.
     *
     * @var string
     */
    public $mode = 'preview';

    /**
     * The default block alignment.
     *
     * @var string
     */
    public $align = '';

    /**
     * The default block text alignment.
     *
     * @var string
     */
    public $align_text = '';

    /**
     * The default block content alignment.
     *
     * @var string
     */
    public $align_content = '';

    /**
     * The default block spacing.
     *
     * @var array
     */
    public $spacing = [
        'padding' => null,
        'margin' => null,
    ];

    /**
     * The supported block features.
     *
     * @var array
     */
    public $supports = [
        'align' => false,
        'align_text' => false,
        'align_content' => false,
        'full_height' => false,
        'anchor' => false,
        'mode' => true,
        'multiple' => true,
        'jsx' => true,
        'color' => [
            'background' => false,
            'text' => false,
            'gradients' => false,
        ],
        'spacing' => [
            'padding' => false,
            'margin' => false,
        ],
    ];

    /**
     * The block preview example data.
     *
     * @var array
     */
    public $example = [
        'desktop' => 100,
        'mobile' => 40,
    ];

    /**
     * Data to be passed to the block before rendering.
     */
    public function with(): array
    {
        return $this->values();
    }

    /**
     * Retrieve the items.
     */
    public function values(): array
    {
        return get_field('t32b_spacer') ?: $this->example;
    }

    /**
     * The block field group.
     */
    public function fields(): array
    {
        $fields = Builder::make('t32b_spacer_block');

        $fields
            ->addGroup('t32b_spacer', [
                'label' => ' ',
                'style' => 'seamless',
            ])
            ->addNumber('desktop', [
                'label' => __('Espacement sur desktop', DOMAIN),
                'default_value' => 100,
            ])
            ->addNumber('tablet', [
                'label' => __('Espacement sur tablette', DOMAIN),
                'default_value' => 60,
            ])
            ->addNumber('mobile', [
                'label' => __('Espacement sur mobile', DOMAIN),
                'default_value' => 40,
            ])
            ->endGroup();

        return $fields->build();
    }

    /**
     * Assets enqueued when rendering the block.
     */
    public function assets(array $block): void
    {
        //
    }
}