# Steve's Attributes

A lightweight WordPress plugin that adds custom attributes support to links in Gutenberg blocks.

## 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

- **Super Lightweight**: Only ~4KB total, loads only in the block editor (no frontend impact)
- **No Database Impact**: Doesn't add any database tables or queries
- **Standard WordPress Hooks**: Uses official WordPress APIs for maximum compatibility
- **Smart Attribute Merging**: Properly merges class attributes to avoid duplicates
- **Flexible Parsing**: Accepts attributes in simple key="value" format, one per line
- **Expanded Block Support**: Now supports Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks.

## Installation

1. Download or clone this repository
2. Upload the `steves-attributes` folder to your `/wp-content/plugins/` directory
3. Activate the plugin through the WordPress admin 'Plugins' menu

## 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.

### Examples

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

## Example Use Cases

### Popup Integration

If you're using a popup plugin, you can easily add the required attributes:

```
class="my-popup-trigger"
data-popup-id="my-popup-slug"
```

### Tracking Attributes

Add Google Analytics or other tracking:

```
data-ga-category="button"
data-ga-action="click"
data-ga-label="download"
```

### Accessibility

Enhance accessibility with ARIA attributes:

```
aria-describedby="popup-description"
role="button"
```

## How It Works

The plugin uses two main WordPress hooks:

1.  **`enqueue_block_editor_assets`**: Loads JavaScript and CSS only in the block editor to add the UI for the "Custom Attributes" field.
2.  **`render_block`**: Filters the block output on the frontend to inject the custom attributes into `<a>` tags.

The JavaScript extends the supported block types to add a new `customLinkAttrs` attribute and renders a textarea in the inspector controls. The PHP parses the attributes and uses regex to add them to the rendered HTML, ensuring proper sanitization and merging of class attributes.

## Performance Impact

-   **Frontend**: Zero impact - no files loaded, no processing.
-   **Admin**: Minimal - only loads when editing posts/pages with Gutenberg.
-   **Database**: None - attributes stored in post content like any other block data.

## Compatibility

-   **WordPress 5.0+**
-   **Gutenberg (block editor)**
-   **Works with existing themes and plugins**
-   **No known conflicts**

## Frequently Asked Questions

**Q: Does this plugin slow down my site?**
A: No. It only loads in the admin when editing, and even then it's very lightweight. It has no impact on your site's frontend performance.

**Q: Can I deactivate the plugin after adding attributes?**
A: 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.

**Q: What blocks are supported?**
A: Currently supports Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks when they contain links.

**Q: Is this secure?**
A: Yes, all input is sanitized and escaped properly using `esc_attr()` to prevent Cross-Site Scripting (XSS) vulnerabilities.

## Contributing

Feel free to submit issues or pull requests on GitHub.

## License

GPL v2 or later

## Changelog

### 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 `hasLink` logic to ensure the attributes field only appears when a link is present in the block.
- Removed support for `core/post-featured-image` block.

### 1.0.0
- Initial release
- Support for Image, Button, and Paragraph blocks
- Custom attributes parsing and rendering
- Proper class attribute merging