Page Builder Bundle Laravel Package

Getting Started

First Steps

1. Installation Add the package via Composer:

   composer require astrath/page-builder-bundle
   

   Register the bundle in config/app.php under providers:

   Astrath\PageBuilderBundle\PageBuilderBundle::class,
   

2. Publish Assets Run the following to publish migrations, config, and assets:

   php artisan vendor:publish --provider="Astrath\PageBuilderBundle\PageBuilderBundle" --tag="config"
   php artisan vendor:publish --provider="Astrath\PageBuilderBundle\PageBuilderBundle" --tag="migrations"
   php artisan migrate
   

3. Basic Usage

   • Define a Page Builder Model: Extend the base PageBuilderModel or use the provided trait:

     use Astrath\PageBuilderBundle\Model\PageBuilderModel;
     
     class MyPage extends PageBuilderModel
     {
         protected $table = 'my_pages';
     }
     

   • Create a Controller: Use the PageBuilderController or scaffold your own:

     use Astrath\PageBuilderBundle\Http\Controllers\PageBuilderController;
     
     class MyPageController extends PageBuilderController
     {
         protected $model = MyPage::class;
     }
     

4. Frontend Integration

   • Include the bundle’s JS/CSS in your layout:

     @vite(['resources/js/page-builder.js', 'resources/css/page-builder.css'])
     

   • Use the provided Blade directives for rendering:

     @pageBuilder
         @block('header')
             <!-- Header content -->
         @endblock
     @endpageBuilder
     

Implementation Patterns

Core Workflows

1. Block Registration Define reusable blocks via a service provider:

   public function boot()
   {
       $this->app->make('page_builder')->addBlock('custom_block', [
           'title' => 'Custom Block',
           'content' => '<div class="custom-block">...</div>',
           'fields' => [
               'title' => 'text',
               'color' => 'color',
           ],
       ]);
   }
   

2. Dynamic Page Rendering Fetch and render pages dynamically:

   $page = MyPage::find(1);
   echo $page->render(); // Renders the page with all blocks
   

3. Admin Panel Integration

   • Use the built-in CRUD routes (e.g., /admin/pages).
   • Customize the admin UI by extending the PageBuilderAdminController.

4. Frontend Editing Enable live editing with the Gutenberg-like interface:

   // Initialize the editor (check bundle docs for exact JS API)
   PageBuilder.init({
       endpoint: '/api/page-builder',
       container: '#page-builder-container',
   });
   

Integration Tips

• Laravel Mix/Vite: Bundle the provided JS/CSS with your assets for seamless integration.
• API Endpoints: Use the PageBuilderApiController for RESTful interactions with pages/blocks.
• Caching: Implement caching for rendered pages (e.g., Cache::remember):

  return Cache::remember("page_{$page->id}", now()->addHours(1), function () use ($page) {
      return $page->render();
  });
  

Gotchas and Tips

Common Pitfalls

1. Block Serialization

   • Ensure custom block data is serializable. Use json_encode()/json_decode() for complex fields.
   • Avoid circular references in block configurations.

2. Asset Paths

   • Hardcoded asset paths (e.g., /css/page-builder.css) may break in production. Use Laravel’s asset() helper or Vite’s @asset directive.

3. Migration Conflicts

   • If publishing migrations, check for table/column conflicts with existing models. Customize the migration file:

     $table->string('slug')->unique(); // Example customization
     

4. Frontend Dependencies

   • The bundle assumes Gutenberg-like JS libraries (e.g., @wordpress/block-editor). Ensure these are included or mock them if needed.

Debugging Tips

• Log Block Data:

  \Log::debug('Block data:', ['data' => $block->data]);
  

• Check Admin Routes: Verify routes are registered:

  php artisan route:list | grep page-builder
  

• Clear Cached Views: If templates aren’t updating, run:

  php artisan view:clear
  

Extension Points

1. Custom Block Types Extend the Block model or create a custom block service:

   class CustomBlockService extends \Astrath\PageBuilderBundle\Services\BlockService
   {
       public function render($block)
       {
           // Custom logic
       }
   }
   

2. Override Templates Publish and override Blade templates:

   php artisan vendor:publish --tag="page-builder-views"
   

   Then modify resources/views/vendor/page-builder/....

3. Hooks/Events Listen for page/block events (if the bundle supports them):

   \Event::listen('page.builder.render', function ($page) {
       // Modify rendering logic
   });
   

4. API Customization Extend the PageBuilderApiController to add endpoints or modify responses:

   class CustomPageBuilderApiController extends PageBuilderApiController
   {
       public function customEndpoint()
       {
           return response()->json(['custom' => 'data']);
       }
   }