Description
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 »
`
Installation
- Upload the
steves-attributesfolder to the/wp-content/plugins/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
FAQ
-
Does this plugin add bloat to my site?
-
No. The plugin only loads JavaScript and CSS in the WordPress admin when editing posts/pages. It has no impact on frontend performance.
-
Can I deactivate the plugin after adding attributes?
-
Yes, the attributes are saved in the post content. However, they won’t be added to the HTML output until the plugin is reactivated, as the rendering filter is what applies them.
-
What blocks are supported?
-
Currently supports Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks when they contain links.
-
Is this secure?
-
Yes, all input is sanitized and escaped properly using
esc_attr()to prevent Cross-Site Scripting (XSS) vulnerabilities.
Avis
Il n’y a aucun avis pour cette extension.
Contributeurs & développeurs
« Steve's Attributes » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.
Contributeurs
Traduisez « Steve's Attributes » dans votre langue.
Le développement vous intéresse ?
Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.
Journal
1.1.0
- Added support for List Item (
core/list-item), Heading (core/heading), File (core/file), and Navigation Link (core/navigation-link) blocks. - Refined
hasLinklogic to ensure the attributes field only appears when a link is present in the block. - Removed support for
core/post-featured-imageblock.
1.0.0
- Initial release
- Support for Image, Button, and Paragraph blocks
- Custom attributes parsing and rendering
- Proper class attribute merging