> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Ordering and Sectioning Groups

## Article: Ordering and Sectioning Groups

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/ordering-and-sectioning-groups.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Ordering and Sectioning Groups
Ordering and sectioning groups control the order and grouping of properties in the editor panels. Data item order isn't guaranteed after serialization, so use these groups to lock in the order you want.

## data

Controls the display order of data items in the settings panel.

> **Note:** Specify these additional configurations under a `data` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property name="items" type="string[]" description="Keys from the data map. Maximum 300 items. Maximum 100 characters per item." />
</PropertyList>

## cssDataType

Groups CSS custom properties by their CSS data type in the design panel.

> **Note:** Specify these additional configurations under a `cssDataType` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property name="items" type="string[]" description="Keys from the cssCustomProperties map. Maximum 300 items. Maximum 100 characters per item." />
</PropertyList>

## cssCustomProperties

Controls the display order of CSS custom properties that share the same property type in the design panel.

> **Note:** Specify these additional configurations under a `cssCustomProperties` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property name="items" type="string[]" description="Keys from the cssCustomProperties map. Maximum 300 items. Maximum 100 characters per item." />
</PropertyList>

## presets

Groups preset items into a named category in the presets panel.

> **Note:** Specify these additional configurations under a `presets` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property name="items" type="string[]" description="Keys from the presets map. Maximum 300 items. Maximum 100 characters per item." />
</PropertyList>

## displayGroups

Controls the display order of other display groups in the panel.

> **Note:** Specify these additional configurations under a `displayGroups` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property name="items" type="string[]" description="Keys of other entries in the displayGroups map. Maximum 300 items. Maximum 100 characters per item." />
</PropertyList>

## Examples

### Ordering data items in the settings panel

Data item order is not guaranteed after serialization. Use a `data` display group to lock in the order your controls appear in the settings panel.

```typescript
editorElement: {
  data: {
    title: {
      dataType: 'text',
      displayName: 'Title',
    },
    subtitle: {
      dataType: 'text',
      displayName: 'Subtitle',
    },
    showBadge: {
      dataType: 'boolean',
      displayName: 'Show Badge',
      defaultValue: false,
    },
    badgeText: {
      dataType: 'text',
      displayName: 'Badge Text',
    },
  },
  displayGroups: {
    contentSettings: {
      displayName: 'Content',
      groupType: 'data',
      data: {
        items: ['title', 'subtitle', 'showBadge', 'badgeText'],
      },
    },
  },
}
```

### Sectioning the settings panel with multiple data groups

You can create multiple `data` groups to split data items into named sections. Then use a `displayGroups` group to control the order of those sections.

```typescript
editorElement: {
  data: {
    title: {
      dataType: 'text',
      displayName: 'Title',
    },
    description: {
      dataType: 'text',
      displayName: 'Description',
    },
    buttonLabel: {
      dataType: 'text',
      displayName: 'Button Label',
    },
    buttonLink: {
      dataType: 'link',
      displayName: 'Button Link',
    },
    showImage: {
      dataType: 'boolean',
      displayName: 'Show Image',
      defaultValue: true,
    },
  },
  displayGroups: {
    contentSection: {
      displayName: 'Content',
      groupType: 'data',
      data: {
        items: ['title', 'description'],
      },
    },
    buttonSection: {
      displayName: 'Button',
      groupType: 'data',
      data: {
        items: ['buttonLabel', 'buttonLink'],
      },
    },
    layoutSection: {
      displayName: 'Layout',
      groupType: 'data',
      data: {
        items: ['showImage'],
      },
    },
    sectionOrder: {
      displayName: 'Settings',
      groupType: 'displayGroups',
      displayGroups: {
        items: ['contentSection', 'buttonSection', 'layoutSection'],
      },
    },
  },
}
```

The `items` array in the `displayGroups` group uses the map keys of the other display groups (`contentSection`, `buttonSection`, `layoutSection`), not their `displayName` values.

### Presets category

Organize presets into named categories in the presets panel.

```typescript
editorElement: {
  presets: {
    lightTheme: {
      displayName: 'Light',
      presetDefaults: {},
    },
    darkTheme: {
      displayName: 'Dark',
      presetDefaults: {},
    },
    brandTheme: {
      displayName: 'Brand',
      presetDefaults: {},
    },
  },
  displayGroups: {
    themePresets: {
      displayName: 'Themes',
      groupType: 'presets',
      presets: {
        items: ['lightTheme', 'darkTheme', 'brandTheme'],
      },
    },
  },
}
```

## See also

- [Display Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md)
- [Shorthand Mapping Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/shorthand-mapping-groups.md)
- [Composite Control Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/composite-control-groups.md)