Add inspector panel with preset grid and intensity slider

2026-08-05 16:37:53 -05:00
parent 2c73f8472f
commit c2a0ae2d8c
7 changed files with 2411 additions and 83 deletions
@@ -0,0 +1,82 @@
+/**
+ * Inspector panel for the Filtered Image block.
+ *
+ * Renders a swatch grid for the preset list and a RangeControl for intensity.
+ * Both controls are Gutenberg-standard so keyboard navigation and ARIA
+ * behaviour are inherited from the framework.
+ *
+ * @package ImageFilters
+ */
+
+import { __ } from '@wordpress/i18n';
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { PRESETS } from './presets';
+
+const labelFor = ( preset ) => preset.label;
+
+/**
+ * The filter panel: presets + intensity.
+ *
+ * @param {Object}   props
+ * @param {Object}   props.attributes    Block attributes.
+ * @param {string}   props.attributes.filter    Current preset slug.
+ * @param {number}   props.attributes.intensity Current intensity 0–100.
+ * @param {Function} props.setAttributes       Gutenberg setter.
+ * @return {JSX.Element}
+ */
+export function FilterPanel( { attributes, setAttributes } ) {
+    const { filter, intensity } = attributes;
+
+    return (
+        <PanelBody
+            title={ __( 'Filter', 'image-filters' ) }
+            initialOpen={ true }
+            className="ksolo-image-filter-panel"
+        >
+            <div
+                className="ksolo-image-filter-presets"
+                role="group"
+                aria-label={ __( 'Filter presets', 'image-filters' ) }
+            >
+                { PRESETS.map( ( preset ) => {
+                    const isActive = preset.slug === filter;
+                    return (
+                        <button
+                            key={ preset.slug }
+                            type="button"
+                            className="ksolo-image-filter-preset"
+                            aria-pressed={ isActive }
+                            aria-label={ labelFor( preset ) }
+                            onClick={ () => setAttributes( { filter: preset.slug } ) }
+                        >
+                            <span
+                                className="ksolo-image-filter-preset__swatch"
+                                aria-hidden="true"
+                                style={ { background: preset.color } }
+                            />
+                            <span className="ksolo-image-filter-preset__label">
+                                { preset.label }
+                            </span>
+                        </button>
+                    );
+                } ) }
+            </div>
+            <RangeControl
+                label={ __( 'Filter intensity', 'image-filters' ) }
+                value={ intensity }
+                min={ 0 }
+                max={ 100 }
+                step={ 1 }
+                __next40pxDefaultSize
+                __nextHasNoMarginBottom
+                onChange={ ( value ) => setAttributes( { intensity: value } ) }
+                help={ __(
+                    'Set to 0 to disable the filter, 100 for full strength.',
+                    'image-filters'
+                ) }
+            />
+        </PanelBody>
+    );
+}
+
+export default FilterPanel;