# SoloFilters Image Enhancements

Add Instagram-style CSS filters to images in the WordPress block editor.

## About

This WordPress plugin registers a new "Filtered Image" block that lets users pick a named filter preset and adjust its intensity. Filters are applied with CSS only, so they are reversible, lightweight, and the original image keeps its alt text.

## Requirements

- WordPress 6.4+
- PHP 7.4+

## Installation

1. Clone or download this repository to your WordPress plugins directory:

   ```bash
   wp-content/plugins/solofilters-image-enhancements/
   ```

2. Activate the plugin from the WordPress admin panel

## Features

- **Filtered Image Block** – A new block type for applying CSS filters to images
- **Preset Filters** – Choose from multiple named filter presets
- **Adjustable Intensity** – Control filter intensity with a slider
- **Non-destructive** – Filters are applied with CSS only; original images remain unchanged
- **Accessibility** – Alt text is preserved on filtered images

## Screenshots

### Editor

The block's inspector panel in the WordPress block editor. The filter swatch grid sits in the right-hand sidebar alongside the intensity slider.

![Editor view showing the filter swatches and intensity slider in the sidebar](assets/editor-screenshot.png)

### Frontend

All eight filter presets applied to the same image, side by side. From left to right, top to bottom: Normal, Warm, Cool, Vivid, Fade, Mono, Dramatic, Sepia.

![Grid of all eight filter presets applied to a stock image](assets/frontend-screenshot.png)

## Development

### Setup

```bash
npm install
```

### Build

```bash
npm run build
```

### Testing

Run unit tests:

```bash
npm run test:jest
```

Run end-to-end tests:

```bash
npm run test:e2e
```

## Changelog

### [0.1.0] - 2026-08-06

- Initial release

## License

GPLv2 or later – [View License](https://www.gnu.org/licenses/gpl-2.0.html)

## Author

[Keith Solomon](https://keithsolomon.net)