List Item

The TMS List Item block represents a single entry inside a TMS List. Each item can contain its own text, inline formatting, and even nested inner blocks — giving you full control over each list entry.

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.

Content

Type the list item text directly in the block canvas. You can use the standard WordPress text formatting toolbar for bold, italic, strikethrough, code, subscript, superscript, and text color. The text is rendered inside a `<span>` tag within the `<li>` element.

Inner Blocks

Each list item can also contain nested inner blocks. This is useful when a list entry needs more than just a line of text — for example, a description paragraph or an image alongside the item label. When inner blocks are present, they appear below the item text.

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.

Example HTML output

Here’s what a single TMS List Item block looks like on the front end:

```html
<li
  id="feature-unlimited"
  class="tmsblocks-list-item tmsblocks-list-item-abc123 feature-item"
  aria-label="Unlimited projects feature"
>
  <span>Unlimited projects</span>
</li>
```

With nested inner blocks:

```html
<li
  class="tmsblocks-list-item tmsblocks-list-item-abc123 feature-item"
>
  <span>Unlimited projects</span>
  <p>Create as many projects as you need without restrictions.</p>
</li>
```

Styles tab

List Style Type — Override the marker style for this specific item.
List Style Position — Choose outside or inside for this item.
Custom Marker Image — Use a custom image as the marker for this item.

Style the list wrapper for settings that should apply to all items, and use item-level styles only when you need to override a specific entry.

Tips

Keep items focused on a single idea. Each list item should represent one point, step, or option.
Use nested blocks for detail. If an item needs a supporting description, nest a TMS Paragraph block inside it.
This block belongs inside a TMS List. It is designed to be a child of the TMS List block.
Set item-level IDs for anchor links. If you want to link directly to a specific list entry, give it an ID.