> 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: Shorthand Mapping Groups

## Article: Shorthand Mapping Groups

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

## Article Content:

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


# Shorthand Mapping Groups
Shorthand mapping groups combine multiple separate CSS custom properties into a single compact shorthand control in the Design panel. For example, without a `border` group, the editor shows three separate full-width controls for border width, style, and color. With the group, they appear as one compact row combining all three.

Each CSS custom property is defined individually in `cssCustomProperties` with its own `cssPropertyType`. The display group maps each property to a slot in the shorthand. The slot names match CSS shorthand sub-properties.

These groups only work with [CSS custom properties](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/css/css-custom-properties.md). Standard [CSS properties](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/css/standard-css-properties.md) already map one-to-one with their controls and don't need display groups.

## Background

Combines background-related CSS custom properties into a single background control.

> **Note:** Specify these additional configurations under a `background` 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="backgroundColor" type="string" description="CSS custom property key for background-color." />
  <Property name="backgroundImage" type="string" description="CSS custom property key for background-image." />
  <Property name="backgroundPosition" type="string" description="CSS custom property key for background-position." />
  <Property name="backgroundSize" type="string" description="CSS custom property key for background-size." />
  <Property name="backgroundRepeat" type="string" description="CSS custom property key for background-repeat." />
  <Property name="backgroundOrigin" type="string" description="CSS custom property key for background-origin." />
  <Property name="backgroundClip" type="string" description="CSS custom property key for background-clip." />
</PropertyList>

## Coordinates

Combines directional CSS custom properties into a single control. The following `groupType` values use this schema: `margin`, `padding`, `borderColor`, `borderWidth`, `borderStyle`.

> **Note:** Specify these additional configurations under a field named after your `groupType` value, such as `margin` or `padding`, 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="top" type="string" description="CSS custom property key for the top value." />
  <Property name="right" type="string" description="CSS custom property key for the right value." />
  <Property name="bottom" type="string" description="CSS custom property key for the bottom value." />
  <Property name="left" type="string" description="CSS custom property key for the left value." />
</PropertyList>

## Border

Combines border CSS custom properties into a single border control. The following `groupType` values use this schema: `border`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderInlineStart`, `borderInlineEnd`.

> **Note:** Specify these additional configurations under a field named after your `groupType` value, such as `border` or `borderTop`, 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="width" type="string" description="CSS custom property key for border width." />
  <Property name="style" type="string" description="CSS custom property key for border style." />
  <Property name="color" type="string" description="CSS custom property key for border color." />
</PropertyList>

## Border radius

Combines border-radius CSS custom properties into a single corner-radius control.

> **Note:** Specify these additional configurations under a `borderRadius` 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="topLeft" type="string" description="CSS custom property key for the top-left corner radius." />
  <Property name="topRight" type="string" description="CSS custom property key for the top-right corner radius." />
  <Property name="bottomRight" type="string" description="CSS custom property key for the bottom-right corner radius." />
  <Property name="bottomLeft" type="string" description="CSS custom property key for the bottom-left corner radius." />
</PropertyList>

## Font

Combines font-related CSS custom properties into a single font control.

> **Note:** Specify these additional configurations under a `font` 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="fontStyle" type="string" description="CSS custom property key for font-style." />
  <Property name="fontVariant" type="string" description="CSS custom property key for font-variant." />
  <Property name="fontWeight" type="string" description="CSS custom property key for font-weight." />
  <Property name="fontSize" type="string" description="CSS custom property key for font-size." />
  <Property name="lineHeight" type="string" description="CSS custom property key for line-height." />
  <Property name="fontFamily" type="string" description="CSS custom property key for font-family." />
</PropertyList>

## Text decoration

Combines text-decoration CSS custom properties into a single text-decoration control.

> **Note:** Specify these additional configurations under a `textDecoration` 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="textDecorationLine" type="string" description="CSS custom property key for text-decoration-line." />
  <Property name="textDecorationColor" type="string" description="CSS custom property key for text-decoration-color." />
  <Property name="textDecorationStyle" type="string" description="CSS custom property key for text-decoration-style." />
  <Property name="textDecorationThickness" type="string" description="CSS custom property key for text-decoration-thickness." />
</PropertyList>

## Gap

Combines row and column gap CSS custom properties into a single gap control.

> **Note:** Specify these additional configurations under a `gap` 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="rowGap" type="string" description="CSS custom property key for row-gap." />
  <Property name="columnGap" type="string" description="CSS custom property key for column-gap." />
</PropertyList>

## Examples

### Padding

If you define multiple padding CSS custom properties, use a `padding` display group to tell the editor which property maps to each side. The editor renders them as a single grouped padding control instead of four separate sliders.

```typescript
editorElement: {
  cssCustomProperties: {
    myPaddingTop: {
      displayName: 'Top',
      cssPropertyType: 'paddingTop',
    },
    myPaddingRight: {
      displayName: 'Right',
      cssPropertyType: 'paddingRight',
    },
    myPaddingBottom: {
      displayName: 'Bottom',
      cssPropertyType: 'paddingBottom',
    },
    myPaddingLeft: {
      displayName: 'Left',
      cssPropertyType: 'paddingLeft',
    },
  },
  displayGroups: {
    outerPadding: {
      displayName: 'Outer Padding',
      groupType: 'padding',
      padding: {
        top: 'myPaddingTop',
        right: 'myPaddingRight',
        bottom: 'myPaddingBottom',
        left: 'myPaddingLeft',
      },
    },
  },
}
```

### Border

Use a `border` display group to combine separate width, style, and color custom properties into a single border control in the editor.

```typescript
editorElement: {
  cssCustomProperties: {
    myBorderWidth: {
      displayName: 'Border Width',
      cssPropertyType: 'borderWidth',
    },
    myBorderStyle: {
      displayName: 'Border Style',
      cssPropertyType: 'borderStyle',
    },
    myBorderColor: {
      displayName: 'Border Color',
      cssPropertyType: 'borderColor',
    },
  },
  displayGroups: {
    borderGroup: {
      displayName: 'Border',
      groupType: 'border',
      border: {
        width: 'myBorderWidth',
        style: 'myBorderStyle',
        color: 'myBorderColor',
      },
    },
  },
}
```

### Font

Use a `font` display group to combine separate font-related custom properties into a single font control in the editor.

```typescript
editorElement: {
  cssCustomProperties: {
    headingFamily: {
      displayName: 'Family',
      cssPropertyType: 'fontFamily',
    },
    headingSize: {
      displayName: 'Size',
      cssPropertyType: 'fontSize',
    },
    headingWeight: {
      displayName: 'Weight',
      cssPropertyType: 'fontWeight',
    },
    headingLineHeight: {
      displayName: 'Line Height',
      cssPropertyType: 'lineHeight',
    },
  },
  displayGroups: {
    headingFont: {
      displayName: 'Heading Font',
      groupType: 'font',
      font: {
        fontFamily: 'headingFamily',
        fontSize: 'headingSize',
        fontWeight: 'headingWeight',
        lineHeight: 'headingLineHeight',
      },
    },
  },
}
```

## See also

- [Display Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md)
- [Ordering and Sectioning Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/ordering-and-sectioning-groups.md)
- [Composite Control Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/composite-control-groups.md)