WordPress Gutenberg core/columns wrapping and custom attributes adding

columns-hook.jsx

/**
 * Creates core/columns extra markup like:
 * .wp-block-columns.is-columns-vertical-align-center > .row > .wp-block-column + .wp-block-column
 * Useful to wrap columns in Bootstrap way.
 **/

import ColumnsInspectorControls from '/ColumnsInspectorControls.jsx'

const EXTENDING_BLOCK = 'core/columns'

const {InnerBlocks} = wp.editor

wp.hooks.addFilter('blocks.registerBlockType', 'core-columns/bs-extending', function columnsEditorFilter(blockNative, blockType) {
	const blockExtendingAttributes = {
		alignVertical: {
			type: 'string'
		},
		childrenWrapped: {
			type: 'bool'
		}
	}

	if (blockType !== EXTENDING_BLOCK) {
		return blockNative
	}

	const blockAttributes = {...blockNative.attributes, ...blockExtendingAttributes}

	const block = {
		...blockNative,

		attributes: blockAttributes,

		edit(settings) {
			const {attributes, setAttributes} = settings

			const editor = blockNative.edit.apply(this, arguments)

			const additionalInspector = (
				<ColumnsInspectorControls
					key='columnsInspectorControlsInspector'
					usePanel={false}
					attributes={attributes}
					setAttributes={setAttributes}/>
			)

			editor.props.children.push(additionalInspector)

			return editor
		},

		save({attributes}) {
			const {columns} = attributes

			return (
				<div className={`has-${columns}-columns`}>
					<div className="row">
						<InnerBlocks.Content/>
					</div>
				</div>
			)
		},

		deprecated: [
			...blockNative.deprecated, // keep previous deprecations
			{ // restore previous block markup(without .row as expected)
				attributes: blockAttributes,

				isEligible(attributes, innerBlocks) {
					return !attributes.childrenWrapped
				},

				migrate(attributes, innerBlocks) {
					return [
						{...attributes, childrenWrapped: true},
						innerBlocks
					]
				},

				save(props) {
					return blockNative.save(props)
				}
			}
		]
	}

	return block
})

ColumnsInspectorControls.jsx

import VerticalAlignOptions from "./VerticalAlignOptions.jsx"

const
	{InspectorControls} = wp.editor,
	{PanelBody} = wp.components,
	{__} = wp.i18n

export default function ColumnsInspectorControls(props) {
	const {attributes, setAttributes, usePanel} = props

	const inspectorChildren = [
		<VerticalAlignOptions
			label={__('Columns Vertical Align')}
			selected={attributes.alignVertical}
			attributesClassName={attributes.className}
			setAttributes={setAttributes}
		/>
	]

	return (
		<InspectorControls>
			{usePanel
				? <PanelBody title={__('Columns Settings')}>{inspectorChildren}</PanelBody>
				: inspectorChildren
			}
		</InspectorControls>
	)
}

VerticalAlignOptions.jsx

const {RadioControl} = wp.components,
	{__} = wp.i18n

const classListParserNode = document.createElement('div')

export default class VerticalAlignOptions extends React.Component {
	createClassName(align) {
		return `is-columns-vertical-align-${align}`
	}

	onRadioChange(alignVertical) {
		const prevAlignVertical = this.props.selected

		classListParserNode.className = this.props.attributesClassName || ''

		classListParserNode.classList.remove(this.createClassName(prevAlignVertical))

		classListParserNode.classList.add(this.createClassName(alignVertical))

		this.props.setAttributes({className: classListParserNode.className, alignVertical})
	}

	render() {
		const {label, selected} = this.props

		return (
			<RadioControl
				label={label}
				selected={selected}
				onChange={this.onRadioChange.bind(this)}
				options={[
					{label: __('Top'), value: 'top'},
					{label: __('Center'), value: 'center'},
					{label: __('Bottom'), value: 'bottom'},
				]}/>
		)
	}
}