$attrs is a string containing the class attribute of the block. The class is generated by the block settings and some other logic.

$attrs will have a value that looks something like this:

class="tb-block align-left background-light pattern-none variant-none tb-collapsible-margins"

Here’s a breakdown of the possible class names:

• tb-block: Every block will have this class.
• align-[none|left|center]: The alignment of the block.
• background-[none|light|dark]: The background color of the block.
• pattern-[none|light|dark|custom]: The background pattern of the block.
• variant-[*]: The variant of the block. Some blocks can have multiple variants. For example the Gallery block has two variants: Grid and Slider
• tb-collapsible-margins: When two blocks with the same background follow each other, this can generate too much space. That’s why there is a CSS rule to remove the padding of the second block when they have the same background. Removing padding will only apply to a block that follows a block with the class tb-collapsible-margins. Some blocks, like the gallery, don’t have this class set.

Example 2: Inner blocks

A typical block will contain at least one div with the class inner-block.
.inner-block will contain content that should have a miximum width of var(--tb-content-width).
.inner-block will also add some padding to the left and right side of the text, preventing the content to touch the edges of the screen. The amount of padding is defined by the variable var(--tb-block-padding).

If a block contains a paragraph of text, you should put it inside a div with the class text-part.
This is good for readability because it ensures that the content will never become wider than var(--tb-max-text-width).

Code

<div <?= $attrs ?>>
    <div class="inner-block">
        <div class="text-part">
            <p>[lorem]</p>
        </div>
    </div>
</div>

Example 3: Block with full-width part

Sometimes you want to have a full-width component inside a block. For example a gallery or carousel.
In this case you can add a div without the class .inner-block to the block.
This will make the div full-width.

Code

<div <?= $attrs ?>>
    <div class="inner-block">
        <div class="text-part">
            <p>Content before</p>
        </div>
    </div>
    <div style="background-color:yellow;">
        <p>Full width content inside block</p>
    </div>
    <div class="inner-block">
        <div class="text-part">
            <p>Content after</p>
        </div>
    </div>
</div>

Result

Note that the direct child elements of .tb-block will have their vertical margins set to var(--tb-inner-block-margin).
The first child element will have no top margin. The last child element will have no bottom margin.

Example 4: Multiple blocks

A page almost always includes of a series of blocks.

The vertical block padding is set by the CSS variable var(--tb-block-padding-y).

Most blocks will have the class .tb-collapsible-margins. If such a block follows another block with the same class, and if it shares the same background as the previous block, this block’s padding will be removed.

The code below creates 3 simple blocks, the first 2 with a dark background, the last one with a light background. The second block has no top padding.

Code

<div class="tb-block background-dark tb-collapsible-margins">
    <div class="inner-block">
        <div class="text-part">
            <p>[lorem 2]</p>
        </div>
    </div>
</div>
<div class="tb-block background-dark tb-collapsible-margins">
    <div class="inner-block">
        <div class="text-part">
            <p>[lorem 2]</p>
        </div>
    </div>
</div>
<div class="tb-block background-light tb-collapsible-margins">
    <div class="inner-block">
        <div class="text-part">
            <p>[lorem 2]</p>
        </div>
    </div>
</div>

Result