Navigation Controls

Navigation controls help organize complex settings into manageable sections in the block editor. The Phenix Blocks system provides a tabs interface component for this purpose.

Tabs Interface

The Tabs Interface control (tabs.js) creates a tabbed interface for organizing responsive settings across different screen sizes.

Implementation

jsx

import ScreensTabs from "../px-controls/tabs";

// In your component
<ScreensTabs
    sm={screen => (
        <div className="responsive-options">
            {/* Mobile screen options */}
            <PhenixNumber
                name="paddingSM"
                label={__("Padding", "pds-blocks")}
                value={attributes.paddingSM}
                onChange={set_value}
            />
        </div>
    )}
    md={screen => (
        <div className="responsive-options">
            {/* Tablet screen options */}
            <PhenixNumber
                name="paddingMD"
                label={__("Padding", "pds-blocks")}
                value={attributes.paddingMD}
                onChange={set_value}
            />
        </div>
    )}
    lg={screen => (
        <div className="responsive-options">
            {/* Desktop screen options */}
            <PhenixNumber
                name="paddingLG"
                label={__("Padding", "pds-blocks")}
                value={attributes.paddingLG}
                onChange={set_value}
            />
        </div>
    )}
    xl={screen => (
        <div className="responsive-options">
            {/* Extra large screen options */}
            <PhenixNumber
                name="paddingXL"
                label={__("Padding", "pds-blocks")}
                value={attributes.paddingXL}
                onChange={set_value}
            />
        </div>
    )}
/>

Properties

Property	Type	Default	Description
`sm`	Function	`null`	Render function for mobile screen options
`md`	Function	`null`	Render function for tablet screen options
`lg`	Function	`null`	Render function for desktop screen options
`xl`	Function	`null`	Render function for extra large screen options

Behavior

The Tabs Interface control:

Creates a row of tab buttons for each screen size
Shows only one screen's options at a time
Automatically switches between tabs when clicked
Passes the current screen size to the render function
Applies Phenix framework styling for consistent appearance
Defaults to tablet view (md) unless sm is specified as the only option

Usage Examples

Responsive Spacing Controls

jsx

<ScreensTabs
    sm={screen => (
        <div className="responsive-options">
            <PhenixNumber
                name="marginTopSM"
                label={__("Margin Top", "pds-blocks")}
                value={attributes.marginTopSM}
                onChange={set_value}
                min={0}
                max={100}
            />
            <PhenixNumber
                name="marginBottomSM"
                label={__("Margin Bottom", "pds-blocks")}
                value={attributes.marginBottomSM}
                onChange={set_value}
                min={0}
                max={100}
            />
        </div>
    )}
    md={screen => (
        <div className="responsive-options">
            <PhenixNumber
                name="marginTopMD"
                label={__("Margin Top", "pds-blocks")}
                value={attributes.marginTopMD}
                onChange={set_value}
                min={0}
                max={100}
            />
            <PhenixNumber
                name="marginBottomMD"
                label={__("Margin Bottom", "pds-blocks")}
                value={attributes.marginBottomMD}
                onChange={set_value}
                min={0}
                max={100}
            />
        </div>
    )}
    lg={screen => (
        <div className="responsive-options">
            <PhenixNumber
                name="marginTopLG"
                label={__("Margin Top", "pds-blocks")}
                value={attributes.marginTopLG}
                onChange={set_value}
                min={0}
                max={100}
            />
            <PhenixNumber
                name="marginBottomLG"
                label={__("Margin Bottom", "pds-blocks")}
                value={attributes.marginBottomLG}
                onChange={set_value}
                min={0}
                max={100}
            />
        </div>
    )}
/>

Responsive Layout Controls

jsx

