Blocks

Blocks

Blocks are pre-built components of content that can be dropped into an area. Blocks can also be attached to any stream object via the Blocks Field Type.

To find a list of available blocks search for _block-extension the in our featured and community repositories. These repositories can also be found in the latest version of the addons module in your control panel.

Displaying Blocks

Blocks can be attached to any object including areas but the display of them is generally the same.

Displaying Area Blocks

To display all the blocks within an area instance you can use the blocks plugin function and pass the id or slug of the area.

{{ blocks('footer')|raw }}

You can also loop over the blocks within the area to better control the rendering of them:

{% for block in blocks('footer') %}
    {% if block.extension.value.slug == 'example_block' %}
        {{ block.make.content|raw }}
    {% endif %}
{% endfor %}

You can also render blocks directly off of an area instance:

```twig
{{ area.blocks.render()|raw }}

Displaying Field Type Blocks

To display blocks added to a stream via the blocks field type simply use the field slug like you would with any other stream field:

{{ page.content_blocks.render()|raw }}

You can also loop through the blocks individually:

{% for block in page.content_blocks %}
    {% if block.extension.value.slug == 'example_block' %}
        //
    {% endif %}
{% endfor %}

Styling Blocks

Blocks come out of the box using a BEM naming standard to make it easier for you to style them consistently:

<div
        id="block--{{ block.id }}"
        class="block block--{{ block.extension.value.slug }}">

    {% if block.title.value %}
        <h3 class="block__title block__title--{{ block.extension.value.slug }}">
            {{ block.title }}
        </h3>
    {% endif %}

    <div class="block__content block__content--{{ block.extension.value.slug }}">
        {{ content|raw }}
    </div>

</div>

The content portion is defined by the block extension. {.note}

Overriding Blocks

Overriding blocks and the blocks module is the same process as other addons. For more information see the guides on Extending PyroCMS.