haringsrob / filament-page-builder
A visual page builder for Filament
Fund package maintenance!
haringsrob
Requires
- php: ^8.2
- filament/filament: ^3.0.75
- filament/spatie-laravel-translatable-plugin: ^3.0
- illuminate/contracts: ^9.0|^10.0|^11.0
- spatie/laravel-package-tools: ^1.13.5
- wire-elements/modal: ^2.0
Requires (Dev)
- laravel/pint: ^1.0
- nunomaduro/collision: ^6.0
- nunomaduro/larastan: ^2.0.1
- orchestra/testbench: ^7.0
- pestphp/pest: ^1.23
- phpstan/extension-installer: ^1.1
- phpstan/phpstan-deprecation-rules: ^1.0
- phpstan/phpstan-phpunit: ^1.0
- phpunit/phpunit: ^9.5
- spatie/laravel-ray: ^1.26
- dev-main
- 3.x-dev
- 3.0.8
- 3.0.7
- 3.0.6
- 3.0.5
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.x-dev
- 2.0.0
- dev-dependabot/github_actions/dependabot/fetch-metadata-2.0.0
- dev-dependabot/github_actions/ramsey/composer-install-3
- dev-dependabot/github_actions/aglipanci/laravel-pint-action-2.3.1
- dev-dependabot/github_actions/actions/checkout-4
This package is auto-updated.
Last update: 2024-11-02 14:48:36 UTC
README
With this package you have a new Filament field (like Builder) but with a visual ui and dynamic types.
Please not that this is a pre-production package, there are many things potentially still bugged and it may not work together with some other packages (like translations).
Methods and flow may still change before a first release, so if you use it, keep in mind that a composer update may break it.
If you encounter issues, please provide a pull request.
To see a demo:
Installation
You can install the package via composer:
composer require sevendays/filament-page-builder
You can publish and run the migrations with:
php artisan vendor:publish --tag="filament-page-builder-migrations"
php artisan migrate
You can publish the config file with (currently no config):
php artisan vendor:publish --tag="filament-page-builder-config"
Optionally, you can publish the views using
php artisan vendor:publish --tag="filament-page-builder-views"
This is the contents of the published config file:
return [
];
Usage
Filament page builder is a custom Filament field that adds functionality on top of the Builder field.
13-11-2023 Preview is now opt-in via config.
- Preview can interfere with forms configured within blocks
- Preview sets all block fields to reactive, for the 'live' preview part
If you are ok with that, you can enable the preview via:
return [ 'enablePreview' => true, ];
To use this, create a Model and Resource as per the Filament documentation then do the following:
1. Generate a block
You can use the command below to generate a block:
php artisan make:page-builder-block DemoBlock
This will create 2 files:
app/Filament/Blocks/DemoBlock.php
: This is where you define the form fields and render view.
resources/views/filament/blocks/demo-block.blade.php
: This is how your block is supposed to be rendered.
The default generator provides just a 'title' field.
NOTE: All fields are translatable by default. However you can have shared fields by adding the following method with the field id's:
public static function getSharedFields(): array { return ['show']; } public function form(): array { return [ TextInput::make('title'), Toggle::make('show') ]; }
2. Add the contract and trait to your model
In order to save blocks, you need to add the Blockable interface and HasBlocks trait to your model.
<?php namespace App\Models; use Sevendays\FilamentPageBuilder\Models\Contracts\Blockable; use Sevendays\FilamentPageBuilder\Models\Traits\HasBlocks; use Illuminate\Database\Eloquent\Model; class Page extends Model implements Blockable { use HasBlocks; protected $fillable = [ 'title' ]; }
3. Add the field to your resource form
In your resource form we can now add the field:
<?php use Sevendays\FilamentPageBuilder\Forms\Components\BlockEditor; use App\Filament\Blocks\DemoBlock; public static function form(Form $form): Form { return $form ->schema([ BlockEditor::make('blocks') ->blocks([ // You can add more blocks here. DemoBlock::class, ]) ->renderInView('blocks.preview'), // Optional: To render the preview in a different view. ]); }
If all goes well, you should now have the block builder on your page. Do not forget to run migrations.
4. Rendering on the front-end
There are not many tools for this yet but basic rendering works like this:
@foreach($page->blocks as $block) {!! \Sevendays\FilamentPageBuilder\Facades\BlockRenderer::renderBlock($block) !!} @endforeach
$page
is your model that has blocks.
Testing
Not done yet.
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.