README

Easy Gutenberg Bundle

将 WordPress 的 Gutenberg 编辑器集成到 Easyadmin。

版本

使用 Symfony Flex 进行安装

添加我们的配方端点

{
  "extra": {
    "symfony": {
      "endpoint": [
        "https://api.github.com/repos/agence-adeliom/symfony-recipes/contents/index.json?ref=flex/main",
        ...
        "flex://defaults"
      ],
      "allow-contrib": true
    }
  }
}

使用 composer 进行安装

composer require agence-adeliom/easy-gutenberg-bundle

文档

使用 GutenbergField

前往您的 CRUD 控制器，例如： src/Controller/Admin/PageCrudController.php

<?php

namespace App\Controller\Admin;

...
use App\Entity\EasyFaq\Entry;
use App\Entity\EasyFaq\Category;

abstract class PageCrudController extends AbstractCrudController
{
    ...
    
    public function configureCrud(Crud $crud): Crud
    {
        return parent::configureCrud($crud)
            // Add the form theme
            ->addFormTheme('@EasyGutenberg/form/gutenberg_widget.html.twig')
            ;
    }
    
    public function configureFields(string $pageName): iterable
    {
        ...
        yield GutenbergField::new("content");
        ...

创建一个新的区块

php bin/console make:gutenberg

然后设置您的表单字段

<?php

namespace App\Blocks;

use Adeliom\EasyGutenbergBundle\Blocks\AbstractBlockType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

class TwoColsType extends AbstractBlockType
{
    public function buildBlock(FormBuilderInterface $builder, array $options): void
    {
        $builder->add("left_col", TextType::class, ["label" => 'Left column content']);
        $builder->add("right_col", TextType::class, ["label" => 'Right column content']);
    }

    public static function getName(): string
    {
        return 'Two columns';
    }

    public static function getDescription(): string
    {
        return 'Make a two columns layout';
    }

    public static function getIcon(): string
    {
        return '';
    }

    public static function getTemplate(): string
    {
        return "blocks/two_cols.html.twig";
    }
}

前端使用

在您的模板中，您可以使用以下函数

# This convert and render the content 
{{ easy_gutenberg(page.content) }}

# This render the blocks's assets must be called after 'easy_gutenberg'
{{ easy_gutenberg_assets() }}

额外功能

添加前端资源

    public static function configureAssets(): array
    {
        return [
            'js' => [],
            'css' => [],
            'webpack' => [],
        ];
    }

添加后端资源

    public static function configureAdminAssets(): array
    {
        return [
            'js' => [],
            'css' => [],
        ];
    }

添加额外的表单主题

    public static function configureAdminFormTheme(): array
    {
        return [];
    }

指定类别

提供的类别有

• common
• text
• media
• design
• widgets
• theme
• embed

    public static function getCategory(): string
    {
        return 'common';
    }

指定变体

    public static function getVariations(): array
    {
        return [
            [
                "name": 'variation_with_bg',
                "isDefault": true,
                "title": "Variation With background",
                "icon": '',
                "attributes": [
                    "with-bg": true
                ],
            ]
        ];
    }

指定额外属性

    public static function getAttributes(): array
    {
        return [
             "with-bg" => ['type' => 'boolean']
        ];
    }

指定支持

允许的支持有

• anchor
• align
• alignWide
• className
• lock

    public static function getSupports(): array
    {
        return array_merge(parent::getSupports(),[
            'align' => false,
        ]);
    }

许可证

MIT

作者

• @arnaud-ritti
• @JeromeEngelnAdeliom