Input Controls
Input controls are fundamental UI components that allow users to enter and edit text and numerical values in the block editor. The Phenix Blocks system provides three main types of input controls: Basic Input, Number Input, and Text Area.
Basic Input
The Basic Input control (input.js
) provides a simple text input field for entering single-line text.
Implementation
import PhenixInput from "../px-controls/input";
// In your component
<PhenixInput
name="inputName"
label="Input Label"
value={attributes.inputValue}
onChange={set_value}
placeholder="Enter text here"
className="custom-class"
size="small"
/>
Properties
Property | Type | Default | Description |
---|---|---|---|
name | String | Required | The attribute name to update |
value | String | "" | The current value of the input |
onChange | Function | Required | Handler function for value changes |
label | String | null | Optional label for the input |
type | String | "text" | HTML input type attribute |
placeholder | String | Label value or "" | Placeholder text |
className | String | "" | Additional CSS classes |
size | String | "small" | Size variant ("tiny" , "small" , "normal" , "large" ) |
Behavior
The Basic Input control:
- Updates the value on blur (when focus leaves the input)
- Displays an optional label above the input
- Applies Phenix framework styling for consistent appearance
- Supports all standard HTML input types
Number Input
The Number Input control (number.js
) provides a specialized input for numerical values with increment/decrement buttons.
Implementation
import PhenixNumber from "../px-controls/number";
// In your component
<PhenixNumber
name="numberName"
label="Number Label"
value={attributes.numberValue}
onChange={set_value}
min={0}
max={100}
steps={5}
/>
Properties
Property | Type | Default | Description |
---|---|---|---|
name | String | Required | The attribute name to update |
value | Number | 0 | The current value of the input |
onChange | Function | Required | Handler function for value changes |
label | String | null | Label for the input |
min | Number | Number.MIN_SAFE_INTEGER | Minimum allowed value |
max | Number | Number.MAX_SAFE_INTEGER | Maximum allowed value |
steps | Number | 1 | Increment/decrement step size |
icon | String | null | Optional icon class for custom styling |
Behavior
The Number Input control:
- Provides increment and decrement buttons
- Enforces minimum and maximum value constraints
- Updates the value on direct input or button clicks
- Supports custom step sizes for increments/decrements
- Displays a label above the input
Text Area
The Text Area control (textarea.js
) provides a multi-line text input field for entering longer text content.
Implementation
import PhenixTextarea from "../px-controls/textarea";
// In your component
<PhenixTextarea
name="textareaName"
label="Text Area Label"
value={attributes.textareaValue}
onChange={set_value}
placeholder="Enter text here"
className="custom-class"
style={{ height: '150px' }}
/>
Properties
Property | Type | Default | Description |
---|---|---|---|
name | String | Required | The attribute name to update |
value | String | "" | The current value of the textarea |
onChange | Function | Required | Handler function for value changes |
label | String | null | Optional label for the textarea |
placeholder | String | Label value or "" | Placeholder text |
className | String | "" | Additional CSS classes |
size | String | "small" | Size variant ("tiny" , "small" , "normal" , "large" ) |
style | Object | {} | Inline styles for the textarea |
Behavior
The Text Area control:
- Updates the value on change (as the user types)
- Displays an optional label above the textarea
- Applies Phenix framework styling for consistent appearance
- Supports custom styling through the style property
Usage Examples
Basic Form Field
<PhenixInput
name="title"
label={__("Title", "pds-blocks")}
value={attributes.title}
onChange={set_value}
/>
Number with Constraints
<PhenixNumber
name="columns"
label={__("Columns", "pds-blocks")}
value={attributes.columns}
onChange={set_value}
min={1}
max={12}
steps={1}
/>
Custom CSS Field
<PhenixTextarea
name="customCSS"
label={__("Custom CSS", "pds-blocks")}
value={attributes.customCSS}
onChange={set_value}
style={{ fontFamily: 'monospace', height: '200px' }}
/>
Integration with Block Attributes
To properly integrate input controls with block attributes, you need to set up an attribute handler function:
// In your edit.js file
const set_value = (target) => {
// For standard input controls
PhenixBlocks.set_value(target, attributes, setAttributes);
};
// Then use it with input controls
<PhenixInput
name="title"
value={attributes.title}
onChange={set_value}
/>
This ensures that when the input value changes, the corresponding block attribute is updated correctly.