Content Blocks

Content Blocks are singular components of information, content, or design that can be used anywhere on a Page.

These are the core of a Autoload-powered site. They are unique to each site and what the majority of the time developing a Autoload-powered site will be spent towards.

Click here for a visual demo.

Concept

A Content Block is a combination of various singular fields, multiple fields, or nested fields that, when put together, create a "Block" or singular component on a webpage.

Usage

Content blocks display content in a specific layout or design based on the type of Content Block selected. These Content Blocks can cover small or large sections of a Page.

Each Content Block has a unique name for identity inside the Content Blocks dropdown.

Each Content Block also has Override attributes that allow for changes from the default padding or margin.

While Users can add, edit, and delete Content Blocks on a page, Only Developers can add or modify existing Content Blocks' architectural design.

Creating a Content Block

To create a new Content Block, run the following command. The "Name" argument at the end can be a underscore-separated Name or a string literal such as "My Content Block."

    
1php artisan make:autoload-content-block NAME_OF_YOUR_CONTENT_BLOCK

This will create a new file within your app/Filament/Content/Layouts/ directory, under the name you've given, that looks like this:

    
 1namespace App\Filament\Content\Layouts;
 2 
 3use Filament\Forms;
 4use Mergeloop\Autoload\Filament\Content\AutoloadLayout;
 5 
 6class MyContentBlock extends AutoloadLayout
 7{
 8    protected function layoutFields(): array
 9    {
10        return [
11            // fields go here...
12        ];
13    }
14}

Within the layoutFields method is where you'll place your Filament input fields or any custom Fields you create. You can read more on Filament's Fields here or Custom Fields here.

Next, this will also create a new file within your resources/views/components/page-builder following the same Class name, except in kebab case:

    
1<!-- resources/views/components/page-builder/my-content-block.blade.php -->
2@push('header::styles')
3    <x-autoload::style-override :key="$key" :content="$vars" />
4@endpush
5 
6<section data-component-id="{{ $key }}">
7    <!-- HTML content goes here -->
8</section>

Click here more on the Style Override component.

Click here to learn more about default variable injection via the Autoload Page Builder component.

Lastly, you're ready to start building your Blade file based on the input fields you have within your Content Block. Full example below:

Full Example

    
 1namespace App\Filament\Content\Layouts;
 2 
 3use Filament\Forms;
 4use Mergeloop\Autoload\Filament\Content\AutoloadLayout;
 5 
 6class MyContentBlock extends AutoloadLayout
 7{
 8    protected function layoutFields(): array
 9    {
10        return [
11            Forms\Components\TextInput::make('heading') 
12                ->label('Heading')
13                ->rules('required', 'max:90'),
14 
15            Forms\Components\TextInput::make('description') 
16                ->label('Description')
17                ->rules('nullable', 'max:255'),
18        ];
19    }
20}

    
 1<!-- resources/views/components/page-builder/my-content-block.blade.php -->
 2@push('header::styles')
 3    <x-autoload::style-override :key="$key" :content="$vars" />
 4@endpush
 5 
 6<section data-component-id="{{ $key }}">
 7    <h3>{{ $heading }}</h3>
 8 
 9    @if ($description)
10        <p>{{ $description }}</p>
11    @endif
12</section>

Updating an Existing Content Block

Updating a Content Blocks fields is the process as creating them, following the guide above for examples and fields.

Extending or Customizing a Content Block

By default, a Content Block's fields will be passed to the Blade view automatically, but in some instances, you may want to manipulate that data further before it gets to the view, or even add more data.

You can do so by running the following command that will create an extra file within your Laravel Application under the app/View/Components/ directory.

    
1php artisan make:autoload-component NAME_OF_YOUR_COMPONENT

This new View Component will extend a Autoload Component class called AutoloadPageBuilderComponent and have a newbuild method within it.

You should return an array from this View Component that at least has a key-value pair of vars and an array of keyed data to be passed to the view. It is recommended to pass the original $vars property in this return statement, but you are free to modify that array property as you like.

You can also, optionally, pass a layout key-value pair in this return statement. The layout that you return should be a valid blade file within your Laravel Application's resources/view/components/page-builder/ directory.

Here's an example:

    
 1namespace App\View\Components\PageBuilder;
 2 
 3use Mergeloop\Autoload\Models\Page;
 4use Mergeloop\Autoload\View\Components\AutoloadPageBuilderComponent;
 5 
 6class MyComponent extends AutoloadPageBuilderComponent
 7{
 8    public function build(string $key, string $layout, array $vars, ?Page $page = null, bool $fold = false, int $loop = 0): array
 9    {
10        // Add a new property
11        $vars['newKey'] = 'Something'; 
12 
13        return [
14            'layout' => $layout,
15            'vars' => $vars
16        ];
17    }
18}

    
1<!-- resources/views/components/page-builder/my-component -->
2<section data-component-id="{{ $key }}">
3    <h1>The word is: {{ $newKey }}</h1>
4</section>

Reordering Content Blocks

Each Content Block has a set of icons, with one of them being the Reorder tool (up and down arrow icon).

To use this tool, click and hold that icon. From there, you can drag and drop that Content Block to a new position up or down from where it was originally. Make sure to Save!

Cloning Content Blocks

Each Content Block has a set of icons, with one of them being the Clone tool (duplicate icon).

To use this tool, click that icon and that will re-create the current Content Block below the existing one.

Active/Inactive Content Block

Each Content Block has a set of icons, with one of them being the Active tool (checkmark icon).

This represents whether the given Content Block is Active and published to the page (shown to the user) or if it is Inactive and hidden from the page (not rendered on the page for the user).

To use this tool, open the Content Block's "Advanced Fields" section and toggle on/off the Publishing section.

Overriding Padding or Margin

*Most Content Blocks will have a collapsed section within them titled "Advanced Fields." This holds the override inputs for that specific instance of a Content Block. This section can be open/closed by clicking the arrow to the far right of the dark gray "Advanced Fields" section.

Each Content Block has CSS properties that are built-in by the developer. However, some of these properties can be overridden using the "Override" attributes. These are added to every Content Block by _default_, however, you can disable them by including the following line in your Content Block layout:

    
1public bool $showAdvancedFields = false;

To include logic for parsing the override fields, click the Styling Override documentation page.

Other Resources