EditorSidebarTabConfig

Type: Object

Object describing a sidebar tab to be added to the right hand side of the editor. New sidebar tabs can be added using registerEditorSidebarTab, existing sidebars can be modified using editEditorSidebarTab.

Properties

Name Type Description
Component ReactComponent

React component to be shown in the tab

[icon] String

Icon to use on the tab's button. This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page. Do not include the fa- prefix, just use the icon names as-is from the documentation.

id String

Unique identifier for the tab, used to refer to it in operations

label String

Text to show on the tab's button

[paddingSize] Number | String | Object

Sets the paddingSize of the sidebar tab. Useful to set to 0 to manage the visual space from within the sidebar Component yourself.

The amount of padding rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no padding at all)

  • 's' (small)

  • 'm' (medium)

  • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

Or you can pass an object whose properties determine a specific padding size for either:

  • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

  • 'vertical': %single size value% to set the 'top' and 'bottom' padding

Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

priority Number

Priority for the tab, controlling its position

[size] String

Can be set to m (default) or l to make the sidebar extra wide while the tab is opened

tooltipContent String

Text shown in the tooltip for the tab's button

Was this page helpful?