Groups

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to group blocks through the block API. Groups form a cohesive unit.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Grouping#

Multiple blocks can be grouped together to form a cohesive unit. A group being a block, it can itself be part of a group.

What cannot be grouped#

A scene
A block that already is part of a group

JavaScript


isGroupable(ids: DesignBlockId[]): boolean

Confirms that a given set of blocks can be grouped together.

ids: An array of block ids.
Returns Whether the blocks can be grouped together.

JavaScript


group(ids: DesignBlockId[]): DesignBlockId

Group blocks together.

ids: A non-empty array of block ids.
Returns The block id of the created group.

JavaScript


ungroup(id: DesignBlockId): void

Ungroups a group.

id: The group id from a previous call to group.

JavaScript


enterGroup(id: DesignBlockId): void

Changes selection from selected group to a block within that group. Nothing happens if group is not a group. Required scope: 'editor/select'

id: The group id from a previous call to group.

JavaScript


enterGroup(id: DesignBlockId): void

Changes selection from selected group to a block within that group. Nothing happens if group is not a group. Required scope: 'editor/select'

id: The group id from a previous call to group.

JavaScript


exitGroup(id: DesignBlockId): void

Changes selection from a group's selected block to that group. Nothing happens if the id is not part of a group. Required scope: 'editor/select'

id: A block id.


// Create blocks and append to page
const member1 = engine.block.create('graphic');
const member2 = engine.block.create('graphic');
engine.block.appendChild(page, member1);
engine.block.appendChild(page, member2);

// Check whether the blocks may be grouped
const groupable = engine.block.isGroupable([member1, member2])
if (groupable) {
  const group = engine.block.group([member1, member2]);
  engine.block.setSelected(group, true);
  engine.block.enterGroup(group);
  engine.block.setSelected(member1, true);
  engine.block.exitGroup(member1);
  engine.block.ungroup(group);
}