Laravel Nova Flexible Content

To keep your Nova resources clean or share layouts across different fields, you can extract layouts into dedicated classes that extend Whitecube\NovaFlexibleContent\Layouts\Layout.

Each class must define a $name (unique identifier) and a $title (display name), and implement the fields() method.

You can also limit how many times a specific layout type can be added by setting the $limit property within the class.

Use the Artisan command to scaffold a new layout class: php artisan flexible:layout {classname?} {name?}

namespace App\Nova\Flexible\Layouts;

use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Markdown;
use Whitecube\NovaFlexibleContent\Layouts\Layout;

class SimpleWysiwygLayout extends Layout
{
    protected $name = 'wysiwyg';
    protected $title = 'Simple content section';
    protected $limit = 1; // Limit this specific layout type

    public function fields()
    {
        return [
            Text::make('Title'),
            Markdown::make('Content')
        ];
    }
}

// Usage in Nova Resource:
Flexible::make('Content')
    ->addLayout(\App\Nova\Flexible\Layouts\SimpleWysiwygLayout::class);

You can use ebess/advanced-nova-media-library fields within your Flexible layouts by following these requirements:

1. Use a custom layout class (extending Whitecube\NovaFlexibleContent\Layouts\Layout).
2. The custom layout class must implement Spatie\MediaLibrary\HasMedia and use the Whitecube\NovaFlexibleContent\Concerns\HasMediaLibrary trait.
3. The parent model must implement Spatie\MediaLibrary\HasMedia and use the Spatie\MediaLibrary\InteractsWithMedia trait.

Once configured, you can access media on your layout instance using getMedia('attribute_name').

// 1. Configure the Parent Model
class Post extends Model implements HasMedia
{
    use HasFlexible;
    use InteractsWithMedia;
}

// 2. Configure the Custom Layout
class SliderLayout extends Layout implements HasMedia
{
    use HasMediaLibrary;

    protected $name = 'sliderlayout';
    protected $title = 'SliderLayout';

    public function fields()
    {
        return [
            Images::make('Images', 'images')
        ];
    }
}

By default, Flexible fields expect to be stored in a JSON column. If you need to store data in a different way (e.g., in a separate database table using a HasMany or BelongsToMany relationship), you must implement a custom Resolver.

To create a resolver, use the Artisan command:

php artisan flexible:resolver {classname?}

Each resolver must implement Whitecube\NovaFlexibleContent\Value\ResolverInterface, which requires two methods:

1. get($resource, $attribute, $layouts): Responsible for retrieving the content and returning a collection of hydrated Layout instances.
2. set($model, $attribute, $groups): Responsible for saving the field's content to your storage mechanism.

Resolvers are typically placed in app/Nova/Flexible/Resolvers.

use Whitecube\NovaFlexibleContent\Value\ResolverInterface;
use Whitecube\NovaFlexibleContent\Layouts\Collection;

class WysiwygPageResolver implements ResolverInterface
{
    public function get($resource, $attribute, $layouts)
    {
        // Logic to retrieve data and return hydrated layouts
    }

    public function set($model, $attribute, $groups)
    {
        // Logic to save the $groups to your database
    }
}

Preset classes allow you to bundle a complete Flexible field configuration (including layouts, resolvers, and help text) into a reusable class. This cleans up your Nova Resource classes and makes it easy to apply the same field configuration in multiple places or make it dynamic.

To create a preset, use the Artisan command:

php artisan flexible:preset {classname?}

Your preset class should extend Whitecube\NovaFlexibleContent\Layouts\Preset and implement a handle(Flexible $field) method. Because presets are resolved via Laravel's Container, you can type-hint dependencies in the constructor.

To apply a preset to a field, use the preset method on the Flexible field instance.

namespace App\Nova\Flexible\Presets;

use Whitecube\NovaFlexibleContent\Flexible;
use Whitecube\NovaFlexibleContent\Layouts\Preset;

class WysiwygPagePreset extends Preset
{
    public function handle(Flexible $field)
    {
        $field->button('Add new block');
        $field->resolver(\App\Nova\Flexible\Resolvers\WysiwygPageResolver::class);
        $field->addLayout('Title', 'title_layout', [...]);
    }
}

// In your Nova Resource:
Flexible::make('Content')
    ->preset(\App\Nova\Flexible\Presets\WysiwygPagePreset::class);