Steve's Attributes

WordPress’s Gutenberg editor makes it easy to add links to images, buttons, and text, but it doesn’t provide a straightforward way to add custom HTML attributes to those links. This is where “Steve’s Attributes” comes in.

This plugin extends the core Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks to include a “Custom Attributes” field in their link settings. You can add any HTML attributes you need, such as data attributes for popups, custom classes, tracking attributes, or accessibility enhancements.

Key Features: * Adds a “Custom Attributes” textarea to the link settings of supported blocks. * Parses attributes in key="value" format (one per line). * Merges class attributes properly to avoid duplicates. * Super lightweight – only loads in the block editor, no frontend impact. * No database queries or heavy processing. * Expanded Block Support: Now supports Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks.

Use Cases: * Adding popup triggers (e.g., data-popup-id="123") * Custom styling classes (e.g., class="my-custom-class") * Tracking attributes (e.g., data-ga-action="click") * Accessibility enhancements (e.g., aria-label="Open details")

Usage

General Instructions

1. Add one of the supported blocks to your post/page (Image, Button, Paragraph, List Item, Heading, File, Navigation Link).
2. Ensure the block contains a link. For example:
   • Image Block: Set a link URL in the block settings.
   • Button Block: Set the button text and link URL.
   • Paragraph/Heading/List Item Blocks: Select text and add a link using the inline link tool.
   • File Block: Upload a file, and ensure it’s linked.
   • Navigation Link Block: Add a navigation item with a URL.
3. Select the block containing the link.
4. In the block sidebar, locate the “Link Attributes” panel.
5. In the “Custom Attributes” field, add your desired HTML attributes, one per line, in key="value" format. You can also add classes and IDs.

Example

data-popup-id=”my-popup” rel=”noopener” class=”my-custom-class” id=”unique-id” `