Phenix Design System

Appearance

Integration Helpers ​

Integration helpers are utility functions and methods that connect shared components with block functionality. These helpers simplify the process of integrating controls with block attributes and rendering.

Overview ​

The integration helpers in the Phenix Blocks system are designed to:

  • Standardize data flow: Provide consistent methods for updating block attributes
  • Simplify integration: Reduce boilerplate code when connecting controls to blocks
  • Handle complex data: Manage nested objects and arrays in block attributes
  • Provide utilities: Offer common functionality needed across multiple blocks

Available Helpers ​

Attribute Helpers ​

Utilities for managing block attributes:

Rendering Helpers ​

Utilities for rendering block content:

Data Helpers ​

Utilities for managing and transforming data:

Common Helpers ​

The most frequently used integration helpers in the Phenix Blocks system:

set_value ​

Updates a block attribute based on an input control's value:

javascript
// Usage in edit.js const set_value = (target) => PhenixBlocks.set_value(target, attributes, setAttributes);  // Then use it with controls <PhenixInput  name="title"  value={attributes.title}  onChange={set_value} />

setAttributes ​

Updates block attributes with specific property-value pairs:

javascript
// Usage in edit.js const set_style = (target) => PhenixBlocks.setAttributes(target, attributes, setAttributes);  // Then use it with controls <PhenixSelect  name="alignment"  value={attributes.alignment}  onChange={set_style} />

setObject ​

Updates a nested object property within block attributes:

javascript
// Usage in edit.js const set_typography = (target, newObject) => PhenixBlocks.setObject(target, newObject, attributes, setAttributes);  // Then use it with controls <PhenixColor  label="Text Color"  value={attributes.typography.color}  onChange={set_typography} />

Usage Pattern ​

Integration helpers are typically imported and used in block edit.js files:

javascript
// In your edit.js file import { set_value, setAttributes, setObject } from '../px-controls/helpers';  // Set up attribute handlers const handle_value = (target) => set_value(target, attributes, setAttributes); const handle_style = (target) => setAttributes(target, attributes, setAttributes); const handle_typography = (target, newObject) => setObject(target, newObject, attributes, setAttributes);  // Use them with controls <PhenixInput  name="title"  value={attributes.title}  onChange={handle_value} />  <StylesSet  attributes={attributes}  mainSetter={handle_style}  colorSetter={handle_typography} />

Global PhenixBlocks Object ​

Many integration helpers are available through the global PhenixBlocks object, which is attached to the window object:

javascript
// Access helpers through the global object const set_value = (target) => window.PhenixBlocks.set_value(target, attributes, setAttributes);

The PhenixBlocks object also contains data lists and configuration options used by various controls:

javascript
// Access data lists const PhenixBlocks = window.PhenixBlocks.dataLists; const entrance_animations = PhenixBlocks.animations.entrance;

Next Steps ​

Explore detailed documentation for each integration helper: