Merge branch 'feature/blocks' into develop

2024-05-12 22:41:44 +02:00 · 2024-05-12 22:41:44 +02:00 · b8dfaaed10
parent 7897bafcc2 2d49b8ddee
commit b8dfaaed10
33 changed files with 1271 additions and 104 deletions
--- a/src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php
+++ b/src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php
@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+class BootstrapBlock extends BuilderBlock
+{
+    public function configure()
+    {
+        $this->setCategory('Bootstrap');
+    }
+}
--- a/src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php
+++ b/src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php
@ -0,0 +1,29 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class ColumnBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsColumn')
+            ->setLabel('Column')
+            ->setIsContainer(true)
+            ->setClass('col-12 col-md-2 pr-md-1')
+            ->setTemplate('@Core/builder_block/bootstrap/column.html.twig')
+            ->setIcon('<i class="fas fa-columns"></i>')
+            ->addSetting(name: 'size', label: 'Extra small', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeSm', label: 'Small', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeMd', label: 'Medium', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeLg', label: 'Large', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeXl', label: 'Extra large', type: 'number', attributes: ['min' => 0, 'max' => 12])
+        ;
+    }
+}
--- a/src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php
+++ b/src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php
@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class ContainerBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsContainer')
+            ->setLabel('Container')
+            ->setIsContainer(true)
+            ->setTemplate('@Core/builder_block/bootstrap/container.html.twig')
+            ->setIcon('<i class="fas fa-th"></i>')
+            ->addSetting(name: 'isFluid', label: 'Fluid', type: 'checkbox')
+        ;
+    }
+}
--- a/src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php
+++ b/src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php
@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class RowBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsRow')
+            ->setLabel('Row')
+            ->setIsContainer(true)
+            ->setIcon('<i class="fas fa-align-justify"></i>')
+            ->setTemplate('@Core/builder_block/bootstrap/row.html.twig')
+            ->addWidget('bsColumn')
+        ;
+    }
+}
--- a/src/core/BuilderBlock/Block/Editor/EditorBlock.php
+++ b/src/core/BuilderBlock/Block/Editor/EditorBlock.php
@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Editor;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+class EditorBlock extends BuilderBlock
+{
+    public function configure()
+    {
+        $this->setCategory('Editor');
+    }
+}
--- a/src/core/BuilderBlock/Block/Editor/TinymceBlock.php
+++ b/src/core/BuilderBlock/Block/Editor/TinymceBlock.php
@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Editor;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class TinymceBlock extends EditorBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('tinymce')
+            ->setLabel('TinyMCE')
+            ->setIsContainer(false)
+            ->setIcon('<i class="fas fa-pencil-alt"></i>')
+            ->setTemplate('@Core/builder_block/editor/tinymce.html.twig')
+            ->addSetting(name: 'value', type: 'textarea', attributes: ['data-tinymce' => ''])
+        ;
+    }
+}
--- a/src/core/BuilderBlock/BuilderBlock.php
+++ b/src/core/BuilderBlock/BuilderBlock.php
@ -0,0 +1,172 @@
+<?php
+
+namespace App\Core\BuilderBlock;
+
+abstract class BuilderBlock
+{
+    protected string $name;
+    protected string $label;
+    protected ?string $class = null;
+    protected ?string $category = null;
+    protected array $settings = [];
+    protected array $widgets = [];
+    protected string $template = '';
+    protected bool $isContainer = false;
+    protected ?string $icon = null;
+
+    abstract public function configure();
+
+    public function setLabel(string $label): self
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function getLabel(): string
+    {
+        return $this->label;
+    }
+
+    public function setName(string $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function setCategory(?string $category): self
+    {
+        $this->category = $category;
+
+        return $this;
+    }
+
+    public function getCategory(): ?string
+    {
+        return $this->category;
+    }
+
+    public function setIsContainer(bool $isContainer): self
+    {
+        $this->isContainer = $isContainer;
+
+        return $this;
+    }
+
+    public function getIsContainer(): bool
+    {
+        return $this->isContainer;
+    }
+
+    public function setWidgets(array $widgets): self
+    {
+        $this->widgets = $widgets;
+
+        return $this;
+    }
+
+    public function addWidget(string $widget): self
+    {
+        if (!in_array($widget, $this->widgets)) {
+            $this->widgets[] = $widget;
+        }
+
+        return $this;
+    }
+
+    public function getWidgets(): array
+    {
+        return $this->widgets;
+    }
+
+    public function setSettings(array $settings): self
+    {
+        $this->settings = $settings;
+
+        return $this;
+    }
+
+    public function addSetting(
+        string $name,
+        string $type = 'input',
+        ?string $label = null,
+        array $attributes = [],
+        array $extraOptions = [],
+        $default = null
+    ) {
+        $this->settings[$name] = [
+            'label' => $label,
+            'type' => $type,
+            'attr' => $attributes,
+            'default' => $default,
+        ];
+
+        foreach ($extraOptions as $key => $value) {
+            if (in_array($key, array_keys($this->settings[$name]))) {
+                $this->settings[$name][$key] = $value;
+            }
+        }
+
+        return $this;
+    }
+
+    public function getSettings(): array
+    {
+        return $this->settings;
+    }
+
+    public function setTemplate(string $template): self
+    {
+        $this->template = $template;
+
+        return $this;
+    }
+
+    public function getTemplate(): string
+    {
+        return $this->template;
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'label' => $this->getLabel(),
+            'category' => $this->getCategory(),
+            'isContainer' => $this->getIsContainer(),
+            'widgets' => $this->getWidgets(),
+            'settings' => $this->getSettings(),
+            'class' => $this->getClass(),
+            'icon' => $this->getIcon(),
+        ];
+    }
+
+    public function setClass(?string $class): self
+    {
+        $this->class = $class;
+
+        return $this;
+    }
+
+    public function getClass(): ?string
+    {
+        return $this->class;
+    }
+
+    public function setIcon(?string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    public function getIcon(): ?string
+    {
+        return $this->icon;
+    }
+}
--- a/src/core/BuilderBlock/BuilderBlockContainer.php
+++ b/src/core/BuilderBlock/BuilderBlockContainer.php
@ -0,0 +1,25 @@
+<?php
+
+namespace App\Core\BuilderBlock;
+
+class BuilderBlockContainer
+{
+    protected array $widgets = [];
+
+    public function addWidget(BuilderBlock $widget): void
+    {
+        $widget->configure();
+
+        $this->widgets[$widget->getName()] = $widget;
+    }
+
+    public function getWidgets(): array
+    {
+        return $this->widgets;
+    }
+
+    public function getWidget(string $name): BuilderBlock
+    {
+        return $this->widgets[$name];
+    }
+}
--- a/src/core/Controller/Editor/BuilderBlockController.php
+++ b/src/core/Controller/Editor/BuilderBlockController.php
@ -0,0 +1,40 @@
+<?php
+
+namespace App\Core\Controller\Editor;
+
+use App\Core\BuilderBlock\BuilderBlockContainer;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+#[Route(path: '/admin/editor/builder_block')]
+class BuilderBlockController extends AbstractController
+{
+    public function __construct(protected TranslatorInterface $translator)
+    {
+    }
+
+    #[Route(path: '/widgets', name: 'admin_editor_builder_block_widgets', options: ['expose' => true])]
+    public function widgets(BuilderBlockContainer $container): JsonResponse
+    {
+        $data = [];
+
+        foreach ($container->getWidgets() as $widget) {
+            $data[$widget->getName()] = $this->translate($widget->toArray());
+        }
+
+        return $this->json($data);
+    }
+
+    protected function translate(array $data)
+    {
+        $data['label'] = $this->translator->trans($data['label']);
+
+        foreach ($data['settings'] as $key => $value) {
+            $data['settings'][$key]['label'] = $this->translator->trans($data['settings'][$key]['label']);
+        }
+
+        return $data;
+    }
+}
--- a/src/core/DependencyInjection/Compiler/BuilderBlockPass.php
+++ b/src/core/DependencyInjection/Compiler/BuilderBlockPass.php
@ -0,0 +1,25 @@
+<?php
+
+namespace App\Core\DependencyInjection\Compiler;
+
+use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Reference;
+use App\Core\BuilderBlock\BuilderBlockContainer;
+
+class BuilderBlockPass implements CompilerPassInterface
+{
+    public function process(ContainerBuilder $container): void
+    {
+        if (!$container->has(BuilderBlockContainer::class)) {
+            return;
+        }
+
+        $definition = $container->findDefinition(BuilderBlockContainer::class);
+        $taggedServices = $container->findTaggedServiceIds('builder_block.widget');
+
+        foreach ($taggedServices as $id => $tags) {
+            $definition->addMethodCall('addWidget', [new Reference($id)]);
+        }
+    }
+}
--- a/src/core/DependencyInjection/Configuration.php
+++ b/src/core/DependencyInjection/Configuration.php
@ -46,99 +46,99 @@ class Configuration implements ConfigurationInterface

        $treeBuilder->getRootNode()
            ->children()
-            ->arrayNode('site')
-            ->children()
-            ->scalarNode('name')
-            ->defaultValue('Murph')
-            ->isRequired()
-            ->end()
-            ->scalarNode('logo')
-            ->defaultValue('build/images/core/logo.svg')
-            ->isRequired()
-            ->end()
-            ->arrayNode('controllers')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('action')
-            ->cannotBeEmpty()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('security')
-            ->children()
-            ->arrayNode('roles')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('role')
-            ->cannotBeEmpty()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('pages')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->isRequired()
-            ->cannotBeEmpty()
-            ->end()
-            ->arrayNode('templates')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('file')
-            ->cannotBeEmpty()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('editor_js')
-            ->children()
-            ->arrayNode('blocks')
-            ->scalarPrototype()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('file_manager')
-            ->children()
-            ->arrayNode('mimes')
-            ->scalarPrototype()
-            ->end()
-            ->defaultValue($defaultMimetypes)
-            ->end()
-            ->scalarNode('path')
-            ->defaultValue('%kernel.project_dir%/public/uploads')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('path_uri')
-            ->defaultValue('/uploads')
-            ->cannotBeEmpty()
-            ->end()
-            ->arrayNode('path_locked')
-            ->scalarPrototype()
-            ->end()
-            ->defaultValue($defaultLocked)
-            ->end()
-            ->end()
-            ->end()
-            ->end()
+                ->arrayNode('site')
+                    ->children()
+                        ->scalarNode('name')
+                            ->defaultValue('Murph')
+                            ->isRequired()
+                        ->end()
+                        ->scalarNode('logo')
+                            ->defaultValue('build/images/core/logo.svg')
+                            ->isRequired()
+                        ->end()
+                        ->arrayNode('controllers')
+                            ->prototype('array')
+                                ->children()
+                                    ->scalarNode('name')
+                                        ->cannotBeEmpty()
+                                    ->end()
+                                    ->scalarNode('action')
+                                        ->cannotBeEmpty()
+                                    ->end()
+                                ->end()
+                            ->end()
+                        ->end()
+                        ->arrayNode('security')
+                            ->children()
+                                ->arrayNode('roles')
+                                    ->prototype('array')
+                                        ->children()
+                                            ->scalarNode('name')
+                                                ->cannotBeEmpty()
+                                            ->end()
+                                            ->scalarNode('role')
+                                                ->cannotBeEmpty()
+                                            ->end()
+                                        ->end()
+                                    ->end()
+                                ->end()
+                            ->end()
+                        ->end()
+                        ->arrayNode('pages')
+                            ->prototype('array')
+                                ->children()
+                                    ->scalarNode('name')
+                                        ->isRequired()
+                                        ->cannotBeEmpty()
+                                    ->end()
+                                    ->arrayNode('templates')
+                                        ->prototype('array')
+                                            ->children()
+                                                ->scalarNode('name')
+                                                    ->cannotBeEmpty()
+                                                ->end()
+                                                ->scalarNode('file')
+                                                    ->cannotBeEmpty()
+                                                ->end()
+                                            ->end()
+                                        ->end()
+                                    ->end()
+                                ->end()
+                            ->end()
+                        ->end()
+                    ->end()
+                ->end()
+                ->arrayNode('editor_js')
+                    ->children()
+                        ->arrayNode('blocks')
+                            ->scalarPrototype()
+                            ->end()
+                        ->end()
+                    ->end()
+                ->end()
+                ->arrayNode('file_manager')
+                    ->children()
+                        ->arrayNode('mimes')
+                            ->scalarPrototype()
+                            ->end()
+                            ->defaultValue($defaultMimetypes)
+                        ->end()
+                        ->scalarNode('path')
+                            ->defaultValue('%kernel.project_dir%/public/uploads')
+                            ->cannotBeEmpty()
+                        ->end()
+                        ->scalarNode('path_uri')
+                            ->defaultValue('/uploads')
+                            ->cannotBeEmpty()
+                        ->end()
+                        ->arrayNode('path_locked')
+                            ->scalarPrototype()
+                            ->end()
+                            ->defaultValue($defaultLocked)
+                        ->end()
+                    ->end()
+                ->end()
+            ->end();
        ;

        return $treeBuilder;
--- a/src/core/DependencyInjection/CoreExtension.php
+++ b/src/core/DependencyInjection/CoreExtension.php
@ -2,6 +2,7 @@

 namespace App\Core\DependencyInjection;

+use App\Core\DependencyInjection\Compiler\BuilderBlockPass;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Extension\Extension;

--- a/src/core/Entity/Site/Page/BuilderBlock.php
+++ b/src/core/Entity/Site/Page/BuilderBlock.php
@ -0,0 +1,20 @@
+<?php
+
+namespace App\Core\Entity\Site\Page;
+
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity]
+class BuilderBlock extends JsonBlock
+{
+    public function getValue()
+    {
+        $value = parent::getValue();
+
+        if (is_string($value)) {
+            return json_decode($value, true);
+        }
+
+        return [];
+    }
+}
--- a/src/core/Entity/Site/Page/ChoiceBlock.php
+++ b/src/core/Entity/Site/Page/ChoiceBlock.php
@ -5,15 +5,6 @@ namespace App\Core\Entity\Site\Page;
 use Doctrine\ORM\Mapping as ORM;

 #[ORM\Entity]
-class ChoiceBlock extends Block
+class ChoiceBlock extends JsonBlock
 {
-    public function getValue()
-    {
-        return json_decode(parent::getValue(), true);
-    }
-
-    public function setValue($value): self
-    {
-        return parent::setValue(json_encode($value));
-    }
 }
--- a/src/core/Entity/Site/Page/JsonBlock.php
+++ b/src/core/Entity/Site/Page/JsonBlock.php
@ -0,0 +1,19 @@
+<?php
+
+namespace App\Core\Entity\Site\Page;
+
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity]
+class JsonBlock extends Block
+{
+    public function getValue()
+    {
+        return json_decode(parent::getValue(), true);
+    }
+
+    public function setValue($value): self
+    {
+        return parent::setValue(json_encode($value));
+    }
+}
--- a/src/core/Form/Site/Page/BuilderBlockType.php
+++ b/src/core/Form/Site/Page/BuilderBlockType.php
@ -0,0 +1,32 @@
+<?php
+
+namespace App\Core\Form\Site\Page;
+
+use App\Core\Entity\Site\Page\BuilderBlock;
+use App\Core\Form\Type\BuilderType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class BuilderBlockType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->add(
+            'value',
+            BuilderType::class,
+            array_merge([
+                'required' => false,
+                'label' => false,
+            ], $options['options']),
+        );
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            'data_class' => BuilderBlock::class,
+            'options' => [],
+        ]);
+    }
+}
--- a/src/core/Form/Type/BuilderType.php
+++ b/src/core/Form/Type/BuilderType.php
@ -0,0 +1,40 @@
+<?php
+
+namespace App\Core\Form\Type;
+
+use Symfony\Component\Form\Extension\Core\Type\CollectionType as BaseCollectionType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+
+class BuilderType extends AbstractType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        parent::buildView($view, $form, $options);
+
+        $view->vars = array_replace($view->vars, [
+        ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        parent::configureOptions($resolver);
+
+        $resolver->setDefaults([
+            'allow_add' => true,
+            'allow_remove' => true,
+            'compound' => false,
+        ]);
+    }
+
+    public function getBlockPrefix()
+    {
+        return 'builder';
+    }
+}
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@ -759,3 +759,46 @@ label.required::after {
  color: #49555b;
  font-size: 20px;
 }
+
+.builder-widget {
+  .block {
+    border: 1px solid rgba(map-get($theme-colors, 'dark-blue'), 0.3);
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    background: rgba(map-get($theme-colors, 'dark-blue'), 0.02);
+  }
+
+  .block-header {
+    .block-header-item {
+      font-size: 12px;
+      display: inline-block;
+      margin-bottom: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      margin-right: 2px;
+      cursor: pointer;
+    }
+  }
+
+  .block-label {
+    background: map-get($theme-colors, 'dark-blue');
+    border: 1px solid map-get($theme-colors, 'dark-blue');
+    color: lighten(map-get($theme-colors, 'dark-blue'), 100%);
+  }
+
+  .block-settings-inverse {
+    background: none;
+    border: 1px solid map-get($theme-colors, 'dark-blue');
+    color: map-get($theme-colors, 'dark-blue');
+  }
+
+  .block-settings {
+    padding: 4px;
+  }
+
+  .block-id {
+    font-size: 12px;
+    margin-right: 5px;
+  }
+}
--- a/src/core/Resources/assets/js/admin.js
+++ b/src/core/Resources/assets/js/admin.js
@ -29,3 +29,4 @@ require('./modules/file-picker.js')()
 require('./modules/analytics.js')()
 require('./modules/page.js')()
 require('./modules/node.js')()
+require('./modules/builder-block.js')()
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@ -0,0 +1,118 @@
+<template>
+  <div class="block" :key="blockKey" v-if="Object.keys(widgets).length">
+    <BuilderBlockItem
+      v-for="(block, key) in value"
+      :key="block.id + '-' + key"
+      :item="block"
+      :widgets="widgets"
+      :isFirst="key === 0"
+      :isLast="key == Object.keys(value)[Object.keys(value).length -1]"
+      @remove-item="removeBlock(key)"
+      @move-item-up="moveBlockUp(key)"
+      @move-item-down="moveBlockDown(key)"
+    />
+    <div class="container">
+      <BuilderBlockCreate
+        :container="value"
+        :widgets="widgets"
+        :allowedWidgets="[]"
+      />
+    </div>
+    <textarea :name="name" class="d-none">{{ toJson(value) }}</textarea>
+  </div>
+</template>
+
+<script>
+import BuilderBlockItem from './BuilderBlockItem'
+import BuilderBlockCreate from './BuilderBlockCreate'
+import Routing from '../../../../../../../../../friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'
+
+const axios = require('axios').default
+const routes = require('../../../../../../../../../../public/js/fos_js_routes.json')
+Routing.setRoutingData(routes)
+
+export default {
+  name: 'BuilderBlock',
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    initialValue: {
+      type: Array,
+      required: false,
+    }
+  },
+  data() {
+    return {
+      value: this.initialValue,
+      widgets: {},
+      blockKey: 0
+    }
+  },
+  methods: {
+    toJson(value) {
+      return JSON.stringify(value)
+    },
+    triggerBuilderBlockEvent() {
+      document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
+    },
+    moveBlockUp(key) {
+      let newValue = this.value.map((x) => x)
+
+      newValue[key-1] = this.value[key]
+      newValue[key] = this.value[key-1]
+
+      this.value = newValue
+
+      ++this.blockKey
+    },
+    moveBlockDown(key) {
+      let newValue = this.value.map((x) => x)
+
+      newValue[key+1] = this.value[key]
+      newValue[key] = this.value[key+1]
+
+      this.value = newValue
+
+      ++this.blockKey
+    },
+    removeBlock(key) {
+      let newValue = []
+
+      this.value.forEach((v, k) => {
+        if (k !== key) {
+          newValue.push(v)
+        }
+      })
+
+      this.value = newValue
+
+      // ++this.blockKey
+    },
+  },
+  components: {
+    BuilderBlockItem,
+    BuilderBlockCreate,
+  },
+  mounted() {
+    this.triggerBuilderBlockEvent()
+    const that = this
+
+    axios.get(Routing.generate('admin_editor_builder_block_widgets'))
+      .then((response) => {
+        that.widgets = response.data
+      })
+  },
+  created() {
+    this.triggerBuilderBlockEvent()
+  },
+  updated() {
+    this.triggerBuilderBlockEvent()
+  }
+}
+</script>
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
@ -0,0 +1,163 @@
+<style scoped>
+.categories {
+  padding: 10px;
+  text-align: left;
+}
+
+.category {
+  padding: 10px 0;
+}
+
+.category-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.widget {
+  display: inline-block;
+}
+
+.widget-content {
+  background: #fff;
+  padding: 10px;
+  text-align: center;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  border: 1px solid #1e2430;
+}
+
+.widget-icon {
+  margin-top: 5px;
+  font-size: 25px;
+}
+
+.widget:hover {
+  background: #eee;
+}
+
+.widget-label {
+  font-weight: bold;
+}
+</style>
+
+<template>
+  <div class="builder-add">
+    <span class="btn btn-sm btn-secondary" v-on:click="togglePicker">
+      <span class="fa fa-plus"></span>
+    </span>
+
+    <div class="categories mt-2 list-group" :class="{'d-none': !showPicker}">
+      <div
+        v-for="category in categories()"
+        v-if="Object.keys(category.widgets).length"
+        class="category"
+      >
+        <div
+          v-if="category.label != 'none'"
+          v-text="category.label"
+          class="category-label row"
+        ></div>
+
+        <div
+          v-for="(widget, name) in category.widgets"
+          v-on:click="add(name, widget)"
+          class="widget col-3"
+        >
+          <div class="widget-content">
+            <div class="widget-label">
+              {{ widget.label }}
+            </div>
+
+            <div class="widget-icon" v-if="widget.icon" v-html="widget.icon">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BuilderBlockCreate',
+  props: {
+    container: {
+      type: Array,
+      required: true
+    },
+    widgets: {
+      type: Object,
+      required: true
+    },
+    allowedWidgets: {
+      type: Array,
+      required: true
+    },
+  },
+  data() {
+    return {
+      showPicker: false,
+    }
+  },
+  methods: {
+    add(name, widget) {
+      let settings = {}
+
+      for (let i in widget.settings) {
+        settings[i] = widget.settings[i].default
+      }
+
+      this.container.push({
+        id: this.makeId(),
+        widget: name,
+        settings,
+        children: [],
+      })
+
+      this.$emit('updateContainer', this.container)
+      this.togglePicker()
+    },
+    makeId() {
+      let result = ''
+      const characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
+      const charactersLength = characters.length
+
+      for (let i = 0; i < 7; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength))
+      }
+
+      return `block-${result}`
+    },
+    togglePicker() {
+      this.showPicker = !this.showPicker
+    },
+    categories() {
+      let items = {}
+
+      for (let widgetName in this.widgets) {
+        let value = this.widgets[widgetName]
+
+        if (!value.category) {
+          value.category = 'none'
+        }
+
+        if (typeof items[value.category] === 'undefined') {
+          items[value.category] = {
+            label: value.category,
+            widgets: {},
+          }
+        }
+
+        if (!this.allowedWidgets.length || this.allowedWidgets.includes(widgetName)) {
+          items[value.category].widgets[widgetName] = value
+        }
+      }
+
+      return items
+    }
+  },
+}
+</script>
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
@ -0,0 +1,166 @@
+<template>
+  <div class="block" v-if="widget" :key="blockKey">
+    <div class="block-header">
+      <div class="float-right">
+        <span class="block-id">
+          {{ item.id }}
+        </span>
+        <div class="block-header-item text-white bg-danger" v-on:click="removeMe(item)">
+          <span class="fa fa-trash"></span>
+        </div>
+      </div>
+      <div
+        class="block-header-item block-label"
+        :title="item.widget"
+      >
+        {{ widget.label }}
+      </div>
+      <div
+        class="block-header-item block-settings-inverse"
+        v-on:click="toggleSettings"
+        v-if="Object.keys(widget.settings).length"
+      >
+        <span class="fa fa-cog"></span>
+      </div>
+
+      <div
+        v-if="!isFirst"
+        v-on:click="moveMeUp"
+        class="block-header-item block-settings-inverse"
+      >
+          <span class="fas fa-arrow-up"></span>
+        </div>
+      <div
+        v-if="!isLast"
+        v-on:click="moveMeDown"
+        class="block-header-item block-settings-inverse"
+      >
+          <span class="fas fa-arrow-down"></span>
+        </div>
+    </div>
+
+    <div class="block-settings" v-if="Object.keys(widget.settings).length" :class="{'d-none': !showSettings}">
+      <div class="row">
+        <BuilderBlockSetting
+          v-for="(params, setting) in widget.settings"
+          :key="item.id + '-' + setting"
+          :class="widget.class"
+          :item="item"
+          :params="params"
+          :setting="setting"
+        />
+      </div>
+    </div>
+
+    <BuilderBlockItem
+      v-if="item.children !== null && item.children.length > 0"
+      v-for="(child, key) in item.children"
+      :key="child.id"
+      :item="child"
+      :widgets="widgets"
+      :isFirst="key === 0"
+      :isLast="key == Object.keys(item.children)[Object.keys(item.children).length -1]"
+      @remove-item="removeBlock(key)"
+      @move-item-up="moveBlockUp(key)"
+      @move-item-down="moveBlockDown(key)"
+    />
+
+    <div v-if="widget.isContainer" class="container">
+      <BuilderBlockCreate
+        :container="item.children"
+        :widgets="widgets"
+        :allowedWidgets="widget.widgets"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import BuilderBlockCreate from './BuilderBlockCreate'
+import BuilderBlockSetting from './BuilderBlockSetting'
+
+export default {
+  name: 'BuilderBlockItem',
+  props: {
+    widgets: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    isFirst: {
+      type: Boolean,
+      required: true
+    },
+    isLast: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      widget: null,
+      showSettings: false,
+      blockKey: 0
+    }
+  },
+  methods: {
+    toggleSettings() {
+      this.showSettings = !this.showSettings
+    },
+    removeMe() {
+      this.$emit('remove-item')
+    },
+    moveMeUp() {
+      this.$emit('move-item-up')
+    },
+    moveMeDown() {
+      this.$emit('move-item-down')
+    },
+    moveBlockUp(key) {
+      let newValue = this.item.children.map((x) => x)
+
+      newValue[key-1] = this.item.children[key]
+      newValue[key] = this.item.children[key-1]
+
+      this.item.children = newValue
+
+      ++this.blockKey
+    },
+    moveBlockDown(key) {
+      let newValue = this.item.children.map((x) => x)
+
+      newValue[key+1] = this.item.children[key]
+      newValue[key] = this.item.children[key+1]
+
+      this.item.children = newValue
+
+      ++this.blockKey
+    },
+    removeBlock(key) {
+      let children = []
+
+      this.item.children.forEach((v, k) => {
+        if (k !== key) {
+          children.push(v)
+        }
+      })
+
+      this.item.children = children
+      ++this.blockKey
+    },
+  },
+  components: {
+    BuilderBlockCreate,
+    BuilderBlockSetting,
+  },
+  mounted() {
+    this.widget = this.widgets[this.item.widget]
+  },
+  updated() {
+    document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
+  }
+}
+</script>
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
@ -0,0 +1,61 @@
+<template>
+  <div class="form-group">
+    <label
+      v-if="params.label && params.type !== 'checkbox'"
+      v-text="params.label"
+    >
+    </label>
+
+    <input
+      v-if="['number', 'checkbox', 'text'].includes(params.type)"
+      v-model="item.settings[setting]"
+      v-bind="params.attr"
+      :type="params.type"
+      :class="{'form-control': params.type !== 'checkbox'}"
+    />
+
+    <label
+      v-if="params.label && params.type == 'checkbox'"
+      v-text="params.label"
+    >
+    </label>
+
+    <textarea
+      v-if="params.type == 'textarea'"
+      v-model="item.settings[setting]"
+      v-bind="params.attr"
+      class="form-control"
+    ></textarea>
+
+    <select
+      v-if="params.type == 'select'"
+      v-model="item.settings[setting]"
+      v-bind="params.attr"
+      class="form-control"
+    >
+      <option :value="v.value" v-for="(v, k) in params.options" :key="k">
+        {{ v.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BuilderBlockSetting',
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    params: {
+      type: Object,
+      required: true,
+    },
+    setting: {
+      type: String,
+      required: true,
+    }
+  },
+}
+</script>
--- a/src/core/Resources/assets/js/components/file-manager/Files.vue
+++ b/src/core/Resources/assets/js/components/file-manager/Files.vue
@ -201,7 +201,6 @@ import Routing from '../../../../../../../../../friendsofsymfony/jsrouting-bundl
 import FileIcon from './FileIcon'

 const axios = require('axios').default
-const $ = require('jquery')
 const routes = require('../../../../../../../../../../public/js/fos_js_routes.json')

 Routing.setRoutingData(routes)
--- a/src/core/Resources/assets/js/modules/builder-block.js
+++ b/src/core/Resources/assets/js/modules/builder-block.js
@ -0,0 +1,28 @@
+const Vue = require('vue').default
+
+const BuilderBlock = require('../components/builder-block/BuilderBlock').default
+
+module.exports = () => {
+  const wrappers = document.querySelectorAll('.builder-widget')
+
+  wrappers.forEach((wrapper) => {
+    const component = wrapper.querySelector('.builder-widget-component')
+
+    return new Vue({
+      el: component,
+      template: `<BuilderBlock
+        :initialValue="value"
+        name="${component.getAttribute('data-name')}"
+        id="${component.getAttribute('data-id')}"
+      />`,
+      data() {
+        return {
+          value: JSON.parse(component.getAttribute('data-value'))
+        }
+      },
+      components: {
+        BuilderBlock
+      }
+    })
+  })
+}
--- a/src/core/Resources/assets/js/modules/tinymce.js
+++ b/src/core/Resources/assets/js/modules/tinymce.js
@ -74,6 +74,8 @@ const createTinymceConfig = function () {
      })

      editor.on('Change', () => {
+        editor.save();
+        editor.getElement().dispatchEvent(new Event('input'));
        window.tinymce.triggerSave(false, true)
      })
    }
@ -618,6 +620,13 @@ const doInitEditor = () => {
 }

 module.exports = function () {
+  document.querySelector('body').addEventListener('builder_block.update', () => {
+    window.setTimeout(() => {
+      createTinymceConfig()
+      doInitEditor()
+    }, 500)
+  })
+
  $(() => {
    createTinymceConfig()
    doInitEditor()
--- a/src/core/Resources/translations/messages.fr.yaml
+++ b/src/core/Resources/translations/messages.fr.yaml
@ -224,3 +224,8 @@
 "All roles": "Tous les rôles"
 "Enable A/B Testing": "Activer le test A/B"
 "Color": "Couleur"
+"Extra small": "Très petit"
+"Small": "Petit"
+"Medium": "Moyen"
+"Large": "Large"
+"Extra large": "Très large"
--- a/src/core/Resources/views/builder_block/bootstrap/column.html.twig
+++ b/src/core/Resources/views/builder_block/bootstrap/column.html.twig
@ -0,0 +1,13 @@
+{% set sizes = {
+    'col-': settings.size|default(null),
+    'col-xs-': settings.sizeXs|default(null),
+    'col-md-': settings.sizeMd|default(null),
+    'col-lg-': settings.sizeLg|default(null),
+    'col-xl-': settings.sizeXl|default(null),
+} %}
+
+<div class="col {% for i, v in sizes%}{% if v|length %}{{ i }}{{ v }} {% endif %}{% endfor -%}" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>
--- a/src/core/Resources/views/builder_block/bootstrap/container.html.twig
+++ b/src/core/Resources/views/builder_block/bootstrap/container.html.twig
@ -0,0 +1,5 @@
+<div class="container{% if settings.isFluid|default(false) %}-fluid{% endif %}" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>
--- a/src/core/Resources/views/builder_block/bootstrap/row.html.twig
+++ b/src/core/Resources/views/builder_block/bootstrap/row.html.twig
@ -0,0 +1,5 @@
+<div class="row" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>
--- a/src/core/Resources/views/builder_block/editor/tinymce.html.twig
+++ b/src/core/Resources/views/builder_block/editor/tinymce.html.twig
@ -0,0 +1 @@
+{{ settings.value|default(null)|file_attributes|murph_url|raw }}
--- a/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig
+++ b/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig
@ -1,5 +1,14 @@
 {% extends 'bootstrap_4_layout.html.twig' %}

+{% block builder_widget %}
+    {% set row_attr = row_attr|merge({class: 'builder-widget ' ~ (row_attr.class ?? '')}) %}
+
+    <div {% for attr, value in row_attr %}{{ attr }}="{{ value }}" {% endfor %}>
+        <div class="builder-widget-component" data-value="{{ value is iterable ? value|json_encode : value }}" data-name="{{ full_name }}" data-id="{{ id }}">
+        </div>
+    </div>
+{% endblock %}
+
 {% block grapesjs_widget %}
    <div class="gjs"></div>
    <div class="d-none">
--- a/src/core/Twig/Extension/BuilderBlockExtension.php
+++ b/src/core/Twig/Extension/BuilderBlockExtension.php
@ -0,0 +1,47 @@
+<?php
+
+namespace App\Core\Twig\Extension;
+
+use App\Core\BuilderBlock\BuilderBlockContainer;
+use Twig\Environment;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class BuilderBlockExtension extends AbstractExtension
+{
+    public function __construct(protected Environment $twig, protected BuilderBlockContainer $container)
+    {
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getFilters()
+    {
+        return [
+            new TwigFilter('block_to_html', [$this, 'buildHtml'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    public function buildHtml($data): string
+    {
+        if (null === $data) {
+            return null;
+        }
+
+        if (isset($data['widget'])) {
+            return $this->twig->render($this->container->getWidget($data['widget'])->getTemplate(), [
+                'id' => $data['id'],
+                'settings' => $data['settings'],
+                'children' => $data['children'],
+            ]);
+        }
+
+        $render = '';
+        foreach ($data as $item) {
+            $render .= $this->buildHtml($item);
+        }
+
+        return $render;
+    }
+}
				`@ -0,0 +1 @@`
				`{{ settings.value\|default(null)\|file_attributes\|murph_url\|raw }}`