WordPress Ally Tag Cloud

An accessible WordPress plugin that replaces the core Tag Cloud block with an improved version that uses proper semantic HTML markup.

The Problem

The default WordPress Tag Cloud block (core/tag-cloud) wraps tag links in a <p> (paragraph) element:

<p class="wp-block-tag-cloud">
  <a href="...">Tag 1</a>
  <a href="...">Tag 2</a>
  <a href="...">Tag 3</a>
</p>

This is not semantically correct for a collection of related items. According to HTML best practices and accessibility standards, a list of links should use proper list markup.

The Solution

This plugin replaces the core Tag Cloud block with an improved version that outputs an unordered list:

<div class="wp-block-tag-cloud">
  <ul class="wp-tag-cloud">
    <li><a href="...">Tag 1</a></li>
    <li><a href="...">Tag 2</a></li>
    <li><a href="...">Tag 3</a></li>
  </ul>
</div>

Benefits

• Better Semantics: Uses <ul> and <li> elements which are the proper HTML elements for lists
• Improved Accessibility: Screen readers can properly announce the list and the number of items
• Standards Compliant: Follows HTML5 best practices
• Drop-in Replacement: Maintains all the same features and attributes as the core block
• No JavaScript Hacks: Pure PHP solution that works at the server-side rendering level

Installation

Manual Installation

1. Download this repository
2. Upload the wordpress-ally-tag-cloud folder to /wp-content/plugins/
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Your existing Tag Cloud blocks will automatically use the improved markup

Via Git

cd wp-content/plugins
git clone https://github.com/RetroYogi/WordPress-ally-Tag-Cloud.git wordpress-ally-tag-cloud

Then activate the plugin in WordPress.

How It Works

The plugin works by:

1. Unregistering the Core Block: On initialization, it unregisters the default core/tag-cloud block
2. Registering an Improved Version: It registers a new block with the same name but with updated rendering logic
3. Using List Format: The key change is adding 'format' => 'list' to the wp_tag_cloud() function arguments
4. Proper Wrapper: Uses a <div> wrapper instead of <p> to properly contain the <ul> element

Technical Details

The core change is in the rendering function (wp_ally_render_tag_cloud_block):

$args = array(
    'echo'       => false,
    'format'     => 'list', // ← This is the key change!
    'unit'       => $unit,
    'taxonomy'   => $attributes['taxonomy'],
    'show_count' => $attributes['showTagCounts'],
    'number'     => $attributes['numberOfTags'],
    'smallest'   => floatval( $attributes['smallestFontSize'] ),
    'largest'    => floatval( $attributes['largestFontSize'] ),
);

The format parameter tells WordPress's built-in wp_tag_cloud() function to output the tags as an HTML unordered list instead of the default flat format.

Features

All standard Tag Cloud block features are supported:

• Number of Tags: Control how many tags to display (1-100)
• Taxonomy Selection: Choose which taxonomy to display (tags, categories, custom taxonomies)
• Tag Counts: Toggle display of post counts for each tag
• Font Size Control: Set minimum and maximum font sizes for the tag cloud effect
• Typography Controls: Font family, weight, style, line height, letter spacing
• Spacing Controls: Margin and padding
• Border Controls: Radius, color, width, and style
• Alignment Options: Align left, center, right, or full width
• Block Styles: Default and Outline styles

Compatibility

• WordPress: 5.9 or higher
• PHP: 7.4 or higher
• Block Editor: Fully compatible with Gutenberg

Source Code References

This plugin is based on the WordPress core Tag Cloud block implementation:

• WordPress Core - tag-cloud.php
• Gutenberg - tag-cloud/index.php
• Gutenberg - tag-cloud/block.json
• wp_tag_cloud() Documentation

License

GPL v2 or later

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please open an issue on GitHub.