MethodOptInControl
Overview
A reusable add/remove toggle pattern for optional responsive controls that should only appear when explicitly activated.
- File:
lib/blocks/components/MethodOptInControl.js - Type: Wrapper component (renders children conditionally)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | (required) | Display label shown above the add button and used in the remove button text |
settingKey | string | (required) | The key within the breakpoint’s responsiveSettings to check/set |
isEnabled | boolean | (required) | Whether the parent breakpoint is active; returns null when false |
settings | object | (required) | The current breakpoint’s settings object |
resetValue | any | (required) | The initial value to set when the “Add Custom” button is clicked |
updateSettings | function | (required) | Setter function: (key, value, remove?) |
addLabel | string | 'Add Custom' | Text for the add button |
removeLabel | string | 'Remove Custom {label}' | Text for the remove button |
children | ReactNode | (required) | The control UI to render when the setting has a value |
Behavior
MethodOptInControl implements a two‑state pattern:
State 1: Not Yet Added
When settings[settingKey] is undefined, the component renders a label and an “Add Custom” button. Clicking the button calls updateSettings(settingKey, resetValue).
┌─────────────────────────┐
│ {label} │
│ [Add Custom] │
└─────────────────────────┘State 2: Active
When settings[settingKey] has a value, the component renders children (the actual control UI) plus a “Remove Custom {label}” button. Clicking remove calls updateSettings(settingKey, undefined, true).
┌─────────────────────────┐
│ {children} │
│ [Remove Custom {label}] │
└─────────────────────────┘Gating
If isEnabled is false (parent breakpoint not active), the component returns null entirely.
Design Intent
This component is designed for responsive breakpoint controls where showing every possible control by default would overwhelm the UI. Instead of always‑visible controls, the user explicitly opts in to customizing a specific property at a specific breakpoint. This is complementary to the ToolsPanel pattern — MethodOptInControl is used for more complex controls that don’t fit neatly into a ToolsPanelItem.
Usage
Currently available as a utility for blocks that need custom opt‑in patterns beyond what ToolsPanel provides. The component follows Method’s loose coupling philosophy — it receives its setter function rather than owning attribute updates internally.