Style native Gutenberg lists

Use the WordPress List and List Item blocks for ordered steps, bullet points and nested lists. POM Theme adds styling choices based on its existing CSS helpers without replacing the native editor. This guide is for content editors with the WordPress block editor enabled.

Create and organize a list

1. Open Pages > Add Page, or edit an existing page in the block editor.
2. Insert List and enter the first item. Press Enter to continue with another item.
3. Use the native toolbar to choose an ordered or unordered list and to indent or outdent an item.
4. For ordered lists, use the native settings for the number style, starting value and reverse order.
5. Open List View when you need to select the whole list rather than an individual item or nested list.

Numbering and nesting remain part of the native list structure. Newly selected number styles use the equivalent HTML numbering attribute rather than an inline CSS rule. A list is not a collection of unrelated paragraphs.

Style the whole list or an individual item

Select the desired List or List Item, open its block settings and expand Text. Choose Text color, Text size, Font weight, Line height and Capitalization. Use Text alignment in the toolbar.

List items inherit the list's typography. Leave an item on Inherit to follow its parent, or choose a helper on that item to override it. A nested list also inherits surrounding typography unless it has its own settings. Palette selections store numbered slots, so future palette changes apply to the list automatically.

Links keep the theme's link color. To color selected words or a link, select its text and choose Theme text formatting directly in the floating toolbar. Text color, background color and size use existing helper classes; links, bold and italic remain native controls. Lists do not add paragraph icon boxes or drop caps. If the List sidebar displays List View, switch to Settings to reach its presentation controls.

Choose markers and indentation

Select the List and expand List appearance > Markers and indentation:

• Native markers keeps the native bullets or numbering.
• No markers — keep indentation hides markers while keeping the existing indentation.
• No markers or indentation removes markers and the theme's left padding.

These settings affect the selected list, not every nested list. Markerless lists retain list semantics for assistive technology. Prefer visible numbering when the sequence of steps matters. The controls do not add custom bullet icons or arbitrary marker CSS.

Spacing and visibility

Under Spacing and visibility, use existing top/bottom margin helpers, opacity in 10% steps, small-screen centering and device visibility. The same controls are available on each item. Hidden content remains selectable with a shaded editor indicator.

Parent opacity also affects its children: setting both a list and its item to 70% produces a combined 49% opacity. An item cannot become visible on a device where its parent list is hidden. Device visibility is presentation only, not access control. Hiding numbered items may change the visible numbering sequence.

Existing content and verification

Previously saved native formatting is preserved. If Previous formatting appears, Reset previous block formatting removes old block-level styling without changing the list content or numbering. Converting a list into another block type follows WordPress's native transformation rules; review theme-specific presentation after a structural conversion.

An older numbered list may show Use HTML numbering instead of previous inline style. This preserves its supported numbering style while removing the old inline numbering rule. Reselecting a native number style also switches to HTML numbering.

Before publishing:

1. Save the draft and reopen it. Confirm that items, nested lists, numbering and selected helpers remain intact.
2. Preview the frontend at the relevant device widths, including lists with per-item overrides.
3. Check links, keyboard navigation, color contrast and the reading order.
4. If a change appears on the wrong content, use List View to check whether you selected the outer list, a nested list or one item.

Related: Style paragraphs, Style headings, and Use device visibility.