Spacer

none

xSmall

small

medium

large

xLarge

xxLarge

Spacer Utility

The Spacer Utility provides consistent margin spacing classes and settings for WordPress block components. It consists of a JavaScript implementation for the editor and a PHP utility for dynamic frontend rendering.

Import Information

JavaScript Import

import {
    SpacerSettings,
    defaultSpacerAttributes,
    spacerClass,
} from '@configuration/spacer/spacer';

<InspectorControls>
    <SpacerSettings
        title="Container Settings"
        attributes={attributes}
        setAttributes={setAttributes}
    />
</InspectorControls>

<div className={spacerClass(attributes.spacer)}>

PHP Import

use basetheme\Utilities\Spacer_Utils;
if (!isset($attributes["spacer"])) {
    $attributes["spacer"] = "medium";
}

<section class="<?php echo Spacer_Utils::render_spacer($attributes['spacer']); ?>">
    <!-- Block content here -->
</section>

---

JavaScript Implementation

Default Attributes

The defaultSpacerAttributes object defines the default spacer setting.

export const defaultSpacerAttributes = {
    spacer: { type: 'string', default: 'medium' },
};

Spacer Classes

The spacerClass function maps the spacer values to corresponding CSS classes. Spacer variable is set to $spacer: 1rem; in the _spacer.scss file.

Spacer Value	CSS Class	Value
None	mt-0	0: 0
Extra Small	mt-2	2: $spacer * 0.5
Small	mt-3	3: $spacer
Medium	mt-4	4: $spacer * 1.5
Large	mt-3 mt-lg-5	5: $spacer * 2
Extra Large	mt-5 mt-lg-10	10: $spacer * 6
Extra Extra Large	mt-6 mt-lg-12	12: $spacer * 8

Function Implementation:

export const spacerClass = (spacer) => {
    switch (spacer) {
        case 'xSmall':
            return 'mt-2';
        case 'small':
            return 'mt-3';
        case 'medium':
            return 'mt-4';
        case 'large':
            return 'mt-3 mt-lg-5';
        case 'xLarge':
            return 'mt-5 mt-lg-10';
        case 'xxLarge':
            return 'mt-6 mt-lg-12';
        default:
            return 'mt-0';
    }
};

SpacerSettings Component

The SpacerSettings component provides a UI for selecting spacer values in the WordPress block editor.

export function SpacerSettings({ title, attributes, setAttributes }) {
    return (
        <PanelBody title={title}>
            <PanelRow>
                <SelectControl
                    label="Spacer"
                    value={attributes.spacer}
                    options={[
                        { label: 'None', value: '' },
                        { label: 'Extra Small', value: 'xSmall' },
                        { label: 'Small', value: 'small' },
                        { label: 'Medium', value: 'medium' },
                        { label: 'Large', value: 'large' },
                        { label: 'Extra Large', value: 'xLarge' },
                        { label: 'Extra Extra Large', value: 'xxLarge' },
                    ]}
                    onChange={(spacer) => setAttributes({ spacer })}
                />
            </PanelRow>
        </PanelBody>
    );
}

---

PHP Implementation

The Spacer_Utils class provides a utility method to render the appropriate CSS class for spacers.

PHP Utility Implementation

namespace basetheme\Utilities;

class Spacer_Utils
{
    public static function render_spacer($attributes)
    {
        $spacer = $attributes;

        if (empty($spacer)) {
            return;
        }

        $spacerClass = "";

        switch ($spacer) {
            case 'none':
                $spacerClass = 'mt-0';
                break;
            case 'xSmall':
                $spacerClass = 'mt-2';
                break;
            case 'small':
                $spacerClass = 'mt-3';
                break;
            case 'medium':
                $spacerClass = 'mt-4';
                break;
            case 'large':
                $spacerClass = 'mt-3 mt-lg-5';
                break;
            case 'xLarge':
                $spacerClass = 'mt-5 mt-lg-10';
                break;
            case 'xxLarge':
                $spacerClass = 'mt-6 mt-lg-12';
                break;
            default:
                $spacerClass = 'mt-0';
                break;
        }

        return $spacerClass;
    }
}

---