Bootstrap image-filters plugin with wp-scripts and jest

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+build/
+.cache/
+.DS_Store
+*.log

image-filters.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Plugin Name:       Image Filters
+ * Description:       Add Instagram-style CSS filters to images in the block editor.
+ * Version:           0.1.0
+ * Requires at least: 6.4
+ * Requires PHP:      7.4
+ * Author:            ksolo
+ * License:           GPL-2.0-or-later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:       image-filters
+ * Domain Path:       /languages
+ *
+ * @package ImageFilters
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+    exit;
+}
+
+define( 'IMAGE_FILTERS_VERSION', '0.1.0' );
+define( 'IMAGE_FILTERS_FILE', __FILE__ );
+define( 'IMAGE_FILTERS_DIR', plugin_dir_path( __FILE__ ) );
+define( 'IMAGE_FILTERS_URL', plugin_dir_url( __FILE__ ) );
+
+/**
+ * Bootstrap the plugin.
+ *
+ * Block registration is wired in a follow-up task. This function exists so the
+ * activation hook can be added without needing a global-side-effect pattern.
+ *
+ * @return void
+ */
+function image_filters_bootstrap(): void {
+    // Block registration will be added in Task 5.
+}
+add_action( 'plugins_loaded', 'image_filters_bootstrap' );
+
+/**
+ * Load plugin textdomain for translations.
+ *
+ * @return void
+ */
+function image_filters_load_textdomain(): void {
+    load_plugin_textdomain( 'image-filters', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
+}
+add_action( 'init', 'image_filters_load_textdomain' );

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    ...require( '@wordpress/scripts/config/jest-unit' ),
+    testMatch: [ '**/tests/jest/**/*.test.js' ],
+    setupFiles: [ '<rootDir>/tests/jest/setup.js' ],
+};

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "image-filters",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Instagram-style CSS filters for WordPress images.",
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start",
+    "lint:js": "wp-scripts lint-js",
+    "lint:css": "wp-scripts lint-style",
+    "format": "wp-scripts format",
+    "test:unit": "wp-scripts test-unit-js",
+    "packages-update": "wp-scripts packages-update"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^27.0.0"
+  }
+}

readme.txt

@@ -0,0 +1,23 @@
+=== Image Filters ===
+Contributors: ksolo
+Tags: block, image, filter, instagram
+Requires at least: 6.4
+Tested up to: 6.6
+Requires PHP: 7.4
+Stable tag: 0.1.0
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+Add Instagram-style CSS filters to images in the block editor.
+
+== Description ==
+
+This 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.
+
+== Changelog ==
+
+= 0.1.0 =
+* Initial release.

tests/jest/setup.js

@@ -0,0 +1,2 @@
+// Minimal setup. Test files import from '@wordpress/blocks' etc. and
+// get the standard Jest config from wp-scripts.