Sonata Extra Bundle : intégrer l’éditeur Gutenberg

Introduction

Intégrer l'éditeur Gutenberg dans Sonata implique d'utiliser la bibliothèque 'Automatic Isolated block editor'. Ce guide détaille les étapes nécessaires pour installer et configurer l'éditeur Gutenberg dans votre application Sonata.

Écrans

Installation de la bibliothèque

L'éditeur Gutenberg repose sur une bibliothèque de 'Automatic Isolated Block Editor'. Vous pouvez télécharger la bibliothèque en utilisant le lien suivant : Bibliothèque d'éditeur de blocs isolés automatique

Étapes d'installation

Téléchargez et installez la bibliothèque :

Utilisez la ligne de commande pour télécharger et installer les ressources de la bibliothèque Gutenberg :

bin/console sonata:extra:install-gutenberg
bin/console assets:install

Ajouter un champ de widget Gutenberg dans les thèmes de formulaire Twig :

Mettez à jour votre twig.yaml configuration pour inclure le champ de widget Gutenberg :

#config/packages/twig.yaml
twig:
    form_themes:
        - '@PartitechSonataExtra/Form/gutenberg_field.html.twig'

Utiliser Gutenberg dans Sonata Admin

Configuration du type de formulaire

Implémentez le type de formulaire Gutenberg dans votre classe d'administration Sonata :

<?php

namespace App\Admin;

use App\Form\Type\GutenbergType;
use Sonata\AdminBundle\Form\FormMapper;
// ... other uses

class YourEntityAdmin extends AbstractAdmin
{
    protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
            ->add('yourField', GutenbergType::class, [
                'label' => 'Your Field',
                // ... other options
            ]);
    }
}

Blocs Gutenberg

L'éditeur Gutenberg est livré avec une variété de blocs par défaut :

Texte

core/paragraphe
"core/citation"
"core/préformaté"
noyau/verset
"core/list"
"core/élément-de-liste"

Médias

"core/image"
"noyau/audio"
"core/vidéo"
core/galerie
« core/media-text »
"core/fichier"
core/couverture

Mise en forme

noyau/code
"core/html"
"core/citation"
noyau/table
colonnes de texte principales

Mise en page

core/bouton
"core/boutons"
"noyau/colonne"
core/colonnes
"noyau/groupe"
"core/séparateur"
noyau/espacement
"core/liste-de-pages"
"core/élément-liste-page"
noyau/navigation
"core/lien-de-navigation"
core/menu-de-navigation

Widgets

core/archives
core/calendrier
"noyau/catégories"
noyau/derniers-commentaires
core/derniers-articles
"core/rss"
"core/recherche"
"core/shortcode"
«core/lien-social»
core/liens-sociaux
noyau/nuage-de-tags

Intégrer

"core/embed"
"core/block"
"core/pattern"

Site

«core/logo-site»
core/titre-du-site
core/slogan-du-site
accueil/lien
"core/connexion-déconnexion"

Modèle

"core/query"
"core/query-pagination"
"core/requête-pagination-suivante"
"noyau/interroger-pagination-nombres"
"core/requête-pagination-précédente"
"core/requête-sans-résultats"
"core/query-titre"
"core/partie-modèle"

Poste

core/titre-de-l'article
core/extrait-de-publication
noyau/image-en-vedette
noyau/contenu-article
"core/auteur-de-l'article"
"core/nom-de-l'auteur"
"core/date-de-publication"
"core/termes-post"
core/lien-de-navigation-suivante
"core/modèle-de-publication"
core/formulaire-de-commentaires
noyau/biographie-de-l'auteur

Commentaires

"core/comments"
"core/nom-de-l'auteur-du-commentaire"
"core/commentaire-contenu"
"core/comment-date"
"core/lien-modifier-commentaire"
"noyau/lien-de-réponse-au-commentaire"
"core/modèle-de-commentaire"
"core/comments-title"
"core/comments-pagination"
"core/comments-pagination-suivant"
"core/comments-pagination-numbers"
"core/comments-pagination-previous"

