use SkyRaptor\FilamentBlocksBuilder\Blocks;
use SkyRaptor\FilamentBlocksBuilder\Forms\Components\BlocksInput;

BlocksInput::make('content')
    ->blocks(fn () => [
        Blocks\Layout\Card::block($schema),
        Blocks\Typography\Heading::block($schema),
        Blocks\Typography\Paragraph::block($schema)
    ])

Note: The BlocksInput Form component will output it's data as an array. You must ensure that the Model does cast the attribute as described in the Laravel documentation.

Creating Blocks

A Block itself is a combination of a Filament PHP Form definition, the view for the frontend combined with all Logic required to proccess the Block:

1. A Filament PHP Form schema for Block data definiton
2. A Blade view for frontend rendering

The package does include basic example Blocks, however it is recommended that you do create and maintain your own library of Blocks - this can be done in your project as well as in a package.

Implement the Block

Create a new class for your Block, extend the Block Contract and implement the required methods:

<?php

namespace App\Filament\Blocks;

use Filament\Forms\Components;
use Filament\Schemas\Schema;

class Example extends \SkyRaptor\FilamentBlocksBuilder\Blocks\Contracts\HTMLBlock
{
    public static function block(Schema $schema): Components\Builder\Block
    {
        return parent::block($schema)->schema([
            Components\Textarea::make('description')
                ->required(),
        ]);
    }

    public static function view(): ?string
    {
        return 'example';
    }
}

Note the responsibilities of the methods shown in the implementation above:

• block(): This method initializes and configures a Filament PHP Form Component that represents this Block.
• view: This method does define the name of the view to be used on rendering the Block to the frontend.

Create the view

Create a Blade view (e.g., resources/views/example.blade.php) to render the block's output. The schema data will be accessible within the view:

<div class="example">
    <p>{{ $description }}</p>
</div>

Register the Custom Block

Add your custom block to the BlocksInput:

->blocks(fn () => [
    Blocks\Layout\Card::block($schema),
    Blocks\Typography\Heading::block($schema),
    Blocks\Typography\Paragraph::block($schema),
    App\Filament\Blocks\Example::block($form)
    // Add more Blocks!
])

Rendering Blocks

The package does include a BlocksRenderer for data generated by the BlocksInput which can be used in two major ways.

Blade Directive

The package does add a new Blade Directive named blocks to allow easy access to the BlocksRenderer from within any Blade View. Use it like in the following example where the model's content column does contain the BlocksInput data:

<div>
    @blocks($model->content)
</div>

Programmatically

In case you do have to render your Blocks programmatically, the static render method of the Renderer is intended to be used.

🤝Contributing

Contributions are welcome! Submit a pull request on GitHub. Before submitting, ensure all tests pass.

DevContainer

The project includes a DevContainer configuration for streamlined development. Open the .code-workspace file, and use the Reopen in Container option from the Remote Development menu in Visual Studio Code in order to use the DevContainer.

Debugging

PHPUnit

Debug test cases directly using the Debug Tests configuration in Visual Studio Code. It runs PHPUnit with xDebug support.

Workbench

The Orchestral Workbench used for functional and browser based tests can also be previewed as well as debugged.

The Orchestral Testbench is used for functional and browser-based tests, but can also be previewd and debugged. Follow these steps to set up the environment:

1. Use the following Orchestral Workbench command to generate an empty, persistent SQlite database in the Laravel skeleton.

   vendor/bin/testbench package:create-sqlite-db
   

2. Next you will have to run the Migrations defined in the Workbench using the command below.

   vendor/bin/testbench migrate
   

3. Now that the Orchestral Workbench environment has a functional database, you will have to create a user using the following command.

   vendor/bin/testbench make:filament-user
   

Use the Debug Workbench configuration in Visual Studio Code to preview and debug the workbench. It launches Laravel’s built-in server with xDebug.

🛠Todo

The following features and quality of life improvements have yet to be implemented and added to the library:

• Basic layout Blocks (flexbox, grid, ...)
• Block update / upgrade migrations
• Block asset / dependency management

🛡️License

This project is licensed under the GNU GPL v3 License.

Happy Building! 🎉