TMS List

Ordered and unordered lists with custom markers, per-item styling, and nested block support.

Settings Sidebar

When you select a TMS Block in the editor, the settings sidebar has two tabs:

– **Wrapper** — Everything about the HTML element itself
– **Styles** — Visual appearance (see The Styles tab for full details)

Wrapper Tab

The Wrapper tab controls the HTML element that wraps your inner blocks.

List Type

Choose between two list formats:

– **Unordered List (ul)** — bulleted list (default)
– **Ordered List (ol)** — numbered list

TMS List uses inner blocks for each list entry — it starts with one TMS List Item inside it. Add more items using the + appender, reorder by dragging, and nest other blocks inside list items for complex layouts. The list also accepts TMS Block (Generic Block) as inner blocks.

Aria Controls

ARIA Controls — ARIA Label for screen readers, Role override (banner, navigation, region, alert, dialog, etc.), and extra ARIA attributes as key-value pairs (aria-hidden, aria-expanded, aria-live).

Custom Attributes

Add your own HTML attributes to the wrapper element. This is useful for:

– `data-*` attributes — for custom JavaScript, analytics, or styling hooks (e.g. `data-theme=”dark”`, `data-id=”123″`)
– `tabindex` — to control keyboard focus order
– `title` — a tooltip that appears on hover
– `download` — when used on an anchor-like wrapper, suggests the linked resource should be downloaded

Identity Controls

– ID — Sets the `id` attribute on the HTML element. This can be used for anchor links, JavaScript targeting, or CSS specificity. Spaces are automatically converted to dashes.
– CSS Class — Add one or more custom CSS class names to the element. These are useful for targeting the block with custom stylesheets or utility frameworks.

Styles tab

The Styles tab for TMS List focuses specifically on list styling. It includes the standard breakpoint selector and Base / Hover / Focus-Visible state tabs, but the style panels are list-specific:

  • **List Style Type** — Choose from common marker styles: `disc`, `circle`, `square`, `decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `upper-alpha`, or `none`. You can also enter a custom CSS value like `lower-latin` or a string like `”-> “`.
  • – **List Style Position** — Choose `outside` (marker sits to the left of the text) or `inside` (marker sits within the text flow).
  • – **Custom Marker Image** — Replace the default bullet or number with a custom image.

The list style type and position can be set independently per breakpoint and per state (Base, Hover, Focus-Visible).

Example HTML output

Here’s what a TMS List block with items might look like on the front end:

```html
<ul
  id="features-list"
  class="tmsblocks-list-block tmsblocks-list-block-def789 features"
  aria-label="Available features"
>
  <li class="tmsblocks-list-item tmsblocks-list-item-abc123">
    <span>Unlimited projects</span>
  </li>
  <li class="tmsblocks-list-item tmsblocks-list-item-def456">
    <span>Priority support</span>
  </li>
  <li class="tmsblocks-list-item tmsblocks-list-item-ghi789">
    <span>Advanced reporting</span>
  </li>
</ul>

And the auto-generated CSS (when you configure styles in the Styles tab):

```css
body .tmsblocks-list-block-def789 {
  list-style-type: square;
  list-style-position: outside;
  margin-top: 16px;
  margin-bottom: 16px;
  padding-left: 24px;
}
```

**Note:** Each block gets its own unique class name — `def789` for the list, `abc123`/`def456`/`ghi789` for each item.

Tips

  • Use unordered lists for general grouped information like features, benefits, or links.
  • Use ordered lists for sequences like steps, rankings, or instructions.
  • Style the list wrapper for shared spacing and use item-level styles for per-item customizations.
  • Lists work together. Always use TMS List Item blocks inside a TMS List block for the best editing experience.