Control Sets
Control sets are collections of related controls that work together to provide a cohesive editing experience for specific aspects of block configuration. These sets combine multiple core controls into reusable components that can be used across different blocks.
Overview
The control sets in the Phenix Blocks system are designed to:
- Reduce duplication: Package common control combinations into reusable components
- Standardize interfaces: Ensure consistent editing experiences across blocks
- Simplify implementation: Make it easier to add complex functionality to blocks
- Maintain consistency: Ensure blocks follow the same patterns for similar settings
Control Sets by Location
Control sets are organized based on where they appear in the block editor interface:
Toolbar Controls
These control sets appear in the top toolbar when a block is selected, providing quick access to frequently used settings:
- Quick Style Controls: Compact color pickers and style toggles
- Alignment Controls: Buttons for text and content alignment
- Layout Toggles: Quick switches for layout modes (flex, grid)
- Spacing Controls: Visual margin and padding adjustments
- HTML Tag Selection: Dropdown for semantic HTML elements
- Border Quick Controls: Border style and width toggles
Sidebar Controls
These more detailed control sets appear in the right sidebar, organized into panels:
Style Panels
- Colors Set: Comprehensive color management for background, text, and borders
- Typography Set: Detailed font controls including family, size, weight, and text styling
- Spacing Set: Precise margin and padding controls with responsive options
- Border Set: Detailed border configuration including width, style, radius, and color
Layout Panels
- Responsive Set: Screen-specific settings for different device sizes
- Position Set: Detailed positioning controls (relative, absolute, fixed)
- Display Set: Comprehensive display property management
Animation Panels
- Animations Set: Detailed controls for entry, exit, and scroll animations
- Transitions Set: Configuration for hover and state transitions
Advanced Panels
- Query Set: Complex controls for post queries and filtering
- Advanced Set: Specialized block settings and configurations
Usage Pattern
All control sets follow a similar usage pattern in block edit.js
files:
// 1. Import the control set
import StylesSet from "../px-controls/sets/styles";
// 2. Set up attribute handlers
const set_style = (target) => PhenixBlocks.setAttributes(target, attributes, setAttributes);
const set_typography = (target, newObject) => PhenixBlocks.setObject(target, newObject, attributes, setAttributes);
// 3. Use the control set in your block
<StylesSet
attributes={attributes}
mainSetter={set_style}
colorSetter={set_typography}
/>
Common Properties
Most control sets share these common properties:
Property | Type | Description |
---|---|---|
attributes | Object | The block attributes object |
mainSetter | Function | Primary setter function for standard attributes |
objectSetter | Function | Setter function for object-type attributes |
Next Steps
Explore detailed documentation for each control set: