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
- Add one of the supported blocks to your post/page (Image, Button, Paragraph, List Item, Heading, File, Navigation Link).
- 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.
- Select the block containing the link.
- In the block sidebar, locate the « Link Attributes » panel.
- 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 » `