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:

• Attribute Setters: Functions for updating block attributes from control inputs
• Object Handlers: Functions for managing complex object attributes

Rendering Helpers

Utilities for rendering block content:

• Class Generators: Functions for generating CSS classes based on attributes
• Style Generators: Functions for generating inline styles based on attributes

Data Helpers

Utilities for managing and transforming data:

• Data Transformers: Functions for transforming data between formats
• Data Validators: Functions for validating user input

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:

// 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:

// 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:

// 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:

// 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:

// 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:

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

Next Steps

Explore detailed documentation for each integration helper:

• Attribute Helpers
• Rendering Helpers
• Data Helpers