Pagebuilder Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation Run:

   composer require acseo/pagebuilder-bundle
   

   Enable the bundle in config/bundles.php:

   ACSEO\PageBuilderBundle\PageBuilderBundle::class => ['all' => true],
   

2. Enable Routes Add the bundle routes in config/routes/acseo_page_builder.yaml:

   acseo_page_builder:
       resource: '@PageBuilderBundle/src/Controller/'
       type: attribute
   

3. Database Setup Run migrations:

   php bin/console doctrine:migrations:diff
   php bin/console doctrine:migrations:migrate
   

4. First Use Case Render a PageBuilder in a Twig template:

   {{ component('PageBuilder', {'idField': 'page_content'}) }}
   

   Render a saved page:

   {{ component('PageRender', {'html': page.html}) }}
   

Implementation Patterns

Workflow: Creating a Page

1. Frontend Integration Use the PageBuilder Twig component in a Symfony form or standalone:

   {{ component('PageBuilder', {
       'idField': 'custom_field',
       'config': {
           'storageManager': false,
           'assets': ['css': '/path/to/custom.css']
       }
   }) }}
   

2. Saving Pages Leverage the PageController to store pages via HTTP requests:

   // Example: POST /page/save
   $page = new Page();
   $page->setHtml($request->request->get('page_html'));
   $page->setCss($request->request->get('page_css'));
   $page->setConfig(json_encode($request->request->get('page_config')));
   $em->persist($page);
   $em->flush();
   

3. Rendering Dynamic Content Use PageRender to dynamically render saved pages:

   {% for page in pages %}
       {{ component('PageRender', {
           'html': page.html,
           'css': page.css,
           'config': page.config|json_decode
       }) }}
   {% endfor %}
   

Integration Tips

• Custom Blocks: Extend GrapesJS blocks by overriding the bundle’s assets or using the config option in the Twig component.
• Asset Management: Configure GrapesJS assets via the config parameter:

  {{ component('PageBuilder', {
      'config': {
          'assets': [
              'css': ['/vendor/grapesjs/dist/css/grapes.min.css'],
              'js': ['/vendor/grapesjs/dist/js/grapes.min.js']
          ]
      }
  }) }}
  

• Form Integration: Embed the PageBuilder inside a Symfony form using FormTheme:

  {% form_theme form _self %}
  {% block form_row %}
      {{ form_widget(form) }}
      {% if form.vars.idField is defined %}
          {{ component('PageBuilder', {'idField': form.vars.idField}) }}
      {% endif %}
  {% endblock %}
  

Gotchas and Tips

Pitfalls

1. StorageManager Conflicts If storageManager: true is set in the config, ensure your backend can handle GrapesJS’s storage API. Disable it for custom storage:

   {{ component('PageBuilder', {'config': {'storageManager': false}}) }}
   

2. CSRF Issues The PageController expects CSRF protection. Ensure your routes include _token fields:

   {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
   {{ form_widget(form._token) }}
   

3. Asset Loading Order GrapesJS requires CSS before JS. Use the assets config to enforce order:

   {{ component('PageBuilder', {
       'config': {
           'assets': {
               'css': ['/path/to/grapes.css'],
               'js': ['/path/to/grapes.js']
           }
       }
   }) }}
   

Debugging

• Console Errors: Check the browser console for GrapesJS errors (e.g., missing blocks or assets).
• Database Migrations: If pages aren’t saving, verify the Page entity schema matches your migrations.
• Twig Component Errors: Ensure idField is unique and matches your form/field names.

Extension Points

1. Custom Blocks Override GrapesJS blocks by extending the bundle’s assets or using the initBlock config:

   {{ component('PageBuilder', {
       'config': {
           'initBlock': 'custom-block',
           'blocks': [
               {
                   'id': 'custom-block',
                   'label': 'Custom Block',
                   'content': '<div>Hello!</div>'
               }
           ]
       }
   }) }}
   

2. Event Listeners Hook into GrapesJS events via JavaScript in the config:

   {{ component('PageBuilder', {
       'config': {
           'init': function(e) {
               e.detail.editor.on('block:add', function(e) { console.log('Block added!'); });
           }
       }
   }) }}
   

3. Symfony Events Listen to the bundle’s events (e.g., page.save) in your EventSubscriber:

   use ACSEO\PageBuilderBundle\Event\PageEvents;
   
   public static function getSubscribedEvents()
   {
       return [
           PageEvents::PRE_SAVE => 'onPreSave',
       ];
   }