Hopp til innholdet

Aurora 1.0 is out!

What's new →

Veiledning

Legg til din egen blokk

Et skrivebord sett ovenfra med laptop, skisser, telefon og bøker

Et sitat med bilde av personen som sa det: en liten blokk som viser hele mønsteret. Du lager klassen og visningen, så gjør Aurora resten.

1. Lag den

~ Terminal
$ php artisan aurora:make-block "Quote with photo" --category=content --icon=phosphor-quotes

Det lager app/Blocks/QuoteWithPhotoBlock.php og resources/views/components/blocks/quote-with-photo.blade.php. Blokker i app/Blocks registreres automatisk: den ligger allerede i paletten.

2. Feltene

app/Blocks/QuoteWithPhotoBlock.php PHP
public static function schema(): array
{
    return [
        Textarea::make('quote')->label(__('Quote'))->rows(3),
        TextInput::make('name')->label(__('Name')),
        AssetPicker::make('photo')->label(__('Photo')),
    ];
}

public static function editables(): array
{
    return [
        'quote' => Editable::text()->multiline(),
        'name' => Editable::text()->placeholder(__('Name')),
    ];
}

3. Visningen

Vis feltene med hjelperne: ingen @php use-importer trengs.

resources/views/components/blocks/quote-with-photo.blade.php Blade
@props(['data' => []])

<figure class="flex items-center gap-6">
    <x-aurora::media :value="$data['photo'] ?? null" size="sm" class="size-20 rounded-full object-cover" />
    <blockquote>
        <p class="text-xl" @editable('quote')>{{ plain_text($data['quote'] ?? '') }}</p>
        @shows('name', $data['name'] ?? null)
            <cite @editable('name')>{{ plain_text($data['name'] ?? '') }}</cite>
        @endshows
    </blockquote>
</figure>

4. Bruk den

Åpne en hvilken som helst side i den visuelle editoren og dra den inn. Lerretet viser den med nettstedets egen CSS. Den blir også validert når KI-verktøy skriver den, beskrevet for assistenter, oversatt, indeksert for søk og levert av API-ene, uten at du trenger å gjøre noe mer.