Changelog

The Designer API now includes a Box element preset. Box is a block element with a semantic HTML tag: div, section, header, footer, nav, main, article, aside, address, or figure.

Creating Box elements

Use webflow.elementPresets.Box to create a Box element:

const selectedElement = await webflow.getSelectedElement();
if (selectedElement?.children) {
  const box = await selectedElement.append(webflow.elementPresets.Box);
  if (box.type === 'Block') {
    await box.setTag('section');
  }
}

Creating an element by tag name also creates a Box element when you pass one of the 10 tags above, such as element.append('div') or element.append('section').

Deprecated presets

These presets still work but are deprecated. Use Box instead:

• DivBlock
• Section
• BlockContainer
• Grid
• Row
• HFlex
• VFlex

Migrating from the Section preset

The Section preset no longer returns an element with the type Section. It now returns a BlockElement with the type Block, the same as Box and DivBlock.

If your app checks for element.type === 'Section' after creating an element with the Section preset, update the check to Block.

Checking the HTML tag

A Block element can use any of the 10 tags, so the element type doesn’t tell you the HTML element. Narrow the element type, then use element.getTag() to read the tag. getTag() also works for custom elements.

const element = await webflow.getSelectedElement();
if (element?.type === 'Block') {
  console.log(await element.getTag()); // for example, 'section'
}

For more information, see Element presets and Get HTML tag.