stevegibbs

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 <code>key="value"</code> format (one per line). 
* Merges <code>class</code> 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., <code>data-popup-id="123"</code>) 
* Custom styling classes (e.g., <code>class="my-custom-class"</code>) 
* Tracking attributes (e.g., <code>data-ga-action="click"</code>) 
* Accessibility enhancements (e.g., <code>aria-label="Open details"</code>)
<h3>Usage</h3>
<h3>General Instructions</h3>
<ol>
<li>Add one of the supported blocks to your post/page (Image, Button, Paragraph, List Item, Heading, File, Navigation Link).</li>
<li>Ensure the block contains a link. For example:
<ul>
<li>Image Block: Set a link URL in the block settings.</li>
<li>Button Block: Set the button text and link URL.</li>
<li>Paragraph/Heading/List Item Blocks: Select text and add a link using the inline link tool.</li>
<li>File Block: Upload a file, and ensure it’s linked.</li>
<li>Navigation Link Block: Add a navigation item with a URL.</li>
</ul>
</li>
<li>Select the block containing the link.</li>
<li>In the block sidebar, locate the “Link Attributes” panel.</li>
<li>In the “Custom Attributes” field, add your desired HTML attributes, one per line, in <code>key="value"</code> format. You can also add classes and IDs.</li>
</ol>
<h3>Example</h3>
<pre><code>`
</code></pre>
data-popup-id=”my-popup” 
rel=”noopener” 
class=”my-custom-class” 
id=”unique-id” 
 `

Steve's Attributes

Extends Gutenberg blocks to easily add custom attributes to links in various blocks without resorting to custom HTML.

Midnay

NEERAJ K

HTML Attributes Customizer for Blocks adds an HTML attributes panel in the block sidebar. Enter one attribute per line as <code>name="value"</code> (double quotes), or a boolean attribute as a single name (for example <code>inert</code>).
Attributes are stored on the block as JSON objects: <code>htmlbacAttributes</code> and <code>htmlbacInnerAttributes</code> (for example <code>{"fetchpriority":"high","data-nolazy":"0"}</code>). Boolean flags use <code>true</code>.
Merging: Duplicate names on multiple lines are combined. Values merge with spaces (semicolons for <code>style</code>). <code>class</code> merges with the block’s existing classes instead of replacing them.
Variables: Use tokens such as <code>{{post.title}}</code> or <code>{{user.auth_status}}</code> inside quoted values. They are replaced when the block renders on the front end.

HTML Attributes Customizer for Blocks

Add custom HTML attributes to any Gutenberg block: data-*, class, id, aria, fetchpriority. Dynamic {{variables}} on the front end.

Steve's Attributes vs HTML Attributes Customizer for Blocks