---
url: /frontend/blocks.md
---
# Blocks

An Evolve block is a reusable component that can be added to a page or other resources. [Blueprints](/data-modeling/blueprints.md) 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" />
```