Create and Render a Custom Block

Custom blocks are the building blocks of your Kompass website. This guide walks you from registering a new block type through rendering it in a Blade template.

Step 1: Define a New Block Template

First, register the block type in the Kompass admin interface.

1. Log in to the Admin Dashboard.
2. Navigate to Blocks in the sidebar.
3. Click the "New Block" button.
4. Enter a Name (e.g., Testimonial). The Type (slug) will be auto-generated as testimonial.
5. Click Save.

Automatic File Creation

When you save a new block, Kompass automatically creates a Blade view file at resources/views/components/blocks/{type}.blade.php.

Step 2: Add Editable Fields

A block needs fields so users can enter content.

1. While editing your new block template, go to the Fields tab.
2. Add the fields you need. For a testimonial, you might add:
   • A Text field for the author's name.
   • A WYSIWYG field for the quote.
   • An Image field for the author's headshot.
3. Assign each field a clear label and order.

Step 3: Customize the Blade View

Open the auto-generated Blade file in your code editor: resources/views/components/blocks/testimonial.blade.php.

Add your HTML structure and use the Kompass helper functions to fetch data.

@props(['item' => ''])

@if($item->type == 'testimonial')
<section class="testimonial-block {{ get_meta($item, 'css-classname', '') }}">
    <div class="container mx-auto">
        {{-- Fetch fields using helpers --}}
        @php
            $name = get_field('text', $item->datafield);
            $quote = get_field('wysiwyg', $item->datafield);
            $image = get_field('image', $item->datafield, 'w-16 h-16 rounded-full');
        @endphp

        <div class="flex items-center gap-4">
            @if($image)
                <div class="author-image">{!! $image !!}</div>
            @endif
            
            <div>
                @if($quote)
                    <blockquote class="text-xl italic">"{!! $quote !!}"</blockquote>
                @endif
                
                @if($name)
                    <cite class="font-bold">- {{ $name }}</cite>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

Step 4: Use the Block on a Page

Now that the block is defined, you can add it to any page.

1. Go to Pages in the Admin.
2. Select a page and open the Block Editor.
3. Click "Add Block" and select your new Testimonial block.
4. Fill in the fields and save the page.

Step 5: Render Blocks in your Template

To display the blocks on your frontend, ensure your main page template (e.g., resources/views/layouts/main.blade.php) includes the block rendering loop:

@foreach ($page->blocks as $item)
    <x-blocks.components :item="$item" />
@endforeach

The <x-blocks.components> component automatically finds and renders the correct Blade view based on the block type.