Layer Management

engine.block.insertChild(page, block, 0);
const parent = engine.block.getParent(block);
const childIds = engine.block.getChildren(block);
engine.block.appendChild(parent, block);

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to modify the hierarchy of blocks through the block API.

Manipulate the hierarchy of blocks#

getParent(id: DesignBlockId): DesignBlockId | null

Query a block’s parent.

• id: The block to query.
• Returns The parent’s handle or null if the block has no parent.

getChildren(id: DesignBlockId): DesignBlockId[]

Get all children of the given block. Children are sorted in their rendering order: Last child is rendered in front of other children.

• id: The block to query.
• Returns A list of block ids.

insertChild(parent: DesignBlockId, child: DesignBlockId, index: number): void

Insert a new or existing child at a certain position in the parent’s children. Required scope: ‘editor/add’

• parent: The block whose children should be updated.
• child: The child to insert. Can be an existing child of parent.
• index: The index to insert or move to.

appendChild(parent: DesignBlockId, child: DesignBlockId): void

Appends a new or existing child to a block’s children. Required scope: ‘editor/add’

• parent: The block whose children should be updated.
• child: The child to insert. Can be an existing child of parent.

When adding a block to a new parent, it is automatically removed from its previous parent.

Full Code#

Here’s the full code:

engine.block.insertChild(page, block, 0);
const parent = engine.block.getParent(block);
const childIds = engine.block.getChildren(block);
engine.block.appendChild(parent, block);