Style Controls
The Style Controls set provides a comprehensive interface for configuring visual styling aspects of blocks. It combines multiple core controls to manage colors, backgrounds, borders, and other visual properties.
Overview
Toolbar vs. Sidebar Implementation
Style controls are distributed across both the toolbar and sidebar interfaces:
Toolbar Style Controls
The toolbar contains quick-access style controls for frequently used settings:
- Color Pickers: Quick color selection for text and background
- Border Controls: Quick toggles for border styles and width
- Alignment Buttons: Text and content alignment options
- Spacing Controls: Visual margin and padding adjustments
- Effects Toggles: Quick toggles for shadows and opacity
Sidebar Style Controls
The sidebar contains more comprehensive style panels for detailed configuration:
The Style Controls set is a collection of related controls that work together to provide a cohesive editing experience for block styling. It includes:
- Text color selection
- Background configuration (colors, gradients, images)
- Border radius settings
- Display properties
- Special effects like marquee
Implementation
import StylesSet from "../px-controls/sets/styles";
// In your component
const set_style = (target) => PhenixBlocks.setAttributes(target, attributes, setAttributes);
const set_typography = (target, newObject) => PhenixBlocks.setObject(target, newObject, attributes, setAttributes);
const set_object = (value, screen, property, key, attributes, setAttributes) => {
// Object setter implementation
};
<StylesSet
attributes={attributes}
mainSetter={set_style}
colorSetter={set_typography}
objectSetter={set_object}
setAttributes={setAttributes}
/>
Properties
Property | Type | Default | Description |
---|---|---|---|
attributes | Object | Required | The block attributes object |
mainSetter | Function | Required | Handler function for standard attribute changes |
colorSetter | Function | Required | Handler function for color attribute changes |
objectSetter | Function | Optional | Handler function for complex object changes |
setAttributes | Function | Optional | Direct access to setAttributes function |
options | Array | null | Optional array of enabled options ("text-colors", "background", "support") |
bgOnly | Array | null | Optional array of background restrictions ("colorsOnly", "onlyCG") |
children | Node | null | Optional additional content to display before the controls |
Attributes Structure
The Style Controls set expects and modifies the following attribute structure:
attributes: {
typography: {
color: "" // Text color
},
style: {
background: { // Background properties
type: "color", // "color", "gradient", "image"
value: "", // Color value, gradient value, or image URL
rotate: null // Gradient rotation angle
},
overly: "", // Overlay type
overly_opacity: "50", // Overlay opacity percentage
overly_bg: { // Custom overlay background
type: "color",
value: "",
rotate: null
},
"bg-size": "", // Background size
"bg-position": "", // Background position
"bg-repeat": "", // Background repeat
"bg-animation": "", // Background animation
parallax: false, // Parallax effect
support: [], // Enabled style properties
radius: "", // Border radius size
"radius-direction": "", // Border radius direction
display: [], // Display properties
marquee: "", // Marquee direction
"marquee-speed": 15 // Marquee speed
}
}
Available Controls
The Style Controls set includes the following control groups:
Text Color
A color picker for selecting text color:
<PhenixColor
label={__("Text Color", "pds-blocks")}
onChange={colorSetter}
value={attributes.typography.color}
/>
Background
Controls for background configuration:
<PhenixBackground
label={__("Background", "pds-blocks")}
onChange={mainSetter}
type={attributes.style.background?.type || "color"}
value={attributes.style.background?.value || ""}
rotate={attributes.style.background?.rotate || null}
/>
Background Image Options
When a background image is selected, additional controls appear:
<PhenixSelect
name="bg-size"
placeholder={__("Size", "pds-blocks")}
value={attributes.style['bg-size']}
onChange={mainSetter}
options={background_options.sizes}
/>
<PhenixSelect
name="bg-position"
placeholder={__("Position", "pds-blocks")}
value={attributes.style['bg-position']}
onChange={mainSetter}
options={background_options.positions}
/>
<PhenixSelect
name="bg-repeat"
placeholder={__("Repeat", "pds-blocks")}
value={attributes.style['bg-repeat']}
onChange={mainSetter}
options={background_options.repeat}
/>
<PhenixSelect
name="bg-animation"
placeholder={__("Animation", "pds-blocks")}
value={attributes.style['bg-animation']}
onChange={mainSetter}
options={background_options.animations}
/>
<OptionControl
name="parallax"
value="bg-parallax"
checked={attributes.style.parallax || false}
onChange={mainSetter}
type="switch-checkbox"
>
{__("Parallax BG", "pds-blocks")}
</OptionControl>
Overlay Options
Controls for configuring background overlays:
<PhenixSelect
name="overly"
placeholder={__("Overlay", "pds-blocks")}
value={attributes.style.overly}
onChange={mainSetter}
options={background_options.overlay}
/>
<PhenixNumber
name="overly_opacity"
label={__("Overlay Opacity", "pds-blocks")}
value={parseInt(attributes.style.overly_opacity) || 50}
onChange={mainSetter}
/>
Style Properties
A multi-select control for enabling additional style properties:
<PhenixSelect
name="support"
placeholder={__("add..", "pds-blocks")}
search={true}
label={__("Style Properties", "pds-blocks")}
value={attributes.style.support}
onChange={mainSetter}
options={support_options}
multiple={true}
className="stacked-options"
/>
Border Radius (Conditional)
Controls for border radius, shown when "enable-radius" is selected in style properties:
<PhenixSelect
name="radius"
placeholder={__("None", "pds-blocks")}
label={__("Radius Size", "pds-blocks")}
value={attributes.style.radius}
onChange={mainSetter}
options={radius_sizes}
/>
<PhenixSelect
name="radius-direction"
placeholder={__("Default", "pds-blocks")}
label={__("Radius Direction", "pds-blocks")}
value={attributes.style['radius-direction']}
onChange={mainSetter}
options={radius_directions}
/>
Display Properties (Conditional)
Controls for display properties, shown when "enable-display" is selected in style properties:
<PhenixSelect
name="display"
placeholder={__("Default", "pds-blocks")}
search={true}
label={__("Responsive Display", "pds-blocks")}
value={attributes.style.display}
onChange={mainSetter}
options={display_options}
multiple={true}
className="stacked-options"
/>
Marquee Effect (Conditional)
Controls for marquee effect, shown when "enable-marquee" is selected in style properties:
<PhenixSelect
name="marquee"
placeholder={__("None", "pds-blocks")}
label={__("Marquee Direction", "pds-blocks")}
value={attributes.style.marquee}
onChange={mainSetter}
options={[
{ label: __("None", "pds-blocks"), value: '' },
{ label: __("Marquee Left", "pds-blocks"), value: 'px-marquee' },
{ label: __("Marquee Right", "pds-blocks"), value: 'px-marquee-reverse' },
]}
/>
<PhenixNumber
name="marquee-speed"
label={__("Speed", "pds-blocks")}
onChange={mainSetter}
value={attributes.style['marquee-speed'] || 15}
min={5}
/>
Usage Examples
Basic Style Controls
// In your edit.js file
const set_style = (target) => PhenixBlocks.setAttributes(target, attributes, setAttributes);
const set_typography = (target, newObject) => PhenixBlocks.setObject(target, newObject, attributes, setAttributes);
// Then use it in your component
<StylesSet
attributes={attributes}
mainSetter={set_style}
colorSetter={set_typography}
/>
Limited Style Controls
// In your edit.js file
const set_style = (target) => PhenixBlocks.setAttributes(target, attributes, setAttributes);
const set_typography = (target, newObject) => PhenixBlocks.setObject(target, newObject, attributes, setAttributes);
// Then use it in your component
<StylesSet
attributes={attributes}
mainSetter={set_style}
colorSetter={set_typography}
options={["background", "support"]} // Only show background and support options
bgOnly={["colorsOnly"]} // Only show color options in background
/>
With Custom Header
// In your edit.js file
const set_style = (target) => PhenixBlocks.setAttributes(target, attributes, setAttributes);
const set_typography = (target, newObject) => PhenixBlocks.setObject(target, newObject, attributes, setAttributes);
// Then use it in your component
<StylesSet
attributes={attributes}
mainSetter={set_style}
colorSetter={set_typography}
>
<h3 className="components-base-control__label mb-10">
{__("Style Settings", "pds-blocks")}
</h3>
</StylesSet>
Integration with Block Attributes
To properly integrate the Style Controls set with block attributes, you need to set up the attribute structure and handler functions:
// In your block.json file
"attributes": {
"typography": {
"type": "object",
"default": {
"color": ""
}
},
"style": {
"type": "object",
"default": {
"background": {
"type": "color",
"value": "",
"rotate": null
},
"support": [],
"radius": "",
"radius-direction": "",
"display": []
}
}
}
// In your edit.js file
const set_style = (target) => {
// Standard attribute setter for style properties
PhenixBlocks.setAttributes(target, attributes, setAttributes);
};
const set_typography = (target, newObject) => {
// Object setter for typography properties
PhenixBlocks.setObject(target, newObject, attributes, setAttributes);
};
const set_object = (value, screen, property, key, attributes, setAttributes) => {
// Complex object setter for nested properties
const currentProperty = attributes[property] || {};
setAttributes({
[property]: {
...currentProperty,
[key]: value
}
});
};
// Then use it with the style controls set
<StylesSet
attributes={attributes}
mainSetter={set_style}
colorSetter={set_typography}
objectSetter={set_object}
setAttributes={setAttributes}
/>
This ensures that when style settings are changed, the corresponding block attributes are updated correctly.
Front-End Implementation
The style attributes set by this control are used by the Phenix front-end framework to apply styling to elements. The style properties are typically rendered as CSS classes and inline styles on the HTML element:
// In your save.js file
export default function save({ attributes }) {
const { style, typography } = attributes;
// Create style classes
let styleClasses = [];
// Add radius classes
if (style.radius) {
styleClasses.push(`radius-${style.radius}`);
if (style['radius-direction']) {
styleClasses.push(`radius-${style['radius-direction']}`);
}
}
// Add display classes
if (style.display && style.display.length > 0) {
styleClasses = [...styleClasses, ...style.display];
}
// Add marquee classes
if (style.marquee) {
styleClasses.push(style.marquee);
}
// Create inline styles
const inlineStyles = {};
// Add background styles
if (style.background?.value) {
if (style.background.type === 'color') {
inlineStyles.backgroundColor = style.background.value;
} else if (style.background.type === 'gradient') {
inlineStyles.backgroundImage = style.background.value;
} else if (style.background.type === 'image') {
inlineStyles.backgroundImage = `url(${style.background.value})`;
if (style['bg-size']) inlineStyles.backgroundSize = style['bg-size'];
if (style['bg-position']) inlineStyles.backgroundPosition = style['bg-position'];
if (style['bg-repeat']) inlineStyles.backgroundRepeat = style['bg-repeat'];
}
}
// Add text color
if (typography.color) {
inlineStyles.color = typography.color;
}
return (
<div className={styleClasses.join(' ')} style={inlineStyles}>
{/* Block content */}
</div>
);
}
The Phenix front-end framework will also handle any additional styling based on the classes and data attributes.