Plus

"core/plus"
"core/page suivante"
core/lire-plus
noyau/détails
core/notes de bas de page
"core/avatar"
"core/manquant"

Téléversement de médias

La fonction de téléchargement de médias est activée par défaut. Vous pouvez remplacer le contexte des médias comme suit :

$formMapper
    ->add('content', GutenbergType::class, [
        'label' => 'Content',
        'context' => 'default'
    ]);

Personnalisation des blocs autorisés

Vous pouvez spécifier quels blocs sont autorisés :

$formMapper
    ->add('content', GutenbergType::class, [
        'label' => 'Content',
        'allowed_blocks' => [
            "core/pattern",
            "core/categories",
            // ... other allowed blocks
        ],
    ]);

Ajouter des motifs personnalisés

Étape 1 : Créez un répertoire de modèles

Pour ajouter des modèles personnalisés, créez un répertoire dans la configuration de votre projet :

Accédez à votre répertoire de configuration : config/
Créer un nouveau répertoire nommé patterns/

Étape 2 : Ajoutez votre bibliothèque de motifs

À l'intérieur du répertoire des motifs, créez votre propre bibliothèque de motifs :

Créez un sous-répertoire pour votre bibliothèque : config/patterns/my-library/
À l'intérieur de ce répertoire de bibliothèque, ajoutez vos fichiers de motifs (par exemple, pattern1.php). Les fichiers peuvent être nommés comme souhaité.

Étape 3 : Définir les fichiers de modèle

Chaque fichier de motif doit contenir un en-tête PHP et le code du bloc Gutenberg. Voici un exemple d'en-tête et de mise en page du bloc :

<?php
/**
 * Title: My Test Pattern 1
 * Description: Example of a custom pattern
 * Categories: test
 */
?>
<!-- wp:group {"layout":{"type":"constrained","contentSize":"400px"}} -->
<div class="wp-block-group">
    <!-- wp:cover {"url":"[Image URL]","dimRatio":0,"isDark":false,"style":{"border":{"radius":"10px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-cover is-light" style="border-radius:10px">
        <!-- Your block content -->
    </div>
    <!-- /wp:cover -->
</div>
<!-- /wp:group -->

Enfin, la structure devrait ressembler à ceci :

--config<br>
-----patterns<br>
--------my-library<br>
-----------------patern1.php<br>
-----------------patern2.php<br>

Étape 4 : Configurer FormType

Importer GutenbergPatternsService :

Importez GutenbergPatternsService dans votre classe d’administration.

use App\Service\GutenbergPatternsService;

Injecter le Service :

Utilisez l’attribut #[Required] pour injecter GutenbergPatternsService :

#[Required]
public function required(GutenbergPatternsService $gutenbergPatterns): void {
    $this->gutenbergPatterns = $gutenbergPatterns;
}

*Configurer le FormMapper :

Récupérez les motifs et transmettez-les au FormMapper :

$patterns = $this->gutenbergPatterns->getPatterns(['my-library']);

$formMapper
    ->add('content', GutenbergType::class, [
        'label' => 'Content',
        'patterns' => $patterns,
        'context' => 'default',
        'allowed_blocks' => [
            "core/pattern",
            "core/categories",
            // ... other allowed blocks
        ],
    ])
;

Adapter l’exemple à la version installée

Les exemples Symfony et Sonata restent attachés aux versions indiquées dans l’article. Symfony 4.x et Symfony 6.2 ne sont plus maintenus : pour un projet actuel, utilisez une branche maintenue et la documentation correspondant exactement à vos dépendances.

php bin/console about
composer show symfony/framework-bundle sonata-project/admin-bundle

Avant de reprendre le code, contrôlez les signatures, les services, les routes et les templates concernés. Ajoutez ensuite un test fonctionnel couvrant les autorisations, le code HTTP et le résultat visible.

Référence : versions Symfony maintenues.