Regions

Groups of content and components that can be repeated and/or removed, like a listing of items. Regions do not get added to the sidebar.

block-region

Adding variable names to regions saves their metadata. Each unique region requires its own variable name.

data-group="variable-name"

A region cannot be used on a block-edit element.

Example

<div class="block-region" data-group="header">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>

Drop area

You can use an empty region to show a placeholder area that indicates to the user that components can be dropped there.

Example

<div class="block-region"></div>

Repeat

block-repeat

Allows duplicating a region, making it part of a listing where each copy can be reordered or removed.

This will not work on a region within another region around it.

block-repeat-#
Sets a limit to the number of items that can be duplicated.

Example

<div class="block-region block-repeat block-repeat-10" data-group="header">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>

Remove

block-remove

Allows a region to be removed.

Variants

Variants are alternate versions of regions that you can enable to choose from. This allows for preset design features and formatting options that can be switched between. The same variable name should be used for all blocks that apply to its region. Blocks should be immediately adjacent to each other.

Example

<div class="block-region" data-group="header">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>
<div class="block-region" data-group="header" style="text-align: center">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>