<ScreensTabs
    sm={screen => (
        <div className="responsive-options">
            <PhenixSelect
                name="alignmentSM"
                label={__("Content Alignment", "pds-blocks")}
                value={attributes.alignmentSM}
                onChange={set_value}
                options={[
                    { label: __("Default", "pds-blocks"), value: "" },
                    { label: __("Start", "pds-blocks"), value: "start" },
                    { label: __("Center", "pds-blocks"), value: "center" },
                    { label: __("End", "pds-blocks"), value: "end" }
                ]}
            />
        </div>
    )}
    md={screen => (
        <div className="responsive-options">
            <PhenixSelect
                name="alignmentMD"
                label={__("Content Alignment", "pds-blocks")}
                value={attributes.alignmentMD}
                onChange={set_value}
                options={[
                    { label: __("Default", "pds-blocks"), value: "" },
                    { label: __("Start", "pds-blocks"), value: "start" },
                    { label: __("Center", "pds-blocks"), value: "center" },
                    { label: __("End", "pds-blocks"), value: "end" }
                ]}
            />
        </div>
    )}
    lg={screen => (
        <div className="responsive-options">
            <PhenixSelect
                name="alignmentLG"
                label={__("Content Alignment", "pds-blocks")}
                value={attributes.alignmentLG}
                onChange={set_value}
                options={[
                    { label: __("Default", "pds-blocks"), value: "" },
                    { label: __("Start", "pds-blocks"), value: "start" },
                    { label: __("Center", "pds-blocks"), value: "center" },
                    { label: __("End", "pds-blocks"), value: "end" }
                ]}
            />
        </div>
    )}
/>

Integration with Block Attributes

To properly integrate tabs with block attributes, you need to set up responsive attribute names:

jsx

// In your block.json file
"attributes": {
    "paddingSM": { "type": "string", "default": "15" },
    "paddingMD": { "type": "string", "default": "20" },
    "paddingLG": { "type": "string", "default": "30" },
    "paddingXL": { "type": "string", "default": "40" }
}

// In your edit.js file
const set_value = (target) => {
    // Standard attribute setter
    PhenixBlocks.set_value(target, attributes, setAttributes);
};

// Then use it with the tabs control
<ScreensTabs
    sm={screen => (
        <PhenixNumber
            name="paddingSM"
            label={__("Padding", "pds-blocks")}
            value={attributes.paddingSM}
            onChange={set_value}
        />
    )}
    md={screen => (
        <PhenixNumber
            name="paddingMD"
            label={__("Padding", "pds-blocks")}
            value={attributes.paddingMD}
            onChange={set_value}
        />
    )}
    // ...other screen sizes
/>

Advanced Usage

Dynamic Tab Content Based on Screen Size

You can use the screen parameter passed to each render function to create dynamic content:

jsx

<ScreensTabs
    sm={screen => (
        <div className="responsive-options">
            <h4>{__(`${screen.toUpperCase()} Screen Settings`, "pds-blocks")}</h4>
            <PhenixNumber
                name={`padding${screen.toUpperCase()}`}
                label={__("Padding", "pds-blocks")}
                value={attributes[`padding${screen.toUpperCase()}`]}
                onChange={set_value}
            />
        </div>
    )}
    md={screen => (
        <div className="responsive-options">
            <h4>{__(`${screen.toUpperCase()} Screen Settings`, "pds-blocks")}</h4>
            <PhenixNumber
                name={`padding${screen.toUpperCase()}`}
                label={__("Padding", "pds-blocks")}
                value={attributes[`padding${screen.toUpperCase()}`]}
                onChange={set_value}
            />
        </div>
    )}
    // ...other screen sizes with the same pattern
/>

This approach reduces code duplication by using the screen parameter to dynamically generate attribute names.

Navigation Controls ​

Tabs Interface ​

Implementation ​

Properties ​

Behavior ​

Usage Examples ​

Responsive Spacing Controls ​

Responsive Layout Controls ​

Integration with Block Attributes ​

Advanced Usage ​

Dynamic Tab Content Based on Screen Size ​