Evolve Docs

Appearance

Blocks ​

An Evolve block is a reusable component that can be added to a page or other resources. Blueprints define the structure of a block, while Blade or Livewire components define the frontend representation.

Blade views ​

Every blueprint has a corresponding Blade view that is used to render the block in the frontend. The block components are located in the theme/views/components/blocks.

INFO

Depending of your blueprint name, the Blade view is nested in a directory structure that matches the blueprint name. For example, a blueprint with the name cms.quote would have the Blade view located at theme/views/components/blocks/cms/quote.blade.php.

You can access the block instance in the blade view using the $block prop that is passed to the Blade component.

Accessing field data ​

To access field data, use the magic getter syntax by prefixing the field name with an underscore (_). For example, to access the title field, you can use $block->_title.

blade
@props(['block'])

<section id="{{ $block->anchor }}">
    <h3>{{ $block->_title }}</h3>
    <blockquote>
        {{ $block->_content }}
    </blockquote>
</section>

Relationships ​

If your block has a relationship field, you can access the related model(s) using a standard Eloquent relationship (without the underscore).

blade
@props(['block'])

<section id="{{ $block->anchor }}">
    <h3>{{ $block->_title }}</h3>
    <p>Author: {{ $block->author->name }}</p>
</section>

Rendering nested blocks ​

If your block allows nested blocks, you can access them with the visibleBlocks relation. This relation returns all published blocks that are nested inside the current block.

blade
@props(['block'])

<section id="{{ $block->anchor }}">
    <h3>{{ $block->_title }}</h3>

    @foreach ($block->visibleBlocks as $nestedBlock)
        <!-- Do something with the nested block -->
    @endforeach
</section>

If your block allows other top-level blocks to be nested inside, you probably want to render them using our <x-common.blocks> component instead of manually looping through the blocks.

blade
<x-common.blocks :blocks="$block->visibleBlocks" />