Sonata Extra Bundle: integrare l'editor Gutenberg

Introduzione

Integrare l'editor Gutenberg in Sonata implica l'uso della libreria 'Automatic Isolated block editor'. Questa guida dettaglia i passaggi necessari per installare e configurare l'editor Gutenberg nella vostra applicazione Sonata.

Schermi

Installazione della libreria

L'editor Gutenberg si basa su una libreria di 'Automatic Isolated Block Editor'. È possibile scaricare la libreria utilizzando il seguente link: Libreria dell'editore di blocchi isolati automatici

Fasi di installazione

Scarica e installa la libreria :

Usa la riga di comando per scaricare e installare le risorse della biblioteca Gutenberg:

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

Aggiungere un campo widget di Gutenberg nei temi dei moduli Twig :

Aggiorna il tuo twig.yaml configurazione per includere il campo del widget Gutenberg:

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

Usare Gutenberg in Sonata Admin

Configurazione del tipo di modulo

Implementa il tipo di modulo Gutenberg nella tua classe di amministrazione 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
            ]);
    }
}

Blocchi Gutenberg

L'editor Gutenberg viene fornito con una varietà di blocchi predefiniti:

Testo

cuore/paragrafo
"core/citation"
"core/préformattato"
nucleo/versetto
"core/list"
core/elemento-della-lista

Media

core/immagine
noyau/audio
"core/video"
core/galleria
« core/media-text »
core/file
core/copertura

Formattazione

nucleo/codice
core/html
"core/citation"
nocciolo/tavolo
colonne di testo principali

Impaginazione

core/bottone
"core/pulsanti"
nucleo/colonna
nucleo/colonne
nucleo/gruppo
"core/separatore"
nucleo/spaziatura
core/elenco-pagine
core/elemento-lista-pagina
nucleo/navigazione
core/collegamento-di-navigazione
core/menu-di-navigazione

Widget

core/archivi
cuore/calendario
nucleo/categorie
nucleo/ultimi-commenti
core/ultimi-articoli
"core/rss"
core/ricerca
"core/shortcode"
«core/legame sociale»
core/collegamenti-sociali
nucleo/nuvola-di-tag

Integrare

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

Sito

«core/logo-sito»
core/titolo-del-sito
core/slogan-del-sito
accueil/collegamento
core/connessione-disconnessione

Modello

"core/query"
"core/query-pagination"
"core/richiesta-paginazione-successiva"
nucleo/interrogare-paginazione-numeri
core/risposta-paginazione-precedente
core/richiesta-senza-risultati
"core/query-titre"
core/parte-modello

Poste

core/titolo-dell'articolo
core/estratto-di-pubblicazione
nucleo/immagine-in-evidenza
nucleo/contenuto-articolo
core/autore-dell'articolo
core/nome-dell'autore
"core/data-di-pubblicazione"
"core/termini-post"
core/collegamento-di-navigazione-successivo
core/modello-di-pubblicazione
core/modulo-di-commenti
nucleo/biografia-dell'autore

Commenti

"core/comments"
core/nome-dell'autore-del-commento
core/commento-contenuto
"core/comment-date"
core/collegamento-modifica-commento
nucleo/link-di-risposta-al-commento
core/modello-di-commento
"core/comments-title"
"core/comments-pagination"
"core/comments-pagination-successivo"
"core/commenti-paginazione-numeri"
"core/commenti-paginazione-precedente"

Più

"core/plus"
"core/pagina successiva"
core/leggi-di-più
nucleo/dettagli
core/note a piè di pagina
core/avatar
"core/mancante"

Caricamento dei media

La funzione di download dei media è attivata per impostazione predefinita. È possibile modificare il contesto dei media come segue:

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

Personalizzazione dei blocchi autorizzati

Potete specificare quali blocchi sono autorizzati:

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

Aggiungere motivi personalizzati

Fase 1: Crea una directory di modelli

Per aggiungere modelli personalizzati, crea una directory nella configurazione del tuo progetto:

Accedete alla vostra directory di configurazione: config/
Creare una nuova directory chiamata patterns/

Fase 2: Aggiungi la tua libreria di modelli

All'interno della directory dei modelli, crea la tua libreria di modelli:

Crea una sottocartella per la tua libreria: config/patterns/my-library/
All'interno di questa directory della libreria, aggiungi i tuoi file di modelli (ad esempio, pattern1.php). I file possono essere nominati come desiderato.

Fase 3: Definire i file di modello

Ogni file modello deve contenere un'intestazione PHP e il codice del blocco Gutenberg. Ecco un esempio di intestazione e layout del blocco:

<?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 -->

Infine, la struttura dovrebbe assomigliare a questa:

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

Fase 4: Configurare FormType

Importatore GutenbergPatternsService :

Importa GutenbergPatternsService nella vostra classe di amministrazione.

use App\Service\GutenbergPatternsService;

Iniettare il Servizio :

Usa l'attributo #[Required] per iniettare GutenbergPatternsService :

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

*Configurare il FormMapper :

Recuperate i motivi e trasmetteteli a 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
        ],
    ])
;

Adattare l’esempio alla versione installata

Gli esempi Symfony e Sonata rimangono legati alle versioni indicate nell’articolo. Symfony 4.x e Symfony 6.2 non sono più supportati: per un progetto attuale, utilizzate un ramo mantenuto e la documentazione corrispondente esattamente alle vostre dipendenze.

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

Prima di riprendere il codice, controllate le firme, i servizi, le rotte e i template interessati. Aggiungete poi un test funzionale che copra le autorizzazioni, il codice HTTP e il risultato visibile.

Riferimento : versioni di Symfony supportate.