Regions

Customizable areas of elements that can't be moved around. Regions do not get added to the sidebar.

block-region or -block-region: true

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

data-group="variable-name" or -group-var: variable-name

And 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" style="text-align: left">Title</h1>
  <p class="block-edit" data-block="example-text" style="text-align: left">Content</p>
</div>

Repeat

block-repeat or -block-repeat: true

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.

Example

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

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

Remove

block-remove or -block-remove: true

Allows a region to be removed.

Example

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

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" style="text-align: left">Title Left</h1>
  <p class="block-edit" data-block="example-text" style="text-align: left">Content Left</p>
</div>
<div class="block-region" data-group="header">
  <h1 class="block-edit" data-block="example-title" style="text-align: center">Title Center</h1>
  <p class="block-edit" data-block="example-text" style="text-align: center">Content Center</p>
</div>