Custom list styling in MaxiBlocks: unordered lists, HTML structure, and DIV tags

MaxiBlocks uses a distinctive HTML structure for unordered lists that differs from standard Gutenberg markup. Each list item wraps its content in DIV tags, creating additional markup that enables advanced styling capabilities whilst raising questions about code cleanliness. This guide covers MaxiBlocks list blocks, custom bullet styling, icon markers, and alternatives using native WordPress Gutenberg lists.

The MaxiBlocks list structure

Why additional DIV tags exist

MaxiBlocks intentionally wraps list content in DIV elements to unlock styling features unavailable with standard HTML lists:

• Custom icon selection — Choose any icon from the shape library as your bullet marker
• Individual colour control — Set unique colours for each bullet point
• Precise spacing adjustments — Fine-tune marker indent and positioning
• Advanced alignment options — Control text positioning relative to markers

Accessing custom styling

To customise your list appearance:

1. Select the list block in the editor
2. Open the Block settings panel on the right
3. Navigate to Style → Custom
4. Set Source to Icon
5. Click "Load shape library" to browse available markers

The styling controls include marker indent, colour selection with opacity, text position, and list type options.

Code structure explained

MaxiBlocks implementation

<ul class="maxi-block--use-sc wp-block-list">
  <li class="maxi-block--use-sc">
    <marker />
    <div class="maxi-list-item-block__content">
      "List MaxiBlocks"
    </div>
  </li>
</ul>

Each list item becomes a distinct block with wrapper DIVs enabling granular style control.

Standard Gutenberg structure

By contrast, native Gutenberg lists use minimal markup:

<ul class="wp-block-list">
  <li>List Gutenberg</li>
</ul>

Alternative approaches

Using Gutenberg lists within MaxiBlocks

Place a standard Gutenberg list block inside a MaxiBlocks Container → Row → Column structure. The list inherits container font styling whilst maintaining cleaner markup. You lose custom bullet styling but retain basic formatting control.

Standalone Gutenberg lists

Drop native list blocks directly onto your page without any MaxiBlocks wrapper. This provides the cleanest possible HTML output with standard bullet rendering and basic WordPress styling options.

Performance considerations

The additional markup impact is negligible in real-world scenarios. Most pages contain limited bullet points (typically under 20 items), making the extra DIV tags insignificant for page weight or load times. The styling flexibility often justifies the modest increase in HTML structure.

Choosing your approach

Use MaxiBlocks lists when:

- Custom bullet designs matter for your layout

- Individual list items require unique styling

- Visual consistency demands precise control

- Brand guidelines specify particular iconography

Use Gutenberg lists when:

- Code minimalism is paramount

- Standard bullets suffice for your design

- Rapid content entry outweighs styling needs

- You're prioritising absolute markup simplicity

Both methods integrate within the WordPress block editor. Select based on whether your project prioritises styling capabilities or code economy.