useResponsiveSetter

Overview

A curried callback hook that returns a breakpoint‑aware setter function for updating keys within responsiveSettings.

• File: lib/blocks/hooks/useResponsiveSetter.js
• Type: React hook

Signature

const update = useResponsiveSetter(attributes, setAttributes);

// Returns a curried function:
update(breakpoint, key, remove?) → (value) => void

const update = useResponsiveSetter(attributes, setAttributes);

// Returns a curried function:
update(breakpoint, key, remove?) → (value) => void

Parameters

Return Value

A memoized function (via useCallback) with the signature:

(breakpoint: string, key: string, remove?: boolean) => (value: any) => void

(breakpoint: string, key: string, remove?: boolean) => (value: any) => void

• breakpoint — The responsive breakpoint key: base, mobile, tablet, or wide
• key — The settings key to update (e.g., gridCols, order, dimensions)
• remove — When true, deletes the key instead of setting it (default: false)

The function returns a value handler — a function that accepts the new value. This makes it directly compatible with WordPress component onChange props.

Memoization

The hook uses useCallback with [attributes.responsiveSettings, setAttributes] as dependencies. The returned function only recreates when responsiveSettings changes, preventing unnecessary re‑renders.

Usage Pattern

const update = useResponsiveSetter(attributes, setAttributes);

// Direct usage with RangeControl
<RangeControl
  label="Grid Columns"
  value={attributes.responsiveSettings?.base?.gridCols}
  onChange={update('base', 'gridCols')}
/>

// Usage with UnitControl in a responsive tab
<UnitControl
  label="Icon Dimensions"
  value={attributes.responsiveSettings?.mobile?.dimensions || '0rem'}
  onChange={update('mobile', 'dimensions')}
/>

// Removing a key
<Button onClick={() => update('base', 'order', true)(null)}>
  Remove Order
</Button>

const update = useResponsiveSetter(attributes, setAttributes);

// Direct usage with RangeControl
<RangeControl
  label="Grid Columns"
  value={attributes.responsiveSettings?.base?.gridCols}
  onChange={update('base', 'gridCols')}
/>

// Usage with UnitControl in a responsive tab
<UnitControl
  label="Icon Dimensions"
  value={attributes.responsiveSettings?.mobile?.dimensions || '0rem'}
  onChange={update('mobile', 'dimensions')}
/>

// Removing a key
<Button onClick={() => update('base', 'order', true)(null)}>
  Remove Order
</Button>

Design Rationale

This hook exists to avoid repetitive setAttributes boilerplate when updating nested responsiveSettings keys. Without it, every control change handler would need to manually spread the existing settings:

// Without hook (verbose)
onChange={(value) => setAttributes({
  responsiveSettings: {
    ...attributes.responsiveSettings,
    base: {
      ...attributes.responsiveSettings.base,
      gridCols: value,
    },
  },
})}

// With hook (concise)
onChange={update('base', 'gridCols')}

// Without hook (verbose)
onChange={(value) => setAttributes({
  responsiveSettings: {
    ...attributes.responsiveSettings,
    base: {
      ...attributes.responsiveSettings.base,
      gridCols: value,
    },
  },
})}

// With hook (concise)
onChange={update('base', 'gridCols')}

Usage by Blocks

Used by blocks that have custom controls outside of the shared Method*Controls components, where those components handle their own attribute updates internally. Common in blocks with block‑specific inspector controls like RangeControl for grid columns, UnitControl for icon dimensions, TextControl for column order, etc.