# blockenberg/2.0.2/blocks/column/index.js

Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor, version 2.0.2. 326 lines.

- Page: https://pluginprobe.com/plugins/blockenberg/2.0.2/code/blocks/column/index.js
- Raw: https://pluginprobe.com/plugins/blockenberg/2.0.2/raw/blocks/column/index.js
- Modified: 2026-01-16T15:01:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/blockenberg/2.0.2/code/blocks/column/index.js#L10-L20`.

```javascript
wp.domReady(function () {
    var el = wp.element.createElement;
    var useEffect = wp.element.useEffect;
    var __ = wp.i18n.__;
    var registerBlockType = wp.blocks.registerBlockType;
    var InspectorControls = wp.blockEditor.InspectorControls;
    var useBlockProps = wp.blockEditor.useBlockProps;
    var InnerBlocks = wp.blockEditor.InnerBlocks;
    var useSelect = wp.data.useSelect;
    var useDispatch = wp.data.useDispatch;
    var PanelBody = wp.components.PanelBody;
    var SelectControl = wp.components.SelectControl;
    var RangeControl = wp.components.RangeControl;
    var BaseControl = wp.components.BaseControl;
    var Button = wp.components.Button;

    // Custom Appender that opens sidebar inserter instead of popover
    function SidebarInserterAppender(props) {
        var rootClientId = props.rootClientId;
        
        // Get the inserter toggle function
        var insertionPoint = useSelect(function (select) {
            var blockEditor = select('core/block-editor');
            var innerBlocks = blockEditor.getBlocks(rootClientId);
            return {
                index: innerBlocks.length
            };
        }, [rootClientId]);
        
        function handleClick() {
            // Toggle the global inserter sidebar (not the popover).
            try {
                var editPostDispatch = wp.data.dispatch('core/edit-post');
                if (editPostDispatch && typeof editPostDispatch.setIsInserterOpened === 'function') {
                    editPostDispatch.setIsInserterOpened(true);
                }
            } catch (e) {}

            try {
                var editSiteDispatch = wp.data.dispatch('core/edit-site');
                if (editSiteDispatch && typeof editSiteDispatch.setIsInserterOpened === 'function') {
                    editSiteDispatch.setIsInserterOpened(true);
                }
            } catch (e) {}

            // Attempt to set an insertion point inside this column.
            try {
                var beDispatch = wp.data.dispatch('core/block-editor');
                if (beDispatch) {
                    if (typeof beDispatch.setInsertionPoint === 'function') {
                        beDispatch.setInsertionPoint(rootClientId, insertionPoint.index);
                    } else if (typeof beDispatch.__unstableSetInsertionPoint === 'function') {
                        try {
                            beDispatch.__unstableSetInsertionPoint({ rootClientId: rootClientId, index: insertionPoint.index });
                        } catch (e2) {
                            beDispatch.__unstableSetInsertionPoint(rootClientId, insertionPoint.index);
                        }
                    }
                }
            } catch (e) {}
        }
        
        return el(Button, {
            className: 'bkbg-sidebar-appender block-editor-button-block-appender',
            onClick: handleClick,
            label: __('Add block', 'blockenberg')
        },
            el('svg', {
                xmlns: 'http://www.w3.org/2000/svg',
                viewBox: '0 0 24 24',
                width: '24',
                height: '24',
                'aria-hidden': 'true',
                focusable: 'false'
            },
                el('path', { d: 'M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z' })
            )
        );
    }

    // Spacing token scale for inner padding
    var paddingOptions = [
        { label: __('None', 'blockenberg'), value: 'none' },
        { label: __('XS (8px)', 'blockenberg'), value: 'xs' },
        { label: __('S (16px)', 'blockenberg'), value: 's' },
        { label: __('M (24px)', 'blockenberg'), value: 'm' },
        { label: __('L (32px)', 'blockenberg'), value: 'l' },
        { label: __('XL (48px)', 'blockenberg'), value: 'xl' }
    ];

    // Column icon
    var columnIcon = el('svg', { 
        width: 24, 
        height: 24, 
        viewBox: '0 0 24 24', 
        xmlns: 'http://www.w3.org/2000/svg' 
    },
        el('path', { 
            d: 'M5 4h14v16H5V4zm2 2v12h10V6H7z',
            fill: 'currentColor'
        })
    );

    // Generate unique ID
    function generateUid() {
        return 'col-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
    }

    registerBlockType('blockenberg/column', {
        title: __('Column', 'blockenberg'),
        icon: columnIcon,
        category: 'blockenberg',
        parent: ['blockenberg/row'],
        description: __('A column container within a row for content.', 'blockenberg'),

        edit: function (props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;
            var clientId = props.clientId;
            var a = attributes;

            var moveBlockToPosition = useDispatch('core/block-editor').moveBlockToPosition;

            // Generate UID if not set
            useEffect(function () {
                if (!a.uid) {
                    setAttributes({ uid: generateUid() });
                }
            }, []);

            // Get parent row info (responsive mode + column index)
            var parentData = useSelect(function (select) {
                var parents = select('core/block-editor').getBlockParents(clientId);
                for (var i = parents.length - 1; i >= 0; i--) {
                    var parent = select('core/block-editor').getBlock(parents[i]);
                    if (parent && parent.name === 'blockenberg/row') {
                        var siblings = parent.innerBlocks || [];
                        var colIndex = siblings.findIndex(function (b) { return b.clientId === clientId; });
                        return {
                            rowClientId: parents[i],
                            colIndex: colIndex,
                            colCount: siblings.length,
                            responsiveMode: parent.attributes.responsiveMode || 'desktop',
                            stackOnMobile: parent.attributes.stackOnMobile !== false
                        };
                    }
                }
                return { rowClientId: null, colIndex: -1, colCount: 0, responsiveMode: 'desktop', stackOnMobile: true };
            }, [clientId]);

            var responsiveMode = parentData.responsiveMode;
            var stackOnMobile = parentData.stackOnMobile;

            function moveSelf(direction) {
                if (!parentData.rowClientId) return;
                if (parentData.colIndex < 0) return;
                var newIndex = direction === 'left' ? parentData.colIndex - 1 : parentData.colIndex + 1;
                if (newIndex < 0 || newIndex >= parentData.colCount) return;
                moveBlockToPosition(clientId, parentData.rowClientId, parentData.rowClientId, newIndex);
            }

            // Get width for current mode with fallback
            function getWidth(mode) {
                var widths = a.widths || { desktop: 50, tablet: 50, mobile: 100 };
                if (mode === 'mobile') {
                    return widths.mobile !== undefined ? widths.mobile : 
                           (widths.tablet !== undefined ? widths.tablet : 
                           (widths.desktop !== undefined ? widths.desktop : 50));
                }
                if (mode === 'tablet') {
                    return widths.tablet !== undefined ? widths.tablet : 
                           (widths.desktop !== undefined ? widths.desktop : 50);
                }
                return widths.desktop !== undefined ? widths.desktop : 50;
            }

            var currentWidth = getWidth(responsiveMode);
            var displayWidth = (responsiveMode === 'mobile' && stackOnMobile) ? 100 : currentWidth;

            // Update width for specific mode
            function updateWidth(mode, value) {
                var newWidths = Object.assign({}, a.widths || { desktop: 50, tablet: 50, mobile: 100 });
                newWidths[mode] = value;
                setAttributes({ widths: newWidths });
            }

            var blockProps = useBlockProps({
                className: [
                    'bkbg-column',
                    'bkbg-column--padding-' + a.paddingInner
                ].join(' '),
                style: {
                    '--bkbg-col-desktop': (a.widths && a.widths.desktop || 50) + '%',
                    '--bkbg-col-tablet': (a.widths && a.widths.tablet || a.widths && a.widths.desktop || 50) + '%',
                    '--bkbg-col-mobile': (a.widths && a.widths.mobile || 100) + '%',
                    flexBasis: displayWidth + '%',
                    maxWidth: displayWidth + '%',
                    width: displayWidth + '%'
                },
                'data-uid': a.uid
            });

            // Inspector controls
            var inspector = el(InspectorControls, {},
                el(PanelBody, { title: __('Column Settings', 'blockenberg'), initialOpen: true },
                    el(BaseControl, {
                        label: __('Column Widths', 'blockenberg'),
                        help: __('Widths are typically controlled via drag handles on the row. You can fine-tune them here.', 'blockenberg')
                    }),
                    el('div', { className: 'bkbg-column-widths-controls' },
                        el(RangeControl, {
                            label: __('Desktop', 'blockenberg'),
                            value: a.widths && a.widths.desktop || 50,
                            onChange: function (v) { updateWidth('desktop', v); },
                            min: 5,
                            max: 100,
                            step: 0.5,
                            marks: [
                                { value: 25, label: '25%' },
                                { value: 50, label: '50%' },
                                { value: 75, label: '75%' },
                                { value: 100, label: '100%' }
                            ]
                        }),
                        el(RangeControl, {
                            label: __('Tablet', 'blockenberg'),
                            value: a.widths && a.widths.tablet || a.widths && a.widths.desktop || 50,
                            onChange: function (v) { updateWidth('tablet', v); },
                            min: 5,
                            max: 100,
                            step: 0.5
                        }),
                        el(RangeControl, {
                            label: __('Mobile', 'blockenberg'),
                            value: a.widths && a.widths.mobile || 100,
                            onChange: function (v) { updateWidth('mobile', v); },
                            min: 5,
                            max: 100,
                            step: 0.5,
                            help: stackOnMobile ? __('Mobile width is overridden when "Stack on Mobile" is enabled in the row settings.', 'blockenberg') : ''
                        })
                    ),
                    el(SelectControl, {
                        label: __('Inner Padding', 'blockenberg'),
                        value: a.paddingInner,
                        options: paddingOptions,
                        onChange: function (v) { setAttributes({ paddingInner: v }); }
                    })
                ),
                el(PanelBody, { title: __('Column Info', 'blockenberg'), initialOpen: false },
                    el('div', { className: 'bkbg-column-info' },
                        el('p', {}, 
                            el('strong', {}, __('Current Mode:', 'blockenberg')), 
                            ' ' + responsiveMode.charAt(0).toUpperCase() + responsiveMode.slice(1)
                        ),
                        el('p', {}, 
                            el('strong', {}, __('Current Width:', 'blockenberg')), 
                            ' ' + Math.round(currentWidth * 10) / 10 + '%'
                        ),
                        el('p', {}, 
                            el('strong', {}, __('UID:', 'blockenberg')), 
                            ' ' + (a.uid || 'N/A')
                        )
                    )
                )
            );

            return el('div', blockProps,
                inspector,
                // Move controls (hover)
                parentData.colCount > 1 && el('div', { className: 'bkbg-column__move-actions' },
                    el(Button, {
                        className: 'bkbg-column__move-btn',
                        icon: 'arrow-left-alt2',
                        label: __('Move column left', 'blockenberg'),
                        onClick: function () { moveSelf('left'); },
                        disabled: parentData.colIndex <= 0
                    }),
                    el(Button, {
                        className: 'bkbg-column__move-btn',
                        icon: 'arrow-right-alt2',
                        label: __('Move column right', 'blockenberg'),
                        onClick: function () { moveSelf('right'); },
                        disabled: parentData.colIndex >= parentData.colCount - 1
                    })
                ),
                el('div', { className: 'bkbg-column__inner' },
                    el(InnerBlocks, {
                        templateLock: false,
                        renderAppender: function () {
                            return el(SidebarInserterAppender, { rootClientId: clientId });
                        }
                    })
                ),
                el('div', { className: 'bkbg-column__width-label' },
                    Math.round(currentWidth) + '%'
                )
            );
        },

        save: function (props) {
            var a = props.attributes;
            var widths = a.widths || { desktop: 50, tablet: 50, mobile: 100 };
            
            var blockProps = useBlockProps.save({
                className: [
                    'bkbg-column',
                    'bkbg-column--padding-' + a.paddingInner
                ].join(' '),
                style: {
                    '--bkbg-col-desktop': widths.desktop + '%',
                    '--bkbg-col-tablet': (widths.tablet || widths.desktop) + '%',
                    '--bkbg-col-mobile': (widths.mobile || 100) + '%'
                },
                'data-uid': a.uid
            });

            return el('div', blockProps,
                el('div', { className: 'bkbg-column__inner' },
                    el(InnerBlocks.Content)
                )
            );
        }
    });
});

```