Block Spacing

Adds a block control button for block padding. Works on most block types except lines, non-editable blocks, and code blocks.

Select a block, open the control dropdown, and choose Spacing. Enter a CSS padding value (for example 16px or 12px 24px).

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/block-spacing/block-spacing.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['blockSpacing']
});

Options

icon (string)
- SVG icon HTML for the block control button.

Redactor('#entry', {
    plugins: ['blockSpacing'],
    blockSpacing: {
        icon: '<svg...>'
    }
});

Language strings

en: {
    blockSpacing: {
        spacing: "Spacing",
        padding: "Padding"
    }
}

Events

blockSpacing:open:data

Emitted when the spacing form opens.

Payload: { block, data }

Return: { block, data } to override the initial form values.

blockSpacing:save:data**

Hook before padding is saved.

Payload: { block, data, stop }

Return: { block, data } to modify values or call stop() to cancel.

app.on('blockSpacing:open:data', ({ block, data }) => {
    if (!data.padding) data.padding = '16px';
});

app.on('blockSpacing:save:data', ({ block, data, stop }) => {
    if (!data.padding) stop();
});

API

This plugin does not expose a public API.