Vlastní bloky
Každý blok ve vizuálním builderu je PHP třída vracející BlockDefinition. Tento článek ukazuje, jak postavit a zaregistrovat vlastní blok — od jednoduché stylované sekce po blok s editovatelnými poli vykreslovaný šablonou.
Předpoklady
- Místo, kde spustit registrační kód:
AppServiceProvidervaší aplikace, nebo service provider pluginu (viz Vývoj pluginů). - Základy Blade pro variantu vykreslovanou šablonou.
Anatomie bloku
Definice bloku se staví fluent zápisem:
use Laravix\Cms\Support\BlockDefinition;
class HighlightBlock
{
public static function definition(): BlockDefinition
{
return BlockDefinition::make('highlight')
->label('Zvýraznění')
->icon('fa-star')
->category('laravix::blocks.categories.content')
->canvasHtml(<<<'HTML'
<section style="padding:48px 24px;background:#fef3c7;text-align:center;">
<h2 style="margin:0 0 8px;">Něco, co stojí za zvýraznění</h2>
<p style="margin:0;color:#92400e;">Klikněte a text upravte.</p>
</section>
HTML);
}
}
Metody:
| Metoda | Účel |
|---|---|
make(string $key) |
Unikátní klíč bloku |
label(string) |
Název v panelu bloků (prostý řetězec nebo překladový klíč) |
icon(string) / gjsIcon(string) |
Třída Font Awesome ikony na dlaždici bloku (např. fa-star) |
category(string) |
Kategorie panelu — použijte core kategorii (laravix::blocks.categories.*) nebo vlastní popisek |
canvasHtml(string|Closure) |
HTML vložené na plátno builderu. Bloky bez něj se ve vizuálním builderu nezobrazí. |
schema(array|Closure) |
Filament form komponenty popisující editovatelná pole (klasické bloky) |
contentTypes(array) |
Omezení bloku na určité typy obsahu — např. core blok Výpis příspěvků je jen ['archive'] |
defaultData(array) |
Výchozí data pro bloky se schématem |
Registrace
Zavolejte registr ze service provideru (boot() pluginu, nebo AppServiceProvider::boot() aplikace):
use Laravix\Cms\Support\BlockRegistry;
BlockRegistry::register(HighlightBlock::definition());
Blok se od té chvíle nabízí v panelu bloků builderu na každém webu instalace.
Builder bloky: canvas HTML je zdroj pravdy
U bloků pro vizuální builder je canvasHtml zároveň to, co dopadne na plátno, i to, co pak redaktor volně upravuje — texty, styly, strukturu. Uložená stránka je exportované HTML, takže blok nepotřebuje žádné serverové view. Tipy odkoukané z core bloků:
- Inline styly nebo
lx-*utility třídy jádra udrží blok přenositelný. data-gjs-type="button-link"na<a>prvcích jim dá builderovské ovládání odkazu.- Držte markup sémantický (jeden kořenový
<section>), aby se dal rozumně přestylovat.
Klasické bloky: schema + view šablony
Bloky se schema se editují jako strukturovaná data a vykresluje je šablona až při požadavku. Takhle fungují core bloky hero, text, cards atd. Schéma používá Filament form komponenty:
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\RichEditor;
->schema(fn () => [
TextInput::make('heading'),
RichEditor::make('content'),
])
Uložený obsah drží ['type' => 'highlight', 'data' => ['heading' => ..., 'content' => ...]] v Content::$blocks a šablona ho vykreslí přes views/blocks/highlight.blade.php, které dostane klíče dat jako proměnné plus $mediaMap:
<section class="py-12">
<h2>{{ $heading ?? '' }}</h2>
<div>{!! $content ?? '' !!}</div>
</section>
U obrázkových polí pojmenujte select neco_id a vyřešte ho přes mapu médií: $mediaMap[$image_id] ?? null. Hotový výběr médií vám dá Laravix\Cms\Support\FieldComponentFactory::mediaSelect('image_id', 'Obrázek').
Kontrola výsledku
- Zaregistrujte blok a znovu načtěte builder — dlaždice bloku se má objevit ve své kategorii.
- Přetáhněte ho na stránku, upravte, uložte.
- Otevřete stránku na frontendu a ověřte výstup (u schema bloků ověřte, že se vykresluje vaše view).
Související články
- Bloky s vlastním kódem — no-code HTML/CSS/JS bloky definované v administraci
- Struktura tématu
- Vývoj pluginů