Sonata Extra Bundle: integrar el editor Gutenberg

Introducción

Integrar el editor Gutenberg en Sonata implica utilizar la biblioteca 'Automatic Isolated block editor'. Esta guía detalla los pasos necesarios para instalar y configurar el editor Gutenberg en su aplicación Sonata.

Pantallas

Instalación de la biblioteca

El editor Gutenberg se basa en una biblioteca de 'Automatic Isolated Block Editor'. Puede descargar la biblioteca utilizando el siguiente enlace: Biblioteca de editor de bloques aislados automática

Pasos de instalación

Descargue e instale la biblioteca :

Use la línea de comandos para descargar e instalar los recursos de la biblioteca Gutenberg:

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

Agregar un campo de widget de Gutenberg en los temas de formulario Twig :

Actualice su twig.yaml configuración para incluir el campo de widget de Gutenberg:

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

Usar Gutenberg en Sonata Admin

Configuración del tipo de formulario

Implemente el tipo de formulario Gutenberg en su clase de administración 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
            ]);
    }
}

Bloques de Gutenberg

El editor Gutenberg viene con una variedad de bloques por defecto:

Texto

núcleo/párrafo
núcleo/citación
"core/preformateado"
núcleo/versículo
núcleo/lista
core/elemento-de-lista

Medios

núcleo/imagen
noyau/audio
core/video
núcleo/galería
«core/media-text»
core/archivo
núcleo/cobertura

Formato

núcleo/código
core/html
núcleo/citación
núcleo/mesa
columnas de texto principales

Maquetación

núcleo/botón
core/botones
núcleo/columna
núcleo/columnas
núcleo/grupo
"core/separador"
núcleo/espaciado
core/lista-de-páginas
core/elemento-lista-página
núcleo/navegación
core/enlace-de-navegación
núcleo/menú-de-navegación

Widgets

núcleo/archivos
núcleo/calendario
núcleo/categorías
núcleo/últimos-comentarios
núcleo/últimos-artículos
"core/rss"
core/búsqueda
núcleo/código corto
«core/enlace social»
núcleo/enlaces-sociales
núcleo/nube-de-etiquetas

Integrar

núcleo/insertar
"núcleo/bloque"
núcleo/patrón

Sitio

«core/logo-sitio»
core/título-del-sitio
core/eslogan-del-sitio
inicio/enlace
core/conexión-desconexión

Modelo

núcleo/consulta
"núcleo/consulta-paginación"
core/solicitud-paginación-siguiente
núcleo/interrogar-paginación-números
core/solicitud-paginación-anterior
core/solicitud-sin-resultados
"core/consulta-título"
core/parte-modelo

Poste

núcleo/título-del-artículo
núcleo/extracto-de-publicación
núcleo/imagen-destacada
núcleo/contenido-artículo
core/autor-del-artículo
core/nombre-del-autor
core/fecha-de-publicación
core/términos-post
core/enlace-de-navegación-siguiente
core/modelo-de-publicación
núcleo/formulario-de-comentarios
núcleo/biografía-del-autor

Comentarios

"núcleo/comentarios"
core/nombre-del-autor-del-comentario
núcleo/comentario-contenido
"core/fecha-del-comentario"
core/enlace-modificar-comentario
núcleo/enlace-de-respuesta-al-comentario
core/modelo-de-comentario
core/título-de-comentarios
"core/comentarios-paginación"
"core/comments-paginación-siguiente"
"core/comments-paginación-números"
"core/comments-paginación-anterior"

Más

core/plus
"núcleo/página siguiente"
core/leer-más
núcleo/detalles
core/notas al pie
núcleo/avatar
núcleo/faltante

Subida de medios

La función de descarga de medios está activada por defecto. Puede reemplazar el contexto de los medios de la siguiente manera:

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

Personalización de los bloques permitidos

Puede especificar qué bloques están permitidos:

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

Agregar patrones personalizados

Paso 1: Cree un directorio de plantillas

Para añadir modelos personalizados, cree un directorio en la configuración de su proyecto:

Acceda a su directorio de configuración: config/
Crear un nuevo directorio llamado patterns/

Paso 2: Añada su biblioteca de patrones

Dentro del directorio de patrones, cree su propia biblioteca de patrones:

Cree un subdirectorio para su biblioteca: config/patterns/my-library/
Dentro de este directorio de biblioteca, agregue sus archivos de patrones (por ejemplo, pattern1.php). Los archivos pueden ser nombrados como se desee.

Paso 3: Definir los archivos de plantilla

Cada archivo de patrón debe contener un encabezado PHP y el código del bloque Gutenberg. Aquí hay un ejemplo de encabezado y disposición del bloque:

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

Finalmente, la estructura debería verse así:

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

Paso 4: Configurar FormType

Importador GutenbergPatternsService :

Importar GutenbergPatternsService en su clase de administración.

use App\Service\GutenbergPatternsService;

Inyectar el Servicio :

Utilice el atributo #[Required] para inyectar GutenbergPatternsService :

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

*Configurar el FormMapper :

Recuperen los patrones y transmítanlos 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
        ],
    ])
;

Adaptar el ejemplo a la versión instalada

Los ejemplos de Symfony y Sonata permanecen ligados a las versiones indicadas en el artículo. Symfony 4.x y Symfony 6.2 ya no se mantienen: para un proyecto actual, utilice una rama mantenida y la documentación que corresponda exactamente a sus dependencias.

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

Antes de retomar el código, controle las firmas, los servicios, las rutas y las plantillas correspondientes. Después, agregue una prueba funcional que cubra los permisos, el código HTTP y el resultado visible.

Referencia: versiones de Symfony mantenidas.