Creating Your First Custom Block

This guide walks you through building a custom "Service Card" block: registering it in the Admin UI, defining its fields, and rendering the data in a Blade template.

Prerequisites

• Kompass CMS is installed and running.
• Access to the Admin Dashboard.
• A basic understanding of Blade and Tailwind CSS.

---

Step 1: Register the Block Template

Every block starts with a template definition in the Admin.

1. Log in to your Admin Dashboard.
2. Navigate to Blocks in the sidebar.
3. Click the "New Block" button.
4. Enter the following details:
   • Name: Service Card
   • Type: (Leave this to auto-generate as service-card)
5. Click Save.

Auto-generated Blade File

The moment you click Save, Kompass generates a physical file for you at resources/views/components/blocks/service-card.blade.php.

Step 2: Define the Block Fields

Add the fields that define the Service Card's content: a Title, an Icon Name, and a Description.

1. While still in the "Service Card" edit screen, click on the Fields tab.
2. Add a Text field:
   • Label: Title
   • Field Type: text
3. Add another Text field:
   • Label: Icon Name (used for Lucide or Heroicons)
   • Field Type: text
4. Add a WYSIWYG field:
   • Label: Description
   • Field Type: wysiwyg
5. Click Save Changes.

Step 3: Edit the Blade Template

Open resources/views/components/blocks/service-card.blade.php in your editor and replace the default content:

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

@if($item->type == 'service-card')
<div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
    @php
        // Fetching our fields using the get_field helper
        $title = get_field('text', $item->datafield, null, null, 'Service Title');
        $icon  = get_field('text', $item->datafield); // We'll use the second text field for the icon
        $desc  = get_field('wysiwyg', $item->datafield);
    @endphp

    <div class="flex items-center mb-4">
        @if($icon)
            <div class="p-2 mr-3 text-white bg-blue-600 rounded-full">
                {{-- Assuming you use a blade icon package --}}
                @svg($icon, 'w-6 h-6')
            </div>
        @endif
        <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
            {{ $title }}
        </h3>
    </div>

    @if($desc)
        <div class="font-normal text-gray-700 dark:text-gray-400">
            {!! $desc !!}
        </div>
    @endif
</div>
@endif

Step 4: Add the Block to a Page

1. Go to Pages in the Admin.
2. Create a new page or select an existing one.
3. In the Block Editor, click Add Block.
4. Select Service Card.
5. Fill in the fields:
   • Title: Web Development
   • Icon Name: heroicon-o-code-bracket (ensure your icon package is installed)
   • Description: We build amazing Laravel applications.
6. Save the page.

Step 5: View the Result

Navigate to the page on your website. You should see your custom-styled Service Card rendered correctly.

What's Next?

• Try adding an Image field for a background.
• Explore the Grid Settings in the block editor to show multiple service cards side-by-side.